視覚的階層を構成する主要な原則とその使い方

石版の時代から電子機器を手にした今日に至るまで、人間は重要なメッセージを伝えるためにデザインを使用してきました。デザインの各要素は、メッセージをより明確に伝え、ユーザー体験を向上させるように配置されているべきです。

そこで、この記事では、デザインにおける視覚的階層の原理を取り上げて、具体的なデザインの例と、ユーザー体験を最適化するためのヒントをご紹介します。

視覚的階層とは？

視覚的階層は、ユーザーに見てもらいたい順番で、デザイン要素の序列を示すために使われます。コントラスト、スケール、バランスなどの原則を使用することで、各要素を適切に配置して、最も重要な要素を目立たせることができます。

ユーザーが簡単に操作できる情報アーキテクチャを設計するために視覚的階層は重要です。適切な視覚的階層は、画面の操作に必要とされる労力を大幅に削減することができます。視覚的階層に注意を払うことは、ナビゲーションの使いづらさを取り除き、ユーザビリティを向上させる効果があります。

それでは、関連するいくつかの原則と、それらがデザインにどのように影響するのかを見てみましょう。

サイズとスケールを使って注目を集める

サイズは非常に基本的な原則です。大きさは、ある要素に他の要素よりも重要性を与えて、視線を特定の領域に集めるのに役立ちます。要素を大きくすると、注意を即座に引きつけることができますが、多くの要素を拡大しすぎたり、他の要素の重要度を低下させるような拡大をしたりしないように注意しましょう。

上の例では、オブジェクトのサイズの変化と共に、視点がどのように変わるかに注目してください。

下の画像の Simply Chocolate は、サイズとスケールを使って視覚的階層を強調した好例です。このデザイン内で最初に目を引き付けられるのは、商品が何かを説明する巨大なテキストです。これは、画面上の他の要素の重要性を損なわない方法で行われています。

色とコントラストを使って目立たせる

サイズと同様に、色は、デザイン内の要素に重要性を与えるために使うことができます。一般的に、明るい色は、低い彩度のくすんだ色よりも注意を引きます。

また、コントラストが高い色は、より重みを持ってより近くに見えるため、重要性を感じさせます。下の例では、暗い背景では各色が近くに見え、明るい背景になると遠ざかるように感じられます。

注目を集めたい要素に明るい色を一つ使用すると、その要素をデザインの序列のどこに配置しても、注意を引くことができます。

下の例では、最も重要な CTA ボタンにコントラストの強い原色が使用されています。ユーザーに何をして欲しいのかを理解しやすくすることで、より体験を快適にして、望ましいフローに沿ったコンバージョンを増やすことができます。

遠近感を活用する

ウェブサイトやアプリの多くのインターフェイスは、二次元のデザインで、平面的に見えるものがほとんどです。遠近法を活用すると、要素に距離と分離の錯覚をつくり出して、デザインの重要な部分に視線を誘導することができます。

遠近感の錯覚をつくり出す方法のひとつは、周囲の要素に対してサイズを大きくすることです。これにより、大きくした要素が近くにあるように見せられます。また、要素にパララックス効果を追加して、周りの要素とは移動する速度を変えたり、ドロップシャドウを追加したり、背景や前景のレイヤーにぼかしを加えることも、大きな効果を与えます。

下の左の例を見てみましょう。すべての要素が平面的で、奥行きが感じられません。テキストはコントラストが背景と競合するため読みづらく、テキストを画像から浮き上がらせる効果を持つドロップシャドウも使われていません。

一方、上の右の画像では、背景画像がぼかされ、テキストにはシャドウが追加されています。これにより要素の間に距離感が生まれ、より視覚的に理解しやすくなっています。

下の次の例では、複数の画像レイヤーがそれぞれ異なる速度でスクロールするように設定されて、遠近感と奥行きを与えるパララックス効果を生み出しています。

スキャンパターンの重要性

人はそれぞれ、コンテンツをスキャンするときに使う潜在的なパターンを持っています。このパターンは人によって異なり、閲覧するコンテンツの種類によっても変化します。ですが、最もよく現れる閲覧パターンは、Z パターンと F パターンの 2 つであるとされています。

どちらのスキャンパターンも、デザインするコンテンツの種類に応じて、特定の目的を達成するために利用できます。パターンに沿って流れるようにコンテンツをデザインすると、閲覧者の体験をより良いものにできます。それぞれのパターンを少し詳しく解説します。

Z パターン

Z パターンは、左上から右上へ、次に左下へ、最後に右下へという経路を辿ります。

このパターンは、テキストやコンテンツ量が多くないページに最適です。このパターンに沿って流れるようにコンテンツをデザインすれば、各要素を素早くスキャンして、各要素に与えられた重要度を把握したい閲覧者を支援できます。

