スキャンしやすさ (Scannability)

ユーザーはあなたのページを「読んでいない」——これはNielsen Norman Groupの研究が繰り返し示してきた事実です。ユーザーはページを開いた瞬間、全体をざっと「スキャン」し、自分に関係ある情報を探します。見出し・太字・リスト・画像に目が止まり、それ以外の文章は読み飛ばされます。

スキャンしやすさが崩れたUIとは、「全部読まないと何も理解できない」UIです。見出しのない長文の壁、箇条書きのない説明文、太字のない重要情報——これらはすべて、ユーザーに「最初から最後まで読め」と強いるデザインです。結果として、ユーザーは「自分に関係ある情報がここにあるかどうか」を判断できないまま離脱します。

よくある失敗は「丁寧に説明しようとして長文になる」ことです。文章が長くなるほど、ユーザーが実際に読む割合は下がります。

英語では Scannability と呼ばれ、スキャンリーディングを前提にページを設計する考え方です。可読性が「読んだときの理解しやすさ」だとすれば、Scannabilityは「読む前に、必要な情報がありそうだと見つけられるか」を扱います。

1. 原則の定義

ユーザーが全文を読まずとも、見出し・太字・リスト・余白などの視覚的な手がかりをたどるだけで、目的の情報に素早くたどり着けるよう情報を構造化する設計。

本質は「読まなくても伝わる構造を作ること」です。スキャンしやすいUIは、ユーザーが「ここに自分が求める情報がある」と確信できるまでの時間を最短にします。全文を読んでもらうことが目的ではなく、ユーザーが必要な情報を見つけることが目的です。

特にWebページでは、F字型パターンのように左上から見出しや行頭を拾う視線移動が起きやすくなります。重要語を見出し、行頭、太字、視覚的アンカーに置くことで、ユーザーの選択的注意に引っかかる構造を作れます。

2. いつ使うか（適用場面）

特に重要になるケース

• 情報量が多いページ: 記事・ヘルプドキュメント・FAQ・製品説明ページなど。ユーザーは「自分の質問への答えがここにあるか」を素早く判断したい。
• 比較・選択が必要な場面: 料金プラン・機能一覧・商品比較など。ユーザーは特定の項目（価格・機能）だけを素早く比較したい。
• モバイルファーストのUI: 画面が小さいほど、スクロールしながらスキャンする行動が顕著になる。長文は特に読まれない。
• 初めて訪れるユーザーが多い場面: 既存ユーザーは慣れで補えるが、新規ユーザーはスキャンで「このページが自分に関係あるか」を判断する。

トレードオフが起きる場面

• スキャン最適化 vs 深い理解: 見出しと箇条書きだけにすると、文脈や背景が失われ、浅い理解しか生まれない場合がある。重要な概念の説明には、ある程度の文章量が必要。
• スキャン vs SEO: 見出しタグ（H2・H3）の使い方はSEOにも影響する。スキャンしやすさとSEOの両立を意識した構造設計が必要。

3. なぜ重要か（設計判断の核）

スキャンしやすさは「読みやすさ」ではなく、「探しやすさ」の設計である。

設計判断の基準

• 「このページを初めて見るユーザーが、5秒以内に『自分が求める情報がここにあるか』を判断できるか？」→ Noなら、見出しと構造を見直す。
• 「このページの重要なキーワードが、文章を読まなくても目に入るか？」→ Noなら、太字・見出し・リストを活用する。

優先順位の考え方

• 1. 見出し（最優先）: H2・H3の見出しが、ページの構造と内容を一覧できる「目次」として機能しているか。
• 2. 太字・ハイライト: 段落内の最重要キーワードが太字で強調されているか。ただし多用すると効果が薄れる。
• 3. 箇条書き・リスト: 並列する情報は文章ではなくリストで表現されているか。

例外条件

• 小説・エッセイなど、「読む体験そのもの」が価値の場合は、スキャン最適化より文章の流れを優先する。
• 法的文書など、「全文を読んで理解することが前提」の場合は、スキャン最適化より正確性を優先する。

4. 具体の設計ルール（チェックリスト）

最低ライン（Must - これ守らないと危険）

これがないと、ユーザーは「自分に関係ある情報がここにあるか」を判断できません。

3文以上の説明文には見出しがあるか: 複数のトピックを扱うページに、各セクションを示すH2・H3見出しがついているか？見出しのない長文の壁になっていないか？
並列する情報はリスト化されているか: 「AとBとCがあります」という文章ではなく、箇条書きや番号付きリストで表現されているか？3つ以上の並列情報は必ずリスト化する。
段落が短く区切られているか: 1段落が5行以内に収まっているか？長い段落は2〜3文ごとに分割されているか？

理想ライン（Better - できると強い/プロの品質）

「読まなくても伝わる」と感じられる状態です。

重要キーワードが太字で強調されているか: 各段落の最重要な単語・フレーズが太字になっているか？ただし、1段落に太字が3箇所以上あると効果が薄れる。
F型スキャンパターンに対応しているか: 各行の先頭（左端）に重要な情報が来ているか？ユーザーは左端から右へスキャンし、次の行の左端へ移動するF型パターンで読む。
視覚的な区切りが十分か: セクション間の余白・罫線・背景色の変化が、「ここで話題が変わる」というシグナルとして機能しているか？

5. UI例

同じ内容でも、スキャンしやすさの有無で「情報が見つかるか」が大きく変わります。

改善プロセス

1. 5秒テスト: ページを5秒だけ見せて「このページは何についてのページか」「どこに〇〇の情報があるか」を答えてもらう。答えられなければスキャンしやすさが不足している。
2. 見出しの抽出: ページ内の全H2・H3見出しだけを抜き出してリストにする。それだけでページの内容が理解できるか確認する。
3. 長文の解体: 5行以上の段落を見つけたら、「見出し化できる部分」「リスト化できる部分」「太字化すべきキーワード」を探して構造化する。

6. 関連リンク

• 関連リファレンス（理論）: 認知負荷, 視覚的階層, F字型パターン
• 用語集（定義）: 可読性, スキャンリーディング, F字型パターン, 視覚的アンカー
• 関連するUI原則（横）: 視覚的階層 (Visual Hierarchy), チャンク化 (Chunking), 情報密度の最適化 (Information Density), わかる言葉で書く (Plain Language)
• 関連するUIコンポーネント: List（リスト）, Card（カード）, Badge（バッジ）, Table（テーブル / 表）, Table of Contents（目次）, Avatar（アバター）, Image / Media（画像・メディア）, Search（検索）, Filter（フィルター）, Sort（ソート）, Command Palette（コマンドパレット）, Accordion（アコーディオン）, Scroll Area（スクロールエリア）, Responsive Patterns（レスポンシブパターン）, Density Patterns（密度パターン）

7. まとめ

今日から直せる一手 今担当しているページの本文を開き、「5行以上の段落」を1つ見つけてください。その段落を「見出し＋2〜3文の短い段落」または「箇条書き」に変換しましょう。それだけでスキャンしやすさが大きく改善します。

チームに共有するなら一言 「ユーザーはページを読まない。スキャンする。だから、読まなくても伝わる構造を設計することが、デザイナーの仕事だ。」