UXデザインに欠かせない”スキャナビリティ”とは？ 可読性の高いページを作るための10のヒント

私たちは日々、とても多くの情報に囲まれて生活しています。オフラインでもオンラインでも、処理しきれないほどの情報を常に受け取っているのです。

そのような環境において、Webサイトやアプリを利用しているユーザーは、はたして情報一つひとつじっくりと読んでいるでしょうか？ ほとんどのユーザーは、ページをざっくりと流し読みすることで、必要な情報を取捨選択しています。

そこで問題になるのが、Webページのスキャナビリティ（読みやすさ）です。今回はこのスキャナビリティについて解説し、スキャナビリティを向上させるためのヒントをご紹介します。

スキャナビリティとは「読みやすさ」

Webページやスクリーンについて「スキャン」という言葉が用いられる際、それは「ざっと読む」ことを意味します。そしてスキャナビリティは、Webページなどのわかりやすさや、読みやすさ等を指します。したがって、スキャナビリティを向上させるためには、コンテンツやナビゲーション要素を、ざっと見ただけで簡単に把握できるようにしなければいけません。

ユーザーは、特にはじめて見るコンテンツにおいて、まず全体をざっと見て必要なものかどうかを判断します。その際にユーザーは、文章、画像、アニメーションなどを目に止める可能性があります。

スキャンの歴史

スキャンは新しい概念ではありません。昔から人は、新聞などを読む際に、まず全体をざっと見てから自分にとって必要な記事を選んで読んできました。

しかし、Webページなどのスクリーンを見ることは紙の情報を読むより疲れるため、Webページのユーザーはより情報を取捨選択する傾向があります。

スキャナビリティの重要性

約10年前、ユーザビリティ研究の第一人者であるヤコブ・ニールセンは、「人びとはWebページをどのように読むのか」という問いに対し「人びとはそもそも、ほとんどの場合Webページをきちんと読んでいません。その代わりにページをスキャンし、個々の単語や文章を選んで読んでいます」と答えました。

10年経った今でも、その状況はほとんど変わっていません。

大事なのは「ユーザーがWebページを見たときに、彼らの目をひくことができるかどうか」ということです。もしスキャナビリティが低ければ、ユーザーがページを離れるリスクは高くなります。

Webサイトの内容がなんであれ、スキャナビリティがユーザーフレンドリーなWebサイトの重要な条件であることに変わりはありません。

スキャナビリティをチェックする2つのポイント

スキャナビリティをチェックするために、自分がはじめてWebページを訪れるユーザーだと仮定して、以下の2つの質問に答えてみましょう。

1. あなたがWebサイトを開いてから最初の2,3分で目にしたものは、あなたがターゲットとなるユーザーに見せたいコンテンツと一致していますか？
2. あなたはWebサイトを開いて最初の1, 2分で、Webページの内容が理解できましたか？

もし上記の2つの質問に自信を持って「イエス」と答えられないなら、スキャナビリティを改善するいい機会かもしれません。

スキャナビリティを向上させると、以下のようなメリットがあります。

• ユーザーがよりスピーディーにタスクを完了し、目標を達成できる
• ユーザーが必要なコンテンツを検索する際、ミスが少なくなる
• ユーザーがWebサイトの構造とナビゲーションをよりはやく理解できる
• 直帰率が低下する
• より多くのユーザーがWebページにとどまってくれる
• Webサイトの信頼性が上昇する
• SEOの向上に繋がる

スキャニングパターンは3種類

デザイナーにとって重要なのは、ユーザーがWebページを訪れた際に、どのようにスキャンをしているか把握することです。これを把握できれば、コンテンツの優先順位を決めて、ユーザーに必要な情報を最も目につく場所に配置できます。

今回はニールセン・ノーマン・グループによるユーザーリサーチを活用します。

ユーザーの視線を追跡するアイトラッキングのデータによって、Webサイトのスキャンにはいくつかの典型的なモデルがあることが明らかになりました。

