UIコンポーネント図鑑
名前が分からなくても引ける索引です。用途で絞り、見つけた部品から 使い分け・状態・アクセシビリティの解説へ進めます。
ひらがな・カタカナ・全角半角・大文字小文字のゆれは吸収します（「プルダウン」「ぷるだうん」「ﾌﾟﾙﾀﾞｳﾝ」は同じ）。英語名・slug でも引けます。
用途で絞る
表示
69本のうち 69本を表示しています
#047高度な複合UI応用AI Chat UI
AIチャットUI
AIアシスタントとの対話インターフェース。メッセージバブル・ストリーミング表示・ロール別スタイリング・入力欄・スケルトンローディング・エラー状態の設計パターンを解説する。
実装で見る（GunjoUI）ほか3件
#030検索・選択標準Context Menu
Context Menuとは、右クリックや長押しで表示するコンテキスト依存のメニューUIです。contextmenuイベント、Dropdown Menuとの違い、ARIA menu、モバイル対応を解説します。
#032開示・オーバーレイ入門Accordion
アコーディオン
見出しをクリックすると対応するコンテンツを展開・折りたたむUIコンポーネント。FAQ・設定セクション・段階的開示に使われ、単一展開と複数展開の使い分け・ARIA disclosure/accordion パターンの実装を解説する。
#022リスト・データ表示入門Avatar
アバター
ユーザーやエンティティを表す小さな円形または正方形の画像UI。プロフィール写真・イニシャル・アイコンの3種とフォールバック設計、グループ表示（Avatar Group）の判断基準を解説する。
#016ナビゲーション入門App rail
アプリレール
画面左端に縦並びするアイコン主体のナビゲーション。Sidebarより薄く、Bottom navより画面を広く使えるモバイル〜タブレット向けの省スペースナビゲーションコンポーネント。
#053フィードバック・状態入門Alert
アラート
重要な情報・警告・エラー・成功をインラインで伝えるUIコンポーネント。Toastとの使い分け・4種類のセマンティック（info/success/warning/error）・role=alertとaria-liveの実装を解説する。
#048高度な複合UI応用Inspector Panel
インスペクターパネル
選択したオブジェクト・要素のプロパティを表示・編集するサイドパネル。Figma・VS Code・DAWなどのプロ向けツールで使われるプロパティエディターのレイアウト・フィールドグループ化・リアルタイム更新・キーボード操作の設計を解説する。
- #052高度な複合UI応用
Editor Patterns
エディターパターン
テキスト・コード・リッチコンテンツを編集するためのUIパターン。ツールバー・コマンドパレット・スラッシュコマンド・マークダウン入力・コードエディター・インラインフォーマットの設計を解説する。
#020リスト・データ表示入門Card
カード
1つのエンティティに関連する情報（画像・タイトル・説明・アクション）をひとまとめにした独立したコンテナUI。ECサイトの商品一覧・記事サムネイル・ダッシュボードのウィジェットに使われる。
#046高度な複合UI標準Carousel
カルーセル
複数のコンテンツアイテムを横スクロールまたはスライドで切り替える複合UIコンポーネント。自動再生・手動ナビゲーション・インジケーター・レスポンシブ対応・アクセシビリティ（aria-roledescription・aria-live）の設計を解説する。
#045高度な複合UI標準Calendar
カレンダー
日付の選択・予定の表示・期間の選択を行う高度な複合UIコンポーネント。Date Picker・Event Calendar・Date Range Pickerの3種類の使い分け・キーボードナビゲーション・aria-labelの実装を解説する。
#066データ可視化入門Gauge Chart
ゲージチャート
1つの値を範囲の中に置いて示す半円のチャート。範囲の両端に意味があるかという条件、しきい値の帯の設計、色だけで良否を伝えない書き方という設計判断とアクセシビリティ要件を解説する。
#028検索・選択標準Command Palette
コマンドパレット
キーボードショートカット（⌘K / Ctrl+K）で呼び出す全機能横断の検索・実行UIコンポーネント。アプリ内のコマンド・ページ・設定を横断検索し、キーボードだけで操作を完結させるパワーユーザー向けUI設計を解説する。
#014ナビゲーション標準Sidebar / Side nav
サイドバー / サイドナビゲーション
画面左端に固定された垂直ナビゲーション。階層の深いアプリや管理画面で「常に全メニューを見せる」ことでユーザーの現在地把握とページ間移動を支援するコンポーネント。
#050高度な複合UI標準Share Modal
シェアモーダル
コンテンツのURL・アクセス権・共有先を設定・送信するためのモーダルダイアログ。リンクコピー・メール招待・権限設定・SNSシェアの設計パターンと、アクセシビリティ（フォーカストラップ・aria-modal）を解説する。
#003アクションと入力入門Switch
スイッチ
ON/OFFを即座にシステムへ反映させる設定コンポーネント。操作した瞬間に副作用が発生するため、確認なしに取り返せない設定には使用しない。
#040レイアウト・可変入門Scroll Area
スクロールエリア
コンテンツのオーバーフローをスクロールで制御するUIコンポーネント。ネイティブスクロールバーとカスタムスクロールバーの使い分け・スクロール位置の保持・overflow設計・アクセシビリティを解説する。
#056フィードバック・状態入門Status Bar
ステータスバー
システムやコンテンツの現在の状態を画面の固定位置に常時表示するUIコンポーネント。接続状態・保存状態・選択件数・処理進行状況などをコンパクトに伝える設計とARIA実装を解説する。
#069データ可視化入門Sparkline Chart
スパークライン
軸も目盛りも持たない小さな傾向線。数字と並べて置く理由、複数を並べるときに縦軸をそろえる必要、期間の明示という設計判断とアクセシビリティ要件を解説する。
#058フィードバック・状態入門Spinner
スピナー
処理中・読み込み中を回転アニメーションで伝えるUIコンポーネント。Skeletonとの使い分け・遅延表示（点滅防止）・サイズと配色の設計・role=statusとaria-labelの実装を解説する。
#049高度な複合UI応用Spatial Canvas
スペーシャルキャンバス
無限の2D空間でノード・カード・図形を自由に配置・接続・拡大縮小するインタラクティブキャンバスUI。Figma・Miro・Excalidraw・React Flowのようなホワイトボード・フロービルダーのパン・ズーム・ノードドラッグ・コネクター線の設計パターンを解説する。
#009アクションと入力入門Slider
スライダー
連続した数値の範囲を直感的に選択させるコンポーネント。正確な値入力より「だいたいこの辺」という曖昧さを許容する場面でのみ使う。
#024リスト・データ表示入門Separator
セパレーター
コンテンツ間の論理的・視覚的な区切りを表現するUIコンポーネント。水平線・余白・色の違いなど実装手段の選択基準と、装飾と意味論的区切りの使い分けを解説する。
#008アクションと入力入門Select
セレクト / プルダウンメニュー
複数の選択肢から1つを選ぶUI。適切な使用場面と、Radioボタン群やNativeのSelectとの使い分けの判断基準。
#027検索・選択入門Sort
ソート
コンテンツを特定の基準（日付・価格・名前・評価など）で並べ替えるUIコンポーネント。ソートUIの形式選択・現在の並び順の可視化・昇順/降順トグルの設計基準を解説する。
#036開示・オーバーレイ標準Dialog
ダイアログ / モーダル
ユーザーの作業を中断し、緊急性の高い決定や情報の確認を求めるモーダルウィンドウ。使い所とアクセシビリティ（フォーカストラップ）の設計基準。
実装で見る（GunjoUI）ほか1件
- #051高度な複合UI応用
Dashboard Patterns
ダッシュボードパターン
KPI・グラフ・テーブル・アラートを1画面に集約したデータ可視化UIのレイアウトパターン。グリッドレイアウト・ウィジェット設計・レスポンシブ対応・スケルトンローディング・フィルタリングの設計を解説する。
#012ナビゲーション標準Tabs
タブ
同一画面内でパネル（コンテンツ）を切り替えるUI。ナビゲーションとの違いと、画面遷移させずに情報を整理するルールの解説。
#004アクションと入力入門Checkbox
チェックボックス
単独あるいは複数の項目を「オン / オフ」するUI。RadioやToggle Switchとの使い分けの基準。
#033開示・オーバーレイ入門Tooltip
ツールチップ
要素にホバーまたはフォーカスした時に補足情報を表示する小さなフローティングUIコンポーネント。TooltipとPopoverの使い分け・モバイル対応の限界・role=tooltip ARIAパターン・aria-describedbyの実装を解説する。
#019リスト・データ表示応用Table
テーブル / 表
大量のデータを比較・俯瞰するためのUI。文字揃え・罫線の引き算・スクロール耐性という「データグリッド」の基本設計。
#007アクションと入力入門Textarea
テキストエリア
複数行の自由テキストを入力させるコンポーネント。1行のText Inputとの使い分け、自動リサイズ設計、バリデーションとアクセシビリティの基準。
#006アクションと入力入門Text Input
テキスト入力
ユーザーからの入力を受け付けるフォーム部品。ラベル、プレースホルダー、エラー処理の設計ルール。
#054フィードバック・状態入門Toast
トースト通知
ユーザーの操作を妨げずに、システムの処理結果を一過性で伝える軽量な通知UI。モーダル・アラートとの使い分け。
#064データ可視化入門Donut Chart
ドーナツチャート
中央をくり抜いた円で構成比を示すチャート。中央に置く値の選び方、円グラフとの使い分け、リングの太さ、凡例の作りという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
#031検索・選択入門Toggle Group
トグルグループ
複数の選択肢を排他選択（単一選択）または複数選択できるボタングループUIコンポーネント。RadioとCheckboxとの使い分け・単一/複数選択の設計・ARIA rolegroupパターンの実装を解説する。
#002アクションと入力入門Toggle
トグルボタン
トグルボタンとは、押した状態を保持してON/OFFや選択中を示すUIです。Switch・Button・Checkboxとの違い、使う場面、aria-pressedの設計を解説します。
#029検索・選択標準Dropdown Menu
ドロップダウンメニュー
トリガー要素をクリック/ホバーすると展開するメニューUIコンポーネント。Context MenuやSelectとの使い分け・フォーカス管理・サブメニュー設計・ARIA menuパターンの実装を解説する。
#038開示・オーバーレイ標準Sheet / Drawer
ドロワー / シート
画面の端（左右や下部）からスライドして現れるダイアログの一種。スマートフォンのメニューや、親画面の文脈を保ったまま詳細を表示する際に用いる。
#021リスト・データ表示入門Badge
バッジ
ラベル・ステータス・数値を小さな丸みを帯びたチップで示すUIコンポーネント。カテゴリタグ・未読数・ステータス表示に使われ、視覚的に素早く情報を補完する。
#011ナビゲーション入門Breadcrumb
パンくずリスト
現在地と階層構造を同時に伝えるナビゲーション補助コンポーネント。ユーザーが「今どこにいるか」と「どこから来たか」を一目で把握できる設計基準。
#068データ可視化標準Heatmap Chart
ヒートマップ
行と列の交点をセルの濃淡で示すチャート。濃淡で読めるものと読めないもの、色の段階の切り方、行列の並び順、値を数字でも出す判断とアクセシビリティ要件を解説する。
#010アクションと入力標準File Upload
ファイルアップロード
ファイル選択・ドラッグ&ドロップ・進捗表示・エラーハンドリングを統合したコンポーネント。ユーザーが「今どの状態にあるか」を常に把握できる設計が品質の核心。
#026検索・選択標準Filter
フィルター
コンテンツを条件（カテゴリ・日付・価格・ステータスなど）で絞り込むUIコンポーネント。チェックボックス・ドロップダウン・トグル・レンジスライダーの使い分けと、フィルター状態の可視化設計を解説する。
実装で見る（GunjoUI）ほか1件
#039開示・オーバーレイ標準Floating Panel
フローティングパネル
画面上に浮かんだ状態で表示し続けるパネルUIコンポーネント。ユーザーがドラッグで位置を変えたり、折りたたんだりできる永続的なフローティングUIの設計・実装を解説する。
#059フィードバック・状態入門Progress Bar
プログレスバー
処理の進捗率を横棒グラフで視覚的に伝えるUIコンポーネント。Spinnerとの使い分け・不定時間進捗（Indeterminate）の設計・role=progressbarとaria-valuenowの実装を解説する。
#013ナビゲーション標準Pagination
ページネーション
ページネーションとは、一覧を複数ページに分けて移動しやすくするUIです。表示件数、ページ送り、無限スクロールとの違い、アクセシビリティ要件を解説します。
#001アクションと入力入門Button
ボタン
UIで最も重要なインタラクション要素であるボタンの、機能（階層）、状態、配置を一貫させるための設計基準。
#034開示・オーバーレイ標準Popover
ポップオーバー
トリガー要素をクリックすると展開するフローティングパネルUIコンポーネント。TooltipとModalの間を埋める存在として、インタラクティブなコンテンツ（フォーム・リンク・設定）を小さなパネルで提供する設計を解説する。
#035開示・オーバーレイ標準Hover Card
ホバーカード
リンクやアバターにホバーした時にユーザー情報・記事プレビュー・リポジトリ情報などをリッチなカード形式で表示するUIコンポーネント。TooltipとPopoverとの使い分け・ホバー遅延・キーボードアクセシビリティの設計を解説する。
#015ナビゲーション標準Menubar
メニューバー
アプリ上部に横並びするトップレベルメニュー。ファイル・編集・表示などの機能カテゴリをクリックでドロップダウン展開するデスクトップアプリ型ナビゲーションコンポーネント。
#044レイアウト・可変標準Right Rail
ライトレール
コンテンツエリアの右側に配置する補助的なサイドカラム。関連リンク・広告・目次・ウィジェットなどを収容する設計・スティッキー配置・レスポンシブでの折り畳み・コンテンツとの優先順位付けを解説する。
#005アクションと入力入門Radio Button
ラジオボタン
複数の選択肢から「必ず1つだけ」を選ぶ排他選択UI。CheckboxやSelectとの使い分けと、安全な初期状態の設計。
実装で見る（GunjoUI）ほか1件
#041レイアウト・可変標準Resizable
リサイザブル
ユーザーがドラッグ操作でパネルの幅・高さを自由に変更できるUIコンポーネント。分割ペイン・サイドバー幅の調整・エディタースプリッターの設計・最小・最大サイズの制約・アクセシビリティを解説する。
#018リスト・データ表示入門List
リスト
複数の情報を縦に並べる最基本のUIパターン。Ordered / Unordered / Description の3種と、インタラクティブなAction list・Selection listの使い分けを押さえる。
#067データ可視化標準Radar Chart
レーダーチャート
複数の軸のスコアを多角形で示すチャート。軸の順序で形が変わるという性質、正規化の根拠、重ねられる系列数、面積を読ませない書き方という設計判断とアクセシビリティ要件を解説する。
- #042レイアウト・可変標準
Responsive Patterns
レスポンシブパターン
画面サイズに応じてUIレイアウトを適応させる設計パターン集。ナビゲーションの変形・グリッドの折り畳み・コンポーネントの切り替えなど、モバイル・タブレット・デスクトップでの代表的な対応パターンとブレークポイント設計を解説する。
#057フィードバック・状態標準Loading
ローディング
処理中であることをユーザーに伝えるUIパターン全体の設計指針。Spinner・Skeleton・Progress Barの使い分け・知覚的な待機時間の最適化・aria-busyとaria-liveの実装を解説する。
実装で見る（GunjoUI）ほか2件
#063データ可視化入門Pie Chart
円グラフ
全体に対する構成比を扇形で示すチャート。合計が意味を持つ条件、区分数の上限、並び順、値をどこに書くかという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
- #023リスト・データ表示入門
Image / Media
画像・メディア
UIにおける画像・動画・音声などのメディアコンテンツの表示設計。アスペクト比固定・レイジーロード・スケルトンUI・alt属性の設計基準を解説する。
実装で見る（GunjoUI）ほか2件
#060フィードバック・状態入門Empty State
空状態
コンテンツが存在しない状態をユーザーに伝えるUIコンポーネント。「データなし」「検索結果なし」「エラー」の3種類の設計・イラスト/アイコン/テキスト/CTAの組み合わせ・アクセシビリティの実装を解説する。
#037開示・オーバーレイ標準AlertDialog
警告ダイアログ
不可逆なアクション（削除・リセットなど）の実行前に、ユーザーに重大な結果を警告し最終確認を求めるダイアログ。
#025検索・選択標準Search
検索
ユーザーが入力したキーワードでコンテンツを絞り込むUIコンポーネント。インクリメンタルサーチ・サジェスト・空の状態・キーボード操作の設計基準を解説する。
#065データ可視化標準Stacked Bar Chart
積み上げ棒グラフ
グループごとの内訳を積み上げて比べるチャート。正確に読めるのは最下段と合計だけという制約、系列の順序、100パーセント正規化の使いどころという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
#062データ可視化入門Line Chart
折れ線グラフ
時間に沿った値の動きを線で示すチャート。点をつないでよいデータの条件、縦軸を切るときの書き方、系列数の上限、直接ラベルという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
#055フィードバック・状態標準Notification Center
通知センター
アプリ内の通知を一覧・管理するUIコンポーネント。Toast・Alertとの使い分け・未読バッジ・既読管理・グループ化・通知設定への導線の設計を解説する。
#061データ可視化入門Bar Chart
棒グラフ
カテゴリごとの量を棒の長さで比べるチャート。ゼロ基線の扱い、並び順、縦横の選び方、しきい値の見せ方という設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
- #043レイアウト・可変標準
Density Patterns
密度パターン
UIの情報密度をユーザーや用途に合わせて切り替える設計パターン。Compact・Default・Comfortable の3段階・テーブル行・リスト・カードへの適用・ユーザー設定との連動を解説する。
- #017ナビゲーション入門
Table of Contents
目次
長いページ内のセクション構造を可視化し、読者が任意の場所へジャンプできるナビゲーションUI。スクロール連動・アクティブ追跡・スムーズスクロールの設計基準を解説する。
