ページヘッダーシステム は何をしますか？
目的
ページヘッダーシステムは、個別ページのトップレベルの構造領域（グローバルサイトヘッダーとは区別されます）を設計するための方法論を提供します。これにより、ユーザーは自分がどこにいるのか（位置特定）を即座に識別し、現在のビューのステータスやメタデータを理解し、メニューを探し回ることなくタスクを完了するための主要なアクションにアクセスできるようになります。
使用例
- 複雑なダッシュボードビュー（例：「プロジェクト詳細」）のヘッダーを設計する。
- 長文の記事やドキュメントページの導入部分を構成する。
- コンテキストと保存アクションが重要な設定ページやプロフィールページを整理する。
- SaaSアプリケーションや大規模コンテンツサイト全体でヘッダーパターンを標準化する。
- パンくずリスト、タイトル、ステータスインジケータを統一されたレイアウトで管理する。
使用しない場合
- グローバルサイトナビゲーション： サイト全体にわたって持続するメインヘッダーには「site-navigation-system」を使用します。
- シンプルなランディングページ： 「ヒーロー」セクション（「hero-section-optimization」を参照）がページヘッダーとして機能する場合。
- スプラッシュスクリーン/モーダル： コンテンツが一時的または最小限である場合。「overlay-and-dialog-system」をモーダルヘッダーに使用します。
入力
- ページタイトルと階層： ページのプライマリ名（H1）とサイト構造内での位置。
- 位置特定要件： ユーザーにパンくずリストや「戻る」ボタンが必要かどうか。
- メタデータとステータス： 「最終更新日」「下書き/公開」、所有者情報などの重要な詳細。
- アクションの優先順位： このページでの主要なタスクは何か（例：編集、共有、作成）。
- ブランド/システムトークン： スペーシング、タイポグラフィ、カラートークン。
出力
- ヘッダー構造仕様： ゾーン（位置特定、タイトル、メタデータ、アクション）の定義。
- レイアウト設計図： 整列（左寄せ vs. 中央寄せ）とスペーシングのルール。
- レスポンシブ戦略： デスクトップからモバイルへのヘッダーの適応方法。
- インタラクション仕様： スティッキーヘッダーとアクションボタンの優先順位の動作。
ワークフロー
1. ナビゲーションパスを定義する（位置特定）
ユーザーがこのページにどのように到達したか、そしてどのように戻るかを決定します：
- パンくずリスト： 深い階層に使用します（例：
ホーム > プロジェクト > デザイン）。 - 戻るボタン： 線形タスクや特定のリストビューに戻る場合に使用します。
- 親リンク： 2階層の深さのために、シンプルな「<- [親] に戻る」を使用します。
2. コンテンツコアを確立する（タイトルとメタデータ）
visual-hierarchy-system をヘッダーの中央に適用します：
- H1タイトル： 最も目立つテキスト要素。
- コンテキストメタデータ： タイトルの近くに配置される二次情報（例：タグ、タイムスタンプ、ステータスバッジ）。
- サムネイル/アバター： ページが特定のエンティティ（例：ユーザープロフィールや製品）を表す場合。
3. ページレベルのアクションを整理する
アクションを優先順位の階層に分割します：
- プライマリアクション： 1つの「レベル1」ボタン（通常はハイコントラストの塗りつぶしボタン）。
- セカンダリアクション： 頻度の低いタスクのための「レベル2」ボタン（アウトラインまたはゴーストスタイル）。
- ターシャリアクション： まれな管理タスクのためのオーバーフローメニュー（…）。
4. 空間パターンを選択する
- 標準左寄せ（SaaS/ダッシュボード）： パンくず/タイトルを左に、アクションを右に。生産性に最適です。
- 中央寄せ（コンテンツ/記事）： すべての要素を中央に。読みやすさとストーリーテリングに最適です。
- 分割レイアウト： タイトルとアクションを空白で分離し、余白を強調します。
5. スティッキーとスクロール動作を定義する
- 固定ヘッダー： スクロール中に「保存」などのアクションを頻繁に必要とする場合、ページヘッダーを表示したままにします。
- 縮小ヘッダー： ユーザーが下にスクロールするにつれてヘッダーの高さを縮小するか、パンくずリストを非表示にしてコンテンツスペースを最大化します。
決定ルール
- パンくずルール： サイトが2階層より深い場合、ページヘッダーにパンくずリストが必須です。
- 「1つのH1」ルール： ページヘッダーには、そのページ固有のH1タグが含まれている必要があります。
- アクションの配置： デスクトップでは、プライマリアクションを右上に配置します。モバイルでは、ヘッダーが混雑しすぎる場合、プライマリアクションのためにスティッキーな下部バーを検討します。
- ステータスの表示： 重要なステータス（例：「支払い期限超過」）は、バッジまたはアイコンを使用してタイトルのすぐ隣に配置する必要があります。
制約
- アクセシビリティ： ヘッダータイトルには
<h1>を使用する必要があります。パンくずリストには<nav>とaria-label="Breadcrumb"を使用する必要があります。 - コントラスト： ステータスバッジとアクションはWCAG AAのコントラスト要件を満たす必要があります。アクションボタンはWCAG 2.2 SC 2.5.8のターゲットサイズ（最小24x24px、モバイルスティッキーバーでは44x44px推奨）を満たす必要があります。
- レスポンシブ対応： ヘッダーは長いタイトルを適切に処理する必要があります（省略 vs. 折り返し）。
一般的な失敗パターン
- アクション過多： ヘッダーにボタンを配置しすぎて、主要なタスクがわかりにくくなる。
- 位置特定の欠如： 深いページでパンくずリストを忘れ、ユーザーが「迷子」になったように感じさせる。
- タイトルの圧縮： モバイルで長いタイトルに十分なスペースを確保せず、アクションと重なってしまう。
- 冗長なサイトヘッダー： ページヘッダーをグローバルサイトヘッダーと酷似させ、視覚的な混乱を引き起こす。
検証基準
- ヘッダーには、ナビゲーションラベルと一致する明確なH1が含まれている。
- 位置特定（パンくず/戻る）がサイトの深さに適切である。
- プライマリアクションがセカンダリアクションと視覚的に区別されている。
- モバイルビューポートでもレイアウトが機能し、読みやすい。
- セマンティックHTMLが使用されている（パンくずには
<nav>、タイトルには<h1>）。 - ステータスインジケータ（ある場合）はハイコントラストで、見つけやすい。