画像元：https://depositphotos.com/
今、あなたはこの文章をどのように読んでいますか？
ノートPCやスマートフォンといった、デバイスの話ではありません。どのように読んでいるのかという方法についてです。目で見た情報は、一体どのようにして脳で処理されているのでしょう？ 数年前、良く出回ったミームでは、私たちは一文字ずつ読むのではなく、文章を全体を読んでいるということを示しています。もしかしたらTwitterやチェーンメールで、以下の乱雑な文章を見たことがある方もいるかもしれません。
It deosn’t mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht the frist and lsat ltteer be at the rghit pclae. The rset can be a toatl mses and you can sitll raed it wouthit porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe.”
（日本語訳：単語中のアルファベットの並びはなんでも良いです。最初と最後の文字が合っていることだけが重要なのです。ほかの文字がどれだけ乱雑でも、問題なく読むことができます。これは人間の脳が、一文字ずつ読んでいるのではなく、全体的に読んでいるからです。）
この理由が厳密には正しくないと指摘する心理学者もいますが（もっとも、一部は正しいと認めていますが）、その概念はUXデザインに置き換えて説明できます。それは、Webサイトを読んで情報処理をする方法についてです。上記の乱雑な文章のように、私たちはインターフェイス上の細かい要素ひとつひとつを理解するわけではありません。探している情報を探すために、さまざまな構成要素をざっと見ているのです。
この基本を覚えておくことで、UXデザインとUIデザインは、柵の中の動物のようになります。つまり、羊の群れを誘導する牧羊犬のように、デザイナーはユーザーの目線を探している情報や最初（もしくは最後）に見てほしい情報に誘導しなければなりません。
ユーザーがどこに注意を向けるかをコントロールする方法はさまざまです。長年の実験や視線追跡の結果に基づく非常にテクニカルな手法もあれば、私がUX/UIデザイン企業で記事を書く前から知っていたような誰にとっても明白な手法もあります。
以下のプラクティスは、より素晴らしく魅力的なユーザー体験を実現するために、UXの初心者にも専門家にも役立つものです。
ビジュアルヒエラルキー
ユーザーの目線を誘導するもっとも直接的な方法は、意図的なビジュアルヒエラルキーを使用することです。わかりやすく言うと、インターフェイスをどのように構成し、どの要素を強調するかということです。それぞれの要素の特徴を変化させることで、ユーザーが最初にどの要素に注目するか誘導することができます。
もっともわかりやすい特徴は、サイズです。私たちの目は、まず大きい文字に引き付けられて、細かい文字は無視します。しかし、Webサイトやアプリの画面上で最初に気づくものを決定するのには、ほかにもいくつかの要因があります。
画像元：UIE
色やコントラストもよく使われる手法です。目は、自然と明るく鮮明な色に引かれます。蛍光ペンや工事現場のコーンを想像してみてください。もしデザイン的に色が派手すぎるようであれば、要素を強調するためにコントラストを利用することもできます。
反対に、色をまったく使わなくても視線を引き付けることができます。UXデザインにおける、ホワイトスペースとネガティブスペースの重要性は十分に裏付けられています。ホワイトスペースを適切に使えば、ユーザーの注意を引きつつも、読みやすいコンテンツにできるのです。
画像元：Awwwards
またコンテンツ自体ではなく、ページレイアウトや近接性、並び方などを使う手法もあります。わかりやすい例では、ドロップダウンを使ったナビゲーションバーです。画面上では、関連した情報がきちんと同じグループにまとめるべきです。
トラッキングパターン
ビジュアルヒエラルキーで使われる要素は、デジタル領域に限られているわけではないということにお気づきかもしれません。インターネットが開発されるよりもはるか昔から、新聞や雑誌などの印刷物において、同じ原理が長年使われてきました。
しかし、印刷物とデジタルインターフェイスとでは、読み方やインタラクションが異なります。つまり、サイズや色、コントラスト以外の要素もビジュアルヒエラルキーを支えているということです。こういった要素は、アナログのものと比べて新しいものであり、我々がデジタルネイティブになるにつれて広まってきたものです。
Webサイトやアプリが浸透したため、特定の情報がどこにあるかを予想できるようになりました。さらに、これによって画面上の文章を読んで処理する方法にも変化がありました。会社のロゴがどこにあるか予想できますか？ 検索バーや設定タブはどこで見つけられるでしょうか？
これらはUXデザイナーにとって見慣れた慣習で、ユーザーにとっても無意識のうちに慣れ親しんだものです。要素や慣習がすべて組み合わさることで、インターフェイスの読み方や、新しい画面が表示されたとき視線がどこを向くかを構成しています。
ユーザーのWebサイトの読み方を、アイトラッキングソフトウェアを使用して研究したあと、Nielsen Norman GroupとBrandon Jones氏は、２つの重要なトラッキングパターンがあることに確信を持ちました。その２つとは、FパターンとZパターンです。これらのパターンは、左から右へ読む言語で書かれたサイトにのみ当てはまるということに注意してください。
文章メインの画像が少ないWebサイトを処理する場合、視線はFパターンで動きコンテンツを読みます。Fパターンとは、左上の角から始まり、視線がページ上を水平方向に動いてから下へ動き、そしてこの動きを繰り返していくというものです。
下記は、文章がメインのwebサイトにおける、視線のヒートマップです。Fパターンの動きを見てみてください。
Fの形をしたwebコンテンツを読むパターン―画像元：Nielsen Norman Group
対照的に、画像が多く文章が少ないWebサイトが表示された場合、視線はZパターンで動きます。ZパターンはCNNやMSNBCのようなニュースのWebサイトのレイアウトで役立ちます。また、サインアップページやマーケティングサイトでも使われます。たとえば、Facebookのサインアップ画面は、ユーザーがZパターンで情報処理することを当てにしています。
画像元：UXPlanet
まとめ
この記事に書かれているテクニックは、ミクロとマクロ両方のレベルにおいて、レイアウトとUIを最適化するのに役立つでしょう。ひとつひとつの要素や構成をデザインする際、色やコントラスト、サイズなどのビジュアルヒエラルキーの標準的な要素を覚えておくことは必要不可欠です。
レイアウトを俯瞰して見る際は、全体像で考えてみてください。全体像とは、ユーザーがマクロなレベルにおいて、コンテンツをどのように読むかを示すトラッキングパターンです。両方のテクニックを習得することで、ユーザーの視線を完全にコントロールし、注意を引くことができます。コントロールすることで、ユーザーが探している情報へとスムーズに導くことができ、気づいてほしい（あるいは気づいてほしくない）情報を決定し、全体的により良い、さらに魅力的なユーザー体験を実現することができるのです。
