イラスト中心のウェブサイトです。管理人は泉洋さん。岡山市近郊に在住。
タグの文法、雰囲気、アクセス数、レイアウトなどを見ていただきたいです。レイアウトのことですが、字が小さくて見にくいかな、とも思っています。他にも何かあればアドバイスをお願いしたいと思います。
きれいにまとまっているウェブサイトですね。白と黒のコントラストは人気のあるパターン。その理由は簡単で、大崩れしにくいから。けれども、真っ白と真っ黒では、少々どぎつい。そのあたりが陳腐さを演出しやすいのですが、それでも最低最悪の状況には陥りにくいというあたり、なるほど人気があるのも当然です。
泉さんのサイトがきれいに見えるのは、白と黒の性格を活かした配色パターンを採用しているから。「黒地に白文字は、アクセントとして用いる」「白地に黒文字は基本パターンとして本文に用いる」これは新聞のレイアウトなどを見ての通り、デザインの定石です。暗色の地に明色の文字を本文に使うのは、特殊な効果を狙う場合だけにとどめるのが無難なのです。
泉さんの選択のひとつひとつは、必ずしも素晴らしい独創の産物ではありません。標準的な、定石といってもよいパターンの積み重ねです。ではそれが欠点になっているかというと、私はそうは思いませんね。「わかっていない人」が定石を崩しても、ろくなことにならないのがふつうです。「守・破・離」などといいますが、まずは基本を守ることです。私も含め、素人は生涯、その段階にとどまるものだと思います。それをつまらないとする考え方もあるでしょうが、私は賛同しません。
横3分割のフレームを採用し、ヘッダーとフッターを黒地に白文字、本文領域を白地に黒文字に……このデザインを決めた背景に、美術の基礎知識があったかどうかはわかりません。センスで決めたのかもしれない。それはそれでよいのです。ただ、次回のリニューアルがあるとして、その際に、私の書いたことをちょっとだけ思い出していただければと思うわけです。定石を知っていて、その上で崩す、その状況に意識的であれば、必要な工夫に気がつくことも多いでしょう。
本文領域で黒背景を採用しているのがギャラリー内の「ORIGINAL」ですが、これには驚かされました。これは正解だと思います。
白背景に絵を直置きするのは、あまりお勧めできません。絵が映えないことが多い。だから、美術館でも展覧会でも、ふつう、白いボードに絵を掛けるなら額装が必須となります。背景と絵の間に何かを挟むわけです。不思議と、と申しますか、額の色は白でもいいんですね。光の陰影で枠が意識されれば、それでいい。紙媒体となると、白背景と絵の間に枠線が必要とは言い切れないあたり、混乱を招くところですけれども……。
で、暗色の背景の上に絵を置く場合、これも絶対とは申しませんけれども、額装などが不要になることが多い。写真のパネル展示などでは、しばしば見られる形式です。あるいは、絵葉書を売っている露天商なども、このテクニックを使っていたりしますよ。
そんなわけで、泉さんがギャラリーのページだけ、本文領域の背景を黒に設定したのは正解ではないかと思ったわけです。白背景のページでは、絵の周りに枠線がほしいですね。もちろん、あえてエッジを消して背景色とつなげて広がりを表現するのはアリですが、とくに意図がないのなら枠を明示した方がよいのです。
（注：逆の話として、絵が中心のコンテンツでない場合、絵の存在感を下げる意図で枠線無しにする、という発想が出てきます。あるいは、画面の右下などに配置されるワンポイントの背景画像において、枠線の有無は大きな意味を持ってきます。空気のように画面に溶け込み、雰囲気を醸成する意図なら枠線無しでエッジをホワイトアウトさせた画像を選びます。明確なアクセントがほしいなら、枠線つきの画像を選ぶのもアリ。たいてい、背景画像は前者の使い方をします）
タグの文法
とは HTML の使い方をいっているのだと思いますけれども、これは相当ひどいです。だからといって、すぐに全部直せというつもりはないし、場合によっては、当面このままでもいいと思う。ただ、そうではあってもですね、相当ひどいということはとにかく知っておいていただきたい。
ソースを見た印象ですけれども、メモ帳を使っていらっしゃるのかな、と思います。もしそうであれば、HTML と CSS のお勉強を多少なりともしていただいた方が、今後、何かと楽になるはずです。とりあえず、メモ帳の代わりに Crescent Eve を使うようにしてください。そして、「ツール→Crescent Eve 起動時の設定→文法チェック→文法チェックタイミング→HTMLファイルを開いた時（にチェックを入れる）」とするだけで、意識が変わってくるはず。
お勧めの解説サイトをご紹介します。
内容に多少のダブりはありますが、いずれもよくできた解説なので短時間でサラッと読めるので、まずは通読されるとよいでしょう。3番目の解説は小難しい感じがありますが、実製作の際に適宜参照することにして、最初は読み流せば十分です。とはいうものの、やはり相当多くの知識を与えられますので、肝腎なことは何か、わからなくなってしまうかもしれません。そこで、最終的にどのようなスキルを身につけていただきたいのかを書きます。
（できれば Crescent Eve を導入してから）当サイト「趣味のWebデザイン」の HTML ソースを、ご覧ください。そして、「WHITE SIGNAL」のいずれかのページのソースと見比べていただきたいのです。当サイトのソースの方が単純だという事実が、ご理解いただけるかと思います。同程度の装飾なら、記述が簡単な方がよいでしょう。ソースが単純なら、文法ミスも減るはずです。
見出しは見出し、段落は段落、箇条書きは箇条書きとしてマークアップする……その方針を徹底すれば、HTML 文書の作成は単純作業となります。見た目はスタイルシートで調整することにして、マークアップの際には余計なことを考えない。そしてスタイル設定は外部スタイルシートで一括管理する。目標はそのあたり。
今は理解できなくとも、ちょっとお勉強なされば、「そういうことか」とわかってくるはず。というわけで、お勉強に興味がわいたら、どうぞ。
前項ではお勉強の勧めを書きましたが、現状、それほど高頻度で HTML 文書を作成しているわけではないのですよね。リニューアルを頻繁に行っているわけでもない。お絵描き掲示板などが日々の更新の舞台となっているわけで。歯切れが悪いのですが、学習の手間と、後々楽できる作業の損得勘定は、ご自分で判断していただければと思います。
ただし1点だけ。入り口ページが非常に高頻度で文字化けして表示されました。使用している文字コードを明示する記述を入れるべきですね。
どのような方法でファイルをアップロードされているのかわからないのですが、少なくとも現在、サーバ上にあるファイルの文字コードは EUC ですので、
<meta http-equiv="content-type" content="text/html; charset=euc-jp">
といった記述を html 要素の開始タグの直後などに入れておくとよいのではないでしょうか。これの問題点は、ジオシティーズのファイルマネージャを使うと、ローカルの文字コード関係なく EUC に変換されるんじゃなかったかな、ということ。いつもウェブ上で表示確認されているならいいのですが、Windows のメモ帳はシフト JIS が基本なので、文字コードは EUC です、という記述を入れると、ローカルで確認したときに文字化けする可能性があります。要注意。
注：WinIE などで JavaScript 有効として当サイトを閲覧しますと、画面の右上にセレクトボックスが出現いたします。デフォルトでは「think」が選択されているのではないかと思いますけれども、他の選択肢を選びますと、デザインがいろいろに変化することがご確認いただけるかと思います。これは HTML 文書自体を書き換えているのではなくて、スタイルシートだけを切り替えてデザインを変更しているのです。リニューアルを頻繁に行うなら……と書いたのは、このように、スタイルシートを交換するだけである程度のリニューアルが可能だからです。「どんなデザインにも自在に変化」とはいかないのですが、ある程度は何とかなります。
配色の項にも書きましたが、「WHITE SIGNAL」の雰囲気はクールな感じ。イラストも硬質な感じがあるので、ピッタリかもしれません。白と黒を基調とし、赤をアクセントに配している現在のトップ絵は、象徴的です。
アクセス数
というのは、どんなアドバイスを期待されていたのかちょっとわからないのですが、現状のアクセス数は多いとも少ないとも言い切れません。今の5倍程度のアクセス数なら、あってもおかしくはないですけれども、逆に半分でもとくにおかしいという感じはしません。アクセス数は、「ひとやま当てる」ことに成功したかどうか、そしてその時期によって、大きく左右されます。
どれほど素晴らしいイラストを描いていても、どこにもリンクせず、そしてリンクされずにいたら、作者しか訪問しないわけです。友人だけに教えても、だいたい状況は似たようなもの。とりあえず同盟に入ったり、同人系サーチエンジンに登録したりすれば、人間関係の構築抜きで外部サイトからのリンクが生じ、そうなると Yahoo や Google など大きな検索エンジンのロボットもやってきて、誰かの目に留まる可能性が上がってきます。運がよければ、どこかでブレイクするでしょう。
けれども、やはり基本的にはですね、1日100人の来訪を狙うあたりの段階においては、人間関係がものをいうことになります。まず、誰かに認めてもらうこと。自分の作品がとてつもなく素晴らしいものであれば、「リンクしました。今後も期待してます」なんてリスペクトのメールを出すだけで、「どんな感じでリンクしてくれたのかな?」と見にきた管理人さんの心をギュギューンと捕まえて、「凄い絵師さんからリンクされました!」なんて逆リンクもしてもらえます。でもそれは難しい。
だから、ふつうに誰かとお友達になるしかなかったりするわけです。お友達になりたい人（注：ここ重要。アクセス向上のために嫌いな人と仲良くなろうとするのは無理筋）を探して、まずサイトにリンクして、リスペクトのコメントをウェブ拍手や掲示板で何度か伝えていく。そういった地味な活動が、アクセスを増やします。
もちろん、コンテンツは充実させていかないといけない。結局のところ、地味な手段は「最初は必要」ですが、それではいつまで経っても「ブレイク」には至りません。ドカンと人気を増やすのは、コンテンツだけです。性格的に掲示板でのコミュニケーションに非常に才能がある場合には、どんどん掲示板が盛り上がってコミュニティサイトになってしまうケースもあります。ただ、これはイラストで成功するよりもっと稀ですね。
フレームをサポートしていないブラウザ（例えば携帯電話とか）からの閲覧は想定外なのでしょうから、とりあえずその点は不問とします。
大目次を横フレームに入れ、小目次を状況に応じて縦フレームに表示するのは、非常に標準的で間違いのない手法ではあります。画面がいつも安定して見えますね。
ただし現行のレイアウトが成立しているのは、大目次の項目数が限られているから。現在、例えば「ギャラリー」をクリックしますと、「PICTURE」「TXT」「FLASH」「MATERIAL」から好きなものを選びましょう、なんてことになっています。別にそれはそれでいいのですけれども、最初から「PICTURE」などを大目次にしてしまってもいいわけですよね。で、そう考えた場合、大目次の項目数が増えますから、横フレームでは無理（破綻する）ということになります。
となりますと、大目次も縦フレームを使うようになり、小目次を表示したとき縦3分割で窮屈な感じ。最近は大画面が当たり前になってきたので、それほど気にすることではないのでしょうが、少し気になりますね。
いずれにせよ、現状の大目次の構成が正しいのかどうかはよくわからない。「MEMO」などは、表紙からリンクするだけでいいのではないか、とも思います。で、大目次を見直すと、レイアウトを変える必要が出てくるかもしれません。私は現在の大目次に少し疑問を持っていて、これも決して致命的な欠点ではないので、そのままでもいいのですけれども、将来リニューアルされることがあるならば、そのあたりも考え直してみてはいかがでしょうか? というご提案。
字が小さくて見にくいかな、とも思っています。
とのことですが、えーとですね、私はこの手の問題については、次のように考えることにしています。
泉さんは、その方がカッコいいと思って、字を小さくされたわけですよね。でも、いくらなんでも、泉さんご自身が読めないほど小さくはしていないはずだし、読めないわけではないけれど嫌になってしまうほど小さいわけでもないでしょう。実際、私の確認した限り、致命的なサイズの文字は見当たりませんでした。
文字サイズにはこだわる方が多いので、不平不満の声が消えることはないでしょうけれども、泉さんのセンスは特殊ではありません。泉さんが許せる範囲で文字を大小する分には、文字サイズが理由でアクセス数が減ることなんて気にする必要がありません。泉さんと近いセンスの持ち主は、やはり少し小さい文字サイズのサイトを好むはずで、収支トントンでおさまると考えていいのです。安心してください。
あと、日本で一番大勢が利用している Yahoo も文字サイズが少し小さいんですね。泉さんのサイトと同じか、もっと小さいくらいです。あれでみんな満足しているのだから、多少のことは気にしないでいいと、私は断言します。
アドバイスは以上です。