システム・アプリ・コンテンツの現在の状態を画面の固定位置（通常は下部または上部）に常時表示するUIコンポーネント。接続状態（オンライン/オフライン）・保存状態（保存済み/未保存）・選択件数・処理進行状況などをコンパクトなテキストとアイコンで伝える。Toastが「一時的な通知」、Alertが「現在の状態の警告」であるのに対し、Status Barは「継続的な状態のサマリー」を常時表示する。
この記事を読むと、Toast・Alert との使い分け・表示すべき状態の優先度設計・aria-live="polite" での状態変化の伝達・コンテキスト依存の状態（選択中・処理中）の設計が自分でできるようになります。
1. UI例（Preview / Live）
このステータスバーは、デザインシステム GUNJO の StatusBar 実装（leftNode / center children / rightNode、既定は画面下部 fixed）です。用途を切り替え、操作すると状態が反映されます（デモ内では fixed={false} でボックス下部に配置。右上 Code で編集可）。
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
システム・アプリ・コンテンツの現在の状態を画面の固定位置（通常は下部）に常時表示するUIコンポーネント。状態を「常時・コンパクトに」提示することがポイント。
Toast / Alert / Status Bar の比較：
| 表示期間 | 位置 | 目的 | |
|---|---|---|---|
| Toast | 数秒（一時的） | フローティング | 操作結果の即時通知 |
| Alert | 状態が続く間 | インライン | 現在の警告・エラーの提示 |
| Status Bar | 常時 | 画面固定（下部など） | 継続的な状態のサマリー |
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- 保存状態（保存済み / 未保存 / 保存中）の常時表示
- 接続状態（オンライン / オフライン / 同期中）
- 選択件数（テーブル・リストで複数選択中の件数）
- 処理進行状況（バックグラウンド処理の進捗）
- コンテキスト情報（カーソル位置・ブランチ名・言語モードなど）
3.2 When NOT to use
- ユーザーに即時確認させたいエラー → Toast / Alert を使う
- ランディングページや読み物系サイト：常時状態表示が不要な用途
- モバイルメインのシンプルアプリ：Status Barのスペースが貴重
3.3 代替UI（Alternatives）
- 一時的な通知 →
Toast - 現在の状態の警告 →
Alert - 処理の進行状況のみ →
Progress Bar
4. 設計判断の核（Decision Principles）
Status Barの核は「情報の優先度設計」——左側（主要状態）と右側（補足情報）の2ゾーンに分け、最も重要な状態を左に置く。
判断の優先順位：① 表示する状態の選別（必須のみ） → ② 左/右の配置設計 → ③ aria-live での変化通知 → ④ コンテキスト依存の動的表示
- 左側に重要な状態・右側に補足情報：「接続状態」「保存状態」などユーザーが最初に確認すべき状態を左側に。「行番号」「エンコード」などの補足情報は右側に配置する。VSCode のStatus Barがこのパターンの典型例
- コンテキスト依存の状態は動的に表示/非表示を切り替える：「3件選択中」は何も選択していない時は表示しない。「保存中...」はトリガー直後だけ表示して「保存済み」に変わる。常時表示では空間効率を優先し、状態発生時だけ表示するアイテムを動的制御する
aria-live="polite"でStatus Bar全体をライブリージョンにする：Status Barの内容が変化した時（オンライン→オフライン、保存完了など）、スクリーンリーダーが現在の読み上げを終えた後に変化を通知する。aria-live="assertive"ではなくpoliteを使う（Status Barは即時割り込みを必要とする緊急情報ではない）
5. 状態設計（States）
5.1 Status Barに表示する主な状態
| 状態の種類 | 例 | 優先度 |
|---|---|---|
| 接続状態 | オンライン / オフライン | 高 |
| 保存状態 | 保存済み / 未保存 / 保存中 | 高 |
| 選択状態 | 3件選択中（選択時のみ表示） | 中（動的） |
| 処理状態 | アップロード 67%（処理中のみ） | 中（動的） |
| コンテキスト情報 | ブランチ名・行番号 | 低（補足） |
6. バリエーション設計（Variants）
アプリの性質によって表示する状態が異なる。
| バリアント | 主な状態 | 使用例 |
|---|---|---|
| エディター | 保存状態・カーソル位置・言語モード | テキストエディター・CMS |
| ダッシュボード | 接続状態・選択件数・処理進行 | 管理画面・データツール |
| IDE風 | ブランチ・エラー数・エンコード | コードエディター |
禁止パターン：Status Barにアクションボタン（「今すぐ保存」など）を詰め込む → Status Barの情報密度が上がりすぎる。アクションは本体のUI（ヘッダーのボタンなど）で提供する。ただしVSCodeのようにStatus Barのアイテムをクリックして設定を開く「クリッカブルアイテム」は、アイコン+ラベルで識別可能な場合は許容される。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- 全状態を常時表示する：「3件選択中」を何も選択していない時も表示し、「0件選択中」と表示されてスペースを無駄に使う
- 重要な状態と補足情報が混在：「オフライン（重要）」と「Spaces: 2（補足）」が同じ見た目・同じ位置に並び、重要な状態が埋もれる
aria-liveなし：接続が「オフライン」に変化しても、スクリーンリーダーのユーザーが変化に気づけない
7.1 Bad（典型3つ）
- 「0件選択中」「保存済み」「行1, 列1」「UTF-8」「Markdown」「オンライン」を全部常時表示し、Status Barが情報過多になる
- オフライン時に Status Bar の色が変わるだけで、
aria-liveがなくスクリーンリーダーに伝わらない - 左側に「Spaces: 2」「LF」などの補足情報、右側に「オフライン」の重要情報を配置して優先度が逆転する
7.2 Good（対になる3つ）
- 「選択中」「処理中」など一時的な状態は発生時だけ表示し、常時の情報量を最小限に抑える
<div aria-live="polite">で Status Bar 全体をライブリージョンにし、状態変化をスクリーンリーダーに自動通知する- 左側に「接続状態（オンライン/オフライン）」「保存状態」などの重要情報、右側に「行番号」「言語」などの補足情報を配置する
7.3 How to fix（手順）
- 表示する状態をリストアップし「常時表示」と「イベント発生時のみ表示」に分類する
- 常時表示は最大3〜4項目に絞り、左（重要）・右（補足）に分けてレイアウトする
- Status Barのコンテナに
aria-live="polite"を付与する - 接続状態など重要な状態には色 + アイコン + テキストの3つで意味を伝える（色のみに依存しない）
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
Screen Reader
<div
role="status"
aria-live="polite"
aria-label="ステータスバー"
>
<span>保存済み</span>
<span>行 24, 列 8</span>
</div>
role="status" は暗黙的に aria-live="polite" を持つ。どちらを使っても同等だが、両方同時に書かないように注意。
接続状態の変化（オンライン → オフライン）のように重要な状態は、Status Barの更新に加えて role="alert" を持つ隠し要素でも通知する実装を検討する（二重通知）。
Contrast / Readability
- 各状態のテキストと背景のコントラストは4.5:1以上
- Status Barのテキストは小さい（11〜12px）ため、色のコントラストを特に重視する
- アイコンは
aria-hidden="true"を付けて装飾扱いにし、意味はテキストで伝える
10. 実装メモ（Implementation Notes）
- shadcn/ui には Status Bar のネイティブコンポーネントがない。
fixed bottom-0 left-0 right-0の<div>にrole="status"またはaria-live="polite"を付与してカスタム実装する - VSCode系の実装では、Status Barの各アイテムをクリック可能にして関連設定パネルを開く（例：言語モードをクリックして言語選択パレットを開く）。この場合は
<button>タグを使いaria-labelで操作を説明する - オフライン検知は
window.addEventListener('online', handler)/window.addEventListener('offline', handler)で実装できる。Next.js / React ではuseEffect内でリスナーを登録し、cleanup で削除する - 保存状態の管理は
useState('saved' | 'saving' | 'unsaved')で管理し、自動保存タイマー（debounce 1〜2秒）と組み合わせるとスムーズな体験になる
11. 関連リンク
- 関連するUIデザイン原則: フィードバック (Feedback), 状態の可視化 (Visibility of System Status)
- 用語集（定義）: フィードバック (Feedback), アクセシビリティ (Accessibility)
- 関連するUIコンポーネント（横）: Toast（トースト通知）, Alert（アラート）, Notification Center（通知センター）, Badge（バッジ）
12. まとめ
Status Barの設計で最重要なのは「情報の優先度設計」と「aria-live での状態変化の伝達」です。迷ったら 4. 設計判断の核 に戻り、「左側に重要な状態・右側に補足情報か」「一時的な状態は動的に表示切り替えをしているか」「aria-live="polite" が付与されているか」の3点を確認してください。Toast・Alert・Status Barの選択基準は「状態の継続性」——一時的な通知はToast、現在の警告・エラーはAlert、継続的な状態のサマリーはStatus Barです。
