UIコンポーネントとは、UIを構成する再利用可能な部品です。Button・Modal・Tooltip・Sidebar——これらは単なるパーツではなく、それぞれが特定のUI原則とUX心理に基づいて設計されています。
UIXHEROではUI設計を UX心理（Why） → UI原則（What） → UIコンポーネント（How） の3レイヤーで体系化しています。
- 心理学を理解する → UX心理119法則
- 設計原則を学ぶ → UIデザイン原則65
- 実装パターンを知る → 本ページのUIコンポーネント
UIXHEROでは69のコンポーネントを9カテゴリで体系化し、「いつ使うか」「いつ使わないか」「状態設計」「アクセシビリティ要件」まで各記事で詳解しています。
→ サイト全体の入口は UXデザイン完全ガイド から
UIコンポーネントとUI原則の関係
コンポーネントは「UI原則の実装形」です。
UI原則（What）
段階的開示：必要になるまで情報を隠す
↓
UIコンポーネント（How）
Accordion / Tooltip / Sheet / Dropdown Menu
コンポーネントを選ぶときは「どのUI原則を満たすために使うか」を先に考えることが重要です。コンポーネントから入ると「見た目で選ぶ」になりやすく、UI原則から入ると「判断基準で選ぶ」になります。
UIコンポーネント69種類｜9カテゴリ一覧
UIXHEROでは、69のUIコンポーネントを役割ごとに9カテゴリへ整理しています。まず全体構造を確認してから、個別コンポーネントの記事へ進んでください。
カテゴリ 01｜アクションと入力
ユーザーが操作を行い、システムへ意思を伝達するための部品群
ユーザーの「意志」をシステムに伝えるコンポーネントです。クリック・選択・入力——すべての操作の起点になります。設計の核は「何をするか」が一目でわかることと、すべての状態（Default / Hover / Focus / Disabled / Loading / Error）の設計です。
| コンポーネント | 説明 |
|---|---|
| Button（ボタン） | アクションをトリガーする。Primary/Secondary/Destructiveの階層設計が核 |
| Toggle（トグル） | 2択の状態を切り替える。ON/OFFが即座にわかること |
| Switch（スイッチ） | 設定のON/OFFをリアルタイムで反映する |
| Checkbox（チェックボックス） | 複数選択可能。中間状態（Indeterminate）の設計が重要 |
| Radio Button（ラジオボタン） | 単一選択。選択肢2〜5個に使う。6個超はSelectへ |
| Text Input（テキスト入力） | 自由入力。バリデーションとエラー表示の設計が品質を決める |
| Textarea（テキストエリア） | 複数行入力。文字数制限・自動リサイズの設計 |
| Select（セレクト） | 6個以上の選択肢。Radioの代替として使う |
| Slider（スライダー） | 連続値の範囲入力。現在値の表示が必須 |
| File Upload（ファイルアップロード） | ドラッグ&ドロップ対応。進捗・エラー・成功状態の設計 |
設計のポイント
- Button階層：Primary（1画面に1つ）→ Secondary → Tertiary の3段階を守る
- 状態設計：Default / Hover / Focus / Active / Disabled / Loading / Error を全コンポーネントで設計する
- A11y必須：すべての入力系コンポーネントはキーボード操作・フォーカスリング・ARIAラベルが必要
カテゴリ 02｜ナビゲーション
ユーザーが画面内を迷わず移動し、現在地を把握するための部品群
「今どこにいるか」「どこへ行けるか」を常に示すのがナビゲーションの役割です。現在地の明示（Breadcrumb）・セクション切り替え（Tabs）・階層移動（Sidebar）——それぞれ使いどころが異なります。
| コンポーネント | 用途 | 核心原則 |
|---|---|---|
| Breadcrumb | 現在地と階層を示す | 現在地を常に表示 |
| Tabs | 同一画面内のコンテンツ切り替え | 選択中タブを明確に |
| Pagination | 大量データのページ分割ナビ | 現在ページ・総ページを表示 |
| Sidebar | グローバルナビゲーション | アクティブ項目をハイライト |
| Menubar | アプリのトップレベルメニュー | キーボード操作必須 |
| App Rail | モバイル/SaaSのグローバルナビ | アイコン＋ラベルで明確化 |
| Table of Contents | 長いコンテンツ内のナビ | スクロール位置と同期 |
TabsとSidebarの使い分け
- Tabs：同一階層のコンテンツ切り替え（例：「概要」「レビュー」「仕様」）
- Sidebar：複数の画面・セクションへのグローバルナビゲーション（例：ダッシュボードメニュー）
カテゴリ 03｜リスト・データ表示
大量の情報を構造化し、比較しやすく整頓するための部品群
情報を「見せる」だけでなく、「比較・判断できる」形に整えることがこのカテゴリの核です。
| コンポーネント | 使いどころ |
|---|---|
| List | 順序のある・なし両方の項目羅列 |
| Table | 複数属性を持つデータの比較 |
| Card | エンティティ（商品・記事・ユーザー）のサマリー |
| Badge | ステータス・カテゴリ・数値の小型ラベル |
| Avatar | ユーザー・エンティティの視覚的識別 |
| Image / Media | 視覚的コンテンツの表示 |
| Separator | セクション間の視覚的区切り |
TableとCardの使い分け
- Table：複数エンティティを同一属性で比較したい（価格比較・スペック表）
- Card：各エンティティを独立して評価・選択させたい（商品一覧・記事一覧）
カテゴリ 04｜データ可視化
数値の大小・推移・構成比を、図の形と位置で読み取らせるための部品群
表は個々の値を引くための道具で、チャートは全体の形を読むための道具です。「これは表にすべきか、図にすべきか」は読者ではなく作り手が決める設計判断で、その答えが読む速さを決めます。
| コンポーネント | 使いどころ |
|---|---|
| Bar Chart | カテゴリごとの量を比べる |
| Line Chart | 時間に沿った推移を追う |
| Stacked Bar Chart | 合計と内訳を同時に見せる |
| Pie Chart | 少数の構成比を示す |
| Donut Chart | 構成比に中央の要約を添える |
| Gauge Chart | 1つの値が目標や上限のどこにあるか |
| Radar Chart | 複数の軸で全体の形を比べる |
| Heatmap Chart | 2軸の交点の濃淡で偏りを見つける |
| Sparkline Chart | 文中や表の中で傾きだけを示す |
TableとChartの使い分け
- Table：個々の値を正確に読み取らせたい（金額の確認・件数の突き合わせ）
- Chart：全体の形を一目で掴ませたい（どれが多いか・伸びているか・偏っているか）
どのチャートでも共通の判断
- 色だけで系列を区別しない：形・ラベル・パターンを併用します。色覚特性や白黒印刷で読めなくなります
- 同じ数値を読める代替を置く：図に
role="img"とaria-labelを付けるか、近くに数値の表を添えます
カテゴリ 05｜検索・選択
情報の中から目的のものを素早く見つけ出し、絞り込むための部品群
大量の情報を扱うUIでは、「探せること」が機能の前提になります。Search・Filter・Sort は三位一体で設計します。
Search / Filter / Sort / Command Palette / Dropdown Menu / Context Menu / Toggle Group
Command Paletteの価値
パワーユーザー向けのキーボードファースト検索UI。⌘K で起動し、検索・コマンド・ナビゲーションを一本化する。SaaSツール（Figma・Linear・Notion）の標準UIになりつつある。
Dropdown MenuとSelectの違い
- Select：フォーム入力としての選択（値の送信が目的）
- Dropdown Menu：アクションの選択（「編集」「削除」「共有」など操作の起点）
カテゴリ 06｜開示・オーバーレイ
画面を遷移せずに追加情報を表示し、文脈を維持するための部品群
画面遷移なしに追加情報を見せるのがこのカテゴリです。段階的開示の原則を実装する主要コンポーネント群です。
| コンポーネント | トリガー | 主な使いどころ |
|---|---|---|
| Accordion（アコーディオン） | クリック | FAQ・設定・詳細情報の折りたたみ |
| Tooltip（ツールチップ） | ホバー | アイコンの説明・補足テキスト |
| Popover（ポップオーバー） | クリック | 設定パネル・フィルター・リッチ補足 |
| Dialog（Modal） | クリック | 削除確認・フォーム入力（強制フォーカス） |
| Sheet / Drawer | クリック | 詳細表示・モバイルメニュー（サイドから展開） |
このカテゴリに含まれる主なコンポーネント
Accordion / Tooltip / Popover / Hover Card / Dialog（Modal） / AlertDialog / Sheet / Drawer / Floating Panel
カテゴリ 07｜フィードバック・状態
システムの状態や操作結果をユーザーへ適切に伝えるための部品群
状態の可視化とフィードバックの原則を直接実装するコンポーネント群です。「今何が起きているか」をユーザーに常に伝える役割を担います。
| コンポーネント | 緊急度 | 持続性 | 使いどころ |
|---|---|---|---|
| Alert | 中〜高 | 永続（手動で閉じる） | 画面内の重要な通知 |
| Toast | 低〜中 | 一時（自動消去） | 操作の成功・完了通知 |
| Notification Center | 低〜中 | 永続（ログ） | 複数通知の管理 |
| Status Bar | 低 | 永続 | システム全体の状態表示 |
| Loading | — | 一時 | 処理中の状態 |
| Spinner | — | 一時 | ローカルな読み込み |
| Progress Bar | — | 一時 | 進捗の可視化（%表示） |
| Empty State | — | 永続 | データがないときの次のアクション |
ToastとAlertの使い分け
- Toast：「保存しました」「コピーしました」など操作完了の軽いフィードバック。3〜5秒で自動消去。
- Alert：「支払いが失敗しました」など、ユーザーが必ず確認すべき情報。自動消去しない。
カテゴリ 08｜レイアウト・可変
画面サイズやデバイスに応じて最適な配置を提供する部品群
レスポンシブ対応・情報密度の調整・パネルのリサイズなど、柔軟なレイアウトを実現するコンポーネント群です。
Scroll Area / Resizable / Responsive Patterns / Density Patterns / Right Rail
Density Patternsとは
同じコンポーネントでも、ユーザーの用途によって「コンパクト（データ重視）」「標準」「ゆったり（読みやすさ重視）」の3段階を切り替えられる設計パターン。GitHubやLinearのようなSaaSで採用。
カテゴリ 09｜高度な複合UI
複数の基本部品を組み合わせ、特定の目的を果たす強力な部品群
単一のコンポーネントでは実現できない複雑なUIパターンを扱います。ダッシュボード・エディタ・AIチャットなど、プロダクトの中核となる「大型コンポーネント」です。
| コンポーネント | 説明 |
|---|---|
| Calendar | 日付選択・スケジュール表示 |
| Carousel | 水平スクロールのコンテンツ表示 |
| AI Chat UI | チャットインターフェース設計 |
| Inspector Panel | 選択オブジェクトのプロパティ編集 |
| Spatial Canvas | 無限キャンバス・ドラッグ操作 |
| Share Modal | 共有・権限設定の複合ダイアログ |
| Dashboard Patterns | データ可視化・KPIダッシュボード |
| Editor Patterns | リッチテキスト・コードエディタ |
コンポーネント設計の3原則
UIコンポーネントを設計・選択するときに常に問い直す3つの基準。
① 役割は1つか 1つのコンポーネントが複数の役割を持ち始めたら、分割を検討する。Buttonがナビゲーションとアクションとフォームのsubmitを兼ねているなら、それは設計の問題。
② 状態はすべて設計されているか Default・Hover・Focus・Active・Disabled・Loading・Error・Empty——これらを設計していないコンポーネントは「未完成」。状態の見落としが最もよくある品質問題。
③ キーボードで操作できるか
すべての操作がキーボードで完結するか。Tab でフォーカス移動、Enter/Space で選択・実行、Escape で閉じる——これがA11yの最低ライン。
まとめ｜UIコンポーネントはUI原則の実装
UIコンポーネントは単なるパーツではありません。すべてのコンポーネントは、UX心理とUI原則に基づいて設計されます。
UIXHEROではUI設計を3つのレイヤーで体系化しています。
- UX心理（Why） — ユーザーの認知・行動・感情を理解する
- UI原則（What） — 心理法則をUI設計ルールに翻訳する
- UIコンポーネント（How） — 原則を実装可能なUIパターンにする
さらに体系的に学びたい方は → UIデザイン完全ガイド / UIデザイン原則まとめ / UX心理119法則
UI設計の全体像を知りたい場合は、まず UIデザイン完全ガイド から読むのがおすすめです。
