curiositech/hero-section-design

ヒーローセクションのデザイン

ウェブサイトでユーザーが最初に目にする画面、ヒーローセクションをデザインします。あなたが誰で、何をしていて、なぜ訪問者が留まるべきかを伝える時間はわずか2～4秒です。ファーストビューのすべてのピクセルが、コンバージョンの決断に直結します。

判断ポイント

レイアウトパターンの決定木

主な目的は何か？
├── ブランド認知/記憶 → フルブリードビジュアルヒーロー
├── 商品の明確化/デモ → スプリットヒーロー（左：コピー、右：ビジュアル）
├── 機能の紹介/比較 → 中央配置ヒーロー＋下に機能グリッド
└── 権威性/信頼性構築 → エディトリアル/非対称ヒーロー

強力な商品ビジュアルはあるか？
├── はい（アプリアイコン、ダッシュボード、デモ） → スプリットヒーロー
└── いいえ（API、サービス、抽象的概念） → 中央配置ヒーロー

ターゲットオーディエンスは？
├── 開発者/技術者 → 中央配置、ミニマル（Linear/Vercelスタイル）
├── ビジネス/エンタープライズ → スプリット＋プロフェッショナルビジュアル
├── 消費者/ライフスタイル → フルブリード＋ライフスタイル画像
└── クリエイティブ/デザイン → エディトリアル/非対称レイアウト

コンテンツの複雑さは？
├── シンプルなバリュープロップ（1行） → フルブリードまたは中央配置
├── 中程度（見出し＋サブタイトル） → スプリットまたは中央配置
└── 複雑（複数のメリット） → スプリット＋構造化コピー

CTA戦略の決定木

ビジネスモデルは？
├── フリーミアム/トライアル → 「無料で始める」＋「デモを見る」
├── 営業主導 → 「営業に相談」＋「価格を見る」
├── 直接購入 → 「今すぐ購入」＋「もっと詳しく」
└── リード獲得 → 「見積もりを取得」＋「事例紹介」

ユーザーの意図レベルは？
├── 高意図（ブランド名を検索） → 直接的なCTAのみ
├── 中意図（問題認識済み） → プライマリ＋セカンダリCTA
└── 低意図（発見段階） → ソフトCTA＋価値重視のコピー

失敗パターン

1. カルーセル混乱

症状: ヒーローコンテンツが自動回転、直帰率70%超 診断: ユーザーが回転メッセージを処理できず、選択麻痺が発生 修正: 最も強いメッセージ1つに置き換え、1つの明確なバリュープロップを持つ静的ヒーローを使用

2. ファーストビュー下のCTA

症状: トラフィックが多いのにコンバージョン率が低い、モバイルでCTAがスクロール必要 診断: 初期ページ読み込み時に主要アクションが見えない 修正: ヒーローの高さを減らすかCTAを上に移動、375pxモバイル幅で可視性を確保

3. 不明確なバリュープロポジション

症状: 直帰率高、滞在時間短、ユーザーフィードバック混乱 診断: 見出しがあなたが何者かを説明しているだけで、ユーザーに何をもたらすかを説明していない 修正: 成果/便益でリード、「DevOpsプラットフォーム」ではなく「10倍速く出荷」

4. 視覚的階層の貧弱さ

症状: ユーザーが重要な情報を見逃す、CTAクリック率低（2%未満） 診断: すべてのテキスト要素が同じ視覚的重み、明確な読み順がない 修正: 見出しを本文の2～3倍のサイズにスケーリング、色/太さで視線を誘導

5. パフォーマンスのボトルネック

症状: モバイルで直帰率高、LCPスコア3秒超 診断: 巨大なヒーローアセットがクリティカルレンダリングパスを阻塞 修正: 画像最適化（WebP/AVIF）、非クリティカルアセットは遅延読み込み、ヒーロー画像は先読み

実践例

例：SaaS製品ヒーロー（スプリットレイアウト）

シナリオ: 開発者チームをターゲットにしたコードレビューツールのヒーロー構築

ステップ1: レイアウト決定

• 目的: 製品デモンストレーション ✓
• 強力なビジュアル: はい（コード差分スクリーンショット） ✓
• オーディエンス: 開発者 ✓
• 決定: スプリットヒーロー＋製品ビジュアル

ステップ2: コピー戦略

見出し: 「自信を持って、より速くコードを出荷」（成果重視）
サブタイトル: 「ユーザーがバグを見つける前に、自動コードレビューでキャッチ」（具体的メリット）
プライマリCTA: 「無料トライアルを開始」（フリーミアムモデル）
セカンダリCTA: 「仕組みを見る」（ためらうユーザー向けデモ）

ステップ3: ビジュアル処理

• 左: コピー＋CTA（幅40%）
• 右: アニメーションコード差分デモ（幅60%）
• 背景: 開発者向けの繊細なドットパターン

ステップ4: モバイル適応

• スタック: 上にコピー、下にビジュアル
• 見出し: 3remから2.25remにスケール
• CTAボタン: 縦に1rem間隔で配置

エキスパートと初心者の違い:

• 初心者: 汎用的な「もっと詳しく」CTAを使用
• エキスパート: 「仕組みを見る」を使用（ビジュアルデモを示唆）
• 初心者: 見出し「チーム向けコードレビューツール」
• エキスパート: 見出し「自信を持って、より速くコードを出荷」（ユーザーの成果）

品質ゲート

• プライマリCTAが375pxモバイル幅でスクロールなしに表示される
• 見出しが10ワード以内でバリュープロポジションを伝えている
• ヒーローのLCPが2.5秒以内（スロットリングテスト）
• テキストコントラスト比が任意の背景に対して4.5:1以上
• モバイルレイアウトが水平スクロールなしで綺麗にスタックする
• 社会的証明要素が存在する（ロゴ、指標、または推薦文）
• 単一の明確なメッセージ（回転コンテンツや複数のバリュープロップはなし）
• CTAクリック率が2%以上（1週間後測定）
• prefers-reduced-motionがアニメーションに考慮されている
• ヒーロー画像が適切な読み込み優先度（eager/high）を使用している

対象外の境界

このスキルを以下の用途に使用しないでください:

• ウェブサイト全体のアーキテクチャ → web-design-expert を使用
• SEOコンテンツ戦略 → seo-visibility-expert を使用
• ブログ記事レイアウト → web-design-expert を使用
• EC商品ページ → ecommerce-conversion-expert を使用
• マルチステップオンボーディングフロー → user-experience-expert を使用
• ブランドアイデンティティ/ロゴデザイン → brand-design-expert を使用

以下の場合は委任してください:

• クライアントがサイト全体のリデザインを必要とする場合 → web-design-expert
• 検索ランキング最適化に焦点を当てる場合 → seo-visibility-expert
• ヒーローが複雑なユーザージャーニーの一部である場合 → user-experience-expert