理想的な視覚的階層をデザインするヒント | アドビ UX 道場 #UXDojo

ヒトは視覚的な生き物です。人間が情報を視認する際、どの順序で認識したのかは、ユーザー体験に大きな影響を与えます。

この点に関して UI デザインが達成すべき目的のひとつは、ユーザーの注意を、価値の高いコンテンツやインタラクティブな要素に向けることです。そのため、画面のレイアウトを制作するデザイナーは、ユーザーに 1 番目、2 番目、3 番目に気づいてほしいものは何かを考える必要があります。そして、それをデザインに反映する際に重要になるのが視覚的階層です。

では、コンテンツとデザイン要素の重要度を把握できたとして、どのように視覚的階層を構築すればよいのでしょうか？この記事では、視覚的階層を適切にデザインするためのヒントと、その前提となる視覚的な要素の基本的な特性を紹介します。

視覚的階層とは何か

そもそも視覚的階層とは何でしょう？視覚的階層は、ページや画面を見たユーザーに、情報を処理する順番を示唆します。適切にデザインされた視覚的階層は、重要度の高いものから低いものへとコンテンツやグラフィック要素を整理して、ユーザーの視線を重要な要素へと明確に導きます。デザイナーは、こうした視覚的階層を実現するために、ビジュアル要素の視覚的な特性や、視覚的な構成の原則を用いることができます。

確かな情報アーキテクチャと優れた視覚的階層の組み合わせは、個々のページのユーザビリティとコンバージョンを向上させる力があります。登録フォーム、CTA ボタン、マーケティングメッセージなどに視線を誘導して、ユーザーが価値ある要素に触れることを促すために、適切な視覚的階層は重要です。

視覚的なオブジェクトの特特性

ビジュアルデザインで扱うすべてのオブジェクトには、ビジュアルウエイトと呼ばれる、視覚的階層における要素の重要度を決める特性があります。重みのあるオブジェクトほど、ユーザーの注意を引きつけやすくなります。一般的に、最初に目につくものが階層の最上位で、最大のビジュアルウエイトを持つ要素です。

これから紹介するのは、ビジュアルウエイトに影響を与える主要な視覚的特性です。オブジェクトの階層表現に、これらの特性の理解は欠かせません。

大きさ

「大きさ」は、コンテンツやビジュアル要素を強調するために、おそらく最も効果的な特性です。人は大きなものに最初に注目する傾向があります。この記事のタイトルにも大きなフォントが使われて、この記事を読み始めるべき場所を知らせています。

大きさに関連するもうひとつの重要な原則は「スケール」です。これは、あるオブジェクトの大きさを、他のオブジェクトとの比率で捉える相対的な大きさです。複数のオブジェクトがページ上にある場合、個々のオブジェクトの大きさの判断は、それぞれのオブジェクトを比較することにより行われます。

また、インタラクションデザインでも大きさは重要な役割を果たします。フィッツの法則は、大きなインタラクティブ要素は扱いやすく、ユーザーはより少ない労力で操作できることを示しています。

色

大胆で対照的な色は、注意を引きつけます。この性質を、特定の要素を強調するために使用することが可能です。このテクニックが適用される代表的な例には、CTA ボタンやエラーメッセージなどがあります。反対に、コントラストを下げると、デザイン階層における特定の要素の重要度を下げることができます。

余白

ある要素の周囲に十分な余白を与えると、その要素に注目させることができます。要素の周囲のホワイトスペースが大きいほど、その効果は大きくなります。例えば、周りに十分なホワイトスペースが用意されたランディングページの CTA ボタンは、訪問者の目に留まるでしょう。

整列

整列は、デザイン要素の間に秩序をつくり出します。典型的なページレイアウトは、縦と横の線から構成されるグリッドに沿ってデザインされています。こうしたグリッドベースのレイアウトでは、グリッドを崩すことで容易に注目を集められますが、この手法は慎重に用いられるべきです。あまり頻繁にグリッド崩すと、見た目が乱雑になって、視覚的階層にまとまりがなくなることもあります。

テクスチャ

ここまで紹介した特性は、個別のオブジェクトの機能的な特徴に関わるものです。テクスチャはそれらと異なり、装飾的な特徴です。しかし、主に見た目の美しさのために使われるテクスチャは、視覚的階層にも影響を与えます。テクスチャがつくり出す視覚的な興味深さは、ユーザーの目をレイアウトの特定の部分に向けさせる効果があります。

視覚的な整理に関する原則

さて、ビジュアル要素の視覚的な特性を理解したら、次のステップとして、どのようにそれらが一体となり階層を成立させるのかを考えてみましょう。

20 世紀初頭、ドイツの心理学者ウォルフガング・ケーラー、マックス・ヴェルトハイマー、クルト・コフカは、人が世界をどのように認識しているかを研究して、「全体は部分の総和にあらず」というゲシュタルト理論を発表しました。視覚的階層の概念は、このゲシュタルト心理学理論が提唱する、人間の脳は「個々の要素、形状、形態を、一貫性のある組織化された全体として構造化する」とする考えに基づいています。

