視覚的な階層（英: Visual Hierarchy）は、優れたウェブデザインにとって不可欠です。ウェブサイトの目標を効果的に達成できる主要ルールの一つと言えるでしょう。
視覚的な階層の裏には、たくさんのデザインルールが存在します。今回は、ウェブサイトに必要な視覚的な階層デザインルールをまとめてご紹介します。
デザインはコミュニケーション手段のひとつ。
デザインの核心は、ビジュアルコミュニケーション手段です。魅力的なビジュアルを通して、アイデアを他のひとに伝えることなのです。そして、特にウェブデザインが当てはまる部分でもあるでしょう。
ひとはモノを見て、考えるビジュアル・シンカー（英: Visual Thinker）のため、たくさんの情報をうまく処理することはできません。データを処理するだけでも、単にものを見ているだけでもありません。私たちは「視覚的な関係（英: Visual Hierachy）」の観点から見ているものを整理しています。
視覚的な階層の考え方について
なぜ私たちが関係性から物事を見るのかは、研究テーマとして扱われており、これは私たちの古代の祖先が生き残るために続けてきた、狩猟採集民族の歴史だと主張する人類学者もいます。
より学術的ではなく実用的な考えが、脳が情報を理解する仕組みです。同じような要素をグループ化し、単純な使い方で意味のあるパターンに整理することができます。情報をどのように整理し、それを利用するのかは、メッセージを伝達するとても効果的な方法です。
視覚的な階層に利用するツール
視覚的な階層が、情報を伝えるために有用なツールであることが理解できたと思います。では実際に、どのようにウェブデザインとして表現したらよいでしょう。
実はとてもシンプルなツールで、利用方法をきちんと学ぶことで、手軽に活用することができます。
サイズ
より大きな要素は、もっとも注意を集めることができます。視覚的な階層の構造を考えるときも同じで、より大きな大病物にユーザーの注目は集まります。
サイズは、視覚的な要素を構成するうえで、もっとも強力なツールのひとつです。もっとも大きな要素が常に重要な要素となり、小さな要素は通常、優先度の低い要素となります。
配色カラー
色は、整理するのに利用できるだけでなく、ウェブデザインに個性を追加できるツールとしても活躍してくれます。鮮やかなでコントラストの強い配色は、ユーザーの注意と注目を自然と集めます。
このテクニックは、ボタンやハイパーリンクなどに最適です。デザインで個性を追加するツールとして、より洗練された配色を楽しむことも可能です。
楽しい、明るい色は、色を主張しながらデザイン全体をエキサイティングにすることができ、落ち着いた色使いは穏やかな気分にさせます。色はとても重要なツールです。ブランド（コカ・コーラの赤やマクドナルドの黄色）のイメージを伝えたり、雰囲気（情熱的な赤色）やシンボルとして利用することもできます。視覚的な階層の情報を分類する方法として、色を利用しても良いでしょう。
フォント
視覚的な階層を作成するときには、デザインに適したフォントを選択することが重要です。フォント自体だけでなく、フォントの使い方がここでは大切になります。利用するウエイトやスタイルは、サイトのレイアウトと同じくらい重要と考えてよいでしょう。
情報を整理するときに重要なこととして、さまざまな書体のサイズや太さなどを試してみましょう。イタリック体は、特定の状況で威力を発揮してくれます。
さまざまなサイズやウエイト、文字スペースを使用することで、ウェブサイトにおける書体の階層を作成することができます。一つの書体のみを利用していても、まったく問題ありません。
さまざまなサイズや太さ、ウエイトを利用することで、より重要な要素に注目を集めるだけでなく、ユーザーにとってより読みやすく、理解しやすいサイト全体の構成づくりにも役立ちます。
余白スペース
視覚的な階層ルールを作成しているときに、余白スペースが周りにしっかりあるか確認しましょう。ネガティブ・スペース（英: Negative Space）と呼ばれるこの余白エリアは、デザインにとって重要になります。
余白スペースは、デザイン要素が並んでいる、ただのスペースと考えられがちですが、つねに白色というわけでもないので、ネガティブ・スペースと呼ぶひとが増えています。
空白のスペースは基本的に、ウェブサイトを構築している特定の機能を、ほかよりも目立たせることができます。重要な要素をうまく強調し、目線を休めることもできます。ごちゃごちゃしていると、ユーザーは何が重要なのか理解できず、混乱させてしまう恐れがあります。
人間の目と走査、スキャンパターン
人間の目は、予測可能な方法で動くため、自動的に興味のある特定のポイントに視線を集めます。個人によってある程度異なりますが、多くの人がどのようにウェブサイトを見るか予測できる、特定のパターンに従います。
Fパターン型
これはブログやwikipediaなど、文字テキスト量の多いウェブサイトで、殆どの人が使用する走査、スキャンパターンです。
ユーザーはまず、ページの左側の縦線にそってさらっと見たら、最初の段落のはじまり数行で、興味のある単語やキーワードを探します。
ユーザーが興味のなるコンテンツを見つけたら、水平方向に文字テキストを読み始めます。この視線の動き、パターンが、アルファベットのF（またはE）に似ていることから名付けられました。
Zパターン型
このスキャンパターンは、文字テキストが中央に配置されていないページで使用されます。ユーザーはまず最初に、ページの上部を横切るように水平方向にスキャンします。これは、通常ナビゲーションメニューが配置されているためですが、視線は左から右に読む習慣も関係しています。
視線がページの端まで到達したら、次に左下に移動し、再度左から右方向へのスキャンを繰り返します。まさに、アルファベットのZのように。
このパターンは、ウェブサイトの視覚的な階層ルールを活用するのにも便利で、Call to Actionボタンの配置やブランディングなど、基本的なサイトデザイン要件にも対応しています。
ここではシンプルさが最優先事項で、ユーザーに何かの行動を促すページでは、とても有効的なテクニックです。しかし、複雑なコンテンツでは、このZパターン型はあまりうまく機能しないため、Fパターン型を採用する必要があるかもしれません。
いくつかの実践ベスト・プラクティスまとめ
- 背景を切り分けることで、ユーザーの視線を視覚パターンのフレームワーク内に保持しましょう。
- 左上にロゴを配置することで、ユーザーの目に瞬時に止まります。
- Zパターン型でカラフルなCTAボタンを利用することで、ユーザーの視線を集めやすくなります。
- ページの中央に配置された画像スライダーは、Zパターン型の視線をスライダーの前後で分割することができます。
- ページの左側にアイコンを追加して、ユーザーに行動を促すメッセージや言葉を表示してみましょう。
- 視覚パターンは、もっとも重要なCTAボタンやメッセージで終了する必要があります。
視覚パターンと人間の自然な目の動きを理解することで、ウェブサイトのデザインに最大限活用することができます。ユーザーが何を探しているのか分かったら、情報をうまく整理することでユーザーの注目を集め、見てほしいコンテンツまで誘導することができます。
さいごに。
視覚的な階層ルールは、ウェブデザインにとって重要な要素です。どのように利用できるかきちんと理解することで、より効果的なウェブサイトを作成することができるでしょう。
視覚的な階層ルールは、あなたのコンテンツを整理するためのガイドラインを提供します。あなたが知っている見た目の良いサイトを開いて、どのような効果的なメッセージの伝え方をしているか確認してみましょう。
海外サイト Speckyboy.com で公開された How to Use Visual Hierarchy in Web Design より許可をもらい、翻訳転載しています。
サムネイル@ : Design Language by Surja Sen Das Raj – Dribbble
参照元リンク : How to Use Visual Hierarchy in Web Design – Speckyboy.com
