世界観とユーザー感情設計 - 感情を動かすデザイン戦略 -

はじめに

機能だけのツールと、世界観のあるツールの違いは何か。それは「ユーザーの感情を動かせるかどうか」です。Design H/Jack では、ダークポップという世界観を通じて、ユーザーの感情に働きかけ、行動を促し、習慣化させる設計を行いました。

この記事では、世界観がユーザー体験にどう影響するか、そして感情設計の戦略を解説します。

世界観の役割：ユーザーの感情を動かす

なぜ世界観が重要なのか

機能だけのツール:
├── 使えるけど愛着わかない
├── 他と差別化できない
├── 記憶に残らない
└── シェアしたくならない

世界観があるツール:
├── 使うたびにワクワクする
├── 「これじゃなきゃダメ」
├── 強烈に印象に残る
└── 友達に教えたくなる

ユーザーの感情フロー

第一印象 → 共感 → 行動 → 体験 → 習慣化 → 拡散

世界観が働くポイント:
├── かっこいい → 憧れ・ワクワク（第一印象）
├── 挑戦的 → やる気・勇気（共感）
├── 刺激的 → 好奇心・探求心（行動）
├── 親しみやすい → 安心感・帰属意識（体験）
└── 独自性 → 愛着・ロイヤリティ（習慣化・拡散）

ターゲットユーザーの感情ニーズ

18-28歳デザイン学習者が求めるもの

感情面のニーズ

かっこいい:
デザイナーっぽいツールを使いたい、プロが使う感じに憧れる、持っているだけで嬉しい、友達に自慢したくなる

楽しい:
ワクワクする、使っていて気持ちいい、継続したくなる、ゲーム感覚で学べる

安心:
初心者でも怖くない、失敗しても大丈夫、優しく教えてくれる、批判されない

仲間意識:
一人じゃない、同じ目標の人がいる、孤独じゃない学習、コミュニティに所属している感覚

機能面のニーズ

簡単に使える:
見ればわかる（学習コストゼロ）、説明いらない（慣れているデザイン）、すぐに投稿できる（ストレスフリー）、迷わない（直感的）

効率的:
参考資料をすぐ探せる、カラー・フォントで検索できる、整理・管理が簡単、実務で使える

Design H/Jack の世界観：ダークポップ

コンセプト

ダークポップ = かっこいい × 親しみやすい

サイバーパンク要素（かっこいい）:
├── ダーク基調
├── ネオンカラー
├── 未来的
├── プロフェッショナル
└── 挑戦的・前衛的

ネオポップ要素（親しみやすい）:
├── ビビッドカラー
├── エネルギッシュ
├── ポジティブ
├── 楽しい
└── 若者向け

= ダークポップ
├── 敷居は低いけどかっこいい
├── プロっぽいけど初心者歓迎
├── クールだけど温かい
└── 刺激的だけど安心

ターゲットへの感情効果

美大生佐藤あかり（22歳）:

「かっこいい！」→ 憧れ
「デザイナーっぽい」→ 自己肯定感
「私も使える」→ 安心
「友達に教えよう」→ 拡散

独学デザイナー田中健太（26歳）:

「プロっぽい」→ 信頼
「仕事で使えそう」→ 実用性
「効率的」→ 満足
「これなら続けられる」→ 習慣化

初心者山田ゆい（19歳）:

「かわいい！」→ ワクワク
「楽しそう」→ 好奇心
「私でもできそう」→ 自信
「仲間がいる」→ 安心

ブランドパーソナリティ：4つの柱

1. 挑戦的

メッセージ:
「その衝動を言葉で刻め」「デザインをハックして攻略する」「一歩を踏み出す勇気を」「君もできる！」

感情効果:
やる気が出る、背中を押してくれる、勇気をもらえる、挑戦したくなる

2. 前衛的

メッセージ:
「新しいデザインを常に学ぶ」「視点を広げる」「固定観念を壊す」「進化し続ける」

感情効果:
刺激を受ける、好奇心が湧く、探求心が生まれる、成長を実感できる

3. 刺激的

メッセージ:
「発見を共有する」「視点を比較する」「気づきを得る」「観察力を磨く」

感情効果:
ワクワクする、楽しい、もっと知りたくなる、継続したくなる

4. 親しみやすい

メッセージ:
「なんか好き」でOK、「初心者でも大丈夫」「一緒に学ぼう」「仲間がいるよ」

感情効果:
安心する、怖くない、失敗してもOK、居心地がいい

デザイン戦略：機能性と世界観のバランス

基本原則

機能性（使いやすさ） × 世界観（感情体験） = 最高のUX

機能性100% / 世界観0% → 便利だけど愛着わかない
機能性0% / 世界観100% → かっこいいけど使いにくい
機能性70% / 世界観30% → 使いやすくて大好き! ✅

媒体別の表現強度

Landing Page（マーケティングサイト）

世界観: 100% フル表現

目的:

第一印象で感情を動かす
「使いたい！」と思わせる
ブランドの個性を刻む
記憶に残す

デザイン要素:

Spotify Wrapped風グラデーション
ダイナミックな図形・アニメーション
大胆な配色・タイポグラフィ
ストーリーテリング
数字で見せるインパクト
SNS映えする構図

期待する感情:

「かっこいい！」→ 興奮
「楽しそう！」→ ワクワク
「これ使いたい」→ 欲求
「登録しよう」→ 行動