下の写真の Apple のウェブページは、上部に複数のオプションが表示され、水平方向に右端までスキャンすると、斜め左下にキャッチフレーズが配置されています。そして、最後に、製品に対する CTA で締めくくられています。すべての情報が、ほとんどの人が無意識のうちにパターンをなぞるよう、明確にレイアウトされている例です。

F パターン

F パターンは、記事やブログ投稿のようなテキストの多いページでより頻繁に使用されます。このパターンでは、閲覧者は通常、左上から右上にサイトをスキャンし、次に一段降りて左から右へとスキャンします。これは欧米の多くのテキストを読む方向に類似しています。

下の写真の The Verge のようにテキストの多いコンテンツでは、シンプルな F パターンのレイアウトが、画像や見出しをスキャンしやすくします。

このパターンで流れるコンテンツをデザインする場合は、閲覧者が最初の数行は全幅をスキャンするとしても、下に移動するにつれて、自分の注意を引く何かを見つけるために高速で移動するようになり、各行の左側部分しかスキャンしないことを忘れないようにしましょう。

書体を組み合わせる

書体を適切に組み合わせると、ウェブサイトに個性を与え、特定の領域への注意を促すことができます。サイズやウェイトの異なる書体は、階層を増やし、より重要なテキスト要素を目立たせるために利用できます。

ほとんどのウェブサイトでは、異なるサイズの見出しを使用して、それぞれの見出しに関連するコンテンツの重要性を示しています。見出し 1（H1）をページの最も大きく重要な見出しに、その次は見出し 2（H2）、そして見出し 3（H3）と、重要度に応じて使うのが一般的です。これは、読者がページ内の文章をスキャンして、興味のある部分にたどり着くための指針になります。

Slack のウェブサイトは、コンテンツに重要性の順序を与えるために見出しを使っているサイトの優れた例です。バナーのセクションには、最大のヘッダーと、追加情報およびいくつかの CTA が含まれ、最も重要なエリアであることを感じさせます。バナーの下には、小さなヘッダーが配置されたいくつかのセクションがあり、その他の機能が紹介されています。

フォントサイズだけでなく、フォントのウェイトを使用して、同じサイズのフォントを重く見せたり軽く見せたりすることができます。また、軽いウェイトの大きなフォントと、重いウェイトの小さなフォントのバランスをとれば、同じような重要性であると認識させることができます。

下の例では、3 つの異なるフォントサイズがあります。一番上のフォントが一番大きいにもかかわらず、一番下のフォントがより注意を引くことに注目してください。これは、下のフォントの方がコントラストが強く、重く見えるからです。

ホワイトスペースを使ってユーザーを誘導

真っ白なカンバスを前にデザインに取りかかるときは、できるだけ多くの要素を収めるためのあらゆる方法を考えるかもしれません。しかし、使用するスペースと同じくらい、空白として残すスペースも重要であることを忘れてはなりません。

ホワイトスペースは、要素間の領域を表すデザイン用語です。要素同士をまとめたり、ある領域に重要性を持たせたりするために使うことができます。

下の quip のウェブサイトでは、左側のテキスト及び CTA と、その周りの他のすべての要素の間に大きなスペースがあります。このようにホワイトスペースを使うことで、テキストと CTA をグループ化し、同時に、デザイン全体の空間的なバランスをもたらしています。

テクスチャとトーンで注意を引く

ある要素が画面上の他の要素より小さかったり、あるいは下にあったとしても、テクスチャーやトーンを使って注目を集めることができます。

下の画像の最初の例では、タイトルのテキストがまず目に入るでしょう。しかし、二つ目の例では、下のテキストのトーンが変わったことで、2 行のテキストのバランスがとれています。最後の例では、背景の模様がタイトルを認識しにくくしているため、下のテキストの方がはっきりと見えます。

要素のバランス

ページ上で左右対称に並ぶ要素は、デザインにバランスを与え、シンプルで整理された印象をつくり出し、理解しやすくするのに役立ちます。

下の画像では、Avioc がホームページに対称性を利用して、主要な強みを強調しつつ、画像の両側で概要を提供しています。目線が集まるのは中央ですが、迷いを感じることなく、ページの周囲を見渡してさらに情報を探すことができます。

バランスや対称性の欠如を利用して、特定の要素の重要性を伝えたり、デザインをより流動的でランダムに見せることもできます。下の例では、商品がページ上にランダムにデザインされています。しかし、要素に対称性がないにもかかわらず、空間的なバランスが取れているように感じられます。散らばった商品の配置が、注意を引き付けるデザインです。

