ITTO PORTFOLIO

カスタマージャーニーマップ - 3つのユーザー体験フロー

Design H/JackUXカスタマージャーニーユーザー分析

カスタマージャーニーマップ - 3つのユーザー体験フロー -

はじめに

ユーザー体験を設計する上で、カスタマージャーニーマップは不可欠なツールです。Design H/Jack では、3つの異なるペルソナについて、それぞれの感情の流れとタッチポイントを可視化しました。

この記事では、初心者の学習体験、制作者のリサーチ体験、コミュニティ参加者の交流体験という3つのジャーニーを詳しく解説します。

ジャーニー1: 初心者の学習体験

ペルソナ：山田 光（23歳）

  • デザインスクール受講中
  • 「良い」と感じる理由を言語化できない
  • 感覚的な判断から抜け出したい

フェーズ1: 発見

シーン:
渋谷駅で見かけた化粧品の広告ポスターに目が釘付けになった。「なんかすごくいい...!」

感情:
😊 心が動いた、保存したい
😕 でも「なぜ良いか」が説明できない

思考:
「このデザイン、すごく洗練されてる。でもなぜだろう...色? 配置? レイアウト?」

行動:

  • スマホで写真を撮る
  • Design H/Jack を開いて投稿

タッチポイント:
Webアプリ（/app）- 投稿画面

ペインポイント:

  • タグやカラー情報の入力が面倒に感じるかも
  • 何を書けばいいか分からない

機会:

  • 入力ガイド・サンプル表示で不安を軽減
  • 「後で編集可能」と明示して心理的ハードルを下げる

フェーズ2: 探索

シーン:
自分の投稿をした後、タイムラインで他の人の投稿を眺める。

感情:
😲 こんな見方があるのか!
💡 自分も気づかなかった視点

思考:
「この人は『余白の使い方が絶妙』って書いてる。確かに、余白に注目したことなかった...」

行動:

  • 他のユーザーの投稿とコメントを閲覧
  • 気になった投稿をお気に入りに保存
  • 「余白」という観点を意識して再度自分の投稿を見返す

タッチポイント:

  • タイムライン
  • 投稿詳細ページ

ペインポイント:

  • 情報量が多くて圧倒される可能性

機会:

  • 「おすすめ」や「初心者向け」タグでフィルタリング
  • 分かりやすいコメントをハイライト

フェーズ3: 交流

シーン:
自分の投稿に初めてコメントがついた。「このフォント選びが良いですね!」

感情:
😊 嬉しい、認められた
🤔 フォント...確かにそこは意識してなかった

思考:
「フォントか...次から意識してみよう。コメントくれた人の投稿も見てみたい」

行動:

  • コメントに返信
  • コメントしてくれたユーザーをフォロー
  • そのユーザーの過去投稿を閲覧

タッチポイント:

  • 投稿詳細ページ - コメント欄
  • ユーザーページ

ペインポイント:

  • 返信の仕方が分からない

機会:

  • コメント返信のテンプレート提示
  • 「ありがとうございます!」などの簡単返信ボタン

フェーズ4: 成長

シーン:
1ヶ月後、また駅で広告を見かけた。以前とは違う見方ができるようになっていた。

感情:
😄 成長を実感
💪 もっと学びたい

思考:
「色の対比、フォントの選び方、余白の取り方...いろんな観点で見られるようになった!」

行動:

  • 新しい投稿をする（以前より詳しく分析）
  • 過去の自分の投稿を見返して成長を確認
  • 他の初心者にコメントしてサポート

タッチポイント:

  • マイページ（投稿履歴）
  • 投稿画面

ペインポイント:

  • 成長が可視化されないと実感しにくい

機会:

  • 投稿数やコメント数のバッジ
  • 「1ヶ月前の自分と比較」機能（将来）

ジャーニー2: 制作者のリサーチ体験

ペルソナ：中川 未来（28歳）

  • フリーランスUI/UXデザイナー
  • 新しいプロジェクトの参考資料が必要
  • 効率的にインプットしたい

フェーズ1: リサーチ開始

シーン:
新しいクライアントから「ミニマルで高級感のあるECサイト」の依頼が来た。

感情:
🎯 参考資料を効率的に集めたい
⏰ 時間をかけずに質の高い事例を見たい

思考:
「ミニマル × 高級感...どんなデザインがある? Pinterestだと関係ないものも多いんだよな」

行動:

  • Design H/Jack で検索
  • 「ミニマル」「高級感」のタグで検索
  • カラー条件で「黒・白・ゴールド」を指定

タッチポイント:
検索画面

ペインポイント:

  • 検索結果が的外れだと時間の無駄

機会:

  • 精度の高い検索機能
  • デザイナーの投稿を優先表示

フェーズ2: 収集・整理

シーン:
検索結果から良いデザインを20件ほどお気に入りに保存した。

感情:
✅ 良い資料が集まった
📁 後でプロジェクトごとに整理したい（将来の有料機能）

思考:
「このクライアント案件用にまとめておきたいな。後で見返しやすいように」

行動:

  • 気に入った投稿をお気に入りに保存
  • コメントを読んで他の人の視点も確認

タッチポイント:

  • 検索結果一覧
  • 投稿詳細ページ

ペインポイント:

  • お気に入りがリストで混在すると探しにくい（将来解決予定）

機会:

  • フォルダ分け機能（有料/将来）
  • メモ機能で自分の考えを追記

フェーズ3: 着想

シーン:
保存した事例を見ながら、自分のデザイン案をスケッチ。

