design-everyday-things

日常生活のデザインの原則

直感的で、発見しやすく、理解しやすい製品をつくるための基本的なデザイン原則です。「UXのバイブル」とも呼ばれ、物理的な製品、ソフトウェア、人間が設計したあらゆるシステムに適用できます。

核となる原則

**優れたデザインは、劣ったデザインよりも気づかれにくいものです。これは、優れたデザインが私たちのニーズにぴったり合うため、デザインそのものが見えなくなるからです。**何かがうまくいかないと、ユーザーは自分を責めます。しかし、ほとんどの場合、問題はデザインにあります。優れたデザインは、人々がしたいことと、製品でできることの隔たりを埋めます。つまり、発見しやすく（何をすべきかが分かり）、理解しやすい（何が起きたかが分かる）のです。

スコア

目標：10/10。クイック診断の各項目を満たすごとに2点を加算します（5項目：発見しやすさ、評価、エラーからの回復、対応づけ、制約）。スコアの範囲：9～10＝ユーザーは説明なしで操作し、あらゆる結果を理解し、どのようなエラーからも回復できます。5～6＝2つの隔たりのどちらか、またはエラー時の対応経路に問題があります。<=3＝ユーザーはマニュアルを参照する必要があるか、日常的に自分を責めています。現在のスコアと、基準を満たしていない診断項目を報告してください。

2つの隔たり

製品とのあらゆるインタラクションでは、2つの隔たりを埋める必要があります。

USER                                    PRODUCT
  │                                        │
  ├──── Gulf of Execution ────────────────→│
  │     "How do I do what I want?"         │
  │                                        │
  │←──── Gulf of Evaluation ──────────────┤
  │     "What happened? Did it work?"      │

実行の隔たり

**ユーザーがしたいことと、製品でできることの隔たりです。**ユーザーは「ここでは何ができますか？」「どのコントロールを使えばよいですか？」と考えます。

**隔たりを埋める方法：**明確なシグニファイア、自然な対応づけ、制約、なじみのある概念モデルを使います。

評価の隔たり

**製品が行ったことと、ユーザーが起きたことについて理解している内容の隔たりです。**ユーザーは「何が起きましたか？」「うまくいきましたか？」「システムはどの状態ですか？」と考えます。

**隔たりを埋める方法：**すぐに分かる視覚的なフィードバック、明確なシステム状態の表示、意味のあるエラーメッセージ、進行状況の表示を使います。

**デザインの目標：**2つの隔たりをできるだけ小さくし、操作と理解がすぐにできるようにします。

参照：references/two-gulfs.md では、隔たりを分析する演習を紹介しています。

7つの基本的なデザイン原則

1. 発見しやすさ

**定義：**どのような操作が可能で、それをどう行うかをユーザーが把握できますか？その5つの要素（アフォーダンス、シグニファイア、制約、対応づけ、フィードバック）については、以下で詳しく説明します。

**テスト：**新しいユーザーに製品を使ってもらいます。10秒以内に何をすべきか把握できない場合、発見しやすさに問題があります。

アンチパターン：「ユーザーマニュアルに説明があります」。ユーザーにマニュアルが必要なら、デザインは失敗です。

2. アフォーダンス

**定義：**物体の特性とユーザーの能力との関係によって、その物体をどのように使えるかが決まります。

**重要なポイント：**アフォーダンスは、知覚されるかどうかにかかわらず存在します。デザインで重要なのは、知覚されるアフォーダンスです。

種類	定義	例
実際の	物理的にその機能がある	ボタンは押せる
知覚される	ユーザーがその機能があると思う	盛り上がった領域はクリックできそうに見える
隠れた	存在するが、分かりにくい	右クリックのコンテキストメニュー
誤った	操作できそうに見えるが、実際にはできない	クリックできそうに見える装飾要素
アンチアフォーダンス	操作を妨げる	移動を阻む障壁

デジタルアプリケーションでの例：