Web App（日常ツール）

世界観: 30% 控えめアクセント

目的:

使いやすさ最優先
毎日使うツール
ストレスフリー
世界観は邪魔しない程度

デザイン要素:

Discord/Notion風レイアウト（慣れている）
ダークモード基調（ブランドカラー維持）
ネオンアクセント（世界観の名残）
シンプルなUI（機能性優先）
投稿画像が主役（背景は控えめ）

期待する感情:

「使い方わかる」→ 安心
「迷わない」→ 快適
「でもかっこいい」→ 満足
「毎日使いたい」→ 習慣化

カラーパレット：感情を動かす色

テーマカラー: Red（グラフィックデザイン）

Primary: #ff1a1a（ビビッドレッド）
├── 情熱・エネルギー
├── 挑戦・行動
├── 目を引く・インパクト
└── 「やる気」を刺激

Accent: #33ff99（ネオングリーン）
├── 新鮮・成長
├── ポジティブ
├── 未来的
└── 「楽しい」を演出

テーマカラー: Blue（Webデザイン）

Primary: #1738ff（ビビッドブルー）
├── 知性・信頼
├── 論理・分析
├── プロフェッショナル
└── 「できる」を支える

Accent: #39ff14（ネオンイエローグリーン）
├── 活力・希望
├── クリエイティブ
├── 刺激的
└── 「ワクワク」を生む

ハイライトカラー: Yellow

Highlight: #ffe924（ビビッドイエロー）
├── 注目・強調
├── 楽観・喜び
├── 温かさ
└── 「嬉しい」を表現

トーン&マナー：言葉で感情を動かす

キャッチコピー

メインコピー:
「その衝動を言葉で刻め」

挑戦的、詩的、心に刺さる、行動を促す

サブコピー:
「街で出会う一枚。ネットに流れる一瞬。その『なんか好き』を残し、言葉に変えるアプリ。」

具体的なシーン描写、カジュアルな言葉「なんか好き」、共感しやすい、親しみやすい

タグライン:
「Snap, H/Jack, Create」

シンプル・リズミカル、3ステップで分かりやすい、英語でクール、覚えやすい

コミュニケーションスタイル

使う言葉:

「君」「あなた」（距離感が近い）
「一緒に」「仲間」（コミュニティ感）
「できる」「挑戦」（ポジティブ）
「なんか好き」（カジュアル）
「発見」「視点」「言葉で刻む」（ブランド語）

避ける言葉:

「初心者向け」（見下す感じ）
「簡単」（安っぽい）
「プロ」「上級者」（敷居が高い）
難しい専門用語（とっつきにくい）
ネガティブな表現

ユーザー体験シミュレーション

パターン1: 初めての訪問

Landing Page到着
↓
Hero Sectionを見る
「かっこいい！」「楽しそう！」
（世界観に惹きつけられる）
↓
Problem Sectionを読む
「あるある！」「私もそう！」
（共感・自分ごと化）
↓
Solution Sectionを見る
「これならできそう」「やってみたい」
（行動意欲が湧く）
↓
CTA「無料で始める」をクリック
（世界観+共感+期待 = 行動）

パターン2: アプリ使用開始

初回ログイン
↓
ダッシュボードを見る
「使い方わかる」「Discordみたい」
（慣れているデザイン = 安心）
↓
初投稿
「簡単！」「楽しい！」
（ストレスフリー = 満足）
↓
他の人の投稿を見る
「こんな視点が！」「勉強になる！」
（発見・刺激 = ワクワク）
↓
コメントをもらう
「嬉しい！」「認められた！」
（承認・帰属意識 = 居心地いい）
↓
毎日使う
（機能性+世界観+コミュニティ = 習慣化）

パターン3: 友達に紹介

使い続けて1ヶ月
↓
成長を実感
「言語化できるようになった！」
「視点が増えた！」
（達成感・自己肯定感）
↓
友達に会話
「最近このアプリ使ってるんだ」
「めっちゃかっこよくて楽しいよ」
（自慢したくなる = ブランドロイヤリティ）
↓
友達も登録
「ほんとだ、かっこいい！」
（世界観が拡散の原動力）

まとめ：世界観がユーザー体験を作る

世界観の働き

感情を動かす:
├── かっこいい → 憧れ・ワクワク
├── 挑戦的 → やる気・勇気
├── 刺激的 → 好奇心・探求心
└── 親しみやすい → 安心・帰属意識

行動を促す:
├── 使いたい → 登録
├── 投稿したい → 参加
├── 続けたい → 習慣化
└── 教えたい → 拡散

ブランドを作る:
├── 記憶に残る
├── 愛着が湧く
├── 他と差別化
└── ロイヤリティ構築

最終的なバランス

Design H/Jack = 機能性70% × 世界観30%

機能性:
├── よく使われているデザイン
├── 学習コストゼロ
├── 直感的・ストレスフリー
└── 毎日使いやすい

世界観:
├── ダークポップの配色
├── ネオンアクセント
├── 挑戦的なトーン
└── ブランドの個性

= 使いやすいけど唯一無二
= 親しみやすいけど忘れられない
= 機能的だけど愛される

世界観こそが、ユーザーの感情を動かし、Design H/Jack を特別なアプリにする。

関連記事:

GitHub: [リンク]
Live Demo: [リンク]