UIデザインを「画面を綺麗にする仕事」と思っているなら、それは誤解です。優れたUIには必ず設計の根拠があります。
この記事は、UIXHERO全体の入口となるガイドです。UX心理・UI原則・UIコンポーネントの3レイヤー構造を理解し、UI設計の全体像をつかむためのナビゲーションとして作られています。
この記事では、UI/UXデザインの全体像——UX心理・UI原則・UIコンポーネントの3レイヤー構造——をUIXHEROの体系にそって解説します。
UIXHEROはUI設計を体系化した辞典型サイトです。UX心理119法則・UI原則65記事・UIコンポーネント60記事を3レイヤーで接続しています。
この記事でわかること
- UIデザインとUXデザインの役割の違い
- UIXHEROの3レイヤー構造（UX心理・UI原則・UIコンポーネント）
- UI原則8カテゴリ・UIコンポーネント8カテゴリ・UX心理5カテゴリの全体像
- UIデザインの設計プロセスと思考順序
UIXHEROではUI設計を UX心理（Why） → UI原則（What） → UIコンポーネント（How） の3レイヤーで体系化しています。
- 心理学を理解する → UX心理119法則
- 設計原則を学ぶ → UIデザイン原則65
- 実装パターンを知る → UIコンポーネント完全ガイド
UIデザインとは
UIデザイン（User Interface Design）とは、ユーザーとシステムの「接点」を設計することです。
「画面を綺麗にする仕事」と思われがちですが、本質はそこではありません。 ユーザーが目的を達成できるように、操作の文脈・情報の構造・インタラクションの品質を設計する ことが、UIデザインの本来の意味です。
ログインできない、エラーの意味がわからない、どこを押せばいいかわからない——これらはすべてUIデザインの失敗です。逆に、何も考えずに目的を達成できるUIは、圧倒的な量の設計判断が積み重なった結果です。
UIデザインとUXデザインの違い
よく混同される2つですが、役割は明確に異なります。
| UIデザイン | UXデザイン | |
|---|---|---|
| 対象 | 画面・インターフェース | 体験全体（購入前〜購入後） |
| 問い | どう見せるか・どう操作させるか | どう感じさせるか・どう価値を届けるか |
| 成果物 | コンポーネント、レイアウト、インタラクション | ジャーニーマップ、プロトタイプ、設計原則 |
UIデザインはUXデザインの一部であり、「ユーザー体験を実現する最終的な接点」として機能します。
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つのカテゴリに整理しています。以下はその全体構造です。
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デザインの全体像を把握したら、各レイヤーを深掘りしよう。
- UX心理学まとめ — UIデザインの「なぜ」を説明する119法則
- UIデザイン原則まとめ — 心理法則をUI設計のルールへ翻訳する65原則
- UIコンポーネント完全ガイド — 原則を「実装可能な部品」として形にする60コンポーネント
- UI設計プロセス完全ガイド — Why→What→Howの思考順序で設計判断を言語化する