---
title: 人間中心設計 × UI設計 の原理原則
tags:  #デザイン  
author: [Yukiko](https://www.docswell.com/user/yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/5EGL9Y22JL.jpg?width=480
description: 人間中心設計 × UI設計 の原理原則 by Yukiko
published: September 01, 26
canonical: https://www.docswell.com/s/yukiko_it/K3JYLY-2026-09-01-145947
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/5EGL9Y22JL.jpg)

うさうさ研修工房
人間中心設計 × UI設計
の原理原則
視認性の高い図解・スライド・画面をつくるための実践ガイド
講師：うさうさ先生


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4JQYWMP97P.jpg)

INTRODUCTION
なぜ「原理原則」を学ぶのか
WHY
WHAT
HOW
感覚だけでは
伝わらない
HCDとUI設計の
共通言語
スライド・資料
への適用
「なんとなく良い／悪い」の判断を、再現性
ISO 9241-210のプロセス論と、視認性・操作
本編では各原則を、研修 PPTや画面設計
のある基準に置き換えるため。原理原則
性に関わるデザイン原則（ゲシュタルト、
にそのまま使えるチェックポイントの形に落
は自分の感覚を裏付ける根拠になる。
CRAP、認知負荷 など）を扱う。
とし込む。
うさうさ研修工房｜人間中心設計 × UI設計の原理原則
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/K74WKVXRE1.jpg)

HUMAN-CENTERED DESIGN
人間中心設計の 5つの柱（ ISO 9241-210）
01
ユーザーと利用状況の理解
誰が・どんな環境で使うのかを最初に把握する
02
ユーザーを設計に巻き込む
作り手の想像だけで進めず、当事者の声を反映する
03
ユーザー中心の評価で磨く
完成前に試し、フィードバックを設計へ戻す
04
反復的なプロセス
一度で完成させず、試作と見直しを繰り返す
05
利用体験全体を設計する
個別の画面だけでなく、体験全体の一貫性を見る
うさうさ研修工房｜人間中心設計 × UI設計の原理原則
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/LJ1YX3NVEG.jpg)

USABILITY HEURISTICS
ユーザビリティの原則（ Nielsen, 1994）より抜粋
システム状態の可視化
現実世界との一致
一貫性と標準
今どんな状態かを常に伝える
専門用語より使う人の言葉で語る
同じ意味には同じ見た目・言葉を使う
認知よりも想起
柔軟性と効率性
ミニマルなデザイン
覚えさせず、見て分かる形で提示する
初心者にも熟練者にも対応できる導線
無関係・過剰な情報を削ぎ落とす
うさうさ研修工房｜人間中心設計 × UI設計の原理原則
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/GJWGNP4372.jpg)

GESTALT PRINCIPLES
ゲシュタルトの法則：人はどう「まとめて」見るか
PROXIMITY
SIMILARITY
近接：近いものは同じグループに見える
類同：似た形・色は同じ仲間に見える
CLOSURE
CONTINUITY
閉合：欠けていても脳が補って形を見る
連続：並んだ要素は一続きの流れに見える
うさうさ研修工房｜人間中心設計 × UI設計の原理原則
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/4EZL3K2G73.jpg)

DESIGN BASICS
視認性を作る 4原則「CRAP」（Robin Williams, 1994）
C
A
コントラスト
差をはっきりつけて優先度を伝える
整列
見えない線で要素を揃える
R
P
反復
同じ装飾ルールを全体で繰り返す
近接
関連する情報を物理的に近づける
見出し
説明テキスト
うさうさ研修工房｜人間中心設計 × UI設計の原理原則
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/Y76WXQVQ7V.jpg)

VISUAL FLOW
視線の流れを設計する： Zパターン／ Fパターン
Zパターン：構成の少ないスライド／広告
Fパターン：文章量の多いページ／記事
①見出し行を横に読む
②以降は左端をスキャンしながら、目に留まった行だけ横に読む。重要語は左寄
せ・段落先頭に置く。
①ロゴ／タイトル
②見出し → ③本文 → ④行動を促す要素、の順に視線が動く
うさうさ研修工房｜人間中心設計 × UI設計の原理原則
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/G75MXRD274.jpg)

