アラート・バナーUIのデザインガイド：情報・警告・エラー・成功の状態設計

アラートとバナーは、ユーザーに重要な情報・警告・成功・エラーを伝えるUIコンポーネントです。フォームのバリデーションエラー・システムメンテナンスのお知らせ・操作の成功確認など、様々な場面で使われます。本記事では、アラート・バナーUIの設計パターンとベストプラクティスを解説します。

アラートの種類と使い分け

情報（Information）：

色: 青系 / アイコン: 情報アイコン（ℹ）

使用例: 「お知らせ: システムメンテナンスを12月1日に実施予定です」

成功（Success）：

色: 緑系 / アイコン: チェックマーク

使用例: 「パスワードを正常に変更しました」

警告（Warning）：

色: 黄・橙系 / アイコン: 警告アイコン（⚠）

使用例: 「この操作は取り消せません。確認してから続行してください」

エラー（Error）：

色: 赤系 / アイコン: エラーアイコン（✕ または ！）

使用例: 「保存に失敗しました。接続を確認してもう一度お試しください」

インラインアラート vs ページバナー

インラインアラート：

フォーム内・コンテンツの特定の場所に埋め込まれるアラート。フォームのバリデーションエラー・特定のセクションへの注意喚起に使います。スクロールしても見えなくなることがあります。

ページバナー（トップバナー）：

ページ上部またはナビゲーションバー直下に固定表示される帯状のバナー。サービス全体への重要なお知らせ（メンテナンス・新機能・重大なエラー）に使います。ページのどこにいても常に見えます。

モーダルとの使い分け：

ユーザーの操作を止める必要がある場合はモーダルダイアログ、操作を止めずに伝えたい場合はアラート・バナーを使います。

アラートコンポーネントの構成

標準的な構成要素：

• アイコン（左端・アラートの種類を示す）
• タイトル（省略可・ある場合は太字）
• 本文テキスト（説明・次のアクション）
• アクションリンク/ボタン（省略可）
• 閉じるボタン（×・省略可）

閉じる機能の判断：

「一時的な情報」や「ユーザーが確認したら不要になるもの」は閉じるボタンを設けます。「ユーザーが行動するまで表示し続けるべき警告・エラー」は閉じるボタンを省略するか、閉じた後もアクションを促します。

アラートのカラーデザイン

薄い背景色 + 濃い文字色の組み合わせ：

アラートの背景は薄い（10〜15%不透明度）色、ボーダーは同系色の中程度の明度、テキストと左のアクセントラインは濃い同系色というパターンが視認性とUIとの調和のバランスに優れています。

/* 情報アラートの例 */
.alert-info {
  background-color: #EFF6FF;  /* 薄い青 */
  border: 1px solid #BFDBFE;  /* 中程度の青 */
  border-left: 4px solid #3B82F6; /* 濃い青のアクセント */
  color: #1E40AF;  /* 濃い青のテキスト */
}

ダークモードでのアラート

ダークモードでは薄い背景が暗い背景に溶け込むため、ボーダーカラーを強め・アイコンを明るくする調整が必要です。

アクセシビリティ

`role="alert"` と `aria-live`：

動的に表示されるアラート（フォームのエラー・成功通知）にはスクリーンリーダーに即座に読み上げさせるため role="alert" （aria-live="assertive" と同等）を設定します。

`role="status"`：

成功・情報などの重要でない通知には role="status" （aria-live="polite"）を使い、現在の読み上げを邪魔しないようにします。

フォーカス管理：

フォームのバリデーションエラーが発生した場合、スクロールしてエラーアラートを見えるようにし、フォーカスをアラートに移動させます。

まとめ

アラートとバナーは、ユーザーに必要な情報を的確に届けるUIコンポーネントです。情報・成功・警告・エラーの4種類を体系的にデザインし、インラインとページバナーを適切に使い分け、アクセシビリティ対応を整えることで、すべてのユーザーに伝わるアラートUIが完成します。UI ZUKANではアラートコンポーネントの実装例を掲載しています。