ギリシャの壺からイタリアのチャペルにいたるまで、芸術の黄金時代は私たちの美というものに対する理解を形成してきました。そして視標追跡の背後にある比較的最近誕生したテクノロジーは、私たちが視覚的に世界をどのように捉えているかという問題に、新たな原動力を与えています。より端的に言えば、このような素晴らしい科学技術は効果的であり、かつ美学的観点から見ても素晴らしいウェブサイトへの理解や設計をより良いものにするサポートをしてくれています。
視覚芸術としてのウェブデザインは従来の芸術形態と同様、多くの規則に従って行われています。今回の記事では、視覚的な組織の重要性の概要を手短に解説し、その後視標追跡によって発見されたものが、どのようにしてウェブインターフェースのレイアウトの向上させることができるのかについて解説していきます。
視覚的な組織の生成
ウェブサイトの外観がウェブサイトの成功に影響していることはもはや周知の事実ですが、その理由を正確に指摘することは重要です。Yahoo!のプロダクトデザイン部門部長を務めているLuke Wroblewski氏は、自身の著作である「視覚的階層とのコミュニケーション」という論文の中で、ウェブインターフェースの視覚的表現は以下の要素に対して必要不可欠であると説明しています。
ガイダンス
優れたインターフェースは、ユーザーに威圧を感じさせることなく１つの動作から次の動作へと誘導することができます。皆さんがUberの事業遂行に対してどのような考えを持っているかにかかわらず、Uberは驚くほど円滑に操作でき、かつしっかりと構築されているウェブサイトの例であるということは疑いの余地がありません。顧客価値がスクロールの上部に表示されており、その後に異なる自動車オプションについて知ることができる遊び心満載のスライダーバーが続き、そして顧客の地域や都市で自動車を探すという筋の通った次のステップへと進みます。
コミュニケーション
それぞれ異なる情報を合致させることで、UIはユーザーの考えの中につながりを生成し、何も言わなくてもメッセージを伝えることができるのです。人気の高いデザインウェブサイトであるAbduzeedoを見てみましょう。幅広い種類のカテゴリーが上部に、注目のコンテンツが中央に、そして詳細なカテゴリーがフッターに表示されています。
心理的な影響を与える
自社のウェブサイトが単なる機械化されたツールだと誤解しないようにしてください。ウェブサイトには心理的なつながりを生じさせる潜在能力があり、もし皆さんのウェブサイトがその能力を発揮しなければ、競合他社のサイトでそれを行われてしまうでしょう。実際に、肯定的な心理的反応を生み出せれば、人々は皆さんのインターフェースの欠点を許容してくれる可能性がより高まるのです。MailChimpは利便性が高く、快活で使用することが楽しいと感じるようなインターフェースをもつサイトの好例です。
予測可能な人間の眼
時折、皆さんの眼は自分自身の考えを持っているのではないかと思われる時があります。何年にもわたる進化によって、道を歩く誰かの色気溢れる歩き方や、蜂蜜の宣伝をしている可愛らしいアニメーションのクマなど、私たちは自分が重要だと思う対象物や動作を直感的に見つけることができるのです。重要なものに対して私たちが決める相対的な比重は人によって様々ですが、普遍であるものの１つは、私たちの眼の動きに関するメカニズムです。大規模な観点から見ると、大部分の人々はウェブページを閲覧する際に同じような傾向を持っています。
このような傾向の中でも、今回は２つの傾向について詳細を議論していきます。視覚的法則に関する記事において、99DesignsのデザインライターであるAlex Bigman氏は、ウェブサイトのレイアウトを設計する際に、左から右へ読む文化圏の人にとって、いかにこれらの２つのパターンが最も一般的であり、かつ有益であるかを示しています。
まず、F型パターンは主にテキストに使用されています（しかし、その他の目的にも適用することができます）。次に、Z型パターンはあらゆる視覚的レイアウトに使用することができます。以下に、それぞれのパターンの長所と短所について説明していきます。
F型パターン
F型パターンは、ブログやニュース、記事などのテキストの分量が多いページにおいて生じる視覚的傾向です。
単語の集まりに遭遇した時、多くの読者はまずテキストの左側を垂直方向にざっと目を通し、通常当該段落の最初の文におけるキーワードや興味深いポイントなどを探します。最終的に読者は自分の好きなものを探し当て、通常通り水平方向に従って読み始めます。最終的に、この動作はFまたはEの文字を描くような動きをしているのです。
Nielson Norman Groupに在籍しているJakob Nielson氏は、232名のユーザーに何千ものウェブサイトを走査してもらうというリーダビリティーに関する研究を実施しました。この研究から、彼は自分がF型パターンの実用例であると考える次の項目を記録しました。
・ユーザーはテキストの全ての単語をほとんど読みません。
・最初の２段落は最も重要であり、フックを含ませるべきです。
・段落や小見出し、箇条書きの文は心を惹きつけるようなキーワードから書き始めます。
左上隅は、左から右に読み進める文化を持っている全ての人々が読み始める場所であるので、常に最も重要な場所です。ユーザーは通常見出しを超えて水平方向に読み進めるので、ナビゲーションバーおよびCTAを設置する絶好の場所なのです。その後ユーザーは興味があるコンテンツに出会うまで、左側を垂直方向にざっと目を通していきます。最後に、ユーザーはページの右側でコンテンツを読み終わるので、ここはCTAや広告を設置する絶好の場所となります。サイドバーがコンテンツよりも目立つようにならないようにしましょう。
しかしながら、F型パターンはテンプレートではありません。実践的なものではなく、どちらかといえば大部分のユーザーの傾向から作り上げられた抑制力のないガイドラインのようなものです。F型パターンは、F字の上の段が終了した後はその効力を失ってしまうので、上記のことを頭に入れておいてください。
Kickstarterは注目のプロジェクトを表示し、そして最初の500ピクセルの画像の後、サイトが視覚的につまらないものにならないようにするために、カード型のレイアウトを採用しています。
一方、iZettleは自社のホームページ上で、F型パターンに対してより従来型のアプローチを採用しています。 しかし、iZettleは大きな背景画像上に主要なコピー（「iZettleとともにあなたのビジネスを成長させる」）やCTAを重ねて配置することによって、型にはまったような外見を避けようと努めています。私たちはこれを、このような閲覧パターンをインターフェースのレイアウトに適用するための最小限度であると考えています。
Z型パターン
さらに、Z型パターンは最も簡潔かつ普遍的なパターンであり、テキストを基盤としたあらゆるウェブページに主に使用されています。読者はまず上部を水平方向にざっと目を通し、すぐに下方向に進んで左側に戻り、再び水平方向に読み進め、これを繰り返して一番下の文まで読み進めます。
Z型パターンは階層やブランディング、CTAなどのウェブサイトの主要な要件に対応しているので、多方面に融通が利くZ型パターンをきちんと理解することが大切です。その美は簡潔さの中にあり、CTAに重点を置いているサイトにとって理想的なレイアウトとなっています。しかしながら、より複雑な、もしくは並外れた内容となっているコンテンツにとっては、Z型パターンは簡潔すぎるかもしれません。
Z型パターンが自社のページに適しているかどうか検討してみませんか？ Z型パターンの利点を最大限活用するための実践方法をいくつかご紹介します。
・背景 — 背景は、背景としてあるべき場所に留めておくようにしましょう。読者の邪魔はしたくないですよね。
・ポイント#１ — 出発点として、ここが一般的に自社のロゴを配置したいと考える場所です。
・ポイント#２ — 主要なCTAは後の方に配置するべきですが、ここは副次的なCTAに最適な場所なので、横長のナビゲーションバーを挿入すると良いでしょう。（優れたグラフィックまたは画像のスライダーバーは、ページの上部と下部を区別し、読者にZ型パターンの予測軌道に留まるよう促すのに役立ちます。）
・ポイント#３ — ここは他のリンクに対する読者の注意を惹きつけたり、最終目的であるポイント#４へユーザーの視界を導くのに最適な場所です。
・ポイント#４— 「完了ライン」として、ここは主要となるCTAを設置する絶好の場所です。
皆さんが行いたいと考える最初のことは、自社のために自社のページにおける要素の優先順位を決め、そうすることで最も重要な要素と重要でない要素を知ることだと思います。そこから、それらの要素を適切な「注目の場所」に配置するという非常に簡単なことなのです。
さらに、Z型パターンはページ全体において繰り返し使用したり、拡張したりすることができます。EvernoteがどのようにCTAやセールスポイントを通して下方向へZ字型に進んでいるかを見てみてください。
DropBoxは背景画像を排除することで、このZ字型パターンに視覚的により簡潔なアプローチを適用しています。代わりに、皆さんの眼がページの下のほうへと進むにつれて「よりくわしく」というCTAがジグザグ型のパターンの各セクションを繋ぐのに役立っているので、より高い機能性がレイアウトに取り込まれているのです。さらにこれは、全てのコピーを始めに読むことなく次の関連ページをクリックするよう知らせるのに役立っています。
先見における視覚
優れたインターフェースデザインは、思考速度に合わせて読者をガイドする見えない手のようでなければなりません。F型パターン及びZ型パターンの傾向からわかる重要なことは、皆さんが自分にとって最も重要なコンテンツを、読者に強制的に閲覧させるのではなく、読者が自然な流れでそのコンテンツを「偶然発見」するような場所に配置するということです。
精巧性というものは、あらゆるページレイアウトにとって素晴らしいメリットとなり、またこれらのパターンは読者に何かを提案するということと、何かを読者に押し付けることの違いを明確にすることができます。
