この記事は、UIXHEROのUIデザイン領域を体系的に学ぶためのナビゲーションです。
UI原則65記事・UIコンポーネント60記事・UX心理119法則を3レイヤー構造（Why→What→How）で接続しています。個別のUI設計原則を探す場合は UIデザイン原則一覧、全体像と学び順を理解する場合はこのガイドを使ってください。
あなたの目的は？
| 目的 | 最初に読む記事 |
|---|---|
| UIとは何か、基本概念を知りたい | → UIとは |
| UI原則の全体像を理解したい | → UIデザイン原則まとめ |
| 個別のUI設計原則を探したい | → UIデザイン原則一覧 |
| 実装可能なコンポーネントを知りたい | → UIコンポーネント完全ガイド |
| 「なぜそのUIが良いのか」を説明できるようになりたい | → UX心理119法則 |
| 設計プロセス・思考順序を知りたい | → UI設計プロセス完全ガイド |
※ UIXHERO全体の入口は「UXデザイン完全ガイド」をご覧ください。
このガイドとUIデザイン原則一覧の役割
検索では「UI原則」「UI設計原則」「UXデザインの法則」が近い意味で使われますが、UIXHEROでは役割を分けています。
| ページ | 役割 | 使いどころ |
|---|---|---|
| このページ | UIデザイン全体をWhy→What→Howで理解する解説記事 | UI設計の学び順、UX心理とのつながり、コンポーネントへの落とし込みを知りたいとき |
| UIデザイン原則一覧 | 65の個別原則を探すリソースハブ | 視覚的階層、一貫性、アフォーダンス、フィードバックなどを個別に調べたいとき |
つまり、このページは「UIデザインの地図」、原則一覧は「個別原則の辞書」です。先に全体像をつかみ、実務で迷ったら一覧から該当する原則へ戻る、という使い方が向いています。
UIXHEROの3レイヤー構造
UIXHEROでは、UIデザインを3つのレイヤーで体系化しています。この3レイヤーは「なぜ」→「何を」→「どう」の順番で繋がっています。
| レイヤー | 問い | 役割 |
|---|---|---|
| UX心理（Why） | なぜユーザーはそう感じ・行動するか | 人間の認知・感情・行動の仕組みを理解する |
| UI原則（What） | どう設計すればよいか | 心理法則をUIの判断基準へ翻訳する |
| UIコンポーネント（How） | どう形にするか | 原則を実装可能な部品として具体化する |
レイヤー① UX心理
人間の認知・行動・感情のメカニズムを理解するための理論体系です。
「ヒックの法則（選択肢が増えるほど決定に時間がかかる）」「フィッツの法則（ターゲットが大きく・近いほど操作しやすい）」「ピーク・エンドの法則（体験の頂点と終わりが記憶に残る）」など、UIデザインの根拠となる心理学・認知科学の法則をまとめています。
レイヤー② UI原則
UX心理を「設計判断」に翻訳したのがUI原則です。
「コントラストを高めてCTAを目立たせる」「段階的開示で認知負荷を減らす」「フィードバックで操作の結果を即座に伝える」——これらはすべて、心理法則をUIの設計ルールとして具体化したものです。
レイヤー③ UIコンポーネント
UI原則を「実装可能な部品」として形にしたものがUIコンポーネントです。
Button・Modal・Tooltip・Sidebar——これらは単なるパーツではなく、それぞれが特定のUI原則とUX心理に基づいて設計されています。
UIデザイン原則 8カテゴリ
UIXHEROのUIデザイン原則は、65の記事を8つのカテゴリに整理しています。以下はその全体構造です。
個別原則を一覧で探す場合は UIデザイン原則一覧 が入口です。このガイドでは、カテゴリごとの役割と代表原則の関係を把握します。
01｜視覚設計
「意味が伝わる視覚構造を作る」フェーズ。
コントラスト / 整列 / 近接 / 反復・一貫性 / 余白 / グリッドシステム / タイポグラフィ設計 / 配色設計 / 画像・アイコンの役割 / 視線誘導 / 情報密度の最適化 / コンポーネントの視覚一貫性 / モーションの品位 / 視覚的階層
02｜認知設計
「迷わせないUI」を作るフェーズ。
単純化 / チャンク化 / 段階的開示 / スキャンしやすさ / わかる言葉で書く / 見つけやすさ / 記憶に頼らせない / 選択肢を減らす / なじみのあるパターン
03｜操作と対話
UIは「静止画」ではなく「対話」。
状態の可視化 / フィードバック / アフォーダンス / Fittsの法則 / ユーザーコントロール / 誤操作を防ぐ / エラーから回復できる / やり直し可能性 / 一時停止・中断・再開 / フォーム設計 / レスポンスと待ち時間設計
04｜情報構造と導線設計
機能があっても、辿り着けなければ存在しない。
情報アーキテクチャ / ナビゲーション設計 / 検索とフィルタ / 比較しやすい設計 / 空の状態 / オンボーディング / ヘルプ・ガイダンス / マイクロコピー
05｜体験設計
「使えた」から「また使いたい」へ。
明瞭性と確実性 / 期待値を揃える / 透明性 / 課金・個人情報の安心設計 / トーン&ボイス / ピーク/終わりの体験設計 / 達成感・進捗 / ダークパターンを避ける
06｜信頼・倫理
UIXHEROの思想の核。
透明性 / 課金・個人情報の安心設計 / ダークパターンを避ける
07｜アクセシビリティ
これは上級編ではない。必修。
コントラストとアクセシビリティ / キーボード操作 / フォーカス管理 / 代替テキスト・ARIA / 色に依存しないUIへ / 認知特性への配慮 / 多言語/i18n 前提のUI
08｜設計思想と拡張
作れる人から、導ける人へ。
目的と制約を先に置く / 主要導線を先に決める / 状態と例外を先に設計する / 意思決定の瞬間を設計する / デザインと実装が壊れない設計 / 計測できる形にする / ルール化して再利用する
UIコンポーネント 8カテゴリ
UIコンポーネントは、UI原則を実装する具体的な部品です。UIXHEROでは60のコンポーネントを8カテゴリで整理しています。
01｜アクションと入力
ユーザーが操作を行い、システムへ意思を伝達するための部品群。
Button / Toggle / Switch / Checkbox / Radio Button / Text Input / Textarea / Select / Slider / File Upload
02｜ナビゲーション
ユーザーが画面内を迷わず移動し、現在地を把握するための部品群。
Breadcrumb / Tabs / Pagination / Sidebar / Menubar / App Rail / Table of Contents
03｜リスト・データ表示
大量の情報を構造化し、比較しやすく整頓するための部品群。
List / Table / Card / Badge / Avatar / Image / Media / Separator
04｜検索・選択
情報の中から目的のものを素早く見つけ出し、絞り込むための部品群。
Search / Filter / Sort / Command Palette / Dropdown Menu / Context Menu / Toggle Group
05｜開示・オーバーレイ
画面を遷移せずに追加情報を表示し、文脈を維持するための部品群。
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
07｜レイアウト・可変
画面サイズやデバイスに応じて最適な配置を提供する部品群。
Scroll Area / Resizable / Responsive Patterns / Density Patterns / Right Rail
08｜高度な複合UI
複数の基本部品を組み合わせ、特定の目的を果たす強力な部品群。
Calendar / Carousel / AI Chat UI / Inspector Panel / Spatial Canvas / Share Modal / Dashboard Patterns / Editor Patterns
UX心理 主要カテゴリ
UX心理（UXリファレンス）は119の法則・理論・バイアスを収録しています。
認知・知覚
認知負荷 (Cognitive Load) / チャンク化 (Chunking) / 変化の見落とし (Change Blindness) / 選択の心理 (Choice Psychology) / 図と地の関係 (Figure-Ground) / ゲシュタルト原則 (Gestalt)
行動・意思決定
ヒックの法則 (Hick's Law) / フィッツの法則 (Fitts's Law) / デフォルトバイアス (Default Bias) / 決定疲れ (Decision Fatigue) / おとり効果 (Decoy Effect) / 選択のパラドックス (Paradox of Choice)
記憶・学習
フォン・レストルフ効果 (Von Restorff Effect) / ザイガルニク効果 (Zeigarnik Effect) / ピーク・エンドの法則 (Peak-End Rule) / ミラーの法則 (Miller's Law) / 連続位置効果 (Serial Position Effect)
感情・信頼
美的ユーザビリティ効果 (Aesthetic Usability Effect) / ヤコブの法則 (Jakob's Law) / 親近性バイアス (Familiarity Bias) / 権威バイアス (Authority Bias) / 互恵性 (Reciprocity)
心理・バイアス
確証バイアス (Confirmation Bias) / アンカリング効果 (Anchoring Effect) / 損失回避 (Endowment Effect) / バンドワゴン効果 (Bandwagon Effect) / 希少性 (Scarcity)
UIデザイン設計プロセス
UIXHEROが推奨する設計の思考順序はこの通りです。
| ステップ | テーマ | 問い |
|---|---|---|
| STEP 1 | 目的と制約を先に置く | どんな問題を解くUIか。制約（技術・時間・対象ユーザー）は何か |
| STEP 2 | UX心理で「なぜ」を理解する | ユーザーはなぜその行動をするのか。どんな認知バイアスが働くか |
| STEP 3 | UI原則で「何を」設計するか決める | 視覚・認知・操作・情報設計のどの原則が適用されるか |
| STEP 4 | UIコンポーネントで「どう」形にするか | 原則を満たすコンポーネントを選び、状態・バリアント・A11yを設計する |
| STEP 5 | 状態と例外を先に設計する | エラー・空状態・ローディング・エッジケースを先に決める |
| STEP 6 | 計測できる形にする | どの数値が改善したら「成功」か定義する |
このサイトの使い方
① 原則から調べる
「コントラストを高めたいが何から始めるか」→ コントラスト から各コンポーネントへ
② コンポーネントから調べる
「Buttonの設計基準が知りたい」→ Button から関連UI原則へ
③ 心理法則から調べる
「ヒックの法則をUIに活かしたい」→ ヒックの法則 から 選択肢を減らす / Select へ
まとめ｜UIデザインはUX心理・UI原則・UIコンポーネントの3レイヤーで成り立つ
UIデザインはセンスや見た目の問題ではなく、人間の認知・行動・感情の理解に基づく設計です。
UIXHEROではUI設計を3つのレイヤーで体系化しています。
- UX心理（Why） — ユーザーの認知・行動・感情を理解する（119法則）
- UI原則（What） — 心理法則をUI設計ルールに翻訳する（65原則）
- UIコンポーネント（How） — 原則を実装可能なUIパターンにする（60コンポーネント）
3レイヤーを理解することで「なぜそのUIが機能するのか」を説明できるようになります。
さらに体系的に学びたい方は、以下のハブ記事から各レイヤーを深掘りできます。
- UX心理119法則 — UIデザインの「なぜ」を理解する
- UIデザイン原則まとめ — 心理法則をUI設計ルールに翻訳する
- UIコンポーネント完全ガイド — 原則を実装可能なUIパターンにする
UXデザインを体系的に学ぶ
UIデザインの全体像を把握したら、各レイヤーを深掘りしよう。
UIデザイン3レイヤー
- UX心理学まとめ — UIデザインの「なぜ」を説明する119法則
- UIデザイン原則まとめ — 心理法則をUI設計のルールへ翻訳する65原則
- UIコンポーネント完全ガイド — 原則を「実装可能な部品」として形にする60コンポーネント
- UI設計プロセス完全ガイド — Why→What→Howの思考順序で設計判断を言語化する
UIXHEROの他のリソース
UIデザイン以外の領域も体系化しています。
- UXリサーチ一覧（29本） — ユーザー調査の手法体系
- インタビュー技術一覧（22本） — インタビューの技術棚
- エンジニアリング一覧（15本） — フロントエンド設計原則
- アクセシビリティ一覧（11本） — 誰もが使えるUI設計
→ 全体像を見る: UXデザイン完全ガイド
