UIコンポーネント

UIで最も重要なインタラクション要素であるボタンの、機能（階層）、状態、配置を一貫させるための設計基準。

トグルボタンとは、押した状態を保持してON/OFFや選択中を示すUIです。Switch・Button・Checkboxとの違い、使う場面、aria-pressedの設計を解説します。

ON/OFFを即座にシステムへ反映させる設定コンポーネント。操作した瞬間に副作用が発生するため、確認なしに取り返せない設定には使用しない。

単独あるいは複数の項目を「オン / オフ」するUI。RadioやToggle Switchとの使い分けの基準。

複数の選択肢から「必ず1つだけ」を選ぶ排他選択UI。CheckboxやSelectとの使い分けと、安全な初期状態の設計。

ユーザーからの入力を受け付けるフォーム部品。ラベル、プレースホルダー、エラー処理の設計ルール。

複数行の自由テキストを入力させるコンポーネント。1行のText Inputとの使い分け、自動リサイズ設計、バリデーションとアクセシビリティの基準。

複数の選択肢から1つを選ぶUI。適切な使用場面と、Radioボタン群やNativeのSelectとの使い分けの判断基準。

連続した数値の範囲を直感的に選択させるコンポーネント。正確な値入力より「だいたいこの辺」という曖昧さを許容する場面でのみ使う。

ファイル選択・ドラッグ&ドロップ・進捗表示・エラーハンドリングを統合したコンポーネント。ユーザーが「今どの状態にあるか」を常に把握できる設計が品質の核心。

現在地と階層構造を同時に伝えるナビゲーション補助コンポーネント。ユーザーが「今どこにいるか」と「どこから来たか」を一目で把握できる設計基準。

同一画面内でパネル（コンテンツ）を切り替えるUI。ナビゲーションとの違いと、画面遷移させずに情報を整理するルールの解説。

ページネーションとは、一覧を複数ページに分けて移動しやすくするUIです。表示件数、ページ送り、無限スクロールとの違い、アクセシビリティ要件を解説します。

画面左端に固定された垂直ナビゲーション。階層の深いアプリや管理画面で「常に全メニューを見せる」ことでユーザーの現在地把握とページ間移動を支援するコンポーネント。

アプリ上部に横並びするトップレベルメニュー。ファイル・編集・表示などの機能カテゴリをクリックでドロップダウン展開するデスクトップアプリ型ナビゲーションコンポーネント。

画面左端に縦並びするアイコン主体のナビゲーション。Sidebarより薄く、Bottom navより画面を広く使えるモバイル〜タブレット向けの省スペースナビゲーションコンポーネント。

長いページ内のセクション構造を可視化し、読者が任意の場所へジャンプできるナビゲーションUI。スクロール連動・アクティブ追跡・スムーズスクロールの設計基準を解説する。

複数の情報を縦に並べる最基本のUIパターン。Ordered / Unordered / Description の3種と、インタラクティブなAction list・Selection listの使い分けを押さえる。

大量のデータを比較・俯瞰するためのUI。文字揃え・罫線の引き算・スクロール耐性という「データグリッド」の基本設計。

1つのエンティティに関連する情報（画像・タイトル・説明・アクション）をひとまとめにした独立したコンテナUI。ECサイトの商品一覧・記事サムネイル・ダッシュボードのウィジェットに使われる。

ラベル・ステータス・数値を小さな丸みを帯びたチップで示すUIコンポーネント。カテゴリタグ・未読数・ステータス表示に使われ、視覚的に素早く情報を補完する。

ユーザーやエンティティを表す小さな円形または正方形の画像UI。プロフィール写真・イニシャル・アイコンの3種とフォールバック設計、グループ表示（Avatar Group）の判断基準を解説する。

UIにおける画像・動画・音声などのメディアコンテンツの表示設計。アスペクト比固定・レイジーロード・スケルトンUI・alt属性の設計基準を解説する。

コンテンツ間の論理的・視覚的な区切りを表現するUIコンポーネント。水平線・余白・色の違いなど実装手段の選択基準と、装飾と意味論的区切りの使い分けを解説する。

カテゴリごとの量を棒の長さで比べるチャート。ゼロ基線の扱い、並び順、縦横の選び方、しきい値の見せ方という設計判断と、色だけに頼らないアクセシビリティ要件を解説する。

時間に沿った値の動きを線で示すチャート。点をつないでよいデータの条件、縦軸を切るときの書き方、系列数の上限、直接ラベルという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。

全体に対する構成比を扇形で示すチャート。合計が意味を持つ条件、区分数の上限、並び順、値をどこに書くかという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。

