エンゲージメント率を高める！デザインの視覚的階層ルール「ビジュアルヒエラルキー」3つのコツ

ホームページを設計する際、h1・h2・h3等のヘッダータイトルを活用して段落わけし、コンテンツの情報を階層化してマークアップしていきます。しかし、コード上では正しくマークアップされていたとしても、Webデザインの見た目の部分では情報の主従関係が上手く取れておらず、ユーザーにとっては逆にわかりにくくなっている、ということも決して珍しい話ではありません。

情報の主従関係が上手くとれているか否かは、ホームページの直帰率や離脱率にも影響してきます。

パッと見て"どこに、どのような情報があるか"が整理されていないホームページは、ユーザーが目的の情報（ページ）まで到達することができず、ユーザーのサイト離脱をつながってしまう可能性を秘めています。

そこで今回は、正しく情報を整理するための重要なキーワード、デザインの視覚的な階層ルール*「ビジュアルヒエラルキー」についておさらいし、エンゲージメント率を高めるための3つのコツ*をご紹介します。

ビジュアルヒエラルキーとは？

ホームページのユーザビリティを高めるためには、ユーザーのニーズや目的を十分理解した上で、スムーズなユーザー行動を後押しするような情報デザインが必要です。デザインを行う際には提示すべき情報を厳選し、優先度をつけていくことになりますが、その際に意識したいのがビジュアルヒエラルキーです。

ビジュアルとは「視覚的」を意味する言葉ですが、ヒエラルキーはピラミッド状の「階層」のことを指します。つまり、デザインにおけるビジュアルヒエラルキーとは、*「視覚表現による情報の重みづけ」*ということになります。

ビジュアルヒエラルキーを意識する時には、デザインの取り扱いルール(デザインスキーム)をしっかりと決めておくことが非常に重要です。ただ文字の大きさや色をやみくもに変えるだけでは、デザイン性が悪くなるだけではなく、ユーザーにとっても使い勝手の悪いホームページとなってしまう危険が潜んでいます。

また、レスポンシブデザインなどで、デバイスによってレイアウトが変わるホームページの場合、デスクトップでの表示を前提に設計してからモバイル端末で表示させると、想定していたビジュアルヒエラルキーがスマートフォンでは上手く表現できていない、という結果になることもあります。
ホームページの閲覧を行うデバイスとしてモバイル端末がこれからも増えてくることを考慮すると、モバイルファースト・コンテンツファーストで、デバイスのサイズが変わっても一貫してビジュアルヒエラルキーを保つことが非常に大切です。

エンゲージメント率を高めるビジュアルヒエラルキーの3つのコツ

エンゲージメント率とは、ユーザーが積極的なアクションをおこした割合のことを指します。主にFacebookやTwitterのいいねの数など、ソーシャルメディアにおける重要や指標として活用されてきましたが、ホームページにおいても記事上のソーシャルボタンからユーザーがシェアをしたり、キャンペーンに応募したりと、ユーザーがどれくらい積極的な行動を取っているのかを可視化するために用いられることがあります。

それでは、ホームページでのエンゲージメント率を高めるためにはどうすればいいのでしょうか。

その解答の一つが、ビジュアルヒエラルキーを理解し、その特性を活用して情報を整理することです。
視覚的にも情報が整理されることでユーザーは安心してホームページを回遊してくれますし、結果的に直帰率や離脱率が下がり、エンゲージメント率の向上につながっていきます。

ここからは、エンゲージメント率を高める「ビジュアルヒエラルキーの3つのコツ」についてご説明します。

1. ユーザーのスキャニングを予測するパターンを理解する

あらゆる文化でテキストは上から下に読みます。また、日本語の縦書きやアラビア語などを除いてほとんどすべての文化では左から右に読みます。
ただ、多くのWebデザイナーはページのレイアウトを施す時にその原則の重要性に気付いていながらも、実際にはもっと難しい問題として捉えてしまいます。

ある研究によれば、ユーザーはホームページの内容を読み取ろうとする際、非常に短い間に"そのホームページがそもそも自分にとって興味があるものかどうか"を判断する、言い換えれば瞬時にスキャニングする傾向があるといいます。スキャニングのパターンには大きくわけて2パターンがあります。それが、*「Fパターン」と「Zパターン」*です。

◆Fパターン

Fパターンは、テキストがたくさん詰まった記事やブログ記事など、従来型のWebデザインの多くに当てはまるパターンです。

ユーザーは左側を軸にして下側に視線を落としながら左寄りのヘッダーテキストで面白そうな話題を探し、いいものが見つかれば右側に視線を動かしてコンテンツを読み取り始めます。結果的にユーザーがスキャニングする際の視線が「F」の形になるので、「Fパターン」と呼びます(「E」の形という人もいますが、今では一般的に「F」であると言われています)。

