この記事はenechain Advent Calendar 2025の16日目の記事です。
- はじめに
- 序：UIは“気分”に寄り添う時代へ
- ダークモード：色反転から“情緒デザイン”へ
- UIに宿る“空気感”：Expressive Design と Liquid Glass の登場
- Emotion Layer：UIは感情を扱えるのか？
- 実装と運用のイメージ：感情は測れなくても、影響は測れる
- UIが生む“感情的体験”が PMF を左右する
- 終わり
- あとがき
はじめに
enechainプロダクトデザインデスクのマネージャーの近藤（@add_kk）です。
2年前、「ダークモードを巡るあれこれ：ダークモードの明るい未来」という記事で、当時のダークモードの状況やその先にあるUIへの考察・妄想を書きました。
あらためて「ダークモードのその先」にUIがどういう方向へ向かおうとしているかを考察しながらまとめていこうと思います。
序：UIは“気分”に寄り添う時代へ
ここ数年、UIデザインは単なる「操作しやすい画面」から、ユーザーの気分や情緒に寄り添う “ムード設計” へと進化してきました。その象徴が、ダークモードや Material You です。
Android 12 から採用された Material You デザインは、Android OS の表現性と柔軟性に焦点を当て、ユーザーがそれぞれのニーズに合った一貫性のあるエクスペリエンスを作成、所有できるようにすることを目標としています。
- ダークモードが「夜・静けさ・没入」を表現する
- Dynamic Color が「ユーザーの空間」をUIに取り込む
- Material 3 Expressive が「暖かさ・落ち着き・活気」といったムードを扱い始める
これらに共通するのは、UI が ユーザーの状態に合わせて“空気感として振る舞う” 方向へ向かっていることです。
本記事では、その流れを読み解きながら「UIは感情を持ち始めている」と言える理由を探っていきます。
まとめ：
UIは色や配置ではなく、“気分と空気感”を扱うフェーズへ入った。
ダークモード：色反転から“情緒デザイン”へ
ダークモードは当初、夜間対策や省電力目的のための機能にすぎませんでした。しかし現在では、その役割は大きく変わっています。
最新のダークモードは“情景”を作っている
- X（Twitter）：濃紺で夜の都市のような落ち着きを演出
- Instagram：光が浮き立つ“ギャラリー空間”のような黒
- iOS/Android：夜間に安心して使える柔らかい暗さ
いずれも、背景色を変えただけではありません。体験の“気分”を整えるための情緒設計になっています。
ちなみに、私は macOS の設定で外観モードを「自動」にしています。これにより、夕方になるとダークモードに切り替わり、朝はまたライトモードで迎えるという一日のリズムが作られています。集中してモニターに向かって仕事をしていても時間の変化を感じられる点が好みです。
まとめ：
ダークモードは“気分の調律”のための情緒デザインへと成熟した。
UIに宿る“空気感”：Expressive Design と Liquid Glass の登場
ダークモードが“情緒的UI”の入り口だったとすれば、Material You と Material 3 Expressive は、それを 体系的に扱える設計言語 へと進化させました。
ここで UI は、“画面”ではなく 空気感（atmosphere）としての存在に近づき始めます。
Material You：ユーザーの気分を UI に取り込む
Dynamic Color によって壁紙から抽出された色が UI 全体のトーンを決め、ユーザーの生活空間や気分とUI が調和します。
これは単なる“パーソナライズ”ではありません。
角丸、モーションの柔らかさも相まって、UI が「自分の自然な空間」になっていく感覚が生まれます。
Material 3 Expressive：ムードを持つ UI
Material Design の最新版で扱われる Material 3 Expressive では、色・影・密度・モーションなどが
- Warm（温かい）
- Calm（落ち着いた）
- Energetic（活気ある）
といった 静的なムードトーン として設計できます。
これは、
- UIが静か
- UIが冷たい
- UIが柔らかい
といった「情緒の質感」をコントロールするための 静的な表現の体系 です。
Liquid Glass：空気感が“静”から“動”へ
Material You や M3 Expressive が扱ってきたのは、主に 静的なムード／トーン でした。
一方で、iOS の Liquid Glass は 動的な空気感のデザイン です。
- 触れる速度によって反応が変わる
- 動きが水面のように揺らぐ
- 指のニュアンスに“感情的フィードバック”が返る
UIが「環境」や「意図」だけでなく、触れた気分を映し返す新しい表現段階です。
Material You は「環境に合わせるUI」
Material 3 Expressive は「ムードを持つUI」
Liquid Glass は「触れた気分に揺れるUI」
まとめ：
UIの“空気感”は静から動へ広がり、感情と身体性が交差する空間へ進化している。
Emotion Layer：UIは感情を扱えるのか？
ここで「UIが感情を持つ」とはどういうことかを整理していきます。
UIが誘導できる“心理状態”
UIは人の深い感情までは操作することはできませんが、次のような“短期的状態”には影響することができます。 例：
- Calm（落ち着き）
- Focus（集中）
- Energetic（活気）
- Confidence（自信）
- Warmth（親しみ）
UIは、これらを支える“空間”を作ることができます。
Emotion Layer = 感情をつくるUIパラメータの組み合わせ
- Color（色調・コントラスト）
- Elevation（影・奥行き）
- Information Density（密度）
- Motion（速度・カーブ）
- Typography（太さ・字間）
- Space（余白）
- Sound（通知・触感音）
これらを 感情プリセット として扱うと、体験のムードを設計できます。
感情はユーザー自身が言語化できない
重要なのはここです。
UIの感情影響は、本人がうまく説明できない。
だからこそ、
- 行動の揺らぎ
- ミスの傾向
- 集中が切れる瞬間
といった観察から心理を読み解く必要があります。
実例：感情を扱うUI
- Spotify Daylist：時間帯 × 気分の可視化
- Apple Watch “Mindfulness”：呼吸を誘導するモーション
- macOS / iOS のNight Shift：睡眠前の”落ち着き”を生成する
- Google Maps “Driving Mode”：ストレス軽減のための認知最適化UI
- YouTube “Ambient Mode / Cinematic Lighting”：映像の雰囲気がUIを染める
これらの事例の共通点
すべてに共通するのは：
UIが “機能の器” ではなく “心理状態を調整するレイヤー” として扱われていること。
- 色 → 落ち着き・期待・喜びを生む
- モーション → リズム・呼吸・達成感を作る
- 情報密度 → 安心 / 集中 のスイッチ
- ダイナミックカラー → 体験世界とUIの同調
そして、この方向性は Dark Mode → Material You → Material 3 Expressive の流れとは無関係とは言いきれないでしょう。
もう8年ほど更新されていませんが、OmmWriter という非常に優れた、そして早すぎた Mac のアプリがありました。執筆に“Focus” する体験として非常に新鮮で完成度の高いUIを持ったアプリでした。
使用しているイメージはこちらでも確認できます（16年前!?）
まとめ：
UIは深い感情は操作できないが、短期的な心理状態は“設計可能”である。
実装と運用のイメージ：感情は測れなくても、影響は測れる
UIが感情に影響を与えているかどうかは、直接測れません。しかし 行動指標 を測ることで、その効果を間接的に評価できるでしょう。
測定可能な指標例
- ミス率（誤操作が減るか）
- 作業時間（集中が保たれるか）
- 読了速度（読みやすいか）
- モード別満足度（ユーザーは使いやすいと感じるか）
これらは A/B テストで十分検証できます。
デザインシステムとの接続
- Dark / Light の二元論を超えて
- Mood（Calm / Focus / Energetic etc.）をトークンとして扱う
- 状態や文脈に合わせた“ムード切替UI
まとめ：
感情は測れなくても、行動指標から心理的影響は確実に検証できる。
UIが生む“感情的体験”が PMF を左右する
UIの情緒性は PMF の後に考えるものと思われがちですが、実は 初期体験＝感情体験 が学習量を左右します。
- 初期ユーザーは脆い：表情や気分の悪化＝離脱につながる
- 初期こそ“心理的ハードル”が高い
- PMF探索に必要なのは「正しい学習量」であり、その量を左右するのは感情体験
PMF期にやるべきではなさそうなこと
- 個性の強い Dynamic UI
- 過剰にリッチなモーション
- 感情プリセットの多用
PMF期に意識できると良さそうなこと
- 不安を下げるUI
- 一貫性
- 明快な階層
- 予測可能な動作
- 迷わせないUI
- 次に何をすべきかが見える
- フィードバックが即返る
- 淡いポジティブ感（達成感）
- 小さな手応え（micro success）
- スムーズに動く感覚
- 視覚ノイズが少ないUI
- 余白が適切
- 色の暴力がない
- 情報密度が適切
“感情的な快適さの土台”を整えることは PMF の一部であると言えそうです。
実際の例
Slack — “Warm × Calm” が醸す、Slackらしい安心感のデザイン
Emotion Layer 設計のポイント
Slackの初期UIは、Warm（親しみ） と Calm（落ち着き） のトーンが一貫していました。
- 紫ベースの柔らかいパレット → Warm
- 角丸・余白の広さ → Calm
- 初回オンボーディングの「怖くなさ」 → Warm
- マイクロアニメーションの滑らかさ → Warm × Calm
- スタンプによるカジュアルなコミュニケーション → Warm × Calm
感情効果
- 初見で「これは自分にも使えそう」と感じさせる
- 新ツール特有の“導入不安”がほぼゼロ
PMFへの寄与
この “安心の初体験” が学習コストを圧倒的に下げ、口コミ導入を後押しした。
Zoom — “Confidence × Clarity” のプリセットで不安を消した
Emotion Layer 設計のポイント
ZoomのUIは、Confidence（自信） と Clarity（明瞭・迷わなさ） を軸にした強いプリセット。
- 大ボタン・大文字 → Confidence
- 1画面で迷わない構造 → Clarity
- 不安を誘発する要素を徹底的に排除 → Confidence
感情効果
- 会議前の「本当に繋がるのか？」という根源的な不安が解消
- 初学習の認知負荷が極めて低い
PMFへの寄与
UIの安心感が“成功体験の積み重ね”を加速し、組織導入を劇的に早めた。
若者に支持されたSNSの大規模リデザイン — “愛着プリセット”の喪失
Emotion Layer 観点での失敗
10〜20代を中心に“ストーリー文化”を広く定着させたSNSが、大規模なUIリデザインを行った際、 旧UIには無意識に愛されていた以下の“感情プリセット”がありました。
- Playful（遊び心）
- Familiarity（親しみ）
- Quickness（軽快さ）
しかし、新UIではこれらが弱まり、Neutral × Dense × Sharp のような“冷たいトーン”へと置き換わりました。
感情効果
- 「ここは自分の場所じゃない」と感じる疎外感
- 変更理由が論理的でも、“感情的拒否感”が優先される
PMFへの影響
愛着プリセットが崩れた瞬間、学習ループは再構築されず、離脱が加速しました。
プロジェクト管理ツール — “Over-Confidence × High-Density” の罠
Emotion Layer 観点での失敗
- 情報密度が高く、圧迫感 を生む
- 色・ボタン・情報の量がユーザーに「触ってはいけない」印象を与える
- 開発チームの自信（＝高機能）を押し出しすぎて、ユーザーのConfidenceを奪う
感情効果
- “自分には扱えないツール”という認知
- 本来の価値に触れる前に、心理的な離脱が起きる
PMFへの影響
機能は優秀なのに、UIの心理摩擦が学習ループを壊してしまう。
最後の例などはあるあるすぎて怖いどころか他人事ではありません。
成功も失敗も共通しているポイントはこれです。
ユーザーがそのプロダクトに触れるとき、 最初に生まれる感情が PMF の成否を分ける。
- UIが安心を与える → 触る時間が増える
- UIが楽しい → 学習コストが下がる
- UIが怖い/複雑 → 本来の価値に辿りつく前に離脱
つまり、PMF段階では機能が主役だが、UIによる“感情的な摩擦の軽減”は不可欠な補助線ということ。機能の良さだけで勝てるケースは少なく、UIが与える情緒的な体験が導入・定着を強く左右すると言えそうです。
まとめ：
PMF は機能だけでなく、初期利用時の“安心・楽しさ・難しさ”に影響される。
終わり
UI/UX の議論は長らく「見やすさ」「操作性」「認知負荷」を中心に語られてきました。
しかし今、UIは感情と空気感を扱う設計へと確実に進んでいます。
- 色は“落ち着き”や“安心感”を生む
- 情報密度は“集中”や“混乱”を左右する
- モーションは“呼吸”や“達成感”のリズムをつくる
- ダイナミックカラーは“生活空間”との同調を生む
これらはすべて、Emotion Layer として整理できる設計そのものです。
UIは単なる見た目や好みの問題ではなく、感情的摩擦を取り除き、心理的安全性をつくり、ユーザーが価値に辿り着くための“土台”です。
あとがき
なぜ、今このテーマを考察してみようと思ったのか。
M3 Expressive や Liquid Glass の登場もありますが、デザインシステムや AI によるデザイン・開発の効率化、自動化が進み、ロジック的な妥当性や UX の評価でさえ“正解らしきもの”や“ベストプラクティス”に収束していく流れの中で、むしろ「手触り」や「情緒性」への関心が高まっているのでは？と感じているからです。
Google や Apple のような OS レベルだけでなく、一つのプロダクトやサービスの中にも、まだ意識できる余白は多くあります。色やテキストのトンマナ、ちょっとしたインタラクション。それらが生むわずかな“響き”が、体験の質を変えることがある。
私はデザイナーとして、まだデザイナーだからこそ考えられることがあると思い、あがき続けたいと思っています。
そのためにできることを、これからも静かに、しつこく、考え続けようと思います。
enechainでは、一緒にプロダクトを成長させ、信頼できるブランドを育てていける仲間を募集中です。興味のある方はぜひTech Recruit Portalをご覧ください。
