【注意】サイトは読者の目線を逸らすものを最小限にする方法とコツ

サイトを改善しようとすると、たいていは何かを足す話になります。バナーを置く、関連記事を並べる、キャンペーンの告知を追従表示させる。ひとつひとつには理由があり、足した時点では誰も反対しません。ところが積み重なった結果、訪れた人が本文を読み進められない画面ができあがります。

この記事では、逆の方向の作業を扱います。読者の目線を本文から引きはがしている要素を見つけ、順番に減らしていく作業です。デザインの好みの話には踏み込まず、公開されている基準で判断できる部分と、自社で決めるほかない部分を分けて書きます。扱う範囲は、どこを見て判断するか、どの順番で外すか、外したあと何を確認するかの3点です。特別な道具や作り直しを前提とせず、いま公開されているページに対して今日から進められる内容にしています。

目線を逸らすものとは何か

人の目は、動くもの、明るいもの、色が強いものへ先に向きます。画面上でこれらが本文の近くにあると、読もうとした行から視線が外れます。外れた視線は、多くの場合そのまま画面外へ出ていきます。

問題になりやすいのは、単独では害のない要素です。動く画像1つ、追従するバナー1つであれば、読者は無視できます。困るのは、それらが同じ画面に3つ4つと並んだときです。読者は「どこを見ればよいか」を判断する作業を強いられ、その判断を放棄した時点で離脱します。

つまり、問われているのは個々の要素の良し悪しよりも、1つの画面に置かれた「目を引くもの」の総数です。減らす作業は、悪い要素を探す前に、同じ画面で競合している要素を数えるところから始まります。

よくあるノイズと、その減らし方

サイトの種類を問わず繰り返し出てくる型があります。自社のページを開きながら、当てはまるものを探してください。

ノイズの種類	読者に起きること	減らし方
自動再生する動画やスライダー	読もうとした箇所が動いて視線が外れる	停止できるようにするか、静止画へ置き換える
点滅や追従をするバナー	本文より先に目が奪われ、内容が頭に入らない	1画面に追従する要素を1つまでに絞る
色数の多い装飾	どれが重要か判断できず、読み飛ばしが起きる	強調色を1色に決め、それ以外は文字色で差をつける
本文中に並ぶ多数のリンク	読み進める前に別ページへ移動する	本文中のリンクは節ごとに1本までとする
広告や関連記事の割り込み	文脈が切れ、そこで読むのをやめる	本文の途中には置かず、節の切れ目に寄せる
スクロール中に出るポップアップ	読んでいた位置を見失う	表示の回数と条件を絞り、閉じる操作を大きくする
項目数の多いサイドバー	本文と競合し、どちらも読まれなくなる	記事ページでは表示しないか、項目を数個に絞る

この表の右列は、いずれも「置き換える」か「数を絞る」かのどちらかです。要素を完全に消す判断は後回しにして構いません。まず数を減らすだけで、画面の読みやすさは変わります。

動くものは1画面に1つまで

この中で最も影響が大きいのは、勝手に動く要素です。読者が文章を読んでいる最中に画面のどこかが動くと、視線は反射的にそちらへ向かいます。読んでいた行に戻るには、あらためて位置を探す作業が必要になり、この往復が数回続くと読者は読むこと自体をやめます。

上部で画像が切り替わる表示は、掲載したい内容が複数あるときの解決策として選ばれがちです。ただし、切り替わる前に読み終えられる読者は限られます。伝えたい内容が複数あるなら、切り替えるのではなく縦に並べて、読者が自分の速度で読める形にするほうが届きます。

強調は使うほど弱くなる

太字、色文字、囲み、マーカー。強調の手段が1ページに何種類も混ざると、どれが本当に重要なのかを読者が判断できなくなります。すべてが強調された画面は、何も強調されていない画面と同じ働きしかしません。

