coastdigitalgroup/coastai-skills

バナーおよびアラートシステム

目的

バナーおよびアラートシステムは、永続的ではなく、オーバーレイを使用しないコミュニケーション層を設計するための方法論を提供します。ユーザーを停止させるモーダルとは異なり、バナーやアラートは、ユーザーが現在のタスクを続けられるようにしながら、重要な情報（ステータス更新、警告、またはお知らせ）を提供します。このシステムにより、通知が視覚的に区別され、適切に優先順位付けられ、アクセシブルであることが保証されます。

ユースケース

• サイト全体のお知らせを伝える（例：「2時間後にメンテナンスが予定されています」）。
• フォーム内でコンテキストに応じたフィードバックを提供する（例：「変更が正常に保存されました」）。
• アカウントに関する問題をユーザーに警告する（例：「サブスクリプションの有効期限が3日後に迫っています」）。
• アプリ全体をブロックしないが機能に影響を与えるシステムエラーをユーザーに通知する（例：「銀行同期が現在利用できません」）。
• プロモーションや新機能のローンチに関する「マーケティングバナー」を表示する。

使用すべきでない場合

• クリティカルブロック: ユーザーが続行する前に必ずアクションを実行する必要がある場合は、overlay-and-dialog-system（モーダル）を使用します。
• パッシブフィードバック: 短時間で消える優先度の低いステータス更新（例：「リンクをコピーしました」）には、トースト（overlay-and-dialog-system参照）を使用します。
• データラベル: 単一アイテムの単純なステータスインジケータには、badge-and-tag-systemを使用します。
• ナビゲーション: プライマリまたはセカンダリナビゲーションリンクにバナーを使用しないでください。site-navigation-systemを使用します。

入力

1. メッセージの重大度: これはエラー、警告、成功、または情報メッセージですか？
2. スコープ: これはグローバル（サイト全体）ですか、それともインライン（特定のセクション/ページ）ですか？
3. 閉じられるかどうか: ユーザーはこのメッセージを非表示にできますか、それとも表示されたままにする必要がありますか？
4. アクションの要件: メッセージはフォローアップアクション（例：「請求先情報を更新」）を必要としますか？
5. ブランドパレット: ステータス状態の標準色（危険の赤、警告のアンバーなど）。

出力

1. アラート構造仕様: アイコン、テキスト階層、アクションプレースメントの定義。
2. 空間ロジック: バナーが表示される場所のルール（ビューポートの上部、コンテンツの上、セクション内）。
3. 状態マトリックス: 異なるメッセージ重大度に対する視覚的処理。
4. アクセシビリティ計画: インタラクティブなアラートのためのARIAロールとフォーカス管理ルール。

ワークフロー

1. アラートレベル（重大度）を決定する

意図に基づいて状態を割り当てます：

• エラー（高優先度）: 注意が必要だがビューを壊さないクリティカルな問題。
• 警告（中優先度）: 潜在的な問題または期限が迫っているもの。
• 成功（低優先度）: 完了したアクションの確認。
• 情報/お知らせ: 中立的な情報またはマーケティング更新。

2. 配置パターンを選択する

• グローバルバナー（トップバー）: ビューポートの最上部に配置。高優先度のサイト全体のお知らせに最適。
• ページバナー: グローバルヘッダーの下、ページコンテンツの上に配置。ページ固有の通知に最適。
• インラインアラート: セクション内または関連コンポーネントの横（例：フォーム内）に直接配置。コンテキストに応じたフィードバックに最適。

3. コンポーネント構造を設計する

各アラートは一貫した内部階層に従う必要があります：

• アイコン: 重大度の視覚的な省略形（例：成功のチェックマーク）。
• タイトル（オプション）: 長いアラート用の太字見出し。
• 説明: コアメッセージ。簡潔に保ちます。
• アクション: 次のステップのためのボタンまたはリンク。
• 閉じるトリガー: アラートがクリティカルでない場合の「X」ボタン。

4. インタラクションルールを確立する

• 永続性: アラートがアクション後、タイムアウト後（バナーには推奨されません）、または手動で閉じられた場合のみに消えるかを決定します。
• レイアウトシフト管理: 表示されるバナーが不快なレイアウトシフト（CLS）を引き起こさないようにします。予約スペースまたはスムーズなトランジションを使用します。

5. レスポンシブ動作を定義する

• スタッキング: モバイルでは、アクションが横に収まらない場合はテキストの下に移動する必要があります。
• 幅: グローバルバナーは全幅。インラインアラートはコンテナの幅に従います。

決定ルール

• 「一度に1つ」ルール: グローバルバナーを2つ以上積み重ねないでください。複数の通知がある場合は、単一の「通知センター」またはスライダーに統合します。
• 色 + アイコン: アラートの状態を伝えるために色だけに依存しないでください。アクセシビリティのために常にアイコンを含めてください。
• コンテキストによる配置: アラートがユーザーアクション（例：「保存」をクリック）によって発生した場合は、アクションポイントの近く（インライン）に配置します。システム状態の場合は、上部（グローバル）に配置します。
• 閉じられるロジック: 「情報」および「成功」のバナーは常にユーザーが閉じられるようにしてください。「エラー」および「警告」のバナーは、根本的な問題が解決された場合にのみ閉じられるようにしてください。

制約

• アクセシビリティ: 高優先度のエラーにはrole="alert"、低優先度の更新にはrole="status"を使用します。テキストのコントラスト比は4.5:1を確保します。グローバルバナーが固定/スティッキーである場合、コンテンツがスクロールしてもフォーカスされた要素を永続的に隠さないことを確認します（WCAG 2.2 SC 2.4.11）。
• タイポグラフィ: 明確なフォントサイズ（最小14px）を使用し、長い説明にはすべて大文字を避けます。
• モバイルリーチ: 閉じるボタンはWCAG 2.2 SC 2.5.8の最小24x24pxを満たし、レイアウトが許せば44x44pxまで大きくします。

一般的な失敗パターン

• 「無視可能なエラー」: クリティカルなエラーに「情報」スタイルを使用し、ユーザーが重要な警告を見逃す原因となる。
• 押し付けがましいマーケティング: 低価値のプロモーションにグローバルバナーを使用し、ユーザーを苛立たせ「アラート」領域の価値を低下させる。
• アクションの欠如: 修正するための直接リンクを提供せずに、ユーザーに何かが間違っていること（例：「支払いが失敗しました」）を伝える。
• レイアウトのガタつき: 「ポップイン」してページ全体のコンテンツを押し下げ、ユーザーが誤クリックする原因となるバナー。

検証基準

• すべてのアラートは、その重大度に一致するアイコンと色の組み合わせを使用しています。
• グローバルバナーは階層の最上部に配置されています。
• インラインアラートは関連コンテンツの近くに配置されています。
• すべてのインタラクティブ要素（閉じる、CTA）はWCAG 2.2の24x24px最小タッチターゲット（2.5.8）を満たしています。
• 高優先度のアラートは適切なARIAロール（alert）を使用しています。
• 閉じられるバナーはその状態を記憶しています（または再表示するタイミングのロジックを持っています）。