私たちはどのようにデザインを「視て」いるのでしょうか？ 今更少し奇妙に感じられるかもしれませんが、考えてみましょう。人間の目がどのように動くのか理解すれば、要素を効果的に配置できるようになるはずです。
Webページのレイアウトはすべて、特定のヒエラルキーに従います。ヘッダーは本文の上に表示されるでしょう。メニューはスクリーンの上部か、下部か、左右か、それらの組み合わせです。デザイナーは、ページの中で優先順位がもっとも高いコンテンツを一番上に構成しようとします。続いて、残りのコンテンツを優先度の高いものから順に配置します。
「ヒエラルキー」とは、重要度の高いものから低いものへと組織化された、シンプルなよりよい表現方法です。また、この言葉はコンテンツのかたまり同士が関連している場合に、その関係性を表すためにも使われます。
ユーザーはWebサイトやアプリにおいて、ビジュアルヒエラルキーを判断します。最初に注意を引くアイテムがヒエラルキーの最上位です。その次に目を引くものは、最初のものより下位に位置します。
ヒエラルキーの原則
Author/Copyright holder: Digital Marketing. Copyright terms and licence: CC BY 2.0
人間の目は、情報をデータのかたまりとしてではなく、視覚的に受けとります。コンピューターとは違い、私たちは目の自然な動きに従っています。たとえば、私たちがよく目にする児童書は、絵が多く、文字が大きく印刷されています。マンガであろうと、塗り絵の本であろうと、絵本であろうと、本になにが書いてあるのかを理解できるのは、私たちがイラストを知覚し、読みやすく書かれたテキストとあわせて出来事の流れを解釈するからです。
私たちの情報の受け取り方は、レイアウトの中にあるコンテンツのヒエラルキーを決める際に作用するいくつかの要素によって変わります。Jones氏（2011年）はこの要素を次のように説明しました。
サイズ
大きいサイズの要素は、サイズが小さい要素よりも注意を引きます。新聞の見出しを考えてみてください。新聞は見出しに大きなフォントを使うことで、小さなフォントで書かれた残りの内容を知らせています。もし大々的に「速報」と書かれていたら、私たちの目はまっすぐにそこに向かうはずです。私たちがサイズに影響され、なにが書かれているのか知りたくなることが理解できたと思います。
色
鮮やかな色のほうが、くすんだ色よりも注意を引く可能性が高いです。コピーした資料でも、強調したいところがあれば誰でも蛍光ペンで塗っていたでしょう。黄色は、なにも主張のない白色よりも色味があって明るいため目立ちます。鮮やかな色の次に目立つのが、より深く暗い色です。それから、明るく薄い色が続きます。色が薄いため、遠くにみえるからです。色のヒエラルキーがもっとも低いのは、モノトーンや、落ち着いた微妙な色合いです。
たとえば霧がかかった日に、４人の友達をみつけようとする場合を考えます。ある友人は目立つ色のベストを着ていて、最初にみつけられました。続いて、ワインのような赤色のトレンチコートを着た友人がみつかります。クリーム色のロングコートを着ている友人をみつけるのは骨が折れるでしょう。なんとかこの３人をみつけたあと、彼らにもう１人の居場所を尋ねることになりました。残念ながら、彼はくすんだグレーのパーカーと、おそろいのスウェットパンツを履いていたのです。しかし、彼のほうは私たち全員を視認できたでしょう。
コントラスト
コントラストの強い色合いは、コントラストが低い場合よりも目を引きます。デザインの中で重要な部分を際立たせるにはコントラストが役に立つでしょう。デザインのあらゆるものは関連しています。
たとえば、建築家の高層マンションの建築計画に基づいてデザインを作成するとします。あなたは軽快でエコロジーなイメージの建造物を示したいと思っていますが、一方で深く頑丈な基礎部分と地下駐車場についても提示しなければなりません。
このようにデザインを分けることで、前者の、自然豊かな住居で過ごす楽しい生活の部分にユーザーの目を引き付けることができます。また、これは建物の実用性、安全性を保障している注目度の低い部分（フッターに相当）も効果的です。ヒエラルキーを少し構築するだけで、ユーザーのエンゲージメントに大きな影響を与えます。
整列
デザインの要素を整列させることで、ヒエラルキーが決まることもあります。
たとえば、コンテンツを配置したあと、横にサイドバーの列を置けば、サイドバーの優先度が高まります。ユーザーは、ログインボタンのような重要な情報はページの右上の隅にあると期待します。
これは雑誌においても同様です。もし手元に雑誌があるなら、ページをめくってみて、プルクオートを探してみてください。プルクオートとは、インタビューで対象者が話したことの中からライターが強調したい部分を抜き出したリード文です。大きなフォントで書かれ、ほかのテキストの整列とは異なる配置になっているので、最初に読者の目を引く要素になっています。
繰り返し
スタイルを繰り返すことで、コンテンツが関連していると読者に実感させることができます。
たとえばこの記事では、ほとんどのテキストを同じようなスタイルで書いています。もし、赤い文字などを使ってこのスタイルを変えたら、その文字は似通った周囲のテキストから際立って注意を引くことになるでしょう。上手に目立たせることができたとして、もし何度も赤い文字を使ったらどうなるでしょうか？ あまりにも多くのテキストが青文字でアンダーラインされているページをみたら、多くのほかのページをクリックして離脱してしまうでしょう。
近接性
それぞれの要素をどれだけ近づけて配置するかによって、それらの関連具合をユーザーに示すことができます。このリストでは、それぞれの項目の間に空白の１行を入れています。しかし、見出しと最初の段落は分けていません（編注：この翻訳記事は原文からレイアウトを変更しており、小見出しに分けています。レイアウトに関しては原文をご覧ください）。この空白の長さは、それぞれの項目が、まったく無関係ではないが別々の要素であり、一方で見出しはそのあとのコンテンツと関係していることを表しています。
空白
特定のコンテンツに注意を引くために、周囲に空白を設けることもできます。用いる色は、白に限らず、どのような色でも構いません。この空白がまったくない場合を想像すれば、どれだけ空白が効果的なのかわかるでしょう。空白には情報を認識しやすくする、それぞれの情報に注意を向けさせるという、２つの役割があります。パラグラフはその一例です。
質感とスタイル
質感とスタイルもまた、コンテンツのヒエラルキーを決定するのに役立ちます。フォントのように、デザイン全体の雰囲気をつくることができるのです。次の２つのプロジェクトを考えてみましょう。
２社の旅行代理店が、リゾート地への旅行パッケージを紹介するためにランディングページをつくろうと考えています。１つは海をテーマにしており、もう１つは湖を取り上げています。
海のページでは、美しい白い砂浜が透けてみえる透明な海水にクローズアップした写真を背景に置きました。その効果は好ましいものでした。
しかし、同じスタイルを湖のページで再現しても、透明な水を通してみえるのは暗い色の大きな石や岩です。滑らかな砂よりも質感が強いので、ユーザーの気を散らしてしまうでしょう。
「目を引くデザインには心理学が必要である」
コペンハーゲンの企業からのレポートによれば、多くのデザイナー、特にWebデザイナーが、ユーザーにより直接的に注意を向ける必要性を認めています。学生時代に心理学を学んだ経験が成果を上げているようです。
ヒエラルキーのパターン
紙面のページにおいても、デジタルのページにおいても、ビジュアルヒエラルキーには共通したパターンがあります。これらのパターンは、新しいページが表示されたときに人間の目が動く流れに基づいています。たとえば英語は左から右に読みます。英語の読者はページの文章をみた際、特定の閲覧パターンに従います。一方で、アラビア語の読者は異なるパターンに従います。というのも、アラビア語は右から左に読むからです。
ユーザーがヒエラルキーのパターンを判断する前にどのように情報を処理しているのか、理解することが重要です。この記事は英語で書いているので、今回は左から右に読むパターンについて、２つの一般的な例を紹介します。
Zパターン
Author/Copyright holder: Supermariolxpt. Copyright terms and licence: CC BY-NC-ND 2.0
テキストコンテンツが少ないWebサイト、たとえば大量の情報を伝える目的ではなく事業やプロダクトのちょっとした広告を目的としたサイトでは、視線は一般的に「Z」の形で動きます。ユーザーはテキストの少ないページをみると、目線をページの左上から右上に走らせます。続いて、対角線に従ってコンテンツを左下に読み、最後に右下に向かいます。
このZパターンの目の動きに沿ってもっとも重要な情報を配置することで、この法則を活かすことができるでしょう。４つの点を３本の線分で結んで、Zの形をつくってください。
Fパターン
テキストのコンテンツが多いWebサイトや、ビデオコンテンツがあるWeb サイトの場合は、デザイナーはFパターンを使うことが多いです。
Fパターンでは、まずユーザーはページ上部を左から右にみます。しかし次に、自分が探している情報の手がかりを探して、左側を下ってみていきます。もし該当する手がかりがみつかれば、その地点から右に向かって視線を動かします。ユーザーはこのプロセスをページの最後まで繰り返すでしょう。
このような視線の動きは、この記事の最初に示した画像のように、「F」の文字に似たヒートマップをつくることが多いです。
同じWebサイトにZパターンとFパターンを併用することももちろん可能です。たとえば、トップページにZパターンを使ったとしても、ユーザーがサイトをより深く知りたいと思った際には、今度はFパターンを使って大量のデータを配置することもできます。
結論
ヒエラルキーによって、ユーザーがデザインを認識する順序を簡単に設定することができます。ユーザーが私たちに求めていることと、私たちがユーザーにしてほしいことを考えた上で、それに応じてヘッダーとメニューのヒエラルキーを決めるべきです。ユーザーは、デザイナーが次のような方法で強調した要素を受信して、視覚的に情報を処理します。
- サイズ：大きな要素が目立ち、最初に目を引きます。
- 色：暗い色やくすんだ色よりも、明るい色が目を引きます。
- コントラスト：要素の色の違いが大きいと、ユーザーの目は明るい方に引き付けられます。
- 整列：ユーザーは特定の要素がいつも同じ場所にあることを期待します。
- 繰り返し：テキストの一部の色を変えるなど、繰り返しを有効活用することで、ユーザーの目を引きつけられます。
- 近接性：ヘッダーと関連するテキストのように、関連する要素を近づけることで、関係性を示すことができます。
- 空白：要素の周りに空白を配置すれば、ほかの情報から差別化することで、要素を際立たせることができます。
- 質感とスタイル：分厚いミリタリー調のボタンなど、決定したテーマによって独特な質感やスタイルを使えば、ユーザーの目を引くことができます。
また英語圏においては、２つの一般的なヒエラルキーパターンに従ってデザインを認識します。
- Zパターン：テキストが少ないデザインでは、ユーザーの目はページ上部を左から右に動き、続いて左下まで斜めに進んで、最終的に右下まで進みます。
- Fパターン：テキストが多いデザインでは、ページの上部を左から右に読んだあと、知りたい情報の手がかりを探して、左側を降りていきます。手がかりをみつけたら、今度は左から右に向かって読みます。
ユーザーの視線の動きを理解することで、これらの法則をデザインに導入して、より効果的なデザインをつくり上げることができます。デザインを企画する際には、これらを念頭に置きましょう。たとえばZパターンとFパターンを併用するなど、法則を用いる際には、さまざまな試行錯誤が必要かもしれません。
あくまでもユーザーに向けてデザインしていることを忘れないでください。彼らがなにを使っていて、オンラインの世界でなにを探しているのかを考えることが重要です。
