FC2ブログ
お気に入り商品の紹介、ホームページ制作に関する徒然
TK-ウェブログ
スポンサーサイト
-----------  CATEGORY: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ページトップへ
WEBデザインの基本を振り返る-その2
2008-07-15-Tue  CATEGORY: ホームページ製作

素材を最適化して見せる

カラーコントラストのポイント
  Webページ上の見やすさは、プロポーションの最適化以上に色のコントラストが担っているケースが多いです。コントラストとは、背面の色と前面に置いた素材の明るさの差のことを指します。明るさというのは、相対的な明度差のことです。黄色や赤といった色層の印象がもつ明るさとは違うので注意しましょう。

  文字情報の場合、コントラストが高いほど良いとされます。しかしながら、読む要素が大部分である紙媒体とは異なり、Webページは操作する部分と読む部分が一画面同居するメディアです。そのため、文字要素すべてが均一に目立ってしまうのも最良の状態とは言えません。最終的には箱に割り当てた機能の違いに配慮して、それぞれの箱に合ったコントラストを設定する作業が必要となります。

  ナビゲーションのような優先的に目立たせない個所は、画面上もっとも高いコントラストを与えつつ、本文の文字色は、ややコントラストを下げた色合いにして、機能の差を示すといった具合です。

  また、コントラストは機器の特性や閲覧環境によっても考え方を変える必要があります。例えば昼間、太陽光が差し込む部屋で閲覧する事が多い情報なら背景は白が妥当です。極端な話、晴天の野外で携帯電話のコンテンツを閲覧する際、黒い背景に白い文字の情報では文字がまったく読めません。その一方、夜光量の少ないリビングに置いた大画面PCで白い背景の情報を閲覧すると、画面そのものの光が強調されて眩しくなり、目が疲れてしまいます。コントラストの最適化は閲覧条件に配慮した上で行うことが鉄則です。

マジックナンバーを知る
  もう一つWebページのレイアウトで押えるべき基本は、人間の認知力に配慮した機能の配置方法でしょう。操作性の配置には「マジックナンバー」という認知学的なセオリーがあります。平均的な人間の脳が、短期記憶に留め置ける物事の数の限界を示す考え方です。4ないし5という説と7程度という説があり、どちらも一画面に配置できる機能の最大数に置き換えられます。

  これは単に「ボタンの数を4つ以内に収める」ということではありません。あくまで「パッと見た時に4つ程度のセクションにわかれて見える」ことを目指す考え方です。数字の羅列を例にするとわかりやすいかもしれません。例えば「256979433」という書き方から受け取る印象は「9個の数字の羅列」です。ところが、「256-979-433」とハイフンを加えるだけで「3個の数字のグループ」となり、印象が単純になるのです。

  Webページで同じ状況を作り出すには、選択肢の多いナビゲーションを目的別に三色で塗り分けたり、グループの間に余白を設けて差別化すればいいのです。色でグループを分ける事がもっとも単純な方法ですが、その場合ナビゲーションも含めた配色計画を綿密に立てておかないと、審美的に問題が発生するおそれもあります。

  そこで、別の方法としてグラデーションや罫線、背景と文字色の反転といった手法も検討してみてほしいのです。いずれも面を区切る方法ですが、色数を増やしてセクションを区切るよりもまとまりやすいと思います。例えば、ナビゲーションの部分は青い背景に白抜きの文字を合わせたデザインを基本として、ひと固まりの面に見せます。その下のスペースは色で面を作らず、罫線で区切ることによって項目を区別します。その下はナビゲーションの面と同系色ながら、やや薄い背景色にした面をつくります。これで3つのセクションを示す「モジュールのような情報の入れ物」ができます。このモジュールを繰り返し使うだけでも、項目がまとまって見えるので複雑さは抑えられます。

  操作は単純な方が良いと分かっていても、一画面に掲載する情報の量が減らせないことがあります。そんなときは、前述のような方法で分かりやすくデザインしていきましょう。もちろん、検討段階で一度に出す選択肢を極力減らすという方針を固められれば、それに越したことはありません。その場合、またマジックナンバーのセオリーを引き合いに出しつつ、単純な操作性を提案するのも一考です。

スポンサーサイト
ページトップへ  トラックバック0 コメント0
コメント

管理者にだけ表示を許可する
 
トラックバック
TB*URL
<< 2018/11 >>
S M T W T F S
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -


余白 Copyright © 2005 TK-ウェブログ. all rights reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。