UIデザインの「なぜ」を知らずに設計すると、「なんとなくきれい」で終わります。優れたUIには必ず設計根拠があります。
UIデザイン原則とは、UX心理をUI設計の判断基準へ翻訳するルール群です。
この記事では、「なぜそのレイアウトなのか」「なぜそのボタン配置なのか」を説明できる65のUI原則を8カテゴリで体系化しました。
UIXHEROでは65の原則を8つのカテゴリに分類し、視覚設計から設計思想まで体系的に整理しています。
この記事でわかること
- UIデザイン原則65項目の全体像（8カテゴリで体系化）
- UX心理 → UI原則 → UIコンポーネントの3レイヤー構造における役割
- 各カテゴリの代表原則と、UIコンポーネントとの接続関係
- 設計判断を言語化するための実践的な基準
UIXHEROではUI設計を UX心理（Why） → UI原則（What） → UIコンポーネント（How） の3レイヤーで体系化しています。
- 心理学を理解する → UX心理119法則
- 設計原則を学ぶ → 本ページのUI原則
- 実装パターンを知る → UIコンポーネント完全ガイド
UI原則を個別に深く理解したい方は → 📐 UIデザイン原則 65記事一覧を見る
→ サイト全体の入口は UXデザイン完全ガイド から
UI原則とは
UI原則とは、画面を見やすく、迷わず、操作しやすくするための設計判断の基準です。色や余白を整えるだけではなく、「何を先に見せるか」「どの選択肢を減らすか」「操作後にどんな反応を返すか」「誰でも使える状態になっているか」を判断するために使います。
UIデザインでは、見た目の好みだけで判断すると、ページごとにルールがばらつきます。UI原則を使うと、レイアウト、ラベル、CTA、フォーム、ナビゲーション、エラー表示を、同じ基準で説明・改善できます。
| UIで迷う問い | 見るべきUI原則 | 使う場面 |
|---|---|---|
| どこを最初に見せるべきか | 視覚的階層、コントラスト | ファーストビュー、一覧、カード、CTA |
| 情報量が多すぎないか | 認知負荷、チャンク化、段階的開示 | 設定画面、フォーム、長い記事、ダッシュボード |
| 何を選べばよいかわかるか | 選択肢を減らす、見つけやすさ | ナビゲーション、検索、フィルタ、料金表 |
| 操作後に不安が残らないか | フィードバック、状態の可視化、エラーから回復できる | 保存、送信、削除、入力エラー |
まず押さえるなら、視覚的階層、コントラスト、余白、チャンク化、フィードバック、誤操作を防ぐから見ると、UI原則を実際の画面改善へつなげやすくなります。
UI原則の構造：3レイヤーの中の「翻訳層」
UIXHEROではUI設計を UX心理（Why） → UI原則（What） → UIコンポーネント（How） の3レイヤーで整理しています。その中でUIデザイン原則は「翻訳層」に当たります。
| レイヤー | 問い | 役割 |
|---|---|---|
| UX心理（Why） | なぜユーザーはそう感じ・行動するか | 人間の認知・感情・行動の仕組みを理解する |
| UI原則（What） | どう設計すればよいか | 心理法則をUIの判断基準へ翻訳する ← ここ |
| UIコンポーネント（How） | どう形にするか | 原則を実装可能な部品として具体化する |
具体例：ヒックの法則の場合
UX心理（Why） ヒックの法則：選択肢の数が増えるほど意思決定にかかる時間は対数的に増加する
↓
UI原則（What） 選択肢を減らす：選択肢は最小限に絞り、推奨を明示する
↓
UIコンポーネント（How） Select / Radio Button / Command Palette
心理法則を「設計判断のルール」として言語化し、具体的なコンポーネント設計へ接続するのがUI原則の役割です。
01｜視覚設計の原則
「見た目を整える」のではなく「意味が伝わる視覚構造を作る」
UI設計の最初に整えるべきカテゴリ。情報の重要度・役割・関係性を、色・サイズ・余白・配置で「見えるようにする」ことがゴールです。
| 原則 | 説明 |
|---|---|
| 視覚的階層 | 情報の重要度をサイズ・色・位置で表現する |
| コントラスト | 差を作ることで優先順位を伝える |
| 整列 | 要素を揃えることで構造を示す |
| 近接 | 関連する要素を近くに置く |
| 反復・一貫性 | 同じルールを繰り返して予測可能にする |
| 余白 | 何も置かない空間が情報を分ける |
| グリッドシステム | 見えないガイドラインが整然さを生む |
| タイポグラフィ設計 | 文字の選択と組み方で読みやすさが決まる |
| 配色設計 | カラーパレットを体系化して一貫性を保つ |
| 画像・アイコンの役割 | アイコンは補助。テキストを置き換えない |
| 視線誘導 | ユーザーの視線をゴールへ誘導する |
| 情報密度の最適化 | 詰めすぎず、スカスカにしすぎない |
| コンポーネントの視覚一貫性 | 同じ操作は同じ見た目で |
| モーションの品位 | アニメーションは意味を持つときだけ使う |
02｜認知設計の原則
「迷わせないUI」を作るカテゴリ
人間の認知能力には限界がある。その限界を知り、認知負荷を最小化することがこのカテゴリのゴールです。「わかりやすい」UIは、ユーザーが頭を使わずに動けるUIです。
| 原則 | 問い | 関連コンポーネント |
|---|---|---|
| 単純化 | 本当に必要な情報だけか？ | Filter, Select |
| チャンク化 | 情報をグループに分けているか？ | Card, List, Table |
| 段階的開示 | 最初に全部見せていないか？ | Accordion, Sheet, Tooltip |
| スキャンしやすさ | 読まずに理解できるか？ | Table of Contents, Badge |
| わかる言葉で書く | 専門用語に頼っていないか？ | — |
| 見つけやすさ | 目的のものにすぐ辿り着けるか？ | Search, Filter, Navigation |
| 記憶に頼らせない | 思い出させていないか？ | Command Palette, Dropdown |
| 選択肢を減らす | 選択肢は最小限か？ | Select, Radio, Dropdown |
| なじみのあるパターン | ユーザーが既知のパターンを使っているか？ | — |
03｜操作と対話の原則
UIは「静止画」ではなく「対話」
ユーザーが操作したとき、UIは何を返すか。「操作 → 反応」の設計がこのカテゴリのテーマです。フィードバック・エラー設計・操作の回復性が核になります。
核となる4原則
状態の可視化 システムが今何をしているかをユーザーに常に示す。送信中・保存済み・エラー——状態が見えないUIはユーザーを不安にする。 → Toast / Loading / Progress Bar
フィードバック 操作に対して即座に反応を返す。クリックしたら変化する、入力したら確認できる。 → Alert / Toast / Badge
誤操作を防ぐ エラーが起きる前に防ぐ。確認ダイアログ・入力制限・警告。 → AlertDialog / Text Input（バリデーション）
エラーから回復できる エラーが起きたとき、ユーザーが自力で回復できる設計。 → Toast（Undoボタン付き） / Alert
全11原則
状態の可視化 / フィードバック / アフォーダンス / Fittsの法則 / ユーザーコントロール / 誤操作を防ぐ / エラーから回復できる / やり直し可能性 / 一時停止・中断・再開 / フォーム設計 / レスポンスと待ち時間設計
04｜情報構造と導線設計の原則
機能があっても、辿り着けなければ存在しない
どれだけ優れた機能でも、ユーザーが発見できなければゼロと同じ。情報の配置・ナビゲーション・検索・オンボーディングがこのカテゴリのテーマです。
| 原則 | 核心 | 関連コンポーネント |
|---|---|---|
| 情報アーキテクチャ | 情報の分類と階層を設計する | Sidebar, Tabs, Navigation Bar |
| ナビゲーション設計 | 現在地と移動先を明確にする | Breadcrumb, Tabs, Sidebar |
| 検索とフィルタ | 探せる設計をする | Search, Filter, Sort |
| 比較しやすい設計 | 並べて判断できるようにする | Table, Card |
| 空の状態 | 何もないときこそ次のアクションを示す | Empty State |
| オンボーディング | 初回体験で離脱させない | — |
| ヘルプ・ガイダンス | 迷ったときに助けが見つかる | Tooltip, Popover |
| マイクロコピー | ラベル・説明・エラー文の言葉を磨く | — |
05｜体験設計の原則
「使えた」から「また使いたい」へ
機能するだけでは十分ではない。ユーザーが「このサービスは信頼できる」「また使いたい」と感じる体験を設計するカテゴリです。
明瞭性と確実性 / 期待値を揃える / 透明性 / 課金・個人情報の安心設計 / トーン&ボイス / ピーク/終わりの体験設計 / 達成感・進捗 / ダークパターンを避ける
06｜信頼・倫理の原則
UIXHEROの思想の核
設計者には、ユーザーの意思決定を歪めない責任がある。ダークパターン・個人情報の扱い・価格表示の透明性——倫理的なUI設計を支える原則群。
透明性 / 課金・個人情報の安心設計 / ダークパターンを避ける
07｜アクセシビリティの原則
これは上級編ではない。必修。
アクセシビリティは「特定ユーザーへの配慮」ではなく、すべてのユーザーへの基本設計です。屋外での使用・高齢者・視覚障害・認知特性——多様な状況で機能するUIがロバストなUIです。
| 原則 | チェックポイント |
|---|---|
| コントラストとアクセシビリティ | WCAG AA基準（4.5:1）を満たしているか |
| キーボード操作 | マウスなしで全操作できるか |
| フォーカス管理 | Tabキーで適切な順序でフォーカスが移動するか |
| 代替テキスト・ARIA | スクリーンリーダーで意味が伝わるか |
| 色に依存しないUIへ | 色覚特性があっても判別できるか |
| 認知特性への配慮 | 認知負荷が高いユーザーにも使えるか |
| 多言語/i18n 前提のUI | 言語が変わってもレイアウトが崩れないか |
08｜設計思想と拡張の原則
作れる人から、導ける人へ
個別のUIを作る技術から、プロダクト全体を一貫して設計できる思考へ。デザインシステム・運用耐性・計測・状態設計がこのカテゴリのテーマです。
目的と制約を先に置く / 主要導線を先に決める / 状態と例外を先に設計する / 意思決定の瞬間を設計する / デザインと実装が壊れない設計 / 計測できる形にする / ルール化して再利用する
UIデザイン原則65｜8カテゴリ一覧
UIXHEROでは、65のUI原則を8つのカテゴリへ整理しています。まず全体構造を確認してから、個別原則の記事へ進んでください。
UI原則 × UIコンポーネント 対応早見表
UI原則は具体的なUIコンポーネント設計へ接続します。代表的な対応関係を以下にまとめました。
| UI原則 | 主なコンポーネント |
|---|---|
| 視覚的階層 | Card, Badge, List, Table |
| フィードバック | Toast, Alert, Loading, Progress Bar |
| 段階的開示 | Accordion, Tooltip, Sheet, Dropdown Menu |
| 情報アーキテクチャ | Sidebar, Tabs, Navigation Bar |
| エラー設計 | AlertDialog, Toast, Text Input |
| 選択肢を減らす | Select, Radio Button, Command Palette |
| 検索とフィルタ | Search, Filter, Sort |
| 達成感・進捗 | Progress Bar, Badge |
まとめ｜UI原則はUX心理とUIコンポーネントをつなぐ「翻訳層」
UIデザイン原則は、UX心理の「なぜ」をUIの「判断基準」へ翻訳し、コンポーネント設計へ接続するレイヤーです。
本記事では、UI設計に役立つ原則を8カテゴリ65項目で整理しました。
- 視覚設計（14原則）
- 認知設計（9原則）
- 操作と対話（11原則）
- 情報構造と導線設計（8原則）
- 体験設計（8原則）
- 信頼・倫理（3原則）
- アクセシビリティ（7原則）
- 設計思想と拡張（7原則）
原則を理解することで「なぜそのUIが機能するのか」を説明できるようになります。
UIデザイン原則とは、心理学をUI設計の判断基準へ翻訳するための設計言語です。
さらに体系的に学びたい方は → UIデザイン原則 65記事一覧へ
UI設計の全体像を知りたい場合は、まず UIデザイン完全ガイド から読むのがおすすめです。
UXデザインを体系的に学ぶ
UI原則の「What」を理解したら、次は「Why（UX心理）」と「How（UIコンポーネント）」も学ぼう。
UIデザイン3レイヤー
- UIデザイン完全ガイド — UX心理・UI原則・UIコンポーネントの3レイヤーを一本化
- UX心理学まとめ — UIデザインの「なぜ」を説明する119法則
- UIコンポーネント完全ガイド — 原則を「実装可能な部品」として形にする69コンポーネント
UIXHEROの他のリソース
- UXリサーチ一覧（29本） — ユーザー調査の手法体系
- インタビュー技術一覧（22本） — インタビューの技術棚
- エンジニアリング一覧（15本） — フロントエンド設計原則
- アクセシビリティ一覧（11本） — 誰もが使えるUI設計
→ 全体像を見る: UXデザイン完全ガイド