要素の整列

要素を一列に整列すると、要素が互いに関連し合っている感覚が生まれ、その周囲の他の類似コンテンツをスキャンしやすくなります。

アプリやウェブサイトでよく使われるテーブルを考えてみましょう。各列のコンテンツを整列すると、データの並びが列を連想させるため、列の境界線は必要ではありません。

要素の整列は、多くのウェブサイトのナビゲーションバーでも見られます。ロゴと他のページへのリンクが全て水平に揃って並んでいると、すぐにナビゲーションバーとして認識でき、各リンクをクリックしたときの動きを想像できます。

要素の近さ

要素同士を近くに配置することで、関連性を認識させて、さらに読み進めたり、あるいは、興味を持たせたりする動機を与えられます。

下の例では、要素が互いに近づく前は、コンテンツの関係を一目で把握することが困難です。タイトルを読んだとき、サマリーのテキストが真下にないため、それを読もうとは思わないかもしれません。要素が近くに再配置されると、コンテンツのスキャンがより簡単になるため、見た人が CTA にたどり着く可能性が高まります。

レイアウトのルール

ガイドやグリッドを使ってデザインをレイアウトすると、すべての要素をすっきりと整えて、体験の妨げにならないシンプルなパターンをつくり出せます。ガイドに沿った配置とグループ化を行うと、視線は容易に辿るべき経路を見つけられ、要素同士を密接に関連づけることができます。

黄金比のようなレイアウトのルールはこれを達成するためものです。ただし、重要な要素をこうしたルールから切り離して、視覚的階層を増やすこともできます。これには、デザインをよりダイナミックで楽しいものにする効果があります。

下の例では、ウェブサイトの要素をすっきりと見せるためにグリッドを使ってレイアウトしていますが、メルセデスをより目立たせるために、画像はグリッドレイアウトを無視しています。これにより、車両が他から飛び出て独立したように感じられる効果が生まれています。

モーションの効果的な使用

ウェブがまだ新しく、ポップアップウインドウが点滅したり、吹き出しが飛び跳ねたりして訪問者の注意を引こうとしていた頃を覚えているでしょうか？このやり方は、注意を引くという面では有効でしたが、心地よい体験を犠牲にしており、閲覧者にとっては煩わしいだけで、エンゲージメントにつながるものではありませんでした。

現在では、このようなモーションは、特定の部分に注意を促したり重要性を与えるために、もっと繊細な方法で利用されています。再び Simply Chocolate を例に挙げると、下の例では、デザインに興味を持たせるために、微妙な動きを取り入れて閲覧者の注意を引いています。

フレーバーの選択肢をスクロールすると、商品に合わせて配色が変わります。包み紙の上にカーソルを移動すると、中のチョコレートが見えるようにわずかに包みが開きます。それにより、包みを破ると、もっと詳しく知ることができそうだという印象を与えています。

おわりに

ここまで、視覚階層のさまざまな原則と例を説明してきました。どれもすぐに役立ちそうに見えるかもしれませんが、実践では、一つのデザインの中でこれらの原則のバランスをとる方法を考え出そうとすると、混乱させられるかもしれません。

そこで、ちょっとしたアドバイスを紹介しましょう。視覚的階層は、デザイン内の要素の重要度を伝えるために使われます。「これが重要だ」と考える要素が多くなるほど、視覚的階層を完璧に仕上げることが難しくなります。まずはシンプルに始めて、最も重要なものを一つに絞り、デザインを成功に導くことを考えてみてください。

ステークホルダーがすべてを「最も重要である」と判断してしまうと、視覚的階層の設計に苦労することになります。クライアントやチームメンバーが、どの要素も重要であると説明しようとしたことはありませんか？例えば、以下のようなコメントです。

• 「タイトルをもっと大きくして、最初に目に入るようにする必要がある」
• 「他よりも目立つように、これらの項目を太字にしよう」
• 「このテキストを傾けて、大きな文字して注意を引くことはできないだろうか？」
• 「ここの背景をオレンジ色にして、目立たせたらどうだろう？」

下の例は、すべてに重要性を持たせようとしているため、明確な見出しがなく、フォントサイズや書体は何種類もあり、非常に乱雑で散漫な印象のデザインになっています。

このような状況に出会ったら、一歩離れて全体を見て、このデザインのゴールは何なのかを自問することです。ターゲットは誰で、最も重要なエンゲージメントは何で、それを促進するための情報アーキテクチャはどのようなものであるべきか？これらの質問の答えを見つけることで、視覚的階層の原則を効果的に使うデザインプロセスを始めることができます。

この記事は Key Principles of Visual Hierarchy in UX Design（著者: Caleb Kingston ）の抄訳です