#ui-components
Spatial Canvas（スペーシャルキャンバス）
無限の2D空間でノード・カード・図形を自由に配置・接続・拡大縮小するインタラクティブキャンバスUI。Figma・Miro・Excalidraw・React Flowのようなホワイトボード・フロービルダーのパン・ズーム・ノードドラッグ・コネクター線の設計パターンを解説する。
Spinner（スピナー）
処理中・読み込み中を回転アニメーションで伝えるUIコンポーネント。Skeletonとの使い分け・遅延表示（点滅防止）・サイズと配色の設計・role=statusとaria-labelの実装を解説する。
Status Bar（ステータスバー）
システムやコンテンツの現在の状態を画面の固定位置に常時表示するUIコンポーネント。接続状態・保存状態・選択件数・処理進行状況などをコンパクトに伝える設計とARIA実装を解説する。
トグルグループとは？ラジオボタンとの違いと単一・複数選択
トグルグループ（Toggle Group）とは、押すたびにオンとオフが切り替わるトグルボタンをひとまとめに並べ、その中から1つだけ、または複数を選べるようにしたUIです。ラジオボタンやチェックボックスとの使い分け、単一選択と複数選択の設計、キーボード操作と画面読み上げソフトへの対応を解説します。
Tooltip（ツールチップ）
要素にホバーまたはフォーカスした時に補足情報を表示する小さなフローティングUIコンポーネント。TooltipとPopoverの使い分け・モバイル対応の限界・role=tooltip ARIAパターン・aria-describedbyの実装を解説する。
Command Palette（コマンドパレット）
キーボードショートカット（⌘K / Ctrl+K）で呼び出す全機能横断の検索・実行UIコンポーネント。アプリ内のコマンド・ページ・設定を横断検索し、キーボードだけで操作を完結させるパワーユーザー向けUI設計を解説する。
Dropdown Menu（ドロップダウンメニュー）
トリガー要素をクリック/ホバーすると展開するメニューUIコンポーネント。Context MenuやSelectとの使い分け・フォーカス管理・サブメニュー設計・ARIA menuパターンの実装を解説する。
Sort（ソート）
コンテンツを特定の基準（日付・価格・名前・評価など）で並べ替えるUIコンポーネント。ソートUIの形式選択・現在の並び順の可視化・昇順/降順トグルの設計基準を解説する。
Avatar（アバター）
ユーザーやエンティティを表す小さな円形または正方形の画像UI。プロフィール写真・イニシャル・アイコンの3種とフォールバック設計、グループ表示（Avatar Group）の判断基準を解説する。
Badge（バッジ）
ラベル・ステータス・数値を小さな丸みを帯びたチップで示すUIコンポーネント。カテゴリタグ・未読数・ステータス表示に使われ、視覚的に素早く情報を補完する。
Card（カード）
1つのエンティティに関連する情報（画像・タイトル・説明・アクション）をひとまとめにした独立したコンテナUI。ECサイトの商品一覧・記事サムネイル・ダッシュボードのウィジェットに使われる。
Filter（フィルター）
コンテンツを条件（カテゴリ・日付・価格・ステータスなど）で絞り込むUIコンポーネント。チェックボックス・ドロップダウン・トグル・レンジスライダーの使い分けと、フィルター状態の可視化設計を解説する。