1. Zパターン

Zパターンは、ビジュアルヒエラルキー（視覚的な面から情報に強弱をつけること）が重視されていないWebサイトにおける典型的なスキャン方法です。アルファベットのZのように、左上、右上、左下、右下の順に視線が移動します。

2. ジグザグパターン

ジグザグパターンは、コンテンツが複数にわかれているWebページでよく見られます。左から右にコンテンツを見ながら、徐々に下に移動します。

3. Fパターン

最後のひとつであるFパターンはニールセン・ノーマン・グループの調査によって提示されました。

ユーザーはまず、コンテンツの上部を水平に見ます。この動きがアルファベットのFの一番上の横線にあたります。

次に、ユーザーはページをすこし下に移動し、最初よりも短くコンテンツを水平に見ます。この動きがアルファベットのFの二番目の横線にあたります。

最後に、ユーザーはコンテンツの左側を垂直方向に見ます。この動きがFの縦線にあたります。ユーザーの目の動きが遅いと、ヒートマップ上では縞模様のように見えることもあります。

スキャナビリティ向上のための10のヒント

1. コンテンツのヒエラルキーを明確に

ビジュアルヒエラルキーによってコンテンツを整理し、ユーザーに各コンテンツの重要度を伝えましょう。ビジュアルヒエラルキーが整っていれば、ユーザーはまずキーコンテンツを目にするはずです。

ブログ記事を例として考えてみましょう。記事には大見出しや小見出しがあり、本文が続きます。ユーザーは大見出しと小見出しをスキャンすることにより、すべての文章を読むことなく、その記事が自分に必要なものか判断できます。もし長い文章が見出しなしに書かれていたら、内容を把握しづらいでしょう。

ビジュアルヒエラルキーを構築する際には、以下のような要素を活用しましょう。

• 大きさ
• 色
• コントラスト
• 余白
• ネガティブスペース
• 反復

これらを活用することによって、調和のとれたスキャナブルなレイアウトに仕立てられます。

2. コアナビゲーションはヘッダーに

▲出典：The Gourmet

先述のスキャニングパターンからも明らかなように、多くの場合ユーザーはまず上部のエリアを水平に見ます。つまり、ヘッダーは他のエリアと比べてユーザーの注目度が高い場所なのです。UI/UXデザイナーだけでなく、コンテンツマネージャーやマーケティングスペシャリストにも、ヘッダーのデザインは重要であると認識されています。

もちろん、ヘッダーに多くの情報を集めればいいわけではありません。ヘッダーだけに多くの情報を集めてしまうと、レイアウトが成立しなくなってしまいます。コアターゲットを分析し、Webサイトの背後にあるビジネスの目標を定めて、本当に必要な情報やナビゲーションのみをヘッダーに置きましょう。

たとえば大規模なECサイトの場合、重要な機能のうちのひとつとして検索機能があります。検索機能は、ユーザーの目につく、使いやすい場所になければいけません。小規模なWebサイトでは検索機能が必要ない場合もありますが、ポートフォリオへのリンク等はわかりやすい場所にあったほうがよいでしょう。

3. ネガティブスペースのバランスを適切に

ネガティブスペースまたはホワイトスペースは、レイアウト内の要素のまわりや、要素同士のあいだ、または要素の中にできる余白を指します。適切なネガティブスペースによってユーザーは目を休めることができ、視覚的なパフォーマンスが向上します。

WebサイトやモバイルアプリのUIデザインでは、適切なネガティブスペースがナビゲート性の高いデザインの鍵になります。目や脳を休ませてくれるネガティブスペースがないと、ユーザーは必要な情報を見逃してしまうかもしれません。小さなネガティブスペースをうまく活用し、よりスキャナビリティの高いデザインにしましょう。

4. CTAは特に見やすく

▲出典：Vinny’s Bakery

