UIコンポーネントとは、UIを構成する再利用可能な部品です。Button・Modal・Tooltip・Sidebar——これらは単なるパーツではなく、それぞれが特定のUI原則とUX心理に基づいて設計されています。
UIXHEROではUI設計を UX心理(Why) → UI原則(What) → UIコンポーネント(How) の3レイヤーで体系化しています。
- 心理学を理解する → UX心理119法則
- 設計原則を学ぶ → UIデザイン原則65
- 実装パターンを知る → 本ページのUIコンポーネント
UIXHEROでは60のコンポーネントを8カテゴリで体系化し、 「いつ使うか」「いつ使わないか」「状態設計」「アクセシビリティ要件」 まで各記事で詳解しています。
→ サイト全体の入口は UIデザイン完全ガイド から
UIコンポーネントとUI原則の関係
コンポーネントは「UI原則の実装形」です。
UI原則(What)
段階的開示:必要になるまで情報を隠す
↓
UIコンポーネント(How)
Accordion / Tooltip / Sheet / Dropdown Menu
コンポーネントを選ぶときは「どのUI原則を満たすために使うか」を先に考えることが重要です。コンポーネントから入ると「見た目で選ぶ」になりやすく、UI原則から入ると「判断基準で選ぶ」になります。
UIコンポーネント60種類|8カテゴリ一覧
UIXHEROでは、60のUIコンポーネントを役割ごとに8カテゴリへ整理しています。まず全体構造を確認してから、個別コンポーネントの記事へ進んでください。
カテゴリ 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|検索・選択
情報の中から目的のものを素早く見つけ出し、絞り込むための部品群
大量の情報を扱う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 :アクションの選択(「編集」「削除」「共有」など操作の起点)
カテゴリ 05|開示・オーバーレイ
画面を遷移せずに追加情報を表示し、文脈を維持するための部品群
画面遷移なしに追加情報を見せるのがこのカテゴリです。段階的開示の原則を実装する主要コンポーネント群です。
| コンポーネント | トリガー | 主な使いどころ |
|---|---|---|
| Accordion(アコーディオン) | クリック | FAQ・設定・詳細情報の折りたたみ |
| Tooltip(ツールチップ) | ホバー | アイコンの説明・補足テキスト |
| Popover(ポップオーバー) | クリック | 設定パネル・フィルター・リッチ補足 |
| Dialog(Modal) | クリック | 削除確認・フォーム入力(強制フォーカス) |
| Sheet / Drawer | クリック | 詳細表示・モバイルメニュー(サイドから展開) |
このカテゴリに含まれる主なコンポーネント
Accordion / Tooltip / Popover / Hover Card / Dialog(Modal) / AlertDialog / Sheet / Drawer / Floating Panel
カテゴリ 06|フィードバック・状態
システムの状態や操作結果をユーザーへ適切に伝えるための部品群
状態の可視化とフィードバックの原則を直接実装するコンポーネント群です。「今何が起きているか」をユーザーに常に伝える役割を担います。
| コンポーネント | 緊急度 | 持続性 | 使いどころ |
|---|---|---|---|
| Alert | 中〜高 | 永続(手動で閉じる) | 画面内の重要な通知 |
| Toast | 低〜中 | 一時(自動消去) | 操作の成功・完了通知 |
| Notification Center | 低〜中 | 永続(ログ) | 複数通知の管理 |
| Status Bar | 低 | 永続 | システム全体の状態表示 |
| Loading | — | 一時 | 処理中の状態 |
| Spinner | — | 一時 | ローカルな読み込み |
| Progress Bar | — | 一時 | 進捗の可視化(%表示) |
| Empty State | — | 永続 | データがないときの次のアクション |
ToastとAlertの使い分け
- Toast :「保存しました」「コピーしました」など操作完了の軽いフィードバック。3〜5秒で自動消去。
- Alert :「支払いが失敗しました」など、ユーザーが必ず確認すべき情報。自動消去しない。
カテゴリ 07|レイアウト・可変
画面サイズやデバイスに応じて最適な配置を提供する部品群
レスポンシブ対応・情報密度の調整・パネルのリサイズなど、柔軟なレイアウトを実現するコンポーネント群です。
Scroll Area / Resizable / Responsive Patterns / Density Patterns / Right Rail
Density Patternsとは
同じコンポーネントでも、ユーザーの用途によって「コンパクト(データ重視)」「標準」「ゆったり(読みやすさ重視)」の3段階を切り替えられる設計パターン。GitHubやLinearのようなSaaSで採用。
カテゴリ 08|高度な複合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デザイン完全ガイド から読むのがおすすめです。