見易いウェブサイトを作るために

イラスト系のホームページを作る際に気をつけたほうが良いのではないかと思うことを箇条書きでまとめてみました。
参考にしてサイト制作に役立てて頂ければ嬉しいです。

イラストは、出来る限り解りやすい場所に置き、少ない手順で見られるようにしましょう。
メニューにイラストページへのリンクを置く場合は、「イラスト」や「ギャラリー」等の直感的に解りやすい表記が良いでしょう。
「メイン」等と書かれているサイトも多いですが、そのサイトのメインが何であるかは訪問者さんには解りませんから、そういった曖昧な表記は避けましょう。

イラストギャラリの階層は可能な限り浅いほうが見易くなります。
例えば、【ギャラリ＞イラスト＞ゲーム＞ゲーム名＞作品名一覧】と順にクリックしてやっとイラストが表示されるのでは階層が深すぎます。
手順の多さは、そのまま面倒さに繋がり、イラストを見てもらえる確率は低くなるでしょう。
上記の例であれば、【イラストギャラリ＞ゲーム/ゲーム名＞作品名一覧】とする事で5階層を3階層まで減らせます。
更に作品数が少ない場合は、「ゲーム名」の所にイラストの作品名やサムネイルを表示すれば2階層で済みます。

最新作から数作品は、トップページにリンクやサムネイルを置く等すれば、より訪問者さんに親切と言えるでしょう。
但し、年齢及び閲覧制限の必要なイラストには、その旨の表記も忘れないよう心がけましょう。

工事中、とだけ書かれているページが沢山あると見るのがイヤになってしまいます。内容が少ししかないページが沢山あるのも見るのが面倒です。
ページの追加がいつでも出来るのがHTMLのメリットでもありますから、内容の無いページはメニューに表示しないようにしましょう。また、同じ様な内容のコンテンツは一つのページにまとめたほうが見易いです。
但し、1ページあたりの内容があまりにも多い場合は逆に見辛くなりますから、適度な分割を心がけましょう。

フレーム分割はメニュー等を手軽に固定表示出来て一見便利ですが、使い方を気をつけないとただ邪魔なだけの存在になりがちです。
フレーム分割すると、それだけイラスト等のメインコンテンツを見るためのスペースは狭くなりますから、小さな画面で見ている人にとっては邪魔です。また逆に、小さい画面で見ている人に配慮してイラストを小さく表示するようにすれば、大きな画面で見ている人にとっては画像が不必要に小さすぎて見辛くなります。
イラストは別ウィンドウで表示する手もありますが、これではそもそもフレーム分割する意味がありません。一般の大手サイトでフレームを使用している所がほとんど無い事を見ても、あまり便利なものではないことが解ると思います。

JavaスクリプトやFlash、ActiveXはサイトを魅力的なものにする大変便利なものですが、見る人が必ずしもそれらが使える環境には無いということを忘れてはなりません。
セキュリティ上の観点からこれらを無効にして見ている人もいます。
少なくとも、ページの入り口やイラスト表示部分はそれらが使えなくても大丈夫なようにしておくべきです。

文字、背景ともに明るい色を使えば、文字が読みづらくなるのは当然です。逆に両方暗い色の場合も同じです。また、黄色や赤色などの原色を使うとやはり見づらいので気をつけましょう。

背景に画像を使う場合は、薄い色になるよう調整してから貼りましょう。画像のコントラストが強いと重なった部分の文字が非常に読み辛くなります。

時々、文章のフォントサイズ指定を最小にしているサイトを見かけますが、これは大変読み辛いのでやめましょう。
タグによる <font size="1"> や、スタイルシートによる font-size:10px; などという指定は文章にするべきではありません。
画面サイズや解像度は様々ですから、実際に自分が見ているのと同じサイズで読んでいる人はごく少数です。自分の環境ではちゃんと読めていても、他の環境では読めないくらいに小さく表示されている場合があります。
fontタグなら 3、スタイルシートなら16px、13ptあたりが標準となるサイズですので、文章はこのサイズを基準にあまり極端なサイズにはならないよう気をつけましょう。

全てのテキストリンク（Aタグ）は、見る人が直感的に解るような色やスタイルにしましょう。
多くのブラウザでは、デフォルトのリンク色は青、スタイルは下線付きになっています。よって、ほとんどの人は青＆下線付きのテキストをリンクであると見なしますし、そうでないテキストはリンクであると認識しにくいでしょう。
デザイン的な都合上、多少の変更は止むを得ない場合もあります。例えば、下線を消す程度でしたら、多くの人がそう苦労も無くリンクである事に気付くと思います。しかし、リンクが他の文章と全く同一の色であったりした場合は、それがリンクであると認識することは極めて困難になり、利用者に不要な労力を強いる事となります。
そのような状態は極めて好ましくないですから、最低限、他のテキストとは色を変える事と、リンク色が青系統で無い場合は下線を消さないようにしましょう。

オリジナリティ重視でメニューを独自の表現にしているサイトがありますが、見て直感的に解らないため使いにくいと感じることが多くあります。
例えば、絵を展示してある部分を「ギャラリ」や「イラスト」などではなく、「○○の間」などとしているサイトです。
この場合は、アンカー(a)タグにtitle属性を指定し、そこに簡単な説明を書いておくとマウスカーソルをその部分に乗せたときに説明が表示されますので多少解りやすくなるでしょう(IEの場合)。
<a href="/link/" title="お役立ちリンク集">○○の間</a> とすれば ○○の間 このようになります。また、アイコンを使う場合も同様の指定をしたほうが親切でしょう。

顔文字は文章の表現力を手軽に広げられる便利なものですが、種類によっては嫌悪感を与える可能性があります。某大手掲示板で一時期頻繁に使われたようなものは避けるべきです。
あまり特殊な顔文字は使わず、基本的な顔文字のみの使用をお奨めします。
また、顔文字を乱用することは逆に文章を読みにくくします。よく使用する人は、使わなくてもいい部分では極力使わないように気をつけたほうが良いでしょう。

文の語尾に付ける「ｗ」については主に「(笑)」と同じ意味で使われますが、悪い印象を与えるケースが多々ありますので使用は極力控えたほうが良いと思います。
ｗを乱用する事により軽薄なイメージになったり、相手を馬鹿にして笑っていると取られる事があります。

サイトを見るとき、音は出ないものと思って見ている事が多いですから、いきなり大きな音が鳴って驚くことがあります。
サイトのBGMとしてMIDIを使う場合は、最初に表示されるページで必ず確認してから鳴らすようにしましょう。また、BGMのON/OFFを利用者が選べるようにしておくほうが親切です。