ヒーロー & タイトル
ヒーロー & タイトルに分類されるWeb表現技法21件。スプリット・ヒーロー、中央グラデ・ヒーロー、画像オーバーレイ・ヒーロー、中央集約ヒーロー＋スクロール誘導 など。ライブデモとコピーできるコード付き。
スプリット・ヒーロー
左にキャッチコピーと2つのCTA、右に浮遊するダッシュボードのUIカードとブロブ背景を配置したスプリット構成。SaaSやプロダクトLPの導入直後に置く定番ヒーローです。
中央グラデ・ヒーロー
中央に大見出し（グラデーション文字）とCTAを置き、背景に揺れるメッシュグラデと点滅する微粒子を敷いた構成。プロダクトのトップやローンチLPの一枚目に向きます。
画像オーバーレイ・ヒーロー
背景写真に暗幕グラデを重ね、左下にコピーと2つのCTAを置いた構成。背景はゆっくりズーム（Ken Burns）します。旅行・不動産・ブランドサイトの一枚目に向きます。
中央集約ヒーロー＋スクロール誘導
小ラベル・特大見出し・サブ・2つのボタンを中央に積み、下部に弾むスクロール誘導を添えた構成。見出しは語ごとに浮かび上がります。ブランドやキャンペーンの強い第一印象づくりに。
セクション見出しキット
連番・小ラベル・大見出し・装飾下線・リード文が、画面に入ると順に組み上がる「セクションの顔」のひな形。ページ内の区切りに一貫したリズムを与えます。見出し設計のテンプレとして使えます。
下層ページヘッダー（パンくず付き）
パンくず・ページタイトル・要約・メタ情報をまとめた下層ページの見出し帯。背景のグラデーションがゆっくり流れます。記事・一覧・サービス詳細など第2階層以下の冒頭に使える定型です。
メッシュグラデ背景ヒーロー
やわらかく溶け合うメッシュ状グラデーションを背景に敷いた、写真不要で高級感のあるヒーロー。色面がゆっくり動き、抽象的で洗練された第一印象を作ります。SaaSやブランドのトップに。
インライン登録ヒーロー
見出しのすぐ下にメール登録フォームを置き、第一画面で行動まで完結させるヒーロー。リード獲得を最優先するSaaSやニュースレターのトップに最適な、CV直結型の構成です。
セクション間CTAバナー帯
ページの途中に挟む、横長のCTAバナー帯。見出し＋一言＋ボタンで「次の行動」へ橋渡しします。長いLPの中だるみを防ぎ、要所で申込やお問い合わせへ誘導できる定番パーツです。
入力フォーム付きヒーロー
中央のキャッチコピーにメール入力欄と登録ボタンを一体化させたウェイトリスト向けヒーロー。背景は揺れるメッシュグラデ、送信すると注記テキストが成功表示に切り替わります。
ミニマル・タイポ・ヒーロー
特大見出しだけを主役にし、余白をたっぷり取った上品なヒーロー。下に小さなサブコピーと控えめなテキストCTAを添え、背景はごく淡く息づく光のみで構成しています。
ダーク発光ヒーロー
漆黒の背景に発光する見出しとオーロラ状のグラデーションを重ねた先進的なヒーロー。淡い格子とテキストの発光パルスが未来的な雰囲気を演出します。
ベント・ヒーロー
見出しブロックの周囲に統計・写真・CTA・導入企業ロゴのタイルを非対称グリッドで配置したベント構成。情報を1画面に凝縮したいSaaSのトップページに使えます。
2分割ヒーロー（見出しせり上がり）
左に見出し・サブ・CTA、右にビジュアルを置く2分割のファーストビュー。見出しは行マスクから順にせり上がり、ビジュアルはふわりと浮遊します。SaaSやサービスサイトの王道構成です。
スポットライト見出しヒーロー
暗い画面の上を光のスポットが移動し、通過した部分だけ見出しが色づくドラマチックなヒーロー。マウスにも追従します。プロダクトのローンチやポートフォリオの表紙に映えます。
背景画像リビール・ヒーロー
背景写真がゆっくりズーム（Ken Burns）し、その上で見出しがクリップで切り開かれるように現れる没入型ヒーロー。暗幕オーバーレイで可読性を確保。旅行・飲食・イベント系に好相性です。
Bento構成ヒーロー
見出しの大カードを中心に、画像・数値・CTAの小カードを敷き詰めたBento（弁当箱）型ヒーロー。情報を区画で見せられるため、機能の多いSaaSやプロダクトの第一画面で人気の構成です。
実績・数字ヒーロー（カウントアップ）
大見出しの下に、導入社数・稼働率・満足度などの数字がカウントアップして信頼を訴えるヒーロー。BtoBやサービスの実績アピールに効きます。数値が0から目標値まで増えていきます。
タイプ風見出しヒーロー
見出しの一部が次々に打ち変わる（タイプライター＋ワード差し替え）ヒーロー。「○○のための△△」の△△が切り替わり、複数の価値提案をテンポよく見せられます。サービスの幅を伝えたいトップに。
製品ティルト・ヒーロー
左にコピー、右に製品プレビューのUIモックカードを配置。カードはマウス位置に応じてperspectiveで傾き、無操作時はゆっくり揺らぎ続けるSaaS向けヒーローです。
統計バンド・ヒーロー
コピーとCTAの下に4つの指標を並べたバンドを配置したヒーロー。バンドが画面に入ると数値が0からカウントアップし、導入実績を印象づけます。