中央をくり抜いた円で構成比を示すチャート。中央に置く値の選び方、円グラフとの使い分け、リングの太さ、凡例の作りという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。

グループごとの内訳を積み上げて比べるチャート。正確に読めるのは最下段と合計だけという制約、系列の順序、100パーセント正規化の使いどころという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。

1つの値を範囲の中に置いて示す半円のチャート。範囲の両端に意味があるかという条件、しきい値の帯の設計、色だけで良否を伝えない書き方という設計判断とアクセシビリティ要件を解説する。

複数の軸のスコアを多角形で示すチャート。軸の順序で形が変わるという性質、正規化の根拠、重ねられる系列数、面積を読ませない書き方という設計判断とアクセシビリティ要件を解説する。

行と列の交点をセルの濃淡で示すチャート。濃淡で読めるものと読めないもの、色の段階の切り方、行列の並び順、値を数字でも出す判断とアクセシビリティ要件を解説する。

軸も目盛りも持たない小さな傾向線。数字と並べて置く理由、複数を並べるときに縦軸をそろえる必要、期間の明示という設計判断とアクセシビリティ要件を解説する。

ユーザーが入力したキーワードでコンテンツを絞り込むUIコンポーネント。インクリメンタルサーチ・サジェスト・空の状態・キーボード操作の設計基準を解説する。

コンテンツを条件（カテゴリ・日付・価格・ステータスなど）で絞り込むUIコンポーネント。チェックボックス・ドロップダウン・トグル・レンジスライダーの使い分けと、フィルター状態の可視化設計を解説する。

コンテンツを特定の基準（日付・価格・名前・評価など）で並べ替えるUIコンポーネント。ソートUIの形式選択・現在の並び順の可視化・昇順/降順トグルの設計基準を解説する。

キーボードショートカット（⌘K / Ctrl+K）で呼び出す全機能横断の検索・実行UIコンポーネント。アプリ内のコマンド・ページ・設定を横断検索し、キーボードだけで操作を完結させるパワーユーザー向けUI設計を解説する。

トリガー要素をクリック/ホバーすると展開するメニューUIコンポーネント。Context MenuやSelectとの使い分け・フォーカス管理・サブメニュー設計・ARIA menuパターンの実装を解説する。

Context Menuとは、右クリックや長押しで表示するコンテキスト依存のメニューUIです。contextmenuイベント、Dropdown Menuとの違い、ARIA menu、モバイル対応を解説します。

複数の選択肢を排他選択（単一選択）または複数選択できるボタングループUIコンポーネント。RadioとCheckboxとの使い分け・単一/複数選択の設計・ARIA rolegroupパターンの実装を解説する。

見出しをクリックすると対応するコンテンツを展開・折りたたむUIコンポーネント。FAQ・設定セクション・段階的開示に使われ、単一展開と複数展開の使い分け・ARIA disclosure/accordion パターンの実装を解説する。

要素にホバーまたはフォーカスした時に補足情報を表示する小さなフローティングUIコンポーネント。TooltipとPopoverの使い分け・モバイル対応の限界・role=tooltip ARIAパターン・aria-describedbyの実装を解説する。

トリガー要素をクリックすると展開するフローティングパネルUIコンポーネント。TooltipとModalの間を埋める存在として、インタラクティブなコンテンツ（フォーム・リンク・設定）を小さなパネルで提供する設計を解説する。

リンクやアバターにホバーした時にユーザー情報・記事プレビュー・リポジトリ情報などをリッチなカード形式で表示するUIコンポーネント。TooltipとPopoverとの使い分け・ホバー遅延・キーボードアクセシビリティの設計を解説する。

ユーザーの作業を中断し、緊急性の高い決定や情報の確認を求めるモーダルウィンドウ。使い所とアクセシビリティ（フォーカストラップ）の設計基準。

不可逆なアクション（削除・リセットなど）の実行前に、ユーザーに重大な結果を警告し最終確認を求めるダイアログ。

画面の端（左右や下部）からスライドして現れるダイアログの一種。スマートフォンのメニューや、親画面の文脈を保ったまま詳細を表示する際に用いる。

画面上に浮かんだ状態で表示し続けるパネルUIコンポーネント。ユーザーがドラッグで位置を変えたり、折りたたんだりできる永続的なフローティングUIの設計・実装を解説する。

重要な情報・警告・エラー・成功をインラインで伝えるUIコンポーネント。Toastとの使い分け・4種類のセマンティック（info/success/warning/error）・role=alertとaria-liveの実装を解説する。

