7
7 Principles of User-Centered Design

実例で解説する
ユーザー中心デザインの7つの原則

D.A.ノーマン『誰のためのデザイン？』より

※ 増補・改訂版以前の旧版の内容に基づいて2010年ごろに作成したものを、現代にあうように事例を置き換えたものです

Introduction

このスライドについて

  • 認知心理学者 ドナルド・ノーマン が提唱した「ユーザー中心デザインの7つの原則」を紹介します
  • 本スライドは『誰のためのデザイン？』の増補・改訂版以前の旧版の内容に基づいて2010年ごろに作成したものを、現代にあうように事例を置き換えたものです
  • 毎日使っているスマホやアプリを例に、どこにその原則が使われているかを見ていきます
  • 「なんとなく使いやすい」には、必ず理由があります
Who is Don Norman

ドナルド・ノーマンとは

  • 認知心理学者・インターフェースデザインの第一人者
  • Apple や HP でユーザーインターフェース設計を指導
  • ヤコブ・ニールセンとともにニールセン・ノーマン・グループを設立
  • 著書『誰のためのデザイン？』はデザインを学ぶ人の定番書
誰の
ため
の
デザ
イン？
The Design of Everyday Things
Donald A. Norman
The Seven Principles

ユーザー中心デザインの7つの原則

1外界にある知識と頭の中にある知識の両者を利用する
2作業の構造を単純化する
3対象を目に見えるようにし、実行と評価の隔たりに橋をかける
4対応付けを正しくする
5制約の力を利用する
6エラーに備えたデザインをする
7以上のすべてがうまくいかない時には標準化をする
1
Principle 01

外界の知識と頭の中の知識を
両方使う

  • 外界にある知識＝画面やモノから得られる情報（見ればわかる）
  • 頭の中にある知識＝ユーザーがすでに覚えている情報（覚えているから速い）
  • 両方をうまく使えるデザインが「使いやすい」。慣れるほど速く操作できることも重要
原則 1 · 外界と頭の中の知識

例：メニューとショートカット

  • コピー＆ペーストはメニューをたどれば誰でもできる → 外界の知識
  • Ctrl+C を覚えればもっと速い → 頭の中の知識
  • 初心者は見ながら、上級者は覚えて速く。どちらも置き去りにしない
切り取り
コピー⌘C
貼り付け
外界の知識（見る）
Ctrl
C
頭の中の知識（覚える）
原則 1 · 外界と頭の中の知識

例：フリック入力

  • キーを長押しすれば入力できる文字が表示される → 見ればわかる（外界の知識）
  • 文字の配置を覚えればフリックで高速入力 → 覚えれば速い（頭の中の知識）
ぬ
に
な
ね
の
2
Principle 02

作業の構造を単純化する

複雑な作業を単純にする4つのアプローチ

手順を分かりやすく表示する
新しい操作方法で操作しやすくする
作業を自動化する
作業の性質そのものを変える
原則 2 · 構造の単純化

例：スマホの初期設定・
アプリのオンボーディング

  • 初期設定は1画面につき1つの質問に答えるだけで完了する
  • アプリの初回起動時のチュートリアルも同じ構造
  • 複雑な設定作業を小さなステップに分割して提示
ステップ 2 / 5
お住まいの
地域はどこ
ですか？
次へ
原則 2 · 構造の単純化

例：ドラム型の時刻設定

  • 数字を打ち込むのではなくドラムを回して選ぶだけ
  • 「入力する」作業を「選ぶ」作業に置き換えて単純化
  • 無効な値（25時など）をそもそも入力できないメリットも
0506070809
:
2829303132
PM AM  
3
Principle 03

見えるようにして、
実行と評価の隔たりに橋をかける

  • 実行の隔たり：何を操作すればいいか分からない
  • 評価の隔たり：操作した結果どうなったか分からない
  • 操作できるものを見える形で提示し、結果をすぐフィードバックして橋をかける
原則 3 · 実行と評価の隔たり

例：文字サイズ設定

  • スライダーを動かすとプレビューの文字がその場で大きくなる
  • 「どのくらい大きくなるか」を試行錯誤せずに確認できる
プレビュー
サンプル文字
A
A
原則 3 · 実行と評価の隔たり