ビジュアルヒエラルキーを考える際、どのようなことが言えるのでしょうか。
まず、テキスト情報が多いホームページをデザインする際には、重要な情報を左寄せにして、太字で短いインパクトのある見出しを使います。また、箇条書きする際には「バレットポイント（箇条書きを示す先頭の点）」を付け、段落同士の余白をあけて情報のまとまりをつくります。当前のことのように見えますが、このように情報を整理するのは、ユーザーのスキャニングパターンも一つの理由になっているのですね。

◆Zパターン

▲ 先日リニューアルされたばかりのAirbnbのホームページ

Zパターンは、ファーストビューで大きなヒーロー画像が使われているサイトなど、情報が必ずしも段落ごとで表現されていないホームページで多く当てはまるパターンです。

ユーザーはまず重要な情報がありそうなページトップをスキャンして、今度は右上から左下に視線を落とします。そして、おなじく左下を平行にさらりとスキャニングします。

Webデザイナーは意識的にも無意識的にも、こうしたユーザーの行動特性を考えてデザインを行います。つまり、ロゴは左上に、その横にナビゲーションメニューを配置し、ページの一番下段にあたる場所にフッターメニューを置くデザインです。

2. 余白とテクスチャーを意識する

注意を引くために別の方法をとるのであれば、息継ぎができるくらいに十分な*「余白」*をとってあげることです。
例えば、ボタンの周りに十分な余白が残っていたり、段落の行間をしっかりととることができていれば、それだけ読者にとって見やすく使いやすいホームページとなります。

余白を効果的に活用している一番のお手本は、Apple製品のホームページです。MacBookのページでは、製品名とキャッチコピー、そして製品画像を配置し、周りの余白をしっかりと大胆に確保しています。

そしてもう一つ、ビジュアルヒエラルキーに関して触れておきたいキーワードが、*「テクスチャー」*です。ここでいうテクスチャーというのは、表面的な質感のことではありません。ビジュアルヒエラルキーにおける「テクスチャー」とは、余白同士や余白とテキスト、そのほかの要素の組み合わせのことを言っています。

例えば、次の図を見て見ましょう。左の画像では、「TRAVEL」という単語は「TOKYO」よりも重要度の階層が上です。「TRAVEL」のほうが、位置も高く、大きく太いからです。中央の画像では、2つの単語の関係はだいたい同じくらいになりました。色のついた枠で囲むことで、「TOKYO」の文字を強調したからです。右の画像では、スプレーは「TRAVEL」にはかかっていますが、「TOKYO」にはかかっていません。その結果、階層が逆転し、「TOKYO」のほうに意味の比重が置かれるようになりました。

一般的に、上の位置にある言葉や太くて大きな言葉のほうが意味の階層が高くなる傾向にありますが、絶対にそうかというと、いつでも当てはまるわけではないことが理解できたと思います。デザインは相対的なものなので、ある要素の階層(重要性)は、周りの要素との関係によって決められてしまうのです。

3. 色調の対比を適切に使う

大きさや位置のほかに、ビジュアルヒエラルキーを考える上である要素を他の要素と対比させるためのコツがあります。それは、明るめの色はグレースケールや色相の低い色(ミュートカラー)よりも目立つ、という原則を使ったデザインにする、ということです。もっと端的に言えば、目立たせたいものは明るく、それ以外は暗くする、ということです。

一般的に脳は、明るい色は「近く」に、暗い色は「遠くに」あるような錯覚を起こします。もちろん、近くにあるものは遠くのものより重要度の階層が上がります。

SN Design Architectsのホームページでは、マウスオーバーしたグリッドの写真がハイライトされ、手前に映し出されているような感じがします。「Architects "建築"」「Design "デザインとは"」といったブロックは暗く、全体的に後ろに引いているようなイメージを持ちます。

また、Tokyo Mild Foundationのホームページでは、周りの写真は黒い半透明のオーバーレイがかかっており、カーソルを合わせた部分だけがフルカラーでハイライト表示されます。ハイライト表示された部分が強調され、そのほかは後ろにあるかのような感覚になります。

グリッドデザインでは、周りのブロックとの対比であるブロックを強調させますが、色調の対比はこれだけではありません。Abedonego Coffee Roasterのホームページでは、全面に敷かれたヒーロービデオの色調を落として、白くて大きなロゴを中心に堂々と配置しています。これにより、背景動画でイメージを喚起させながらも、重要度の階層はロゴのほうが上になります。

このように、目立たせたいものを明るくすることで、重要度の情報が整理され、ユーザーにとって見やすく一瞬でわかりやすいホームページが完成します。位置や大きさだけでなく、色調についても意識してみるとよいでしょう。