感情:
💡 インスピレーションが湧く
🎨 自分なりのアレンジを思いつく

思考:
「この余白の取り方は参考になる。でも配色は自分のクライアント向けに変えよう」

行動:

  • お気に入りリストを見返しながらスケッチ
  • 特に参考になった投稿にコメント（感謝や質問）

タッチポイント:

  • お気に入り一覧
  • 投稿詳細ページ

ペインポイント:

  • 複数の投稿を並べて比較できない

機会:

  • 比較表示機能（将来）
  • デザインツールへのエクスポート

フェーズ4: フィードバック

シーン:
プロジェクト完成後、参考にした事例を振り返って自分の投稿もする。

感情:
😊 成果物ができて満足
🙏 参考にした事例に感謝

思考:
「このプロジェクトで学んだこと、コミュニティにもシェアしよう」

行動:

  • 制作過程で気づいたことを投稿
  • 参考にした事例の投稿者にコメントで報告

タッチポイント:

  • 投稿画面
  • コメント欄

ペインポイント:
なし（ポジティブな体験）

機会:

  • 「制作事例」タグで完成作品と参考資料を紐付け
  • プロジェクト完了バッジ（将来）

ジャーニー3: コミュニティ参加者の交流体験

ペルソナ：佐藤 あかり（25歳）

  • 独学でグラフィックデザインを学ぶ
  • 仲間が欲しい
  • 自分の発見を共有したい

フェーズ1: きっかけ

シーン:
SNSでDesign H/Jackを知り、興味を持った。

感情:
😃 面白そう!
🤝 同じ興味を持つ人と繋がりたい

思考:
「デザイン好きな人が集まってるなら、話が合いそう」

行動:

  • 会員登録
  • まずは他の人の投稿を眺める
  • 共感できる投稿に「いいね」

タッチポイント:

  • トップページ
  • 会員登録画面
  • タイムライン

ペインポイント:

  • 最初は誰をフォローすればいいか分からない

機会:

  • おすすめユーザー表示
  • 「初心者歓迎」タグのユーザー

フェーズ2: 投稿

シーン:
カフェで見つけたショップカードのデザインが素敵だったので投稿。

感情:
ドキドキ 反応があるか不安
😊 でもシェアしたい

思考:
「みんなはどう思うかな? こういうシンプルなデザイン、好きな人いるかな」

行動:

  • 写真を投稿
  • 「シンプルで洗練されてる」とコメント
  • タグ付け

タッチポイント:

  • 投稿画面
  • タイムライン

ペインポイント:

  • 反応がないと寂しい

機会:

  • 初回投稿には運営からウェルカムコメント
  • 同じタグの人に通知

フェーズ3: 交流

シーン:
投稿に複数のコメントがついた! 「この余白の使い方いいですね」「フォント選びも素敵」

感情:
😄 嬉しい! 認められた
💬 もっと話したい

思考:
「コメントくれた人たちも面白い投稿してる。フォローしよう!」

行動:

  • コメントに返信
  • コメントしてくれたユーザーをフォロー
  • フォローしたユーザーの投稿にもコメント

タッチポイント:

  • コメント欄
  • ユーザーページ
  • フォロー機能

ペインポイント:

  • コメント返信が続くと追いきれない

機会:

  • 通知機能でコメントを見逃さない（将来）
  • スレッド表示で会話を追いやすく

フェーズ4: コミュニティ定着

シーン:
週に3-4回投稿するのが習慣になった。フォロワーも増え、常連の交流相手もできた。

感情:
😊 居場所ができた
🌱 一緒に成長している実感

思考:
「○○さんの投稿、今日も勉強になる。自分も負けないように頑張ろう」

行動:

  • 定期的な投稿
  • フォロワーの投稿にコメント
  • 新しい初心者をサポート

タッチポイント:

  • タイムライン
  • 投稿画面
  • コメント欄

ペインポイント:

  • タイムラインが流れて見逃す

機会:

  • フォロー中の投稿を優先表示
  • 「見逃した投稿」リマインド（将来）

共通インサイト

ポジティブな体験を生む要素

  1. 他者からの反応: コメント・いいね・フォローが嬉しい
  2. 学びの実感: 新しい視点を得られた、成長を感じる
  3. 効率性: 欲しい情報が素早く見つかる
  4. コミュニティ感: 仲間がいる、孤独じゃない

改善すべきペインポイント

  1. 初回体験の不安: 何を投稿すればいいか、どう書けばいいか
  2. 情報過多: タイムラインで迷子になる
  3. 見逃し: 大事な投稿・コメントを見逃す
  4. 整理の難しさ: お気に入りが増えると探しにくい（将来解決）

設計への示唆

  • 初心者向けのオンボーディング・ガイド強化
  • 適切な通知設計（将来）
  • 検索・フィルタ機能の精度向上
  • コミュニティの温かさを感じられるUI/UX

まとめ

Design H/Jack の3つのカスタマージャーニーは、それぞれ異なるユーザーニーズに対応しています。

ジャーニー1（初心者の学習体験）:
発見 → 探索 → 交流 → 成長という循環で、自然と観察力と表現力が鍛えられる

ジャーニー2（制作者のリサーチ体験）:
リサーチ開始 → 収集・整理 → 着想 → フィードバックという実務での活用フロー

ジャーニー3（コミュニティ参加者の交流体験）:
きっかけ → 投稿 → 交流 → コミュニティ定着という居場所作りのプロセス

これらのジャーニーを可視化することで、各フェーズでのペインポイントと機会を特定し、最適なユーザー体験を設計できました。

関連記事:

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