ヒーローデザインシステム

ヒーローデザインシステム は何をしますか？

目的

ヒーローデザインシステムは、Webページで最も重要な空間領域である導入部を設計するための方法論を提供します。Growthカテゴリのhero-section-optimizationがメッセージングとコンバージョンに焦点を当てるのに対し、このデザインシステムはヒーローの視覚的解剖学、空間構成、レイヤリングに注力します。コンテンツとビジュアルが調和してブランド権威を確立し、視覚的階層を維持し、すべてのデバイスタイプでプライマリアクションへ視線を誘導することを保証します。

ユースケース

• ホームページやランディングページの主要エントリーポイントの設計。
• 深層のプロダクトページやサービスページ向け「サブヒーロー」イントロの作成。
• 複数ページサイト全体で一貫した導入パターンの確立。
• テキスト、画像、インタラクティブ要素の複雑なレイヤリングの管理。
• 没入型でメディア重視のイントロダクション向けレスポンシブ適応の設計。

使用すべきでない場合

• グローバルサイトナビゲーション: 永続的なヘッダーにはsite-navigation-systemを使用。
• ページレベル道案内: メタデータを重視するユーティリティ中心のイントロ（例：ダッシュボードや設定）にはpage-header-systemを使用。
• コンテンツ記事: シンプルな見出しとバイラインが目的の場合は、標準のタイポグラフィまたはpage-header-systemを使用。
• モーダルまたはオーバーレイ: 一時的なインターフェースレイヤーにはoverlay-and-dialog-systemを使用。

入力

1. コンテンツ優先度: 見出し（H1）、サブ見出し、プライマリCTA。
2. ビジュアルアセット: 写真、イラスト、動画、抽象パターン。
3. レイアウトモード: スプリット、センタード、フルブリードのいずれか。
4. 流体スペーシングシステム: 一貫したマージン、パディング、垂直リズム用。
5. ブランドパレット: 背景処理とオーバーレイの可読性用。

出力

1. ヒーロー解剖図仕様: コンテンツゾーン（導入、コア、アクション、ビジュアル）の定義。
2. 構成設計図: 配置（左寄せ vs. 中央寄せ）とメディア関係のルール。
3. 視覚的レイヤリング戦略: テキストオーバーレイ、スクリム、奥行きのルール。
4. レスポンシブ変形マップ: ヒーローがランドスケープからポートレートビューポートにどのように適応するか。

ワークフロー

1. 構成パターンの選択

コンテンツとメディアの関係に基づいてパターンを選択：

• スプリット（50/50）: 片側にテキスト、反対側にビジュアル。明確さとテクニカルプロダクトに最適。
• センタードスタック: すべてのコンテンツを中央に配置し、多くの場合背景画像や動画を使用。インパクトの強い主張に最適。
• インセットコンテンツ: コンテンツがフルブリード背景上の囲まれたボックス内に配置。プレミアム感やエディトリアルな雰囲気に最適。
• オフセットオーバーレイ: テキストが視覚要素と部分的に重なり、奥行きを生み出す。

2. 空間階層の定義（解剖学）

visual-hierarchy-systemをヒーローゾーンに適用：

• 導入/アイブロー（オプション）: H1の上にある小さなタグやラベル（コンテキスト用）。
• 見出し（H1）: ページ上で最大のテキスト要素。
• サブ見出し: 詳細を提供する補足テキスト（最大2～3行）。
• アクションゾーン: プライマリ（およびオプションのセカンダリ）CTAボタン。
• アンカー（ビジュアル）: ナラティブを支える焦点。

3. レイヤリングと可読性の確立

背景メディアを使用する場合、テキストが読みやすいことを確認：

• スクリムとグラデーション: imagery-and-media-systemから可読性レイヤーを適用し、4.5:1のコントラストを確保。
• ぼかし処理: backdrop-filterを使用して、テキスト背後にある複雑な背景をソフトにする。
• 奥行き: 影や微妙なオフセットを使用して、コンテンツの「平面」と背景の「平面」を区別。

4. 垂直リズムとスペーシングの適用

fluid-spacing-systemを使用して「呼吸する余地」を定義：

• 上部/下部パディング: ヒーローに十分な垂直方向の高さ（通常デスクトップで60vh～90vh）を確保。
• 内部ギャップ: H1、サブ見出し、CTA間で一貫したスペーシング（通常--space-mから--space-xl）。

5. レスポンシブピボットのマッピング

レイアウトが小さな画面でどのように変形するかを計画：

• スタッキング: スプリットレイアウトは通常、文脈を優先してビジュアルを上に、またはH1を優先して下にスタック。
• 比率シフト: 背景画像は、焦点を維持するためにランドスケープ（16:9）から正方形またはポートレート（1:1または4:5）に切り替える。
• テキストスケーリング: fluid-typography-systemを使用して、H1が優雅に縮小することを確認。

決定ルール

• 単一H1ルール: ヒーローはページ内で唯一のH1を含まなければならない。
• 明瞭性は複雑性に優先: ビジュアルアセットがテキストをわずかでも読みにくくする場合は、よりシンプルな背景またはより濃いスクリムを優先。
• 「サム」ゾーン: モバイルでは、CTAを画面の下部3分の2に配置し、簡単にタップできるようにする。
• 視覚的重み: H1とプライマリCTAは、ヒーロー内で最も視覚的に際立つ2つの要素でなければならない。
• 焦点の整合: スプリットレイアウトでは、画像の「被写体」がコンテンツの方向を向き、離れる方向を向かないようにする。

制約事項

• アクセシビリティ: 画像上のテキストはWCAG AA（4.5:1）のコントラストを満たす必要がある。見出しは意味論的な<h1>タグを使用する必要がある。ヒーローに自動再生の背景動画やアニメーションが含まれる場合は、可視の一時停止制御（WCAG 2.2.2）を提供し、prefers-reduced-motionを尊重する。
• レスポンシブ性: ヒーローは水平方向のオーバーフローを引き起こしてはならない。レイアウトは固定高さではなく流動的であるべきで、異なるテキスト長に対応できるようにする。モバイルで動的ブラウザクロームと誤作動する100vhロックは避け、100dvhまたは最小高さと流動的パディングを優先する。
• パフォーマンス: 背景動画はミュートし、低速接続用に「ポスター」画像フォールバックを用意する。

よくある失敗パターン

• 「コントラストの失敗」: スクリムなしで白いテキストを賑やかな明るい画像に配置し、見出しが読めなくなる。
• アクションの埋没: CTAが低すぎて、小型ラップトップで「フォールドの下」に隠れてしまう。
• メディア過多: 注意散漫になる背景動画を使用し、ユーザーが価値提案を読めなくなる。
• 「モバイルの圧迫」: デスクトップのスプリットレイアウトをモバイルに無理やり適用し、テキストが小さく画像が窮屈になる。

検証基準

• ヒーローに最も目立つテキスト要素である明確なH1が含まれている。
• プライマリCTAが視覚的に際立ち、interactive-state-systemに従っている。
• テキストオーバーレイがWCAG AAコントラスト要件（4.5:1）を満たしている。
• 空間構成（例：スプリット、センタード）がブランドの目標と一致している。
• 垂直スペーシング（パディング/ギャップ）が流体スペーシングシステムのトークンを使用している。
• モバイルビューポートでもレイアウトが機能し読みやすい。
• 画像の焦点がレスポンシブスタッキング中に保持されている。
• 自動再生動画/アニメーションに一時停止制御があり、prefers-reduced-motionを尊重している。