ユーザーの操作を妨げずに、システムの処理結果を一過性で伝える軽量な通知UI。モーダル・アラートとの使い分け。

アプリ内の通知を一覧・管理するUIコンポーネント。Toast・Alertとの使い分け・未読バッジ・既読管理・グループ化・通知設定への導線の設計を解説する。

システムやコンテンツの現在の状態を画面の固定位置に常時表示するUIコンポーネント。接続状態・保存状態・選択件数・処理進行状況などをコンパクトに伝える設計とARIA実装を解説する。

処理中であることをユーザーに伝えるUIパターン全体の設計指針。Spinner・Skeleton・Progress Barの使い分け・知覚的な待機時間の最適化・aria-busyとaria-liveの実装を解説する。

処理中・読み込み中を回転アニメーションで伝えるUIコンポーネント。Skeletonとの使い分け・遅延表示（点滅防止）・サイズと配色の設計・role=statusとaria-labelの実装を解説する。

処理の進捗率を横棒グラフで視覚的に伝えるUIコンポーネント。Spinnerとの使い分け・不定時間進捗（Indeterminate）の設計・role=progressbarとaria-valuenowの実装を解説する。

コンテンツが存在しない状態をユーザーに伝えるUIコンポーネント。「データなし」「検索結果なし」「エラー」の3種類の設計・イラスト/アイコン/テキスト/CTAの組み合わせ・アクセシビリティの実装を解説する。

コンテンツのオーバーフローをスクロールで制御するUIコンポーネント。ネイティブスクロールバーとカスタムスクロールバーの使い分け・スクロール位置の保持・overflow設計・アクセシビリティを解説する。

ユーザーがドラッグ操作でパネルの幅・高さを自由に変更できるUIコンポーネント。分割ペイン・サイドバー幅の調整・エディタースプリッターの設計・最小・最大サイズの制約・アクセシビリティを解説する。

画面サイズに応じてUIレイアウトを適応させる設計パターン集。ナビゲーションの変形・グリッドの折り畳み・コンポーネントの切り替えなど、モバイル・タブレット・デスクトップでの代表的な対応パターンとブレークポイント設計を解説する。

UIの情報密度をユーザーや用途に合わせて切り替える設計パターン。Compact・Default・Comfortable の3段階・テーブル行・リスト・カードへの適用・ユーザー設定との連動を解説する。

コンテンツエリアの右側に配置する補助的なサイドカラム。関連リンク・広告・目次・ウィジェットなどを収容する設計・スティッキー配置・レスポンシブでの折り畳み・コンテンツとの優先順位付けを解説する。

日付の選択・予定の表示・期間の選択を行う高度な複合UIコンポーネント。Date Picker・Event Calendar・Date Range Pickerの3種類の使い分け・キーボードナビゲーション・aria-labelの実装を解説する。

複数のコンテンツアイテムを横スクロールまたはスライドで切り替える複合UIコンポーネント。自動再生・手動ナビゲーション・インジケーター・レスポンシブ対応・アクセシビリティ（aria-roledescription・aria-live）の設計を解説する。

AIアシスタントとの対話インターフェース。メッセージバブル・ストリーミング表示・ロール別スタイリング・入力欄・スケルトンローディング・エラー状態の設計パターンを解説する。

選択したオブジェクト・要素のプロパティを表示・編集するサイドパネル。Figma・VS Code・DAWなどのプロ向けツールで使われるプロパティエディターのレイアウト・フィールドグループ化・リアルタイム更新・キーボード操作の設計を解説する。

無限の2D空間でノード・カード・図形を自由に配置・接続・拡大縮小するインタラクティブキャンバスUI。Figma・Miro・Excalidraw・React Flowのようなホワイトボード・フロービルダーのパン・ズーム・ノードドラッグ・コネクター線の設計パターンを解説する。

コンテンツのURL・アクセス権・共有先を設定・送信するためのモーダルダイアログ。リンクコピー・メール招待・権限設定・SNSシェアの設計パターンと、アクセシビリティ（フォーカストラップ・aria-modal）を解説する。

KPI・グラフ・テーブル・アラートを1画面に集約したデータ可視化UIのレイアウトパターン。グリッドレイアウト・ウィジェット設計・レスポンシブ対応・スケルトンローディング・フィルタリングの設計を解説する。

テキスト・コード・リッチコンテンツを編集するためのUIパターン。ツールバー・コマンドパレット・スラッシュコマンド・マークダウン入力・コードエディター・インラインフォーマットの設計を解説する。