スキャナビリティを高めてウェブサイトの読みやすさを改善する | アドビ UX 道場 #UXDojo

Matthew Carlson によるイラスト

これまで長年にわたり、ウェブサイトの集客を増やし維持するためのテクニックが磨かれてきました。中でも最良の戦略のひとつは、読む価値、共有する価値のあるコンテンツをつくることです。それによって、サイトへの口コミによるアクセスが増加するだけでなく、興味や熱意を持った訪問者が集まります。では、いったん読者を引き付けたとして、彼らにしばらく滞在してもらうためにできることはあるでしょうか？

そこに関わってくるのがスキャナビリティです。サイトの最も重要で意味のある情報へ辿り着きやすくすると、より良いユーザー体験になります。市場におけるシェアが、競合よりも顧客を幸福にすることで決まりがちな世界においては、優れたユーザー体験が、企業の評判や評判やビジネスの行方を左右しかねません。

そこでこの記事では、スキャナビリティの重要性、一般的なスキャンパターン、そして、スキャナビリティを高めてユーザー体験を向上させるためにできることを解説します。

スキャナビリティとは何か

スキャナビリティとは、ターゲット層にとっての本文の読みやすさと理解しやさです。もう少し UX デザインらしい定義としては、UX matters による、インターネット上で「コンテンツを読まない人が増えているという事実を補うための、書き方やフォーマットのテクニックの総体」があります。「人々が読まない」という部分を取り上げる前に、この定義のもう一つの部分である「書き方」について議論しておきましょう。

考慮すべき最も重要なものはコンテンツ、つまり言葉の並びそのものです。読者は、すぐに要点にたどり着くことを欲しています。高い教育を受けた専門家でさえも、長く引き延ばされた説明や解説を求めていないことが、研究により示されています。簡潔でスキャンしやすいコンテンツは、言いたいことを明確にし、メッセージを読者に伝え、次のステップへと導きます。

出典: Nielsen Norman Group

スキャナビリティを高めることの最大の利点は、サイトの価値をより効果的に伝えられることです。その結果、訪問者がサイトに留まるだけでなく、よりコンテンツに興味を持って関与する可能性が高まります。

なぜ読まずにスキャンするのか

サイトの HCI デザインを考えるときに、とても重要なポイントがあります。前述のとおり、インターネットでは人々はコンテンツを読みません。Nielsen Norman Group の重要な調査によると、ウェブページを一字ずつ読む人は 16% だけです。さらに、調査したユーザーの 79% は、新しいページを開いたら必ずスキャンするという結果が示されています。その理由は以下の通りです。

• コンピュータの画面を読むのは目に負担がかかります。紙で読む場合の 1/4 遅くなります。
• インターネットは、クリック、フォロー、シェアするよう人々を駆り立てるメディアです。そのため、人々は何かをしなければと感じていますが、読む行為はそこに含まれません。
• 読んだり訪問したりすべき他のサイトが常にあります。注意の持続期間は短く、人々の注意を引こうとする競合サイトは無数に存在しています。
• 人々は情報を探すために労力を費やしたいと思っていません。彼らは、他の多くのことに注意を払いながら、タスクを完了したり事実を確認しようとしているものです。

一般的なスキャンのパターン

インターネット上のサイトやページをスキャンする人々に共通するパターンの存在が、調査によって明らかになっています。こうした傾向や振る舞いに対する理解があれば、よりスキャナビリティの高いコンテンツをデザインする場面に備えられます。

F 字型

最も一般的なパターンは F 字型のスキャンパターンです。読者はまず、セクションやページの最上部を左から右へスキャンします。次に、少し下に移動して、再び左から右へスキャンします。最後に、そのセクションやページの左側を上から下へスキャンします。

斑点型

斑点型のパターンは、最初は不規則な動きに見えるかもしれません。しかし、その過程には意味があります。読者の目は、単語（または単語の塊）の間を移動します。この移動の要因となるものは、単語または単語の塊に読者の注意を引くようなスタイルが適用されているされているか、読者が達成しようとしているタスクに必要なテキストに似ている（特定の日付や住所を見つけるなど）の 2 つの可能性があります。

レイヤーケーキ型

レイヤーケーキのパターンは、まずページの見出しや小見出しに、読者の視線が集中する傾向を示しています。アイトラッキング調査によると、読者は求めている情報を見つけるまで、見出しや小見出しに注目します。関連するテキストを見つけると、読者はより深い興味を持ってより注意深く読み始めます。