目安として、強調の手段は2種類までに決めます。太字と囲みの2つに絞る、といった決め方です。決めた種類以外の装飾は、見た目を整えたい場面でも使わないようにすると、ページ間の印象もそろいます。

公開された基準で判断できる部分

読みやすさの一部は、好みの問題を離れて、公開された基準として定義されています。社内で意見が割れたときに、判断の根拠として使えます。

文字と背景のコントラスト

ウェブアクセシビリティの国際的なガイドラインであるWCAG 2.1では、達成基準1.4.3において、文字と背景のコントラスト比を4.5対1以上とすることが求められています（大きな文字は3対1以上）。さらに高い水準を定めた達成基準1.4.6では、7対1以上とされています。

薄いグレーの文字を白い背景に置いた画面は、洗練されて見える一方で、この基準を下回っていることがあります。基準を下回る文字は、読める人と読めない人が分かれます。読めない人にとっては、その部分が存在しないのと同じです。

押す場所の大きさ

同じガイドラインの達成基準2.5.5では、指やマウスで押す対象の大きさを44かける44の画面上の単位以上とすることが示されています。小さなリンクが密集した画面は、押し間違いが起きます。押し間違えた読者は、意図しないページへ飛ばされ、そこで戻る操作を強いられます。

国内の規格と公的な指針

国内では、ウェブアクセシビリティの規格としてJIS X 8341-3:2016が定められています。また総務省は、国及び地方公共団体等の公的機関に向けて「みんなの公共サイト運用ガイドライン（2024年版）」を公開しており、この規格に基づく取り組みの進め方を示しています。民間の事業者に適用が義務づけられているわけではありませんが、判断の物差しとしては同じものが使えます。

目線が逸れていることをどう確かめるか

自社のサイトは、作った人ほど読みにくさに気づけません。どこに何があるかを知っているため、視線が迷う経験をしないからです。確認には、作った人以外の目か、記録された事実を使います。

初めて見る人に操作してもらう

最も手早い方法は、事業の内容を知らない人にサイトを開いてもらい、目的を1つ伝えて操作してもらうことです。「料金を調べてください」「問い合わせ先を探してください」といった課題を出し、声に出して考えながら進めてもらいます。

このとき見るのは、正解にたどり着けたかどうかより、途中で手が止まった場所です。止まった場所には、目線を迷わせる要素が置かれています。数人に試してもらうだけで、同じ場所で止まる箇所が浮かび上がります。

クリックされている場所を確かめる

アクセス解析やヒートマップの機能を使うと、実際に押されている場所と、読まれずに通過されている範囲が分かります。ここで確認したいのは2点です。置いた覚えのある導線が使われているか、そして本文の途中で読むのをやめられている位置はどこか。

読み進めが止まっている位置の直前には、たいてい何かが挟まっています。広告、関連記事の一覧、長い注意書きなど、本文の流れを切っている要素です。位置が特定できれば、外すべき対象も決まります。

印刷して眺める

画面を印刷するか、画像として保存して縮小表示すると、細部が読めなくなる代わりに、どこが目立っているかだけが残ります。縮小した状態で最初に目に入るものが、読者にとっても最初に目に入るものです。そこに本文の見出しより先に広告やバナーが来ている場合、優先順位が逆転しています。

先に上限を決めておく

個別のページを見ながら判断していくと、担当者ごとに結論が変わります。作業に入る前に、サイト全体で守る上限を決めておくと、判断が速くなります。数値は自社で決めて構いません。決めること自体に意味があります。

決める項目	決め方の考え方	決めた例
1画面で追従する要素の数	本文の面積をどこまで譲るかで決める	1つまで
強調に使う色の数	押してほしい場所を1つに定められるかで決める	1色
強調の表現の種類	読者が重要度を見分けられるかで決める	2種類まで
本文の1節あたりのリンク数	読み終える前に離脱させない範囲で決める	1本まで
上部メニューの項目数	読者が選ぶ前に読み切れる量で決める	5つまで
ページごとの主な行き先	最も達成したい行動から逆算する	1つ