要素	アフォーダンス	示し方
ボタン	クリック／タップ	立体感、色、影、ホバー状態
テキストフィールド	テキスト入力	枠線、プレースホルダーテキスト、ラベル
スクロール領域	スクロール	スクロールバー、端のフェード、コンテンツの一部表示

**よくある失敗：**フラットデザインによって知覚されるアフォーダンスが失われる（ボタンなのかラベルなのか？）、タッチ対象が小さすぎる、操作可能な要素と装飾要素の見た目が同じ。

参照：references/affordances.md では、アフォーダンスのデザインパターンを紹介しています。

3. サインファイア

定義： 操作をどこで行うべきかを伝えるシグナルです。アフォーダンスは何ができるかを示し、サインファイアはどこで、どのように操作するかを示します。

種類	定義	例
意図的	伝えることを目的に設計されている	ドアの「押す」ラベル、プレースホルダーテキスト
偶発的	意図していないが、情報を伝える	草地にできた踏み跡（ここを人が歩く）
社会的	他者の行動	人の列が入口を示す

デジタルのサインファイア：

サインファイア	伝える内容	例
カーソルの変化＋ホバー状態	インタラクティブであること	リンク上でポインターが手に変わる、ボタンの色が変わる
アイコン＋ラベル	要素の機能	虫眼鏡＝検索、「送信」「キャンセル」
色＋位置	状態、カテゴリ、階層	赤＝エラー、緑＝成功、閉じるボタンは右上

デザインルール： 迷ったら、サインファイアを追加しましょう。ユーザーを推測させるより、情報を伝えすぎるほうが適切です。

不明瞭なコントロールに追加するサインファイアを決める際は、references/signifiers.md を参照してください。

4. マッピング

定義： コントロールと、その操作によって生じる効果との関係です。自然なマッピングとは、コントロールの空間的な配置が、制御対象の配置と一致していることを意味します。

マッピングの質	例	有効／無効な理由
自然	音量スライダー（上げる＝音量が上がる）	メンタルモデルと一致する
不適切	照明スイッチのパネル	照明との空間的な対応がない
不適切	横一列に並んだコンロのつまみ	配置がバーナーの位置と一致しない

デジタルでの原則： 操作の対象の近くにコントロールを置くこと、コンテンツと対応するレイアウトにすること、期待に沿った方向にすること（下にスクロールするとコンテンツが上に移動する）、関連するコントロールをまとめること。

テクニック	仕組み	例
近接性	対象の近くにコントロールを置く	コンテンツの横に編集ボタンを置く
空間的	現実世界の配置を反映する	地図のコントロールを方位に合わせる
文化的	慣習に従う	赤＝停止／危険、緑＝進行／安全
順序的	自然な順序に従う	ステップを左から右（または上から下）に1、2、3と並べる

マッピング分析の演習については、references/mappings.md を参照してください。

5. 制約

定義： エラーを防ぐために、可能な操作を制限することです。

種類	仕組み	例
物理的	形状やサイズによって誤った操作を防ぐ	USB プラグは一方向にしか差し込めない
文化的	社会規範が行動を導く	赤は停止、緑は進行を意味する
意味的	意味によって選択肢が制限される	バックミラーは後ろ向きにしか意味をなさない
論理的	論理によって選択肢が制限される	最後のネジを締めるための穴が1つだけ残っている

デジタルでの制約：

制約	実装	例
入力検証	入力可能な内容を制限する	自由入力ではなく日付ピッカーを使う
無効状態	利用できない選択肢をグレー表示する	フォームが有効になるまで「送信」を無効にする
強制された順序＋取り消し	手順を順番に進め、元に戻せるようにする	手順がロックされたウィザード、Gmail の「送信取り消し」

デザインルール： 制約を追加するたびに、ユーザーが起こし得るエラーが1つ減ります。誤った操作を罰するのではなく、できないようにしましょう。

制約の設計パターンについては、references/constraints.md を参照してください。

6. フィードバック

**定義：**操作の結果をユーザーに伝えることです。フィードバックは即時（直接操作では0.1秒以内）で、情報がわかりやすく、適切な量で、邪魔にならないものでなければなりません。

