WSJ21[GHP] - 見やすいホームページの作り方

■lookup!!■よいホームページ作成講座(Creating Good Homepage)

■見やすいホームページとは?

ホームページを良く見せる最も簡単で効果的な要素は「見やすさ」です。 「見やすいホームページ」を作ることで良いホームページに簡単に近づけることができます。

訪問者がホームページを表示した時、まずパット見た「見栄え」が印象に残ります。 単に「見栄え」と言っても「派手」とか「地味」と言った見栄えではなく、見た目の「見やすさ」です。 心地良い印象が残るのか、居心地の悪い印象が残るのかは人それぞれでしょうが、 居心地の悪いホームページに長居することはないでしょう。長居するのは居心地が良いからなのです。 「第一印象が大事」と言ったところです。

では、具体的に「見やすさ」とはどのようなものでしょうか、考えてみましょう。 「色の使い方」や「整理の仕方」といったものが上げられると思います。 今章「見やすいホームページとは?」では、「色」に関して取り上げます。 「整理」に関しては後ほどの「分かりやすいホームページとは?」の章で取り上げさせて頂きます。

さて、色に関してですが、色というのは人に様々な感情を抱かせてくれます。 温かい色、寒い色、楽しい色、嬉しい色、安らぐ色、興奮する色、見にくい色、気分が悪くなる色・・・ 例を挙げれば限りはありません。 その中から見やすいホームページや見にくいホームページとなる色の組み合わせを幾つか取り上げてみます。

配色サンプル一覧
背景「白(#ffffff)」文字色「黒(#000000)」
背景「白(#ffffff)」文字色「灰(#666666)」
背景「白(#ffffff)」文字色「緑(#00ff00)」
背景「黒(#000000)」文字色「白(#ffffff)」
背景「黒(#000000)」文字色「黄(#ffff00)」
背景「黒(#000000)」文字色「赤紫(#ff00ff)」
背景「黄(#ffff00)」文字色「赤紫(#ff00ff)」
背景「緑(#00ff00)」文字色「青(#0000ff)」
背景「紫(#00ff00)」文字色「赤(#0000ff)」
背景「青(#0000ff)」文字色「水色(#99ffff)」
背景「緑(#00ff00)」文字色「水色(#00ffff)」

どうですか?非常に見にくい見苦あわせとかもあるでしょ? 目がチカチカして作っている私も疲れてきましたよ。 絶対にやりたくないですよね。やりたく無くなったでしょ? やりたいって?そりゃー天の邪鬼だわ(^o^;

■使用する色は少なめに!

色数が多くなると多くなるに連れ、見た目がゴチャゴチャしてしまい、見にくいホームページになってしまいます。 逆に、色数を少なめにすると比較的容易見やすいホームページに近づけることができます。

例を挙げると、使用する色を白と黒とその間の灰色に特定してしまえばかなり楽にできます。 そのモノトーンの中に一色鮮やかな色(アクセントカラー)を入れると、その色はより一層際立って見えます。 注目度もバツグンのことでしょう。

このように色が少ないと製作者側も楽に色管理が行えますし、訪問者側も注目点をハッキリ見分けることができます。 お互いに利点があるわけです。 但し、色味が無いホームページになってしまうので、あまりオススメは致しません。 クール感や、高級感を演出したいのであれば申し分の無い組み合わせですけどね。

■背景には薄い色?濃い色?どっちが良いの?

長年の経験から言うと薄い色にしておくと作りやすいです。 なので、初めて作る方は妥当に白や、パステル調のカラーにしておくと良いでしょう。 そうすることにより、比較的簡単に見やすいホームページをに作ることができます。 色を増やすなら同じ色で明るい色と暗い色の組み合わせは大変有効ですよ。

ただし、色彩検定などを持っていて色彩に関する知識が豊富で有れば気にすることはありません。 自分の感じるように色相やトーンの調和を奏でてみては如何でしょうか? ただ、遊園地のホームページを作るからコンプレックスカラー配色を使用するとかは避けて下さいね♪ トーンオントーン配色で作ると見やすく組み合わせることができます。 色数を多くするのならペンタードやヘクサードとか使っても良いかも知れません。

■終わりに

見やすさは「ビジュアル(見た目)」で決まると思います。 「パッと見てどうか?」「継続してジッと見てみるとどうか?」 色々な影響はありますが、基本は色です。 どんなに内容が優れていようとも、体裁が綺麗でも、色が悪ければ問題になりません。 また、それと同時に逆のことも言えます。 良いホームページを作る為には、まず色の観点から攻めてみてはどうでしょうか?

●もどる●