2012年4月8日日曜日

「良いホームページの条件」とは? (3)ページの見た目

前々回から「良いホームページ(Webサイト)とは、どういうものか」についてお伝えしています。前回は「ページの目的」についてお伝えしました。

私がどのような事を意識してWebを作成しているか、ご自身でページを作成している方にも参考になる情報をお伝えできればと思います。

さて今回は、「ページの見た目」についてお伝えします。


デザイン=装飾?

「デザイン」という言葉を聞いて「どう装飾するか」だと思う方もいらっしゃるかも知れません。

実際は、それだけではありません。


  • 雑誌や新聞の場合

    通常は「ぱっと見」で大体の内容を理解できると思います。これは「見出しと本文、写真」が適切に配置されているためです。

  • 道路標識の場合

    特に高速道路などでは、サービスエリアでどんな施設があるのか、どちらに行ったら良いのか、などを瞬時に伝える必要があります。

ホームページの場合も同様で「どこをクリックしたら欲しい情報が得られるのか」「そもそもクリックできる所はどこなのか」等々、ぱっと見て分かる必要があります。

そのために、適切にお客様の目を誘導する目的で装飾が必要になるわけですね。


お客様と、見た目の方向性

ページのデザインは、見て下さるお客様を想定して下の要素を合わせていく必要があるでしょう。

  • ページの雰囲気

    例えば有名ブランドショップのような綺麗で落ち着いた感じか、あるいはスーパーやディスカウントショップのような勢いのある感じか、などを検討します。前者であれば余白を多めに、上品さを感じられるフォントで同系色での微妙な違いを使う、等となります。後者であれば太いフォントに原色を多めに使う、等ですね。

  • 文章と写真

    情報量がある感じにしたいのか、雰囲気を伝えたいのか、等ですね。前者なら文字の配分を多めに、後者なら写真を効果的に配置する、等です。

  • 文字のサイズ

    お歳を召した方の多くは、細かい文字を読むのが苦手です。ですので、そのような読者が想定される場合は文字を大きめにしておいた方が良いでしょう。あるいはブラウザの設定で文字サイズを大きめに指定しているケースがありますが、その場合も表示が崩れないよう工夫が必要です。


配色

色にはイメージがあるので、雰囲気を伝える上で大切な要素になってきます。

上でも少し触れましたが、私の場合は基本的にはお客様の要望する雰囲気やコーポレートカラーを意識して決めています。

また同じ色の組み合わせでも、使う面積の比率でニュアンスが変わるので、ページ内の情報の面積の比率にも注意していきます。また、面積が広ければ少しの色の違いでも簡単に気づきますが、文字など細かい部分ではコントラストをしっかり確保すると読みやすくなります。

そして、Webは誰がアクセスするのか分からないので、色覚障がいの者ある方も情報を把握できるような配色だと良いでしょう。これはColorblind Web Page Filterで簡単にチェックできます。このサイトは日本語が化けてしまう問題がありますが、配色の確認という意味では十分だと思います。


見た目を整える方法や配色については、ノンデザイナーズ・デザインブックという本が非常にお勧めです。ウェブサイトだけでなく、印刷物を作るときにもきっと役に立つでしょう。


さらに多様なアクセスに対応するには

さらには視覚の障がいのため、音声合成機能で文章を読み上げる「音声ブラウザ」という機能を使用している方もいらっしゃいます。そのようなケースに適切に対応するためにも、ページの見えない部分の構造にも注意すると良いでしょう。

という所で、次回は「ページの見えない中身」についてお伝えしたいと思います。



[神奈川県秦野市のIT訪問サービス/ホームページ作成/ソフトウェア開発] 有限会社アイエヌシーhttp://www.incinc.jp/