あなたが書いた文章をすべてのユーザーが楽しみながら読んでいると想像するのは簡単です。しかし、現実を見てください。ユーザーはそんなことはしません。ただ斜め読みをするだけです。
ユーザーはWebページを読まず、斜め読みをします。何か目を引くものがあったときにだけ、斜め読みをやめて文章を読むのです。
デザイナーは、デザインしたWebページ上で人々がどこを見るかコントロールできます。ユーザーの目線を誘導するには、目がどのように情報を処理するのかを理解する必要があります。この記事では、Z字型パターンを使用したWebデザイン内に視覚的階層を生み出す理論と実践について説明します。
Z字型パターンとは何か、どのように作用し、なぜそうなるのか
読んで字のごとく、Z字型パターンのレイアウトはZの文字の形に従います。Z字型パターンのデザインは、ページを斜め読みするときに目線が左から右、上から下へと動くのに合わせて作られます。
- まず、目線は左上から右上に向かって動き、水平線を描きます
- 次に、ページの左下に向かって、対角線を描きます
- 最後に、もう一度右に戻って、２つ目の水平線を描きます
閲覧者の目がこのパターンで動くと、想像上の「Z」の形を描き出します。
Z字型レイアウトの例。イメージクレジット：Tutplus
このパターンが効果的なのは、欧米のほとんどの人が本を斜め読みするときと同じようにページを上から下、左から右へとざっと見るからです。
使用する場所
Z字型パターンの目線の動きは、テキストが多くないページで起こります。記事や検索結果などのテキストの多いページの場合には、F字型パターンを使用する方が良いです。最小限の文章と、重要な要素いくつかを備えたシンプルなデザインにおいて、Z字型は良い解決策となります。１つか２つのメイン要素を中心として構成された最小限のページやランディングページでは、ユーザーがこの自然な方法に沿えるようにZ字型パターンを実行すると良いでしょう。
シンプルさとCTA（Call to Action＝行動喚起）を最も重要な原則とするデザインプロジェクトでは、Z字型レイアウトが非常に活躍します。 Facebookのランディングページは、Z字型レイアウトの一例です
Z字型パターンの使い方
ページレイアウトのデザインを始める前に、以下の質問に対する答えを見つけることが不可欠です。
- 訪問者がページ上に訪れたとき、どの情報に気付いてほしいですか。
- どのような順序で情報を見てほしいですか。あなたは彼らに何をして欲しいですか。
Z字型レイアウトを実行するための前提は、実際には非常に単純です。Zの文字をページに取り付けます。理想的なことを言うと、一番見てもらいたい重要な情報を最初に、二番目に見てもらいたい情報はその次に見えるようにします。したがって、重要な要素を目を通す経路に沿って配置し、訪問者に対して適切な情報を適切なタイミングで提示する必要があります。
フローを作成することは不可欠です。
フローとは、ページのある部分から別の部分へ、あなたが動かしたい方向に訪問者の視線を誘導することです。ビジュアルウェイトと視線の方向を組み合わせてフローを作成します。ここでは、フローを作成する際に注意すべきベストプラクティスをいくつか示します。
- ポイント１：閲覧者の旅の出発点。ロゴにとってもっとも重要な場所です。
- ポイント２：読者に最初に見てほしいものをZの上部に配置します。目は自然とZの道筋をたどるので、補助的なCTAをページ上部の最後に配置します。ポイント２の要素にはビジュアルウェイトを加えましょう。ボタンやほかの主要な要素を明るくカラフルにしてユーザーの注意をうながし、Z字型パターンに沿って動くよう誘導します。
- ページの中央部分：ページの中央部分では、目線を次の部分に誘導しながら、ユーザーの興味を引くコンテンツで埋めることがコツです。たとえば、ヒーローのイメージをページの中央部分に配置して、上部セクションと下部セクションをわけることによって、目をZの道筋に沿って誘導することができます。
- ポイント３：ポイント３の目的は、ポイント４での最終的なCTAのためにユーザーを誘導することです。たとえば、売りたいと思っている商品を宣伝しているページの場合、潜在顧客が 「今すぐ購入する」ボタンを見る前に、購入を促すコピーなどを見せます。こうして、ポイント３を使ってユーザーの利益となる情報を提供することができます。
- ポイント４：ポイント４は最終ラインであり、ポイント３との間の行には、ユーザの視線を端に持っていくためのコンテンツが必要です。 ポイント４自体は、主要なCTAのための理想的な場所です。
おすすめのZ字型レイアウト
BasecampとEvernoteの２つのZ字型レイアウトの素晴らしい例を、以下で紹介します。
ジグザグパターン
Z字型パターンについて知っておくと便利で面白いことは、１つの大きなZの動きの代わりに、Zの動きの集まりとして見ることです。そうすることによって、Z字型パターンを少し拡大することができるのです。
以下の例でわかるように、Dropboxはユーザーに重要な製品機能をいくつか紹介し、「無料登録」のCTAボタンを繰り返すことによって、Z字型パターンを完成させています。このレイアウトにおいて「詳細」ボタンは、完全にコピーを読み込まなくても次の関連ページに移動することができる、２番目のCTAボタンの役割を果たします。
まとめ
Z字型レイアウトはいくつも利点があるため、多くのWebサイトで導入されています。Z字型パターンを利用して、ユーザーの視線が自然と流れていくところに重要な情報を配置し、目立たせるようにしましょう。伝えたい情報の優先順位を付けることを忘れないようにしてください。
※F字型レイアウトの記事もチェックしてみてください。