COGNITIVE LOAD
認知負荷とチャンキング（ Miller, 1956：7±2）
人が短期記憶で一度に扱える情報のまとまりは、およそ5〜9個までとされる。要素数が多いほど誤読・見落としが増える。
BEFORE：9項目を単純に並べる
項目 1
項目 2
AFTER：3つのまとまりに再構成
準備フェーズ
小項目1
小項目2
小項目3
小項目2
小項目3
小項目2
小項目3
項目 3
項目 4
項目 5
実行フェーズ
小項目1
項目 6
項目 7
項目 8
振り返りフェーズ
小項目1
項目 9
うさうさ研修工房｜人間中心設計 × UI設計の原理原則
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/9J29XD81ER.jpg)

COLOR & CONTRAST
色とコントラスト： WCAG 2.1 の基準
本文テキストはコントラスト比4.5:1 以上（AA基準）を目安にする。判断が難しい場合は自動判定ツールで確認する。
Aa 見本文字
Aa 見本文字
Aa 見本文字
Aa 見本文字
基準未満
AA適合
基準未満
AA適合
低コントラスト
高コントラスト
低コントラスト
高コントラスト
約 1.4 : 1
約 15 : 1
約 1.6 : 1
約 11 : 1
うさうさ研修工房｜人間中心設計 × UI設計の原理原則
9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/DEY48264JM.jpg)

INTERACTION LAWS
操作性を決める 2つの法則
フィッツの法則（ Fitts, 1954）
ヒックの法則（ Hick, 1952）
到達時間は「対象までの距離」が長く「対象のサイズ」が小さいほど増える。押し
間違えやすいボタンは、大きく・近くに置く。
選択肢が増えるほど、意思決定にかかる時間も増える。メニューや設問は、必要
な数まで絞り込む。
選択肢 3個
選択肢 6個
小さい・遠い＝時間がかかる
選択肢10個
大きい・近い＝すぐ届く
うさうさ研修工房｜人間中心設計 × UI設計の原理原則
横幅＝おおよその意思決定時間のイメージ
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/VJNYQ8Z678.jpg)

CHECKLIST
実践チェックリスト：視認性の高いスライドにする
タイトルと本文で文字サイズに十分な差をつけたか
1枚に詰め込む要素は7±2個を目安に絞ったか
関連する情報同士を近づけ、無関係な情報と離したか
文字色と背景のコントラストは十分か（AA:4.5:1目安）
同じ役割の要素は同じ見た目で統一したか（反復）
要素は見えない線に沿って整列しているか
視線の流れ（Z／F）に沿って情報の優先順位を並べたか
ボタンや選択肢を、押しやすいサイズ・数に絞ったか
うさうさ研修工房｜人間中心設計 × UI設計の原理原則
11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/YE9PDKZRJ3.jpg)

まとめ
原理原則は「センスの言い訳」ではなく、誰でも再現できる判断基準。まずはチェックリストの 8項目から、自分の資料に当てはめてみる。
参考文献
•
ISO 9241-210:2019 “Ergonomics of human-system interaction — Human-centred design for interactive systems”
•
Nielsen, J. (1994). “10 Usability Heuristics for User Interface Design.” Nielsen Norman Group.
•
Williams, R. (1994). “The Non-Designer’s Design Book.” Peachpit Press.（CRAP原則）
•
Miller, G. A. (1956). “The Magical Number Seven, Plus or Minus Two.” Psychological Review.
•
Fitts, P. M. (1954). “The Information Capacity of the Human Motor System.” Journal of Experimental Psychology.
•
Hick, W. E. (1952). “On the Rate of Gain of Information.” Quarterly Journal of Experimental Psychology.
•
W3C “Web Content Accessibility Guidelines (WCAG) 2.1.”
うさうさ研修工房｜人間中心設計 × UI設計の原理原則
12