種類	使用する場面	例
視覚	ほとんどの操作	ボタンを押したときのアニメーション、色の変化、チェックマーク
聴覚	重要なイベント、確認	成功音、エラー音
触覚	タッチデバイス、確認	キーを押したときの振動
進行状況	時間のかかる操作	プログレスバー、スピナー、スケルトンスクリーン

デジタルでのフィードバックパターン：

状況	必要なフィードバック	例
フォーム送信	成功／エラーメッセージ	「保存しました！」というトースト通知、またはインラインエラー
読み込み中	進行状況インジケーター	スピナー、スケルトンスクリーン、パーセンテージ
エラー	問題の内容と修正方法	「メールアドレスが無効です。形式を確認してください。」

**応答時間：**0.1秒は瞬時に感じられます。1秒は遅延として認識されます（カーソルを変更します）。10秒では注意がそれます（プログレスバーを表示します）。10秒を超えるとユーザーは離れてしまいます（パーセンテージを表示し、バックグラウンドでの処理を可能にします）。

**よくある問題：**フィードバックがない（クリックは反応したのか？）、フィードバックが遅い（壊れているように感じる）、フィードバックがわかりにくい、アラートが多すぎる。

参照：references/feedback.md。操作の結果が明確に示されず、適切なフィードバックの種類やタイミングを知りたい場合に参照してください。

7. 概念モデル

**定義：**製品がどのように動作するかについての、ユーザーのメンタルモデルです。

モデル	持つ人	説明
設計モデル	デザイナー	デザイナーが考える動作の仕組み
ユーザーモデル	ユーザー	ユーザーが考える動作の仕組み
システムイメージ	製品	製品が実際に伝える内容

**目標：**ユーザーモデルが設計モデルと一致することが理想です。システムイメージは両者をつなぐ唯一の橋渡しとなります。モデルが一致すれば、ユーザーは結果を予測し、エラーから回復できます。一致しないと混乱や自責の念が生まれ、サポートへの問い合わせにつながります。

**例（サーモスタット）：**設計モデル — 温度を設定すると、システムがその温度を保つ。よくあるユーザーモデル — 設定温度を上げると、より早く暖まる（誤り）。そのため、ユーザーは設定を華氏90度まで上げてしまいます。

**正しいモデルを構築する方法：**馴染みのあるメタファー（デスクトップ、ごみ箱）、システム状態の可視化、明確なフィードバック、一貫した動作、段階的な情報開示。

参照：references/conceptual-models.md。ユーザーモデルが製品の実際の動作と食い違う場合に参照してください。ドアの取っ手、サーモスタット、デジタル製品を詳しく分析した事例については、references/case-studies.mdを参照してください。

人為的ミス

**ノーマンの重要な洞察：人為的ミスというものは存在せず、あるのは設計の不備だけです。**誰かが間違えたときは、その人の欠点ではなく、設計の欠陥を探してください。

エラーの種類

スリップ — 意図は正しいが、操作を誤る：

スリップの種類	原因	例	設計による対策
操作スリップ	正しい対象に対して誤った操作を行う	「編集」ではなく「削除」をクリックする	削除などの破壊的な操作を分離する
記憶の抜け	手順の途中を忘れる	「添付しました」と書いた後、添付ファイルを忘れる	Gmailの添付ファイルリマインダー
モードエラー	正しい操作を誤ったモードで行う	Caps Lockをオンにして入力する	モードの状態を明確に表示する
キャプチャーエラー	習慣が意図に勝る	無意識に以前の職場へ車で向かう	判断が必要な時点で中断を促す

ミステイク — 意図が誤っており、それを正しく実行する：

ミステイクの種類	原因	例	設計による対策
ルールベース	誤ったルールを適用する	間違った状況で公式を使う	文脈を示し、確認を促す
知識ベース	メンタルモデルが不完全、または誤っている	システムの動作の仕組みを誤解する	より良い概念モデル
記憶の抜け	目標や計画を忘れる	冷蔵庫を開けた理由を忘れる	リマインダー、履歴

エラーを前提とした設計

