良いヒーローセクションが果たす役割

良いヒーローセクションの仕事は1つです

ヒーローセクションの役目は、正しい人にスクロールを続けてもらうことです。人は着地して数秒くれて、このページが自分の問題の話かどうかを決めます。ファーストビューにあるものは、すべてこの1つの判断のために働きます。それを支えるのは4つです。何のプロダクトか、誰のためか、その人にとって何が変わるか、そして行動を1つ。キャッチフレーズ、受賞バッジ、動く背景は、この4つの場所を奪います。

それが何なのかを言う

見出しが失敗するのは、プロダクトではなく気分を説明したときです。「チームのつくり方を、考え直す」はCRMにも採用ツールにもヨガアプリにもなり得ます。「現場写真を中心に設計した、建設現場向けのプロジェクト管理」なら、読み手は一行で残るかどうかを決められます。買い手が商談で口にするカテゴリーの言葉を使ってください。見出しの意味がサブ見出しなしで通らないなら、見出しの仕事が足りていません。

来てほしい人を名指しする

対象を絞る一行は、多くのデザイナーが思っているより働きます。「月商5万ドル以上のShopifyブランド向け」は、違う訪問者を帰らせて、合っている人には、ここで合っていると伝えます。市場が狭まると心配する創業者は多いのですが、実際には名指ししたほうが返信の質が上がります。予約する人がすでに半分売れているからです。この一行は、サブ見出しか、見出しの上のアイブロウに置きます。

約束は1つ、行動も1つ

同じ強さのボタンが2つあると注意が割れて、両方のクリックが下がります。一番取りたい行動を選んでベタ塗りのボタンを与え、もう一方は控えめなテキストリンクにします。ボタンの文言は、次に何が起きるかを名指しします。「送信」より「ページ改善プランをもらう」、「詳しくはこちら」より「価格を見る」です。クリックの向こう側に何が待っているかがわかるからです。同じ文言を、ページ内のどのボタンでも使ってください。

プロダクトが働いているところを見せる

見出しを手で隠して、ヒーローの画像だけを見てください。何を売っているのかわからないなら、その画像は飾りです。実際の画面のスクリーンショット、実際の環境に置かれたプロダクトの写真、結果を映した短い動画。どれも、ノートパソコンの前で微笑むストック写真より効きます。サービスを売っているなら、成果物を見せます。あなたが作ったページ、ダッシュボード、仕上がったレポートです。

ボタンの隣に証拠を置く

行動喚起の近くにある一行の証拠は、最初の疑いが形になる前に消します。読み手が知っている5社のロゴ、件数つきの評価、実数の入った結果が1つ。どれでも働きます。ヒーローに置く証拠は1つに留め、事例は後ろのセクションに取っておきます。出典のない曖昧な信頼バッジは、埋め草として読まれがちです。

ヒーローセクションの5分テスト

社外の人にヒーローを5秒だけ見せます。隠してから、3つ質問します。これは何を売っていますか。誰のためのものですか。ボタンを押すと何が起きますか。3問中2問が外れたら、その下にあるものより先にヒーローを書き直します。スマホの画面でも同じことをやってください。流入の大半はそこで読まれますし、ファーストビューの境目はずっと上にあります。