ヒーロー（ファーストビュー）とは何か？
ヒーローとは、ページを開いて最初にスクロールせず見える一画面の領域を指します。アバブザフォールド（折り返しの上）やファーストビューとも呼ばれ、訪問者が「このページは自分のためのものか」を判断する最初の接点です。ここで惹きつけられなければ、その先の本文は読まれません。
ヒーローの中心は3つの要素です。誰に向けた何の商品かを伝える主訴求コピー、商品やイメージを直感的に見せる商品画像、そして次の行動を示すCTAボタン。この3点が一画面に過不足なく収まっていることが、つかみの良し悪しを決めます。
紙芝居の最初の一枚を思い浮かべてください。最初の絵で物語に引き込めなければ、観客はその先のページをめくってくれません。ヒーローはまさにその「最初の一枚」で、つかみで惹きつける役割を担います。
CTA（行動喚起ボタン）とは何か？
CTA（Call To Action）とは、訪問者に次の行動を促すボタンやリンクのことです。「今すぐ購入する」「カートに入れる」「無料で試す」など、ページが達成したいゴールへ一歩進ませる決定的な一点を指します。CTAが曖昧だったり選択肢が多すぎたりすると、訪問者は迷い、行動せずに離脱します。
水戸黄門で印籠を出す決めのシーンを思い出してください。物語の最後にズバッと印籠を見せ、その一点で場が動きます。CTAも同じで、それまで積み上げた説明や証拠の最後に、迷いなく押せる一点を示すことで行動が起きます。印籠が2つも3つもあっては決まりません。
だからこそ、1画面に並べる主要CTAは原則1つに絞ります。色・大きさ・余白で他の要素から際立たせ、「ここを押せばよい」と一目で分かる状態にすることが、CTAの基本設計です。
視線はどう動くか？ Zの法則とFの法則
人の視線には傾向があり、それを踏まえてヒーローとCTAを配置すると、自然な流れで行動まで導けます。代表的なのがZの法則とFの法則で、ページの性質によって使い分けます。
Zの法則（ビジュアル主体の画面）
Zの法則は、視線が左上→右上→左下→右下へとZの字を描いて流れるという考え方です。情報量が少なくビジュアル主体のヒーローに向きます。左上にロゴや主訴求、右上に補足、そして視線の終点である右下付近にCTAを置くと、流れの最後で行動を促せます。
Fの法則（テキスト主体の画面）
Fの法則は、視線が左上から横へ、次に少し下がってまた横へと、F字を描いて流れるという考え方です。文章や一覧が多いページに向きます。重要なコピーやCTAを左寄り・上方に置くと読み取られやすくなります。化粧品の成分説明や使い方など情報量が多い箇所では、このFの流れを意識します。
| 法則 | 向いている画面 | CTAの置きどころ |
|---|
| Zの法則 | ビジュアル主体・情報量少 | 視線の終点（右下付近） |
| Fの法則 | テキスト主体・情報量多 | 左寄り・上方の早い位置 |
なぜファーストビューで離脱を防ぐことが重要なのか？
訪問者の多くは最初の一画面だけを見て、その先を読むかどうかを数秒で決めます。ここで「自分に関係ない」「何の商品か分からない」と感じられると、本文がどれだけ良くても読まれずに離脱します。だからヒーローは、つかみと同時に離脱を防ぐ最前線でもあります。
- 主訴求コピーは、誰の何の悩みに応える商品かを一言で示す
- 商品画像は加工しすぎず、何の商品かが直感的に伝わるものを置く
- CTAはファーストビュー内に1つ用意し、スクロールせず行動できる状態にする
- 情報を詰め込みすぎず、視線の流れ（Z/F）に沿って要素を並べる
化粧品では、効果や効能を断定する表現は避けます。「シミが消える」「必ず白くなる」といった言い切りは使わず、医薬部外品でない化粧品は薬機法で認められた56項目の効能の範囲で訴求します。ヒーローの主訴求コピーほど目に入りやすいため、ここの言葉づかいは特に慎重に確認します。
ヒーローからCTAまでをどう設計するか？
実務では、ヒーローでつかみ、悩み・解決・証拠と読み手を納得させ、最後にCTAで行動を促す、という縦の流れで組み立てます。下のステップが基本の順序です。
- 1
ヒーローの主訴求を決める
誰の何の悩みに応える商品かを一言で言い切るコピーを最上部に置きます。ここが弱いと以降が読まれません。
- 2
商品画像とファーストビューCTAを添える
何の商品かが伝わる画像を並べ、スクロール前に押せるCTAをファーストビュー内に1つ用意します。
- 3
悩み→解決→証拠で納得を積む
悩みの提示、解決の提案、口コミや実績などの証拠を順に並べ、読み手の不安を一つずつ解消します。
- 4
最後のCTAを1つに絞る
ページ末尾に決定的なCTAを1つ置き、色や余白で際立たせます。選択肢を増やさず、押すべき一点だけを残します。
- 5
視線と薬機表現を点検する
Z/Fの流れに沿って要素が並んでいるか、効能の言い切りがないかを最後に確認します。
Plottell は、このヒーローからCTAまでの構成（hero / final_cta セクション）をAIが提案し、化粧品ECのLP・商品ページを素早く組み立てられるよう設計されています。ファーストビューの主訴求と商品画像の配置を整え、最後は黒のCTAボタンなど決定的なアクションを1つに絞ることで、迷わせず行動へ導く構成を支援します。