すなわち、ユーザーは、UI の個々の要素を、頭の中でひとつつのまとまった組織として捉えているという考え方です。いくつかのデザインファクターは、ユーザーに UI の構造化を行うヒントを伝えます。これから、この件に関連するいくつかの原則を紹介します。

近接

「近接」は、近くに配置された要素同士には関連性があるように見えるという原則です。いくつかの要素を近くに配置すると、それらのオブジェクトが関連していることを明確に伝えられます。近接の原則は、コンテンツを素早くスキャンして理解できるようにするためにも効果的です。下図の右列のように、近くに配置されたオブジェクトの間にはつながりが生まれます。

類似

「類似」の原則は、視覚的に近い外観を持つ要素同士が関連しているように見えるというものです。

また、人の脳が類似のオブジェクトをグループ化する傾向を持つために、異質なオブジェクトに気づくことも知られています。例外的なオブジェクトは、グループの他の要素と異なることで、見た人の注意を自然に引きつけます。

繰り返し

「繰り返し」は、ゲシュタルト理論の「共通領域の法則」に基づくものです。この法則によると、明確に定義された境界を持つ領域を共有している要素は、グループとして知覚される傾向があります。

視覚的な要素の繰り返しは、統一感を生み、認知を向上させます。例えば、この記事のページレイアウトでは、すべての本文の段落には同じフォントとスタイルが与えられ、記事に明確な統一感が生まれています。視覚的に繰り返しのあるデザインは、ページをスキャンしやすくする効果もあります。

書体のウエイトと組み合わせ

デザインの階層について考えるなら、タイポグラフィが果たす役割に触れないわけにはいきません。デジタル製品が提供する情報の大半は、テキストにより記述されたコンテンツです。すなわち、レイアウトを明確で理解しやすくするテキストの階層化は必要不可欠です。

書体の階層は、異なるサイズ、ウエイト、そして間隔を使用して構築します。多くの場合、2 つ以下のフォントファミリーを使用するだけで、効果的な書体の階層をつくれます。

また、テキストの階層構造をサポートし、コンテンツの可読性を高めるために、ホワイトスペースも利用できます。段落間、そして左右の余白の使い方次第で、理解度が 20% 近く向上することが確認されています。十分なスペースを確保したコンテンツは、読者の集中を助け、持ち帰ってほしい情報の把握を容易にします。

スキャニングパターン

新しい Web サイトにアクセスした訪問者がとる一般的な行動は、Web ページをスキャンして、さらに読み続けたいかどうかを判断するというものです。ユーザーがスキャンする際の目線の動きは、「スキャニングパターン」と呼ばれ、デザイン階層のデザインに影響します。スキャニングパターンには、F 字型と Z 字型と呼ばれる 2 つの典型的なものがあります。どちらも、印刷物でもデジタルページでも有効です。

F 字型と Z 字型は、ページをスキャンする際に、視線がなぞる形から名づけられました。前者の場合は、スキャニングパターンを追跡すると、F の文字の形のヒートマップが生成されます。同様に、後者では、Z という文字を目で書くようにページがスキャンされます。

効果的な視覚的階層を作成して、見てほしい情報へと誘導し、求めている情報がこのページにあることを素早く証明するために、パターンに合わせた視覚的階層の最適化は有効です。

F 字型パターン

F 字型パターンでは、まずページ上部を左から右にスキャンして、次にテキストを数行読み、最後にページ左側を縦にスキャンして、面白そうな情報の手がかりを探します。何か手がかりが見つかれば、そこから本文を読み始めます。記事やブログ記事など、テキストの多いページでは、このパターンが有効な場合が多くあります。

F 字型パターンを活用する手段には、以下のようなものがあります。

• 最も重要な情報を太字にし、ページの左側に配置する
• 単調なテキストブロックを分割し、見出しや箇条書きを使用する
• コピーにビジュアルを加える

Z 字型パターン

Z 字型パターンでは、ページの左上から右上（重要な情報が見つかりがちな場所）をスキャンし、コンテンツを左下へ（斜めに）横切り、そこからページの右下へと移動します。このパターンは、コンテンツが比較的少ないページに適しています（たとえば、製品紹介用のランディングページ）。Z 字型のパターンでは、最も重要な情報を四隅に配置する選択肢が示唆されます。

おわりに

根本的に、デザイナーにとってのテーマは効果的なコミュニケーションです。今の世界では、平均的な集中力の持続時間はたった数秒です。つまり、必要な情報や行動が、一目見ただけで伝わることには大きな意味があります。適切な視覚的階層は、この目的の達成のために欠かせません。そして、目に優しい方法で見せるために、コンテンツを視覚的に関連性のある情報の塊に分けて提示することはデザイナーの役割です。

機能的な要素も、装飾的な要素も、戦略を持って配置して、優れたユーザビリティを兼ね備えた適切なスキャンの流れを実現できるよう心掛けましょう。

この記事は Visual Hierarchy in UX Design（著者: Nick Babich）の抄訳です