#ui-components
Toggle Group(トグルグループ)
複数の選択肢を排他選択(単一選択)または複数選択できるボタングループUIコンポーネント。RadioとCheckboxとの使い分け・単一/複数選択の設計・ARIA rolegroupパターンの実装を解説する。
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コンポーネント。チェックボックス・ドロップダウン・トグル・レンジスライダーの使い分けと、フィルター状態の可視化設計を解説する。
Image / Media(画像・メディア)
UIにおける画像・動画・音声などのメディアコンテンツの表示設計。アスペクト比固定・レイジーロード・スケルトンUI・alt属性の設計基準を解説する。
List(リスト)
複数の情報を縦に並べる最基本のUIパターン。Ordered / Unordered / Description の3種と、インタラクティブなAction list・Selection listの使い分けを押さえる。
Search(検索)
ユーザーが入力したキーワードでコンテンツを絞り込むUIコンポーネント。インクリメンタルサーチ・サジェスト・空の状態・キーボード操作の設計基準を解説する。