「使いやすいだけでは、もう選ばれない」──これが、現代のUI/UX設計の現実です。
19年間WEBマーケティングに携わる中で、同じことを何度も見てきました。デザインシステムで整えたのに「冷たい」と感じられる。404エラーやローディング画面が不満の温床になっている。多くのユーザビリティ評価がタスク効率など定量的な側面に集中しているという報告もあります（参考：PubMed Central「Tools and methods for assessing the usability and related aspects of …」｜2026｜ユーザビリティ評価の手法割合：定量67.6%、混合27.9%、定性4.5%）。KPIはCVRやタスク成功率ばかりで、感情指標の設計がない──。
実は、使いやすさ(Usability)は今や「前提」です。差別化は「使っていて好き」「また使いたい」という感情体験にシフトしています。これは、製品やサービスが機能的な価値だけでなく、感情的な価値を提供することが顧客の継続利用や推奨意向に不可欠である、という近年の潮流とも一致します。
当編集部では、世界的エンタメ企業で35年間ブランド体験を設計してきた専門家の知見をもとに、プロダクト内の感情設計を体系化してきました。その核となるのが、Donald NormanのEmotional Designモデルです。このモデルは、第一印象(美しさ・期待)→操作中(安心・達成)→使用後(誇り・共感)まで、”感情の曲線”を設計対象とする視点を提供します。
この記事では、Normanの3層モデル(Visceral/Behavioral/Reflective)をUI/UX設計に具体適用する方法を、マイクロインタラクション・配色・タイポグラフィ・エラー体験の設計原則とともに解説します。さらに、診断→設計→試作→感情テストの4ステップで、自社プロダクトへの導入計画を立てられるようになります。
第1章: エモーショナルデザインの定義と位置づけ
第2章: Normanの3層モデル(UI/UX具体例)
第3章: 実践テクニック集(マイクロインタラクション/配色/タイポ/エラー体験)
第4章: 成功事例の分解(Duolingo/Slack/Apple)
第5章: 導入4ステップ(診断・設計・試作・テスト)
なお、感情マーケティングの全体像については、近日公開予定の「なぜ「いい商品」が売れない？感情マーケティングの科学的根拠と実践5原則を35年プロが徹底解説(記事No.112)」で、ブランディング文脈での感情設計は近日公開予定の「顧客が離れない」ブランドへ｜Marc Gobeの10の戒律と実践5ステップで築くエモーショナルブランディング（記事No.115）で、体験全体設計については別途ブランド体験サイロの記事群で扱います。
注意：本記事はマーケティング施策の感情訴求(広告・コピー領域)ではなく、プロダクト内のUI/UX設計に特化しています。また、実装コードや詳細APIは範囲外です。
第1章：エモーショナルデザインとは何か
1-1 定義と射程
エモーショナルデザインとは、Donald Normanが提唱した「プロダクトに対するユーザーの感情反応を設計対象とする」アプローチです。これは、彼の主著『Emotional Design』（2004年）を起点に広く参照されています（参考：Norman「Emotional Design」｜2004｜初版／学術レビュー：PubMed Central「Eliciting and modeling emotional requirements…」｜2024｜Normanの三層モデルへの学術的言及）。
ここでは、マーケティング施策の感情訴求(広告・キャッチコピー)と、UI/UXの感情設計(プロダクト内体験)の違いを明確にしておきましょう。
広告の感情訴求は、プロダクトの外側で期待を作ります。一方、UI/UXの感情設計は、プロダクトの内側──起動、初回設定、空状態、成功、失敗、待機、離脱──これらの瞬間ひとつひとつで、ユーザーが何を感じるかを意図的にデザインします。
両者は連動しますが、本記事が扱うのは後者、つまりプロダクト内の感情設計です。
1-2 注目される背景
なぜ今、感情設計がこれほど注目されているのでしょうか。その理由は3つあります。
- 第一に、UXの成熟です。
機能的な可用性（使える/使えない）は、今や製品・サービスの前提条件となりました。ユーザーは、タスクを効率的にこなせるだけでなく、「気持ちいい」「使っていて好き」といった感情的な満足感を求めるようになっています。これにより、競合との差別化の軸が、より深い感情体験へとシフトします。 - 第二に、リテンション競争の激化です。
サブスクリプションモデルが主流となる中で、新規顧客獲得（初回CVR）よりも、既存顧客の継続率がビジネスの成長に不可欠となっています。この継続利用を支えるのは、単なる機能満足だけでなく、プロダクトへの習慣と愛着──つまりポジティブな感情体験が大きな役割を果たします。 - 第三に、推奨（NPS/口コミ）の重要性です。
「この製品を誰かに勧めたい」という感情は、機能的満足だけでは生まれにくいものです。ユーザーが特別な体験、感情的なつながりを感じたときにこそ、他者への推奨行動が促されます。
さらに、顧客は一度でも悪い体験をするとそのブランドから離れてしまう傾向があり、良い体験のためなら追加の価格を支払う意思があるとも言われています。
このデータから専門家として言えるのは、エラー体験のようなネガティブな瞬間の設計を軽視することは、見えにくい形で確実に収益を蝕んでいるということです。エモーショナルデザインは「あれば良いもの」ではなく、顧客離反を防ぎ、LTVを最大化するための「必須の投資」なのです。
1-3 体験全体との関係
プロダクト内の感情設計は、ブランド体験全体の一部です。ブランド体験とは、認知・検討・購入・使用・推奨という顧客ジャーニー全体を通じた接点体験の連続を指します。この考え方は、接点ごとの感情曲線を意識的に設計する発想と一致しています。
UI/UXは、この中の「使用」フェーズに該当します。具体的には、起動・初回設定・空状態・成功・失敗・待機・離脱といったタッチポイントで、ユーザーが何を感じ、次にどう行動するかを左右します。つまり、エモーショナルデザインは「点」の設計ではなく、体験全体を支える「要」なのです。
感情マーケティングの全体像を知りたい方は、近日公開予定の「なぜ「いい商品」が売れない？感情マーケティングの科学的根拠と実践5原則を35年プロが徹底解説(記事No.112)」詳細をご確認ください。
第2章:Normanの3層モデルをUI/UXで使いこなす
【図】エモーショナルデザインの3層処理プロセスを参照してください。情報の流れは、まず感覚的な刺激から始まり、次に操作による体験、最後に記憶や意味付けへと進みます。
2-1 本能的デザイン(Visceral)
Visceralレベルは、第一印象・外観・感覚が対象です。これは意識的な思考を経ない、本能的な反応です。色彩、形状、質感、モーションの初速、コントラスト──これらが最初の0.5秒で「期待」を作ります。
UI例を見てみましょう。
- 初回起動画面: ロゴの配置、ブランドカラーの使い方、ローディングアニメーションの滑らかさが、安心感または期待感を生みます。
- CTAボタン: 視線誘導の設計、ボタンのサイズと余白、色のコントラストが、「押したい」という衝動を左右します。
- ローディング画面: 単なる待機ではなく、「待ちに意味がある」演出(進捗表示やメッセージ)が期待を持続させます。
Visceralレベル 簡易チェックリスト
- 視認性: 重要な要素が一目でわかるか
- 統一感: ブランドの世界観と一貫しているか
- 期待形成: 「次に何が起こるか」の予測を裏切っていないか
2-2 行動的デザイン(Behavioral)
Behavioralレベルは、使用時の効率・学習容易性・エラー回避・達成の快を扱います。ここでは「操作中の安心」と「できた!」という達成感が中心です。
Behavioralデザインは、ユーザーに行動を促し、タスクをスムーズに完了させるためのデザインとも言えます。行動科学の観点から見ると、ユーザーが行動を起こすためには「動機（Motivation）」「能力（Ability）」「きっかけ（Prompt）」の3要素が揃う必要があると言われています。
UI例を具体的に見ます。
- 明確な状態表示: ユーザーが今どこにいて、次に何をすべきかが常に明示されている。
- 進捗可視化: タスク完了までの道のりが見える(例:ステップ1/3、プロフィール完成度80%)。
- 空状態(Empty State): データがゼロの画面で、次のアクション(例:「最初の投稿を作成」)を優しく促す。
Behavioralレベル チェックリスト
- 認知負荷: 1画面で処理する情報量が適切か
- 一貫性: 同じ操作は同じ場所・同じ挙動か
- フィードバック速度: 操作の結果が即座にわかるか
- 可逆性: やり直しが簡単か(Undo/Redo、確認ダイアログ)
2-3 内省的デザイン(Reflective)
Reflectiveレベルは、意味・記憶・自己イメージ・ブランドとの物語的な接続を扱います。使用後に振り返ったとき、「これを使っている自分」に誇りや共感を感じるかどうかです。
UI例を見てみましょう。
- 祝福モーメント: 初達成時の演出(例:「最初の1週間連続ログイン達成!」)、記録達成時のバッジやアニメーション。
- アカウントの”私らしさ”: プロフィールのカスタマイズ性、選んだテーマや設定が「自分の空間」を作る。
- 歴史(思い出)表示: 過去の活動履歴、作成したコンテンツのアーカイブが、「積み上げてきた」実感を生む。
重要なのは、UIのトーン&マナー──つまり「声」の一貫性です。これはブランドの「人格」とも言えるもので、ビジネスツールであれば信頼感、カジュアルなアプリであれば親しみやすさ、といったブランドパーソナリティがマイクロコピー(ボタンラベル、エラーメッセージ等)に反映されている必要があります。
Reflectiveレベル チェックポイント
- ブランドのパーソナリティがUIの”声”に反映されているか
- 達成や継続を祝う演出があるか
- ユーザーが「これは自分のもの」と感じられるカスタマイズ性があるか
2-4 3層とタッチポイントのマッピング
3層は完全に分離しているわけではなく、タッチポイントごとに「主導する層」が変わります。これを可視化したのが以下の表です。
| タッチポイント | 主導する層 | ユーザー心理の狙い | 具体的な施策例 |
|---|---|---|---|
| 起動・初見 | 本能 (V) | 「良さそう」という期待感 | ブランドカラー、滑らかなロゴ表示 |
| 操作中 | 行動 (B) | 「できた」という達成感 | 進捗バー、即時のボタン反応 |
| 待機中 | 本能/行動 | 不安の解消、意味ある待ち | ユーモアのある待機メッセージ |
| 成功・達成 | 内省 (R) | 「続けたい」という誇り | 祝福アニメーション、バッジ付与 |
| エラー発生 | 行動/内省 | 安心感と再試行の意欲 | 友達のような伴走口調のコピー |
このマッピングを意識すると、「どの瞬間に何を優先して設計すべきか」が明確になります。
Reflective層を深く掘り下げたエモーショナルブランディングについては、近日公開予定の「顧客が離れない」ブランドへ｜Marc Gobeの10の戒律と実践5ステップで築くエモーショナルブランディング（記事No.115）で解説しています。
第3章:エモーショナルデザインの実践テクニック
ここからは、3層モデルを具体的なUI要素にどう落とし込むかを見ていきます。
3-1 マイクロインタラクション
マイクロインタラクションとは、押下・成功・エラー・待機といった短い反応設計です。Nielsen Norman Groupは、UX設計の時間スケールとして0.1秒・1秒・10秒を提示しています（参考：Nielsen Norman Group「Powers of 10: Time Scales in User Experience」｜2009｜0.1秒は直接操作感、1秒は思考の流れ維持、10秒は注意持続の限界）。
UX設計における応答時間の基準とユーザー感情に、各時間帯における感情への影響をまとめました。この数値を設計目標に据えることが重要です。
| 応答時間 | ユーザーの知覚 | 感情への影響 | 必要なUI対応 |
|---|---|---|---|
| 0.1秒以内 | 直接操作している感覚 | 満足・信頼・一体感 | 即時フィードバック（影・色変化） |
| 1.0秒以内 | 思考を中断されない | スムーズ・快い | スケルトンスクリーン、状態遷移 |
| 10秒以内 | 注意力の限界 | 不安・苛立ち | 進捗率（％）の表示、残り時間提示 |
| 10秒超 | 待機を放棄 | 失望・離脱 | 中断オプション、バックグラウンド処理 |
即時的な視覚的フィードバックは不確実性を減らし、満足感や信頼感を高める傾向があります（参考：UXmatters「Evoking Emotion and Enhancing Engagement with Microinteractions」｜2025｜フィードバックと感情の関係）。
3-2 色彩心理に基づくUI配色
配色は、第一印象(Visceral)と操作中の安心感(Behavioral)の両方に作用します。たとえば、青は信頼感を連想させると報告されています（参考：MockFlow「Color Psychology in UI Design for 2025」｜2025｜色と感情の一般的対応）。
役割色の設計
- 主要アクション: ブランドカラー(例:青、緑)で統一
- 注意/警告: 黄色、オレンジ
- 危険/削除: 赤
- 安心/成功: 緑
アクセシビリティ観点では、WCAG推奨のコントラスト基準(例:通常テキストで4.5:1)を遵守することが信頼感の醸成に繋がります（参考：University of Business and Technology「The Application of Color Theory in UI/UX Design (PDF)」｜2024｜WCAG基準とアクセシビリティ）。
3-3 タイポグラフィと感情
書体の選択は、可読性だけでなくブランドの「声」を伝えます。Monotypeの研究では、セリフ系は誠実さを、ヒューマニスト系サンセリフは革新性の印象を示唆しています（参考：Monotype「Typography Matters: New Research Reveals How Fonts Make Us Feel」｜2023｜書体カテゴリごとの感情属性）。
3-4 ネガティブ体験の転換(404/エラー/空状態)
404エラー、エラー画面、空状態は、ユーザーが最もフラストレーションを感じやすいタッチポイントです。ここでの設計が、離脱率を大きく左右します。
設計の3要素は「謝罪」「解決導線」「希望」です。これらを整理したフローを以下に示します。
複数のUX実務ガイドは、エラー画面で「明確な説明」「検索バー」「行動喚起(CTA)」を必須要素として推奨しています（参考：UXPin「404 Page Best Practices: Turning Errors Into Opportunities」｜2026｜404ページのベストプラクティス）。
エラーメッセージの改善例
❌ NG（叱責・無機質）: 「パスワードが間違っています。入力し直してください。」
✅ OK（伴走・親しみ）: 「パスワードが一致しませんでした。もう一度お試しください。お忘れの場合はこちらから再設定できます。」
【深掘りコラム】”心地よい摩擦”の設計とは？
UI/UX設計では「摩擦を減らすこと」が至上命題とされがちです。しかし、エモーショナルデザインの観点では、あえて「心地よい摩擦」を設計することがあります。たとえば、重要な設定変更の際に一手間かかる確認ステップを入れることで、ユーザーに「重要な操作をしている」という実感と安心感を与えます。すべての摩擦が悪なのではなく、ユーザーの内省（Reflective）を促し、体験に意味を与える「意図された摩擦」こそが、プロダクトへの深い愛着を育む鍵となるのです。
第4章:エモーショナルデザインの成功事例
4-1 Duolingo(キャラクター×マイクロインタラクション)
Duolingoは、言語学習アプリとして圧倒的な成果を上げています。
| 改善施策 | 影響指標 | 改善率（相対） | 出典根拠 |
|---|---|---|---|
| ストリーク継続の緩和 | 新規ユーザー参加率 | +19.0% | Duolingo公式(2024) |
| オンボーディング最適化 | 14日後継続率(D14) | +3.3% | Duolingo公式(2024) |
| キャラクター主導広告 | 動画完了率 | 96.0% | Marketing Int.(2024) |
| 習慣化通知の改善 | 全体DAU | +1.0% | Duolingo公式(2024) |
表に示す通り、感情を刺激する施策は具体的なKPI、特に継続率（リテンション）に直結していることがわかります。キャラクター「Duo」の存在感(Visceral)と、ストリーク（連続記録）による達成感(Behavioral/Reflective)が完璧に統合されています。
4-2 Slack(ブランドボイスのユーモア)
Slackは、ローディング画面に表示されるジョーク的文言が待機体験をポジティブに転換します（参考：Appcues ブログ「7 loading page designs that make waiting (almost) fun」｜2026｜Slackのローディング画面事例）。また、文体は「clear, concise, and human」を基本としており、Reflectiveレベルでの共感を支えています（参考：Slack.design 記事「The voice of the brand: 5 principles for great Marketing copy at Slack」｜2026｜Slackのブランドボイス原則）。
4-3 Apple(本能的レベルの徹底)
Appleの設計思想は、Human Interface Guidelinesで「ちょうど良い（feel just right）」と感じさせることを目指すと繰り返し語られています（参考：Apple 「Human Interface Guidelines（公式ドキュメント）」｜2026｜UI設計の基本原則）。パッケージ開封体験から、visionOSにおける歓迎的なインタラクション設計まで、Visceralレベルの一貫性は世界最高水準です。
第5章:自社プロダクトに感情設計を導入する4ステップ
理論と事例を踏まえ、具体的な導入手順を見ていきましょう。
- Step1：ユーザーの感情ジャーニーを可視化
認知から離脱・回帰までの「目標感情」を言語化します。（例：初回は「安心」、成功時は「誇り」） - Step2：各タッチポイントで3層の課題を診断
以下の診断ツールを用いて、自社UIの不足箇所を特定します。 - Step3：プロトタイプで感情反応を試作
マイクロインタラクションやコピーの差分（A/B案）をFigma等で作成します。 - Step4：ユーザーテストでフィードバック収集
インタビューや定量的指標を組み合わせて改善サイクルを回します。
【実践ツール】UI感情体験スコアカード
主要なタッチポイント（例：初回起動、エラー画面）を選び、以下の観点で5段階評価してみてください。
| 評価項目（タッチポイント： ） | スコア(1-5) | 改善のヒント・具体案 |
|---|---|---|
| Visceral（本能的）：外観は魅力的で期待感を抱かせるか？ | 祝福アニメーション、ブランドカラーの再定義 | |
| Behavioral（行動的）：操作はスムーズで達成感があるか？ | 即時フィードバック、不要なポップアップの削除 | |
| Reflective（内省的）：達成を誇りに思い、愛着を感じるか？ | パーソナルな成功メッセージ、活動履歴の可視化 | |
| 合計点（15点満点） | /15 |
評価指標は、短期の「見える×消費者」指標（好感度・安心感）と中期の「見えない×消費者」指標（愛着・推奨意向）に分けて設計すると、経営層への説得力が高まります。
まとめ
“使いやすい”を超えて”好き”に至るには、Visceral/Behavioral/Reflectiveの3層で”感情の曲線”を設計する必要があります。
マイクロな瞬間──押下・待機・成功・失敗──の積み重ねが、プロダクト全体の印象を決定づけます。
まずは自社の「404/エラー/空状態」のいずれか1つを選び、3層の視点で再設計してみてください。小さな改善が、ユーザーの離脱を防ぎ、長期的なファン化への第一歩となります。
感情マーケティングの科学的根拠や全体像についてや、顧客体験全体の設計原則については、近日公開予定の感情マーケティング・ブランディング関連記事（記事No.112、記事No.115）で詳しく解説していきます。
FAQ
Q1:美しさ(Visceral)と使いやすさ(Behavioral)がトレードオフになる時の判断は?
A:タッチポイントごとに優先層を決めます。初回起動画面は期待を作るためにVisceralを優先し、タスク実行画面は効率を保つためにBehavioralを優先します。メリハリが重要です。
Q2:ユーモアやキャラクターの導入で”やりすぎ”を避けるコツは?
A:ブランドのトーン&マナーと一致しているかを確認します。Slackのように、セキュリティに関わる場面では定型的に、日常の小さな成功では軽妙に、と場面で使い分けるのが正解です。
Q3:感情KPIはどう報告すべき?
A:定性（好感度）と定量（タスク完了時間・離脱率）を組み合わせます。「感情的満足度が上がった結果、再訪率が〇％改善した」とセットで報告することで、デザイン投資の正当性が示せます。
