「とりあえず作ってみる」から始まるUIデザインは、必ずどこかで行き詰まります。優れた設計には、必ず思考の順序があります。
この記事は、UIXHEROの設計プロセスを体系化したガイドです。UX心理（Why）→UI原則（What）→UIコンポーネント（How）の3レイヤーを正しい順番で使うことで、「なんとなくそうした」ではなく「だからそう設計した」と説明できるようになります。
この記事では、UIデザインの設計プロセスを6ステップで整理し、各ステップで使うべき思考フレームワークと具体的な判断基準を解説します。
UIデザイン設計プロセスとは、UX心理・UI原則・UIコンポーネントを正しい順序で使い、設計判断を言語化するための思考フレームワークです。
この記事でわかること
- UI設計の6ステップ全体像（Why→What→Howの思考順序）
- 3レイヤー構造（UX心理・UI原則・UIコンポーネント）を使う正しい順番
- 各ステップで問うべき問いと、つまずきやすいポイント
- 設計判断を言語化・チームで共有するための実践基準
UIXHEROではUI設計を UX心理（Why） → UI原則（What） → UIコンポーネント（How） の3レイヤーで体系化しています。
- 心理学を理解する → UX心理119法則
- 設計原則を学ぶ → UIデザイン原則65
- 実装パターンを知る → UIコンポーネント完全ガイド
→ サイト全体の入口は UIデザイン完全ガイド から
設計プロセスの3レイヤー構造における役割
UI設計プロセスは「なぜ→何を→どう」の順に思考する構造です。UIXHEROはUIデザインを3つのレイヤーで体系化しています。
| レイヤー | 問い | 役割 |
|---|---|---|
| UX心理（Why） | なぜユーザーはそう感じ・行動するか | 人間の認知・感情・行動の仕組みを理解する |
| UI原則（What） | どう設計すればよいか | 心理法則をUIの判断基準へ翻訳する |
| UIコンポーネント（How） | どう形にするか | 原則を実装可能な部品として具体化する |
具体例：ナビゲーション設計の場合
UX心理（Why） ヒックの法則：選択肢の数が増えるほど意思決定にかかる時間は対数的に増加する
↓
UI原則（What） 選択肢を減らす：ナビゲーション項目は7項目以内に絞る
↓
3レイヤーを正しい順番で使うことで「なぜこのナビゲーション構造か」を根拠とともに説明できます。
UI設計の6ステップ｜思考順序の全体構造
UIXHEROが推奨する設計の思考順序です。まず全体を把握してから、各ステップの詳細へ進んでください。
| ステップ | テーマ | 問い |
|---|---|---|
| STEP 1 | 目的と制約を先に置く | どんな問題を解くUIか。制約は何か |
| STEP 2 | UX心理で「なぜ」を理解する | ユーザーはなぜその行動をするか |
| STEP 3 | UI原則で「何を」設計するか決める | どの設計ルールが適用されるか |
| STEP 4 | UIコンポーネントで「どう」形にするか | 原則を満たす部品はどれか |
| STEP 5 | 状態と例外を先に設計する | エラー・空・ローディングはどう見えるか |
| STEP 6 | 計測できる形にする | 何が改善したら「成功」か |
STEP 1｜目的と制約を先に置く
「何を作るか」より先に「なぜ作るか」を決める
UIデザインは「画面を作る仕事」ではなく「問題を解く仕事」です。最初に解くべき問題を定義しないと、見た目は整っていても使われないUIが完成します。
問うべき問い
| 問い | 内容 |
|---|---|
| ユーザーの目的は何か | ユーザーはこの画面で何を達成したいか |
| ビジネスの目的は何か | この機能でどの指標を改善したいか |
| 制約は何か | 技術・時間・対象ユーザー・デバイスの制限 |
| 成功の定義は何か | どの状態になれば「良いUIができた」と言えるか |
つまずきやすいポイント
「要件定義が終わったらUIを作り始める」は順序が間違っています。要件はあくまで機能の定義であり、 UXの目的と制約は別途明示する 必要があります。
→ 関連UI原則：目的と制約を先に置く / 主要導線を先に決める
STEP 2｜UX心理で「なぜ」を理解する
ユーザーの行動・認知・感情のメカニズムを先に理解する
設計判断の根拠は、常に「人間の認知・行動・感情の仕組み」から来ます。心理法則を知らずに設計すると「なんとなくそうした」になります。
設計前に確認する主要な心理法則
| カテゴリ | 代表法則 | UIへの示唆 |
|---|---|---|
| 認知・知覚 | 認知負荷 / ゲシュタルト原則 | 一画面の情報量を絞る / グループ化で整理する |
| 行動・意思決定 | ヒックの法則 / フィッツの法則 | 選択肢を絞る / ボタンを大きく・近くに |
| 記憶・学習 | ピーク・エンドの法則 / ミラーの法則 | 体験の頂点と終わりに注力 / 7±2を意識 |
| 感情・動機 | 美的ユーザビリティ効果 / ザイガルニク効果 | 見た目の品質がUXに影響 / 未完了を示して離脱を防ぐ |
| バイアス | デフォルトバイアス / 損失回避 | 適切なデフォルト設計 / 「失うもの」を明示 |
つまずきやすいポイント
心理法則を「知っている」だけでは使えません。「このUIのどの判断にどの法則が関係するか」を設計前に明示することが重要です。
STEP 3｜UI原則で「何を」設計するか決める
心理法則を「設計ルール」に翻訳するステップ
UX心理は「なぜそうなるか」を説明しますが、「では何を設計するか」は答えません。UI原則がその橋渡しをします。
8カテゴリで判断する
| カテゴリ | 問い | 代表原則 |
|---|---|---|
| 01 視覚設計 | 重要度が伝わるか | コントラスト / 視覚的階層 |
| 02 認知設計 | 迷わず理解できるか | 段階的開示 / チャンク化 |
| 03 操作と対話 | 今何が起きているか伝わるか | 状態の可視化 / フィードバック |
| 04 情報構造と導線 | 目的地に辿り着けるか | 情報アーキテクチャ / ナビゲーション設計 |
| 05 体験設計 | また使いたいと思わせるか | 期待値を揃える / 達成感・進捗 |
| 06 信頼・倫理 | 安心して使えるか | 透明性 / ダークパターンを避ける |
| 07 アクセシビリティ | すべてのユーザーが使えるか | コントラスト / キーボード操作 |
| 08 設計思想 | 拡張・改善し続けられるか | 設計システム思考 / 計測できる形にする |
つまずきやすいポイント
「コンポーネントから選ぶ」のではなく「適用する原則を先に決める」ことが重要です。コンポーネントから入ると「見た目で選ぶ」になります。
STEP 4｜UIコンポーネントで「どう」形にするか
原則を満たすコンポーネントを選び、状態を設計する
UI原則が決まれば、それを実装するコンポーネントが自然に絞られます。コンポーネントの選択は「どれが好きか」ではなく「どれがこの原則を満たすか」で決めます。
原則→コンポーネントの対応例
| UI原則 | 適切なコンポーネント |
|---|---|
| 段階的開示 | Accordion / Tooltip / Sheet |
| 状態の可視化 | Toast / Progress Bar / Status Bar |
| フィードバック | Alert / Toast / Loading |
| 選択肢を減らす | Select / Radio Button / Command Palette |
| 情報アーキテクチャ | Sidebar / Tabs / Breadcrumb |
状態設計のチェック
コンポーネントを選んだ後、必ず 全状態を設計する 。
Default → Hover → Focus → Active → Disabled → Loading → Error → Empty
この8状態を設計しないコンポーネントは「未完成」です。
→ 関連UI原則：状態と例外を先に設計する
STEP 5｜状態と例外を先に設計する
「うまくいったとき」だけ設計するのがUIデザイン最大のミス
エラー・空の状態・ローディング・エッジケース——これらを「後回し」にする習慣がUIの品質を下げます。ユーザーが最もストレスを感じるのは、多くの場合「例外」が起きたときです。
設計すべき7つの状態
| 状態 | 内容 | 対応コンポーネント |
|---|---|---|
| Empty State | データがない・初回利用 | Empty State |
| Loading State | データ取得中・処理中 | Loading / Spinner |
| Error State | 操作失敗・通信エラー | Alert / AlertDialog |
| Success State | 操作完了・保存完了 | Toast |
| Disabled State | 操作不可・権限なし | Button Disabled / Form Disabled |
| Edge Case | 極端に長い文字列・0件・100万件 | 各コンポーネントのmax設計 |
| Offline State | 通信なし | Status Bar / Alert |
つまずきやすいポイント
「正常系だけプロトタイプを作って共有する」は設計完了ではありません。 異常系・例外系こそ先に設計を決める ことで、実装フェーズの手戻りが大幅に減ります。
→ 関連UI原則：誤操作を防ぐ / エラーから回復できる / 空の状態
STEP 6｜計測できる形にする
「良いUIができた」は数値で確認するまで完成しない
設計が終わった後に「計測できる指標」を定義しないと、改善の優先順位が感覚になります。UIデザインはリリースではなく「改善サイクル」の開始です。
代表的なUI計測指標
| 指標 | 内容 | 関連する原則 |
|---|---|---|
| タスク完了率 | 目標操作をユーザーが完了できる割合 | 主要導線を先に決める |
| エラー発生率 | 操作中にエラーが発生する頻度 | 誤操作を防ぐ |
| 操作時間 | 目標到達までの所要時間 | フィッツの法則 / ヒックの法則 |
| 離脱率・CVR | 途中離脱・目標達成の割合 | 段階的開示 / フォーム設計 |
| 満足度スコア | SUS / NPS など主観的な評価 | ピーク・エンドの法則 |
計測設計の3ステップ
- 仮説を立てる ：「このUIを改善すれば〇〇率が上がるはず」
- 指標を定義する ：成功・失敗をどの数値で判断するか
- ログを仕掛ける ：クリック・ページ遷移・エラー発生をトラッキングできる状態にする
設計プロセスを実践に活かす3つのパターン
UI設計プロセスをプロジェクトに組み込む実践パターンです。
パターン1｜機能設計時（新規画面・新規フロー）
新しい画面や機能を設計するときの思考順序：
- STEP 1 で「この画面で解く問題」を一文で書く
- STEP 2 で「このユーザー行動に関係する心理法則」を3つ挙げる
- STEP 3 で「適用するUI原則カテゴリ」を絞る
- STEP 4 でコンポーネントを選び、全状態を設計
- STEP 5 で例外系を先にリストアップ
- STEP 6 で「何が改善したら成功か」を定義する
パターン2｜改善設計時（既存UIの問題解決）
既存UIに問題が起きているときの分析順序：
- 問題を「どのSTEPで設計が欠けているか」に分類する
- 関連するUX心理法則を逆引きする
- 修正すべきUI原則を特定する
- コンポーネントの状態設計を見直す
パターン3｜レビュー・フィードバック時
デザインレビューで「なぜ」を説明するときの構造：
「[UX心理法則] に基づいて、[UI原則] を適用するために、[UIコンポーネント] を選びました」
この構造で説明できない設計決定は、「感覚で決めた」ことを意味します。
まとめ｜UI設計プロセスは「なぜ」から始まる
UIデザインは「画面を作る仕事」ではなく「問題を解く仕事」です。
本記事では、UI設計の思考順序を6ステップで整理しました。
- STEP 1：目的と制約を先に置く
- STEP 2：UX心理で「なぜ」を理解する
- STEP 3：UI原則で「何を」設計するか決める
- STEP 4：UIコンポーネントで「どう」形にするか
- STEP 5：状態と例外を先に設計する
- STEP 6：計測できる形にする
設計プロセスを理解することで「なぜそのUIか」を根拠とともに説明できるようになります。
さらに体系的に学びたい方は、以下のハブ記事から各レイヤーを深掘りできます。
- UX心理119法則 — UIデザインの「なぜ」を理解する
- UIデザイン原則まとめ — 心理法則をUI設計ルールに翻訳する
- UIコンポーネント完全ガイド — 原則を実装可能なUIパターンにする
UI設計プロセスとは、UX心理・UI原則・UIコンポーネントを正しい順序で使い、設計判断を言語化するための思考フレームワークです。
UXデザインを体系的に学ぶ
UI設計の「プロセス」を理解したら、各レイヤーを深掘りしよう。
- UIデザイン完全ガイド — UX心理・UI原則・UIコンポーネントの3レイヤーを一本化
- UIデザイン原則まとめ — 心理法則をUI設計のルールへ翻訳する65原則
- UIコンポーネント完全ガイド — 原則を「実装可能な部品」として形にする60コンポーネント
- UX心理学まとめ — UIデザインの「なぜ」を説明する119法則