ブログの読者の大半は、記事を「読む」前に「見て」いる。ユーザビリティ研究の古典であるニールセンの調査では、Webページを逐語的に読む人は16%しかいない。79%は目を滑らせて拾い読みする。つまり文字がびっしり詰まった記事は、書いた時点で8割の読者を置き去りにしている。
文字の壁を崩す部品——表、グラフ、図解、引用カード、動画。これらを「リッチ要素」と呼ぶことにして、どこに何を置くべきかの設計図を公開する。都合がいいことに、この記事自体が全部品のショールームだ。
8割の読者は「歩きながら」読んでいる
拾い読みが基本である以上、記事には視線が引っかかる「起伏」が要る。100万記事超を分析したBuzzSumoの調査では、75〜100語ごとに画像がある記事はSNSでのシェアが約2倍だった(同社自身が「厳密なルールではなく目安」と注記している)。数字の細部より、方向がはっきりしている。一定間隔で視覚の休憩所を置いた記事が、最後まで読まれる。
迷ったら「データの形」で選ぶ
部品選びには判断基準がひとつあれば足りる。伝えたい情報が、どんな形をしているかだ。当サイトが全記事で使っている割り当てを、そのまま表にする。
| 部品 | 使うとき | 避けるとき |
|---|---|---|
| 表 | 3項目以上を同じ軸で比較する | 2項目以下(文章で足りる) |
| 横棒グラフ | 数の規模差を体感させたい | 出典のある実数がない(創作データは禁じ手) |
| 図解(フロー) | 流れや仕組みの説明が3文を超える | 単純な2段階の話 |
| 用語解説ボックス | 記事の鍵になる専門用語が出た初回 | 本筋と関係ない脇の用語 |
| 引用カード | 公式発表・本人の生の言葉を見せる | 文言の実在を確認できないとき |
| リンクカード | 一次情報や深掘り先を「読む価値」付きで紹介 | リンクを貼ること自体が目的化したとき |
ここで通説をひとつ訂正しておく。「表を入れるとGoogleの強調スニペットに選ばれやすい」とよく言われるが、Googleの公式ドキュメントにそのような記述はない。スニペットは自動判断で、サイト側から指定する手段もない。表は検索エンジンのためではなく、読者の比較の手間を削るために入れる——動機はそれで十分だ。
「重い埋め込み」は静かに読者を減らす
気を付けたいのは、便利な公式埋め込みの重さだ。YouTubeの標準埋め込みは、再生していなくても関連スクリプトを大量に読み込む。実測の比較がわかりやすい。
対策の定番は「ファサード」と呼ばれる手口だ。クリックされるまではサムネイルと再生ボタンだけの「見た目の偽物」を置き、押された瞬間に本物を読み込む。X(Twitter)の公式埋め込みも同様にスクリプトが重いため、当サイトでは引用文とリンクだけを自前の軽量カードで表示する方式に切り替えた。見た目は保ちつつ、読み込みはほぼゼロになる。引用する文言は必ず元ポストで実在確認し、出典リンクを付ける——軽くする代わりに、正確さの責任はこちらで持つ。
全部盛りは、何も置かないより悪い
最後に、逆側の失敗も書いておく。部品を覚えたての時期にやりがちなのが全部盛りだ。表もグラフも図解も引用も1記事に詰め込むと、読者はどこで立ち止まればいいか分からなくなる。当サイトの編集ルールでは「その記事のデータの形に合う部品だけを使う」「文字ブロックが3セクション連続したら構成を見直す」の2つで管理している。
もうひとつの禁じ手は、見栄えのための創作データだ。出典のない数字で棒グラフを描いた瞬間、その記事は読者への裏切りになる。数字が無いなら、グラフを置かない。それだけのことである。
リッチ要素は登山道のベンチ
筆者がいちばん好きな部品は、実は地味な用語解説ボックスだ。専門用語で立ち止まった読者を、たとえ話で本筋に連れ戻す。派手さはないが、読了率への効き方は体感でいちばん大きい。
リッチ要素とは、登山道に置くベンチのようなものだ。多すぎる道は歩きにくく、無い道は途中で引き返される。ちょうどいい間隔のベンチだけが、読者を頂上——読了まで連れていく。文章側の整え方は脱AI文体の技術を、AIに拾われる設計はAIに引用される書き方をどうぞ。
出典: Nielsen Norman Group「How Users Read on the Web」 / NN/g「F-Shaped Pattern of Reading」 / BuzzSumo(画像とシェアの分析) / Frontend Masters(埋め込み容量の実測) / Google検索セントラル(強調スニペット)
