ファーストビューは、なぜ大事なのか
ページの最初に、対象、得られること、進み方が見えないと、訪問者は自分に関係があるか判断しにくくなります。固定の秒数を成功基準にせず、最初の画面だけで次を読む理由が分かるかを見ます。
だからファーストビューは、ページの中でいちばん働く場所です。ここは「全部を説明する場所」ではなく、「先を読む価値があると伝える場所」です。役割がちがうので、置くものも変わります。
たとえるなら、本屋の平積みのようなものです。表紙とタイトルの数秒で、手に取るかどうかが決まる。裏表紙のあらすじや目次は、手に取ってもらってから読まれます。ファーストビューは表紙で、詳しい説明は本文です。実際、開いた瞬間に情報が多すぎるページは、あらすじを表紙に印刷した本のように、かえって手に取りにくくなります。 本の表紙の例が示すのは、最初の範囲と詳しい本文の役割を分ける考え方です。訪問者の目的や既知度によって必要な情報は変わるため、固定の秒数だけで成否を判断しません。
スマホでは最初に見える範囲が狭く、端末によって範囲も変わります。PCの大きな画面だけで判断せず、主要な端末で、見出しと主な行動が隠れていないか確認します。
身近な例で見る、最初の画面
うまくいっているファーストビューは、3つの要素がすっきり置かれています。身近な例で見てみます。
- 料理教室のページ:「初めてでも作れるパン教室」(誰の何か)+「1回で1種類が焼ける」(得られること)+「体験を予約」(次の行動)
- アプリの紹介:「家計簿が続く」+「レシート撮影で自動入力」+「無料で始める」
- お店のトップ:「駅前の小さな花屋」+「季節の花を毎朝仕入れ」+「今日の花を見る」
どれも、情報を3つに絞り、それ以外を下へ送っています。3つがはっきりしているから、数秒で「自分に関係あるか」が判断できます。この3つへ目を運ぶ順番が視線誘導、次の行動のボタンを目立たせる差がコントラストです。
これらの例に共通するのは、「機能」ではなく「読む人にとっての良いこと」を書いている点です。「レシート撮影で自動入力」は機能ですが、その前に「家計簿が続く」という、読む人が本当に欲しい結果を置いています。人は、機能そのものより、それで自分がどうなれるかで心を動かされます。最初の画面では、できることの一覧より、その人が手に入れる結果を先に見せる。この順番が、数秒の勝負を分けます。得られる結果を先に、その仕組みをあとに。この並びを意識するだけで、最初の画面の伝わり方は変わります。
自分のページに、何を置くか
自分のファーストビューを作る、または見直すときは、次の順で考えます。
- 誰のための何か、を一言で書く。 「〇〇な人のための〇〇」の形にすると絞りやすくなります
- それで得られることを、1つ添える。 機能の説明ではなく、読む人にとっての良いことを書きます
- 次の行動を、1つ置く。 「予約する」「無料で始める」など、押せる場所を1つ用意します
- それ以外を、下へ送る。 実績、詳しい説明、料金は、ファーストビューの下からで大丈夫です
いちばん難しいのは、4つ目の「下へ送る」です。大事な情報ほど最初に載せたくなりますが、最初の画面に全部載せると、3つの主役が埋もれます。次の行動のボタンを、思わず指が伸びる形にととのえるコツは、ボタンが押せそうに見える仕組みで扱っています。
「下へ送る」ことに不安を感じるのは、下が読まれないかもしれないからです。実際、すべての人が下まで進む保証はありません。そこで最初の画面では、対象・得られること・次の行動を標準案にし、詳しい条件への見出しや導線を続けます。公開後はスクロールだけでなく、目的のボタン、離脱、問い合わせ内容も確認し、必要なら重要情報の位置を戻します。下へ送るのは情報を捨てる決定ではなく、読む順番を試す仮説です。
ファーストビューが効かない場合
3つに絞ったのに伝わらないときもあります。その原因を知っておくと、直しが早くなります。
ひとつは、「誰のための何か」がぼんやりしている場合です。「みんなに便利」「なんでもできる」と広げると、誰の心にも刺さりません。対象を狭めるほど、その人には強く届きます。
もうひとつは、3つは置いたのに、順番と大きさの差が弱い場合です。3つが同じ強さで並ぶと、視線が迷います。3つの中にも「まず読ませる1番」を決めて差をつけます。この順番づけそのものは、情報の優先順位の決め方と同じ考え方です。また、画像が重くて表示が遅いと、そもそも数秒を待ってもらえない場合もあります。
最上部を短時間見て、たしかめる
今日のワーク：短時間の記憶テスト
自分のページ（なければ気になるサービスのページ）の最上部を短時間だけ見て伏せ、記憶に残ったことを書き出します。
- 「誰のための何か」は、思い出せましたか
- 「次に何をすればいいか」は、伝わりましたか
思い出せなかったら、その情報が弱いか、多すぎるかのどちらかです。家族や同僚に協力してもらうと、作った本人にはない新しい目で確かめられます。
このテストは診断のきっかけで、特定の秒数に科学的な合否を置くものではありません。作った本人は内容を知っているため、初めて見る人にも協力してもらい、対象・結果・行動のどこが伝わらなかったかを聞きます。
公開後は、下へ進んだ割合だけで良否を決めません。目的のボタンを押したか、すぐ戻ったか、問い合わせで何を尋ねられたかを合わせます。最初の画面が伝わっても、行き先の内容が約束と違えば完了にはつながらないためです。実際の流入元ごとに、検索語や広告文と冒頭の約束が合うかも確認します。
変更日と流入元を分けて記録すると、比較の条件を追えます。
最初の画面は、全部を見せない画面
ファーストビューの標準案は、誰のための何か・得られること・次の行動の3役です。料金、法定表示、安全上の注意など、最初に必要な情報があれば役割を追加します。全部を置く場所でも、一律に3要素へ制限する場所でもありません。最初に判断するための情報を残し、詳しい説明へ迷わず進めるかを確かめます。
まず3役で案を作り、必要情報を加えた案と短時間テストで比べます。対象、得られること、次の行動のどこが伝わらなかったかを見れば、削るか足すかを決められます。次に進むなら、ボタンが押せそうに見える仕組みで、行動の出口を確かめてみてください。