Webサイトの多くは、ユーザーの特定の行動を目的に作られています。「商品の購入」や「サービスの申し込み」などがその例です。

行動のために必要なCTA（コール・トゥ・アクションの略で、ボタン形式であることが多い）は、ユーザーがすぐに目にする場所に配置しましょう。どのようなデザインでも、CTA要素がすぐに目につくならOKです。

たとえば上の画像はベーカリーのWebサイトですが、「Add」というCTAボタンが他のさまざまな要素に埋もれることなく、わかりやすく表示されています。

5. コンテンツの可読性をテストしよう

可読性には「リーダビリティ」と「レジビリティ」という2つの概念があります。

「リーダビリティ」は単語や文章をどれだけ容易に読めるかを指し、「レジビリティ」は特定の書体の文字をどれだけ素早く直感的に区別できるかを指します。

文章を多く用いるWebサイトについては、特にこの2つに注意する必要があります。背景の色や見出しのまわりのスペース、フォントの種類や組み合わせなどは、すべて可読性に影響します。

これらを解決するために、デザイナーはタイポグラフィのルールが守られているかどうか、選択したフォントがビジュアルヒエラルキーとリーダビリティをサポートしているかどうかに気を配りましょう。ユーザーテストを活用し、ユーザーが文章をどれだけ迅速かつ容易に認識できるかを確認するのがおすすめです。

6. 単語よりも「数字」

ニールセン・ノーマン・グループのアイトラッキングに関する研究によると、Webページをスキャンする際、単語よりも数字がユーザーの目をひくということが明らかになりました。

ユーザーは、統計、サイズ、距離データなどの重要な情報と数字を潜在的に関連づけてとらえます。そのため、文章では単語よりも数字がユーザーの注目を集めるのです。

また、算用数字を用いることによって、コンテンツをよりコンパクトにし、スキャンに費やす時間を節約できます。

7. ひとつの話題はひとつの段落におさめよう

▲出典：Bjorn Design Studio

スキャナビリティの観点から考えると、見出しを長くするのは避けたほうが無難です。

短い文章はスキャンしやすいだけでなく、情報が必要ない場合にはすぐスキップできます。ひとつの話題はひとつの段落にまとめ、新しい話題について書く場合は段落を分けましょう。

8. 番号付きリストと箇条書きリストを活用しよう

文章をよりスキャナブルにする方法のひとつが、数字や箇条書きのリストを活用することです。こうしたリストは、データを整理する際に役立ちます。

また、リストはユーザーの目にとまるので、他の情報の中に埋もれてしまう心配もありません。

9. 大切な情報は強調しよう

古くから使われている太字／斜体／色による強調の効果は、現代でも有効です。重要なアイデアや見積もり、データなどに注目してもらうために、強調効果を活用しましょう。

また、クリック可能な文字には視覚的な特徴をつける必要があります。下線が引かれているのが一般的ですが、色を強調したり、太字にしたりするとさらに効果的です。

10. 画像やイラストを活用しよう

▲出典：Financial Service

UIデザインにおいて、メッセージを伝えたりサイトの雰囲気を作ったりする際に、画像がとても役立ちます。イラストやバナー、写真などはユーザーの目をひき、コンセプトをサポートしてくれます。

画像はビジュアルヒエラルキーを構築する上で大きな役割を果たすことに加え、イラストや写真を組み合わせることによってユーザーは情報を消化しやすくなります。言葉よりもより直感的に伝わる画像は、スキャナビリティを高めるための重要な要素のひとつです。

おわりに

Webページのスキャナビリティを改善することで、ユーザーの時間と労力を節約し、調和がとれた、価値ある魅力的なコンテンツを提供できます。

今回ご紹介した方法を活用し、さまざまな視点からWebサイトのスキャナビリティを検証してユーザーフレンドリーなデザインを目指しましょう。

（著者：Tubik Studio　翻訳：Asuka Nakajima　編集：Workship MAGAZINE編集部）