このパターンは、横縞の間に空白を組み合わせた見た目で、レイヤーケーキ（生地の上にクリーム、その上に生地のように繰り返し重ねられたケーキ）に似ています。

コミット型

コミット型は、ページ上のすべての単語を読むため、スキャンとは言い難いパターンです。インターネットの大多数の読者がサイトをスキャンするとはいえ、サイトのコンテンツに強い親しみと興味を持つ読者を獲得できることもあります。このような読者は、学ぶことに対して意欲的です。読者がこうした状態になるのは、情報ソースを信頼し、ブランドに忠実で、求める情報を得る正しい場所にいると信じているときです。

ページコンテンツに多数の画像やデータが含まれて、それらが密集していたり不明確なルールで並べられている場合には、他のパターンが見られることがあります。（例：ジグザグパターン、網羅的レビュー）

コンテンツをスキャンしやすくする方法

一般的に、ウェブサイトを訪問するほとんどのユーザーは、何らかのタスクを行うことを予期しています。典型的な期待には以下のようなものがあります。

• ユーザーインターフェイスで何らかのタスクを遂行する
• 何かをするための方法を学ぶ
• 特定のトピックについてアドバイスを得る、あるいは事実を理解する

ユーザーや読者がページをスキャンして、期待しているタスクの達成に必要なものを見つけられれば、それは優れたユーザー体験と言えます。スキャンしやすいテキストについては過去数十年の長きにわたり研究されてきたため、オンラインコンテンツをデザインする際に考慮すべき UX のベストプラクティスが確立されています。これから紹介するのは、コンテンツのスキャナビリティを高めるための代表的ないくつかのベストプラクティスです。

読みやすい形式で書く

長い文章の塊を、よりスキャンしやすいセクションに分割することから始めましょう。段落ごとにひとつの考えをまとめる状態が理想です。それよりも多いと、読者の関心を失う恐れがあります。段落の最初のいくつかの単語が読者の興味を惹きつけなければ、その先にどんな素晴らしい思考が書かれていても、人々が読み進むことは期待できません。

理解しやすい視覚的階層を構築する

視覚的階層は、ページ内のスキャン、認識、理解が容易になるように、コンテンツを整理し、配置し、スタイルを設定する手段です。視覚的階層の重要な役割は、ユーザーにそれぞれのコンテンツの重要度を理解させることです。テキストに太字、斜体、ハイパーリンクなどのスタイルの違いを利用すると、強調したいコンテンツに読者の注意を向けさせられます（これは、斑点型パターンを最も効果的にします）。

以下は、視覚的階層を決定する際に考慮すべき、その他の重要な要素です。

• サイズ - 大きな要素はより注目を集めます。
• 色 - 明るい色は目立ちます。
• コントラスト - 違いが好奇心を抱かせ、明るい要素に関心が向けられます。
• 近接性 - すぐ近くにある要素同士は関連していると仮定されます。

ホワイトスペースを上手に使う

十分な余白を確保することは、読者がコピーや画像に集中できるようにするために役立ちます。狭いスペースに多くのコンテンツを詰め込み過ぎると、読者を圧倒してしまいます。

十分なスペースがなければ、ページの構成要素が正しく認識されません。したがって、ユーザーが実際に探しにきたものを見逃してしまう恐れがあります。ヘッダーとコンテンツの間、段落間、画像や動画などの視覚的な要素の前後には、十分な余白のあることを確認しましょう。

画像や動画を使用する

視覚的な要素は、雰囲気をつくったり、中心的なメッセージを伝えるのに役立ちます。視覚的階層の確立にも大いに役立ち、テキストコンテンツをより理解しやすくします。人は文字よりもビジュアルをより速く認識します。この事実は、重要な情報をより素早く読者に伝えるために利用できます。

箇条書きや番号付きリストを作成する

関連するデータや情報を整理するのに、リストは素晴らしい方法です。また、箇条書きはそれ自体が、読者の注意を引く視覚的な要素として機能します。

おわりに

読者がサイトを訪れたとき、ランディングページのすべての単語を読むことは期待できません。しかし、この記事で紹介した知識を活用すれば、スキャナビリティをサイトデザインの優先事項とすることができます。人々がコンテンツをスキャンするパターンと、サイトをスキャンしやすくするためのベストプラクティスの両方を知っていることは、優れたユーザー体験をデザインする上で有利に働きます。優れたユーザー体験は読者の満足につながり、そして、読者の満足はビジネスの成功を生み出すでしょう。

この記事は Improving Website Scannability for UX Design Success（著者: Will Fanguy）の抄訳です