ヒーローセクション・ファーストビュー

ヒーローセクション（ファーストビュー）には何を入れるべき？

ヒーローセクションには、「何をしているお店か」「なぜここを選ぶべきか」「今何をすればいいか」の3つが入っていれば十分です。お客様がファーストビューを見ただけで、続きを見るか、連絡するかを決められるようにする必要があります。

たくさん入れれば良くなるわけではありません。要素が増えるほど一つひとつが目に入りにくくなるので、絶対に必要なものと下に回してもよいものを分けておくのがおすすめです。

業種と地域を入れるのは、検索から来たお客様のためです。「望遠洞 ケーキ」で検索して来たお客様がファーストビューで同じ言葉を見れば、正しいお店にたどり着いたと確信できます。

お客様は本当にファーストビューだけで判断する？

ファーストビューだけを見るわけではありませんが、ファーストビューにいちばん長くとどまるのは確かです。Nielsen Norman Groupが2018年に発表した視線追跡調査では、画面を見る時間の約57%がスクロール前の領域に集中していました。

同じ調査では、最初の2画面までが閲覧時間の約74%を占めていました。お客様はスクロールはするものの、下に行くほど丁寧には見なくなるということです。

そのため、ファーストビューには「もっと下まで見る理由」を与える役割もあります。ファーストビューで自分が探していたお店だと確信できてはじめて、お客様は下にある料金・口コミまで読んでくれます。

だからといって、ファーストビューにすべてを詰め込む必要はありません。お客様は下に進む理由が見えればスクロールするので、ファーストビューの下端に次の内容が少し見えるようにしておくと、自然と続きを見てもらえます。

ヒーローセクションのキャッチコピーはどう書く？

ヒーローのキャッチコピーは、お客様が検索するときに使う言葉で、1文の中に業種・地域・強みを盛り込むのが基本です。かっこいい表現より、すぐに理解できる表現のほうがよく読まれます。

以下の手順で書いてみると、ほとんどのお店で使えるコピーができあがります。最初から完璧に書こうとせず、2〜3案作って比べてみてください。

1行にすべての長所を入れようとすると、文が長くなって何も記憶に残りません。長所がいくつもあるなら、いちばん自信のあるもの1つだけをファーストビューに置き、残りは下のセクションで1つずつ紹介してください。

コピーが決まったら、検索結果に表示されるページタイトルとファーストビューのコピーの言葉をそろえておくのもおすすめです。検索で見た言葉とファーストビューの言葉が同じなら、お客様は迷いにくくなります。

1. 01お客様がお店を探すときに検索しそうな言葉を書き出します。（例：「望遠洞 ケーキ 注文」「弘大 レイヤーカット」）
2. 02その中から、業種と地域を含んだ短い見出しを作ります。
3. 03他のお店と違う点を1つ、短い説明文1行として添えます。（例：「当日注文OK」「1対1カウンセリング後に施術」）
4. 04ボタンの文言を、お客様が取る行動にします。（例：「ケーキの予約を問い合わせる」「空き時間を見る」）
5. 05スマホの画面に入れてみて、改行が多すぎるなら言葉を削ります。
6. 06お店を知らない人に5秒見せて、「ここは何のお店だと思いますか？」と聞いてみます。

ファーストビューに大きな写真や動画を入れると重くならない？

対策しないと重くなります。ファーストビューの大きな写真はたいてい画面の中でいちばん大きな要素なので、Googleが読み込み速度を測る指標であるLCP（最も大きなコンテンツが描画されるまでの時間）にそのまま反映されます。

web.devの案内では、LCPが2.5秒以下なら「良好」とされます。ファーストビューの写真は画面サイズに合わせて縮小し、軽い形式に変換し、遅延読み込みを設定しないのが基本です。

速度は、パソコンよりスマホ、Wi-Fiよりモバイルデータ通信のほうが遅く出ます。ファーストビューを確認するときは、Wi-Fiを切ってスマホで直接開いてみるのが、お客様の環境にいちばん近い方法です。

背景動画は雰囲気を引き立てますが、容量が大きいのでスマホのデータ通信では負担になります。使う場合も短く作り、動画が表示される前に見せる静止画を一緒に用意しておきます。

業種別に、ファーストビューはどう構成する？

業種によってお客様がファーストビューで確認したいことが違うので、写真とボタンもそれに合わせて選ぶ必要があります。以下は、小さなお店でよく使われる構成です。

写真は、できるだけ実際のお店で撮ったものを使ってください。素材サイトの写真はきれいですが、来店したときの様子と違うと、かえって信頼を損ねることがあります。

スマホの画面では、縦長の写真が画面のほとんどを占めてしまい、文章やボタンが押し出されがちです。パソコン用とスマホ用の写真を別々にトリミングしておけば、どちらの画面でもすっきり見えます。

ファーストビューのコピーや写真は、季節やイベントに合わせて変えるのもおすすめです。ただし、変えるたびに制作会社へ依頼するのは手間なので、管理画面から自分で変更できるか事前に確認しておいてください。

• カフェ：店内や看板ドリンクの写真、「延南洞のハンドドリップカフェ・毎日10時〜22時」、「道順を調べる」ボタン。
• 美容室：実際の施術後の写真、「合井駅から3分・ダメージの少ないパーマ専門」、「スタイリスト別に予約」ボタン。
• 工房：レッスン中の手元の写真、「週末の陶芸ワンデークラス」、「今月のスケジュールを見る」ボタン。
• オンライン販売：看板商品の写真、「自家焼きの手作りグラノーラ・全国配送」、「商品を見る」ボタン。

ファーストビューでよくある失敗は？

いちばん多い失敗は、雰囲気のある写真だけを大きく置いて文章を省いてしまうことです。オーナー様はお店を知っているので写真だけで十分に見えますが、初めてのお客様には何のお店なのかすぐにはわかりません。

スライドが自動で切り替わり、重要なコピーがすぐ消えてしまうのもよくある問題です。パソコンでは問題ないのにスマホではボタンが画面の下に押し出されるケースも多いので、必ずスマホで確認してください。

開いた瞬間に出るポップアップにも注意が必要です。イベントのウィンドウが画面を覆うと、お客様はお店の紹介を見る前にウィンドウを閉じるのに手間取りますし、Googleも内容を覆い隠すポップアップを良くないページ体験の一つとして案内しています。

スライドの代わりに写真1枚とコピーで始めれば、管理も楽になります。写真を何枚も見せたいなら、ファーストビューの下にギャラリーセクションを別に設ける方法があります。

ファーストビューのデザイン案を見るとき、制作会社に何を聞けばいい？

デザイン案を受け取ったら、以下の4つを制作会社に聞いてみてください。スマホの画面を基準に答えてもらえば、公開後に直す手間が減ります。

• スマホのファーストビューで、ボタンがスクロールせずに見えますか？
• ファーストビューの写真の容量と読み込み速度を確認してもらえますか？
• 写真の上の文字は、明るい写真でも読みやすいですか？
• スライドを使う場合、お客様が自分で止めたり送ったりできますか？