今回のテーマは、人の集中力とWebの第一印象です。「人の集中力は8秒」という説に、すべての人・場面へ当てはまる科学的な根拠はありません。意識したいのは秒数ではなく、開いた直後に「これは自分に関係のあるページか」を読み手が判断できるかどうかだ、というところから見ていきます。
調べものがあってページを開く。ざっと眺めて、違うと思えばすぐ戻る——そんな経験はありませんか。このとき私たちは、書いてあることを読み終えてから決めているわけではありません。見出しの文言、写真の主題、ボタンのラベル——目に入ったいくつかの手がかりだけで、読む価値があるかを先に決めてしまっています。私たちサンアンドムーンがファーストビュー設計の出発点を「読む理由を先に渡すこと」に置くのは、訪問者の集中力を長く保たせる工夫よりも、判断に必要な材料を早く手渡すほうが、結果として最後まで読まれると考えているからです。
この記事の要点
- 「集中力は8秒」は普遍的な測定値ではない
- Webページの見た目の第一印象は、ごく短時間でも形成される
- ファーストビューでは「誰に・何を・どう良くするか」を先に伝える
- 画像や動きは、内容の理解と操作を助ける場合にだけ使う
「8秒」という数字——一つの秒数では言い表せない
人の集中力は、一つの秒数で言い表せるものではありません。注意がどれだけ続くかは、作業の目的、内容への関心、難しさ、まわりの刺激によって変わります。好きな動画であれば1時間でも見ていられる人が、探している情報の見当たらないページからは数秒で離れていく。これは「集中力が8秒で切れた」のではなく、読み進める理由が見つからなかった結果です。同じ人が、同じ日のうちに、まったく違う振る舞いをしています。
一方で、見た目の印象がごく短時間で決まることは研究で確かめられています。Lindgaardら（2006）の研究は、Webページを50ミリ秒だけ見せた場合と500ミリ秒見せた場合とで、視覚的な魅力の評価に高い相関があったと報告しました。ただし、ここから分かるのは評価の速さであって、「8秒以内に全部を理解させなければならない」という話ではありません。実はこれ、注意がどれだけ続くかという話ですらないのです。測られていたのは、内容を読み始める前に働く印象のほうでした。
つまり、Webサイトが相手にしているのは秒数ではなく、判断の順序です。読み手は「自分に関係があるか」を先に決め、そのあとで初めて中身を読み始めます。
最初の画面が答えるもの——誰に、何を、次に何を
ファーストビューが答えるべきことは、三つに絞れます。誰のためのサービスなのか、何が得られるのか、次に何をすればよいのか——この三つが読み取れれば、続きを見る理由が生まれます。
たとえばWeb制作会社のトップページで、抽象的なコピーと雰囲気のある写真だけが置かれていたとします。美しくはあっても、訪れた人は自社の課題に合うかを判断できません。「中小企業のWeb担当者向け」と対象を書き、「問い合わせを増やす」「更新作業を減らす」と得られるものを書き、「事例を見る」と次の行動を置く。それだけで、判断に必要な材料はそろいます。
言葉の抽象度も同じです。「未来をデザインする」より「離脱箇所をアクセス解析で特定し、改善案を提示する」のほうが、読み手は自分との距離をはかれます。主見出しと補足文と主要ボタン、この3要素が同じ目的を向いているか。制作の現場で私たちが最初に確かめるのは、たいていここです。
主役を一つに——同じ強さの要素が並ぶと、選べない
同じ大きさの見出し、同じ彩度のバナー、同じ形のボタンが横並びになると、読み手はどれを見ればよいかを自分で決めなければなりません。目立たせる要素を増やすほど、どれも目立たなくなっていきます。ファーストビューの主役は一つに絞り、そのほかの補足は下層のページへ送ります。料金ページであれば「おすすめプラン」を派手にする前に、各プランの対象者と違いが一目で並ぶ表を置くほうが、選ぶ助けになります。
画像も同じ考え方で選びます。写真は言葉より常に優れているわけではなく、完成イメージ、手順、形の違いのように、目で見たほうが早いものにだけ効きます。サービスと関係のない風景写真を大きく置いても、注意を奪うばかりで判断材料は増えません。この画像で何を理解してほしいのか——役割を一つ決めてから選ぶことです。
動きの扱いも変わりません。モーションが役に立つのは、押したボタンが反応したこと、処理が進んでいること、画面が切り替わったことを伝える場面です。自動再生の背景動画や繰り返すアニメーションは、本文からもボタンからも注意を引きはがしてしまいます。動きを足す前に、止まった画面だけで情報の順序が伝わるかを確かめてみてください。
次の一歩を見せる——ボタンの文言が、押す前の予測をつくる
興味を持ってもらえても、ボタンに「詳しくはこちら」とだけ書いてあれば、その先に何があるのかは分かりません。押した結果を想像できない操作は、たいてい後回しにされます。「料金と支援範囲を見る」「改善事例を見る」のように、クリックした先で分かることをそのままラベルにします。ボタンは装飾ではなく、次の一歩の予告です。
入力フォームでも考え方は変わりません。必須項目を減らし、どこが間違っているのかと、どう直せばよいのかを、その場で読める位置に出します。せっかく最後まで読んでもらったのに、送信の直前で引き返させてしまうのは惜しいことです。
なお、画面に表示されていても、注意が向かなければ人はそれを見落とします。この仕組みは「選択的注意とは？日常の具体例と見落としを防ぐUX設計」で詳しく解説しています。あわせてお読みください。
参考文献
この記事の作成に参照した資料
まとめ
8秒という数字を目標に置く必要はありません。人の注意は状況で伸び縮みするもので、一つの秒数に縛られた設計は、かえって読み手の判断を急かします。訪れた人がすぐに決められるよう、対象と、得られる価値と、次の行動を先に手渡すこと。目を引く演出よりも、迷わず読み進められる順序をつくることです。私たちサンアンドムーンがWebサイトの改善でまず見直すのも、この最初の数行と一つ目のボタンでした。注意を奪うのではなく、読む理由を早く渡すこと。その姿勢が、次の一歩へつながる体験づくりへの第一歩になります。
執筆・監修
株式会社サンアンドムーン｜代表取締役
1976年創業のデザイン事務所を前身に、Webコンサルティング・UI／UXデザインを専門とする。国際標準のUX設計プロセスを学ぶ Google UX Design Professional Certificate を取得し、上級ウェブ解析士 としてデータ主導のサイト改善にも精通。デザイン思考を軸に、ユーザー認知・行動・文脈からWebサイトの課題を捉え直し、成果につながる設計へ落とし込むことを使命としている。システム設計、フロントエンド技術、SEO・パフォーマンス改善まで技術知識を横断し、サイト全体を見通したディレクションを得意とする。自動車メーカー、銀行・クレジットカード、保険などの大手から中小企業まで、数値で検証しながら改善を積み重ねる実践的なコンサルティングを提供している。