防止： エラーを起こせないようにする制約、どこでも使える元に戻す／やり直し、破壊的な操作の確認、適切なデフォルト、寛容な入力。 復旧： 明確なエラーメッセージ、ユーザーの作業を決して消さないこと、部分保存、既知の正常な状態への簡単なリセット。

エラーメッセージのチェックリスト：

• 何が問題だったかを（人にわかる言葉で）伝えている
• 修正方法を伝えている
• ユーザーのせいにしていない
• ユーザーの作業を保持している
• 代替手段を提示している

参照：references/human-error.md で、エラー防止のパターンを確認できます。

行為の7段階

人間が製品とどのように関わるかを示すノーマンのモデル：

1. GOAL      → "I want to adjust the temperature"
2. PLAN      → "I'll use the thermostat"
3. SPECIFY   → "I'll press the up arrow"
4. PERFORM   → (presses button)
   ─── Gulf of Execution ───
5. PERCEIVE  → (sees display change)
6. INTERPRET → "The number went up"
7. COMPARE   → "Is this what I wanted?"
   ─── Gulf of Evaluation ───

設計への示唆： 段階1〜3はシグニファイア、対応関係、制約で支援し、段階4は優れたアフォーダンスで支援し、段階5〜7はフィードバックと可視化された状態で支援します。各インタラクションをすべての段階に沿ってたどり、ユーザーが行き詰まる箇所を見つけましょう。

参照：references/seven-stages.md で、段階ごとの分析を確認できます。

人間中心設計（HCD）プロセス

Observation → Idea Generation → Prototyping → Testing → (iterate)

このループの進め方を変える具体的な点が2つあります。観察では、ユーザーに何が欲しいかを尋ねないでください（ユーザー自身もわかっていません）。実際の状況での回避策や不満に注目しましょう。テストでは、デザイナーではなく実際のユーザーを起用してください。5人で問題の約85％が明らかになるため、意見より行動を観察し、反復して改善しましょう。

よくある間違い

間違い	失敗する理由	修正方法
シグニファイアがない	ユーザーが機能を見つけられない	インタラクティブな要素すべてに視覚的な手がかりを加える
フィードバックがない	ユーザーが操作の結果を把握できない	すべての操作に0.1秒以内に応答する
ユーザーのせいにする	設計上の欠陥を無視している	あらゆる「ユーザーエラー」の設計上の原因を探す
機能の追加しすぎ	複雑さに圧倒される	制約と段階的な情報開示を適用する
一貫性がない	概念モデルを損なう	どこでも同じ操作には同じ結果を返す
コンテキストを無視する	理想的な条件を前提に設計されている	実際の利用環境を観察する

簡易診断

あらゆる設計を評価しましょう。

質問	いいえの場合	対応
ユーザーは何をすべきか理解できますか？	見つけやすさに問題がある	シグニファイアを加え、アフォーダンスを改善する
ユーザーは何が起きたか理解できますか？	評価の溝が広すぎる	フィードバックを加え、システムの状態を表示する
ユーザーはエラーから復旧できますか？	エラーへの許容性がない	元に戻す操作、確認、明確なメッセージを追加する
コントロールの配置は出力と一致していますか？	対応関係が不適切	空間的な配置に合わせてコントロールを再配置する
実行不可能／無関係な選択肢は非表示になっていますか？	制約が不足している	無効な選択肢を無効化、非表示、または削除する

さらに読む

フレームワークの全容については、以下をご覧ください。

• "The Design of Everyday Things" Don Norman 著（改訂・増補版、2013年）
• "Emotional Design" Don Norman 著（デザインと感情）

著者について

Don Norman, PhD は、Nielsen Norman Group の共同創設者であり、UC San Diego の The Design Lab 所長、Apple の元 Advanced Technology 担当副社長です。Apple 在籍中に「ユーザーエクスペリエンス」という用語を作りました。『The Design of Everyday Things』（1988年、2013年改訂）は、史上最も影響力のあるデザイン書と広く見なされており、世界各地のデザイン課程で必読書とされています。