例：画面の明るさ設定

  • スライダーを動かすとリアルタイムに画面が明るくなる
  • 操作 → 結果の確認 → 微調整、が一瞬でできる
  • ダークモードの切り替えプレビューも同じ考え方
4
Principle 04

対応付けを正しくする

操作とその結果の関係が理解しやすいようにする

  • ユーザーの意図と、いま実行できる行為の関係
  • ユーザーの行為と、システムへの影響の関係
  • 見えるシステムの状態と、ユーザーの期待の関係
原則 4 · 正しい対応付け

例：ブラウザの「戻る／進む」

  • 戻る先がないときは、ボタンがグレーアウト
  • いま押せる操作だけが押せるようになっている
  • 意図（戻りたい）と実行できる行為が対応している
戻る
進む
example.com/page-2
← 押せる 押せない（先がない）
原則 4 · 正しい対応付け

例：画面遷移のアニメーション

  • 階層を移動すると、画面が横にスライドする
  • 「奥に進んだ／手前に戻った」という状態変化を動きで感じ取れる
一覧
‹ 戻る
詳細
5
Principle 05

制約の力を利用する

  • あえてできないことを作ることで、迷わず・間違えずに操作できる
  • 説明文を読ませなくても「こうするしかない」と伝わる
原則 5 · 制約の力

例：同意するまで押せないボタン

  • 規約にチェックを入れるまで「次へ」は押せない
  • 必須項目を埋めるまで「送信」できないのも同じ
  • 「先にこれをやる必要がある」を文章ではなく制約で伝える
利用規約に同意する
次へ
利用規約に同意する
次へ
原則 5 · 制約の力

例：物理的な制約

  • SIMカードの切り欠き：正しい向きでしか入らない
  • USB-C：どちらの向きでも挿せるようにして、間違い自体をなくした
  • 形そのものが「正しい使い方」を教えてくれる
SIM ｜ 切り欠きで一方向だけ
トレイ
USB-C ｜ 上下どちらでもOK
向きを気にしない
6
Principle 06

エラーに備えたデザインをする

エラーは必ず起こる前提で設計する

  • 何が起こったかを正しく伝える／抜け出す方法を提示する
  • 望ましくない状態を元に戻す手段を提供する
  • 元に戻せない操作は実行しにくくする（確認ダイアログなど）
原則 6 · エラーに備える

例：写真の削除と
「最近削除した項目」

  • 削除しようとすると「削除しますか？」と確認が入る
  • 間違えても「最近削除した項目」から30日間は復元できる
  • 二段構えで「うっかり」から守っている
この写真を削除しますか？
この操作は取り消せます
キャンセル
削除
最近削除した項目
30日間は復元できます
原則 6 · エラーに備える

例：Gmail の送信取り消し

  • 送信した直後、数秒間だけ「取り消す」ボタンが表示される
  • 取り返しのつかない操作に猶予時間を設けている
  • LINE の送信取消・ゴミ箱フォルダも同じ思想
メールを送信しました 取り消す 5
7
Principle 07

標準化する

  • 原則1〜6でどうしても自然に理解させられないなら、みんなで統一して学習負担を減らす
  • 一度覚えれば、どの機器・アプリでも同じに使える
原則 7 · 標準化

例：QWERTYキーボード

  • 並び順は複雑で、覚えるのは大変
  • しかしすべての機器で同じ配列。一度覚えればどこでも使える
  • 「ABC順」は分かりやすそうで、機器ごとに探して実は使いにくい
QWERTY ｜ どの機器も同じ ✓
QWERTY
ABC順 ｜ 機器ごとに探すことに ✗
ABCDEF
原則 7 · 標準化

例：スマホ操作の「暗黙の標準」

誰かが決めたわけではないが、アプリを横断して統一されているから迷わない

ピンチイン／アウト
で拡大・縮小
下に引っ張って
更新（プルリフレッシュ）
三本線メニュー
を押すとメニューが開く
7
Summary

まとめ

  • 「使いやすい」は偶然ではなく、原則の積み重ね
  • 7つの原則は、スマホの中に毎日の実例がある
  • 次にアプリを使うとき、「これはどの原則だろう？」と考えてみよう