ヒーローはスクロールされるかどうかを決めます。AI ビルダーのデフォルトは全員同じ——中央寄せ見出し・サブコピー・ボタン 2 つ——で、間違ってはいないものの、即座に忘れられます。ここでは、プロンプトから安定して生成できる 7 つのヒーローパターンを、それぞれ 1 文のスペックつきで紹介します。スペックは英語のまま v0・Lovable・Bolt・Cursor に貼り付けてください。
1. プロダクトステージ型
Split hero: left column headline + CTA, right column a browser-framed screenshot tilted 3deg with an accent glow behind it, overflowing the viewport edge slightly.
ポイントは画面端からのはみ出し。フレームが切れていることで「プロダクトはファーストビューより大きい」ことを示唆します。
2. マニフェスト型
Full-width display headline spanning 90% viewport width at clamp(3.5rem,10vw,8rem), two short lines, no image, tiny CTA row beneath. Everything else is whitespace.
コピーが強ければ効きます。弱ければ即死します——このパターンには隠れ場所がありません。
3. ライブ背景型
Centered content over a full-bleed animated background — slow CSS gradient mesh drifting at 30s loops, content on a subtle dark scrim, motion pausing under prefers-reduced-motion.
背景は安価に空気感を運びますが、必ずコンテンツの下に敷くこと。競合させてはいけません。（背景コレクションも参照）
4. ベントーティーザー型
Headline block occupying the top-left two-thirds; three small preview tiles filling the remaining grid cells, each a cropped glimpse of a feature, lifting on hover.
機能の多いプロダクトが、ヒーローに機能一覧を持ち込まずに幅を見せる方法です。
5. ターミナル型
Left column headline; right column a mock terminal or code editor panel with syntax-highlighted snippet typing itself out once, then a cursor blink.
開発者向けツールの定番。主張ではなく証拠だからです。
6. ソーシャルオープナー型
Standard centered hero, but the subline is replaced by a single row: five tiny avatar circles + "Trusted by 2,400 builders" in muted text, sitting above the CTA.
社会的証明を CTA の上に置くと、クリックの感触が「賭け」から「合流」に変わります。
7. スプリットステートメント型
Viewport split diagonally: upper-left solid background with headline, lower-right full-bleed imagery or animated texture; the CTA sits on the seam.
7 つの中で最もアートディレクション色が強いパターン。角度（例：12deg）を明示しないと、生成 AI は平坦にしてしまいます。
使い方
上のスペックはあくまで骨格です。アイデンティティブロック（パレット・タイポ・角丸）と Never リストを足して初めて完成します。完全なプロンプトの構造は SaaS ページの解剖記事で分解しています。組み立てを省きたい場合は、セクションコレクションに各系統の完成済みヒーロープロンプトがあり、60 件は無料で試せます。