coastdigitalgroup/coastai-skills

サイトフッターシステム

目的

サイトフッターシステムは、ウェブサイトの最下部アンカーを設計するための方法論を提供します。これは、ユーザーが必要なものを見つけられなかった場合のセーフティネット、SEO上重要なリンクのディレクトリ、そして必須の法的、ブランド、ソーシャル情報を格納するコンテナとして機能します。適切に設計されたフッターは、認知過多を起こさずにページ体験に閉じ感をもたらします。

ユースケース

• マルチページウェブサイト向けグローバルフッターの設計。
• 複雑なサイトマップを管理可能なナビゲーションクラスターに整理する。
• ユーティリティリンク（利用規約、プライバシー、著作権）の配置を標準化する。
• グローバルなコールトゥアクション（ニュースレター、お問い合わせ）をページ末尾に統合する。
• マルチカラムリンクリストのレスポンシブ戦略を確立する。

使用すべきでない場合

• シングルページのミニサイト: シンプルな「著作権」行で十分な場合。
• ボトムタブ付きプログレッシブウェブアプリ（PWA）: 永続的なアプリ風ナビゲーションが従来のフッターの必要性を代替する場合。
• コンバージョン専用ランディングページ: フッターが「漏れ」や気を散らす要素を提供し、ユーザーをプライマリCTAから遠ざける可能性がある場合（ただし、法的リンクを含む最小限のフッターは通常依然として必要）。

入力

1. 情報アーキテクチャ（IA）: プライマリヘッダーに含まれないすべてのリンク。
2. 法的およびコンプライアンス要件: プライバシーポリシー、利用規約など。
3. ブランドID: ロゴ、ソーシャルメディアプロフィール、企業ミッションステートメント。
4. グローバルアクション: ニュースレター登録などのセカンダリコンバージョン目標。
5. デバイスブレークポイント: レスポンシブなカラム積み重ねのためのグリッドシステム定義。

出力

1. フッターアナトミーマップ: ゾーン（ID、リンク、ユーティリティ、CTA）のビジュアルまたは構造的な定義。
2. リンク階層: セカンダリナビゲーションのカテゴリ化されたクラスター。
3. レスポンシブブループリント: モバイルでカラムが積み重なるまたは折りたたまれるルール。
4. アクセシビリティランドマーク: セマンティックタグ（<footer>、<nav>）とラベル。

ワークフロー

1. フッターコンテンツをカテゴリ化する

コンテンツを論理的なゾーンに分割します：

• IDゾーン: ロゴ、説明、ソーシャルアイコン。
• ナビゲーションゾーン: テーマごとにグループ化されたリンククラスター（製品、会社、リソース）。
• アクションゾーン: ニュースレター登録または主要な連絡先情報。
• ユーティリティゾーン: 著作権、法的リンク、言語セレクター。

2. 構造パターンを選択する

サイトの複雑さに基づいてパターンを選択します：

• スリムフッター: ミニマルサイト向けの単一行。
• ファットフッター（サイトマップ）: エンタープライズ/ Eコマース向けのマルチカラムレイアウト。
• アクション指向フッター: リンクリストの前に大きなCTAに焦点を当てる。

3. ビジュアル階層を確立する

visual-hierarchy-systemをフッターに適用します：

• リンククラスターには太字の見出しを使用する。
• テキストサイズは読みやすく、本文よりわずかに小さい（例：14px）ことを確認する。
• フッターの背景色とリンクの色の間の高いコントラストを作成する。

4. モバイル適応を定義する

デスクトップからモバイルへの移行をマッピングします：

• 積み重ね: マルチカラムレイアウトは単一カラムに積み重なるようにする。
• アコーディオンパターン: 非常に「ファット」なフッターの場合、ページの長さを減らすためにモバイルでリンクグループをアコーディオンに折りたたむことを検討する。
• タッチターゲット: すべてのリンクがタップしやすいことを確認する。WCAG 2.2 SC 2.5.8（ターゲットサイズ最小）を満たす — インタラクティブターゲットは最低24x24px、隣接リンクとの適切な間隔あり。プライマリタッチターゲットには44px以上を推奨。

5. セマンティックおよびアクセシビリティレイヤーを追加する

• セクションを<footer>タグでラップする。
• リンククラスターには一意のaria-label（例：「フッターリソース」）を付けて<nav>要素を使用する。
• コントラスト比がWCAG AA（4.5:1）を満たすことを確認する。

意思決定ルール

• サイトマップルール: サイトに15ページ以上ある場合は、発見性を高めるためにマルチカラムの「ファットフッター」を使用する。
• 外部リンク: ソーシャルメディアと外部リソースは新しいタブで開く（target="_blank"）ことで、ユーザーをサイトに留めておく。
• 著作権配置: 著作権と法的リンクは常に最下部（「サブフッター」）に配置する。
• CTAの優先順位: フッターにニュースレター登録が含まれる場合、それはフッター内で最も視覚的に目立つ要素であるべきです。

制約事項

• アクセシビリティ: キーボードのTab順序で到達可能でなければなりません。すべてのリンクには、スティッキーヘッダーやクッキーバナーによって隠されることのない可視フォーカス状態が必要です（WCAG 2.2 SC 2.4.11 フォーカスが隠されていないこと）。
• レスポンシブ対応: カラムがオーバーフローしたり、狭くなりすぎたり（min-width）してはいけません。
• 法的要件: 現地規制（GDPR、CCPAなど）で義務付けられているリンクを含める必要があります。

よくある失敗パターン

• リンク過多: サイトのすべてのページを含め、ユーザーが無視するテキストの壁を作ってしまう。
• コントラストの低さ: 暗い背景に薄いグレーのテキストを使用し、アクセシビリティ基準を満たさない。
• 「行き止まり」: フッターが小さすぎる、または欠落しており、ページ下部までスクロールしたユーザーの行き場がなくなる。
• 非標準のグループ化: 無関係なリンクを混在させる（例：「製品」の下に「採用情報」）。

検証基準

• フッターがセマンティックな<footer>タグと<nav>タグを使用している。
• リンククラスターに明確で説明的な見出しがある。
• モバイルビューでカラムが正しく積み重なり、タッチターゲットが維持されている。
• すべてのフッターテキストのコントラスト比がWCAG AA（4.5:1）を満たしている。
• 法的リンクと著作権が存在し、正しく配置されている。
• ソーシャルリンクが認識可能なアイコンとアクセシブルなテキストラベルを使用している。