右列は一例です。事業の内容や取り扱う商品の数によって、適した数は変わります。大切なのは、この表を埋めた状態で作業に入ることです。上限が決まっていれば、新しい要素を追加したい依頼が来たときにも、何を外すかという話し合いに移れます。

減らす順番

すべてを一度に変えると、何が効いたか分からなくなります。影響の大きい場所から、1つずつ手を入れます。

最初の画面から始める。訪問した人が最初に目にする範囲に、目を引く要素がいくつあるかを数えます。見出し、画像、ボタン、告知、メニュー。ここで3つ以上が同時に主張している場合、最も優先度の低いものから外します。
追従する要素を1つに絞る。スクロールしても消えない要素は、画面のどこにいても視界に入り続けます。ヘッダー、チャットの窓、下部のバナーが同時に追従している状態は避けます。
本文中の割り込みを外へ寄せる。段落と段落の間に挟まっている広告や関連記事は、節の終わりへ移動します。読者が1つの話題を読み終えた場所であれば、割り込みの影響は小さくなります。
色の役割を決める。強調に使う色を1色に決め、その色をボタンなど「押してほしい場所」だけに使います。見出しの装飾や囲みの色を同じ色にすると、押す場所が埋もれます。
メニューの項目を数える。上部のメニューに並ぶ項目が多いほど、読者は選ぶ前に読む作業を強いられます。訪問者が実際に使っている導線を確認し、使われていない項目は下の階層へ移します。

1段階変えるごとに、その状態を数週間置いて観察します。まとめて変えた場合と比べて時間はかかりますが、どの変更が効いたかを説明できる状態になります。

ナビゲーションを短くする

画面上部のメニューは、要素を減らす作業の中でも判断が難しい場所です。項目を増やすと「あれもここから行ける」という安心が生まれ、減らすと社内から反発が出ます。それでも、並んだ項目のすべてが読者にとって同じ重みを持つことはありません。

整理の手順としては、まず現在の項目を書き出し、それぞれについて「このページへ来てほしい読者は誰か」を1行で書きます。書けない項目は、社内の都合で置かれている可能性が高い項目です。次に、アクセス解析でメニュー経由の移動がどれだけあるかを確認し、ほとんど使われていない項目を下の階層へ移します。

階層を深くすること自体は問題になりません。問題になるのは、最初の画面で読者に多くの選択肢を見せて、判断を迫ることです。入口を数個に絞り、その先で細かく分岐させる構成のほうが、読者の負荷は軽くなります。

スマートフォンでは、メニューが折りたたまれて表示されます。折りたたみを開いたときに画面いっぱいに項目が並ぶ状態は、パソコンで横に並んでいるとき以上に選びにくくなります。折りたたんだ状態で確認するだけでは気づけないため、開いた状態も必ず見ておきます。

1ページに行き先は1つ

目線を逸らすものを減らす作業は、最終的に「このページで何をしてほしいか」を決める作業に行き着きます。

問い合わせ、資料の請求、電話、来店の予約、メールの登録。これらが同じページに並んでいると、読者はどれを選ぶかの判断を迫られます。判断の負荷がかかった読者は、いずれも選ばずに離れることがあります。

対処は単純で、そのページで最も達成したい行動を1つ決め、それ以外を目立たない形にします。消す必要はありません。ボタンの形をやめて文中のリンクにする、色を落とす、位置を下へ移すといった扱いで十分です。

ページの役割ごとに行き先を分けておくと、この判断は楽になります。記事のページは資料や関連記事へ、サービスの説明ページは問い合わせへ、というように役割を決めておけば、ページごとに悩む必要がなくなります。

削りすぎを防ぐ

減らす作業を進めると、必要な情報まで落としてしまうことがあります。判断の目安として、次の3つは残します。

