Category · ヒーローセクション
ヒーローセクションのデザイン例とAIプロンプト
ランディングページ最上部に配置するヒーローセクションのAIプロンプト集。見出し・CTA・背景・ロゴ帯などの構成要素をパターン別に収録し、SaaS・個人開発・コーポレートなど用途別に探せる。
ヒーローについて
ランディングページの第一印象を決めるメインビジュアル。訪問者が数秒で離脱するかスクロールするかを左右する最重要パートです。大きな見出し、サブコピー、CTAボタン、背景メディアの組み合わせで構成され、SaaS・コーポレート・個人開発・EC・メディアなど、サイトの性格で最適な型が変わります。タイポグラフィ主導型、写真主導型、プロダクトショット型、アニメーション主導型を集めました。部品を増やすほど一つひとつへの注目は薄まります。足す前に、それが売り物とCTAの2つを助けるかを確かめてください。
よく使われる場面
- 新しいSaaS・プロダクトのLP制作
- 個人ブログやポートフォリオのトップ
- キャンペーン特設ページのオープニング
- B2Bコーポレートサイトのトップビジュアル
- イベント・セミナーの集客ページ
成功のポイント
- 見出しは7秒以内に価値が伝わる長さに絞る
- CTAはスクロール不要の位置（ファーストビュー内）に置く
- 背景メディアが本文の可読性を壊さないか必ず確認
- モバイル幅で見出しが崩れないか実機確認する
- 1画面1メッセージを守り、要素を盛りすぎない
このカテゴリのデザイン
美術館展覧会ポスター風のヒーロー
国立美術館の特別展ポスターを再構築したヒーローセクション。明朝大型タイトル・赤の差し色・許可印・バーコードまで作り込み、「文化的権威」と「会期限定の希少性」を同時に演出する尖った設計。
バウハウス様式・幾何構成の原色ヒーロー
1919年バウハウス・ロシア構成主義を引用した、原色×幾何形×グロテスクサンセリフのヒーロー。20世紀モダンデザインの古典をWebに再構築する、教養と前衛が同居する尖った設計。
ヴェイパーウェイヴの夕焼けレトログリッド・ヒーロー
マゼンタ・パープルの夕焼けに地平線まで伸びるレトログリッド、大理石像、ローマン書体の日本語タイポを重ねるヴェイパーウェイヴ系ヒーロー。80s ノスタルジーとインターネット黎明期の美学が融合した尖った表現。
装飾を拒むブルータリズムのヒーロー
角丸・影・グラデーションを一切使わず、極太タイポと裸の HTML 要素だけで突きつける反デザインのヒーロー。実験的アート・アンダーグラウンドメディア・若手クリエイターが「中身で勝負」する場面の選択肢。
鮮やかなメッシュグラデーションのSaaSヒーロー
Stripe/Linear系のモダンなSaaSサイトで主流の、暗背景にカラフルなメッシュグラデーションを敷くヒーローセクション。CSSの conic-gradient + blur で画像を使わずに鮮やかに仕上げる構成。
極太フォントのヒーローセクション
画面いっぱいの極太な見出しと 1 色のアクセントカラーだけで勝負する、スタートアップ向けのヒーローセクション。CTA への視線動線を 1 本に絞り、滞在 3 秒で価値を伝える設計。
シンプルで洗練されたヒーローセクション
余白を大きくとり、見出しとCTAだけで価値を伝えるミニマルなヒーローセクション。SaaSや個人開発のランディングページ最上部に向いた、装飾を削って要点を立てる構成。