ファーストビューの3秒がすべてを決める
サイトを開いた人が「読む価値があるか」を判断するのに、だいたい3秒しかかからないと言われています。この最初の画面、いわゆる「ファーストビュー」で何を見せるかによって、そのまま読み進めてもらえるか、すぐに閉じられてしまうかが決まってしまいます。
ファーストビューに詰め込むべき要素はシンプルです。①誰のための何のサイトかが一瞬でわかるキャッチコピー、②世界観を伝える写真や動き、③次の行動を促すボタン。この3つだけに絞り、情報を足しすぎないことが最初のコツです。
3秒で伝わるキャッチコピーの作り方
キャッチコピーは「説明」ではなく「宣言」にすることが大切です。「当店のラーメンは厳選した食材を使用しています」ではなく、「一杯に、炎と出汁のすべてを。」のように言い切る形にすると、文字数が減って視線が止まりやすくなります。
具体的な作り方の手順は次の通りです。
1. 自分の強みを思いつく限り書き出す 2. その中から一番伝えたい1つだけを選ぶ 3. 7〜14文字程度の短い言葉に削る 4. 数字や固有名詞を入れられないか検討する(例:「15年の修業」「加水率38%」)
文字数を削るときは、形容詞から削るのがコツです。「とても美味しい」の「とても」のような言葉は、写真や動きで表現すればコピーからは外せます。
写真・ヒーロー画像の選び方と動かし方
ファーストビューの写真は、静止画よりもわずかに動かすだけで印象が大きく変わります。たとえば写真をゆっくり拡大させる「ケンバーンズ効果」は、静止画なのに画面に生命感が出るため、飲食店や宿泊施設のサイトでよく使われます。
動かす量は控えめにするのが鉄則です。1秒間に数ピクセル程度のゆっくりとした拡大・移動にとどめ、見る人が「動いていることに気づかないくらい自然」な速度を意識してください。速すぎる動きは安っぽく見えてしまいます。
写真そのものの選び方も重要です。被写体が真ん中に小さく写っている写真よりも、画面いっぱいに寄った写真のほうが、スマートフォンの小さな画面でも伝わりやすくなります。文字を重ねる場合は、文字の背景だけ半透明の帯を敷くなどして、可読性を必ず確保しましょう。
見出しやボタンを「現れさせる」動きの入れ方
ページが読み込まれた瞬間に、すべての要素がパッと表示されるよりも、見出しが少し下からふわっと現れたり、写真の覆いが左右に割れて中身が見えたりするような「現れる動き」を入れると、ページ全体の印象がぐっと洗練されます。
このような「隠れていたものが見える」演出は、覆い(マスク)を少しずつ動かすだけで作れます。実装が難しそうに見えても、覆いの要素を1枚用意してCSSのtransformやclip-pathで動かすだけなので、初心者でも真似しやすい手法です。
動きを入れるときに注意したいのは、長さを1秒前後に収めることです。見出しが現れきるまでに2秒も3秒もかかると、訪問者はその間に離脱の判断をしてしまいます。「主役の文字は1秒以内に読める」ことを目安にしてください。
ボタン(CTA)の配置で変わる成約率
ファーストビューのボタンは、色・文言・位置の3点で決まります。色は背景から確実に浮き上がる1色に絞り、周囲と馴染ませすぎないこと。文言は「送信する」のような事務的な言葉より、「今週の棚を見る」「行列状況を見る」のように、押した後に何が起きるかがわかる言葉にすると反応が上がります。
位置については、キャッチコピーのすぐ下か、写真の邪魔にならない余白部分に置くのが基本です。スマートフォンで見たときに指で押しやすい大きさ(高さ44px以上が目安)を確保することも忘れないでください。
よくある失敗例:動きを足しすぎる
ファーストビューを作り込むうちに、ついあれもこれもと動きを足したくなりますが、これは逆効果になりがちです。見出しが文字ごとにバラバラに踊り、背景では粒子が舞い、写真も拡大していて、さらにボタンも点滅している……というように演出が重なると、どこを見ればいいのか訪問者が迷ってしまいます。
目安として、ファーストビューに入れる「動く要素」は多くても2〜3種類までにしてください。たとえば「見出しがふわっと現れる」「写真がゆっくり拡大する」「カーソルを乗せるとボタンが少し反応する」の3つがあれば十分で、それ以上は足し算ではなく引き算で考えるくらいがちょうど良いバランスになります。
また、動きを入れたら必ずスマートフォンの実機、もしくはブラウザの幅を狭くした状態で確認しましょう。パソコンの大きな画面では気にならなかった余白や文字サイズが、スマートフォンでは窮屈に見えたり、ボタンが画面からはみ出してしまったりすることがよくあります。
まとめ:情報を削ってから、動きを足す
ファーストビューで失敗しがちなのは、あれもこれも伝えたくなって情報を詰め込みすぎることです。まずはキャッチコピー・写真・ボタンの3つだけに絞り込み、そのうえで「現れる動き」や「ゆっくり拡大する写真」のような小さな演出を1つだけ足してみてください。削ってから足す、という順番を守るだけで、3秒で伝わるファーストビューにぐっと近づきます。