いまどこにいるかを示すもの。ページの見出しと、サイト内での位置を示す表示です。これがないと、検索から直接たどり着いた読者が、そのページの前後関係を把握できなくなります。
次にどこへ行けるかを示すもの。行き先を1つに絞ることと、行き先を消すことは別です。読み終えた読者が進める場所は、目立たない形でも必ず残します。
誰が書いているかを示すもの。運営者の情報、連絡先、更新日です。装飾ではなく信頼の材料にあたるため、削る対象には含めません。

また、要素を外す前に、その要素が実際に使われているかを確認します。使われている導線を感覚で消すと、成果が落ちます。アクセス解析でクリックの多い場所を把握してから手をつけると、判断の精度が上がります。

スマートフォンでの見え方

画面の幅が狭いほど、要素どうしの競合は激しくなります。パソコンでは横に並んでいたものが縦に積み上がり、本文へたどり着くまでのスクロールが長くなります。

確認する順番は、まず自社のページをスマートフォンで開き、最初の画面に何が映っているかを見ます。告知のバーとメニューと画像で画面が埋まり、本文の1行目が見えていない状態は珍しくありません。次に、本文を読みながら下へ進み、読んでいる途中で視界に入ってくる要素を数えます。

狭い画面では、追従する要素が本文の面積を直接奪います。パソコンでは目立たなかった下部のバナーが、スマートフォンでは画面のかなりの範囲を占めることがあります。表示する端末ごとに、追従の可否を分けて設定するのが現実的な対処です。

社内で合意を取る

要素を減らす作業でつまずくのは、たいてい技術的な理由ではなく社内の調整です。バナーを置いた部署、告知を追加した担当者、追従表示を導入した経緯。それぞれに理由があり、外すには説明が要ります。

進めやすくなるのは、先に判断の基準を決めておく場合です。たとえば「1画面に追従する要素は1つまで」「強調色は1色」「本文の途中に割り込みを置かない」といった短い決まりを、関係者が集まる場で合意しておきます。決まりがあれば、個別の要素ごとに議論する必要がなくなり、判断は当てはめる作業になります。

合意を得やすくするには、外す代わりの置き場所も同時に示します。告知を最初の画面から外すなら、代わりに一覧ページへ集約する。追従バナーを外すなら、記事の末尾に案内を置く。情報そのものを消すのではないと分かれば、反対は小さくなります。

それでも判断が割れたときは、公開された基準に当てはめます。コントラスト比や押す場所の大きさは、好みの入る余地が小さく、確認の方法も決まっています。基準を下回っている箇所から手をつければ、変更の理由を説明しやすくなります。

よくある質問

サイドバーは必要ですか

ページの役割によります。一覧から記事を探す動きが多いサイトでは役に立ちますが、検索から個別の記事へ直接入ってくる読者が多い場合、サイドバーの項目は本文と競合します。アクセス解析でサイドバーの項目がどれだけ押されているかを確認し、ほとんど使われていないなら記事ページでは表示しない判断が取れます。

ポップアップは使ってよいですか

使い方次第です。読み始めた直後に表示されるものは、読者が内容を判断する前に邪魔をします。記事を最後まで読んだ読者に対して表示するなど、条件を絞れば成立します。表示の頻度と、閉じる操作のしやすさも合わせて設計します。

アニメーションは避けるべきですか

本文の近くで繰り返し動くものは避けます。一方で、押した結果を示す短い動きや、状態の変化を伝える動きは、読者の理解を助けます。判断の基準は、その動きが読者の操作に応じたものか、それとも勝手に始まるものかという点です。

余白を増やすと情報量が減ってしまいます

同じ画面に収まる文字の量は減りますが、読まれる量が減るとは限りません。詰まった画面では、読者はどこから読むかを決められず、結果として読まずに通過します。余白は情報を捨てる代わりに、残した情報を読ませるための配置です。どうしても収めたい内容が多い場合は、1ページに詰め込まず、テーマごとにページを分ける方法があります。