--- title: ユーザーフローとカスタマージャーニーマップの違いとは？ description: ユーザーフローとカスタマージャーニーマップの違いを、AmazonとUber Eatsの具体例で分かりやすく解説。ウェブサイト・アプリ設計で成果を出すための体験設計の本質を学びましょう。 image: https://blog.brandbuddyz.com/hubfs/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%83%95%E3%83%AD%E3%83%BC%E3%81%A8%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%83%BC%E3%82%B8%E3%83%A3%E3%83%BC%E3%83%8B%E3%83%BC%E3%83%9E%E3%83%83%E3%83%97%E3%81%AE%E9%81%95%E3%81%84%E3%81%A8%E3%81%AF%3F-1.png --- [![BrandBuddyz](https://blog.brandbuddyz.com/hs-fs/hubfs/raw_assets/public/Brandbuddyz_August2020/images/logo.png?height=37&name=logo.png "BrandBuddyz")](https://brandbuddyz.com/) [![BrandBuddyz](https://blog.brandbuddyz.com/hs-fs/hubfs/raw_assets/public/Brandbuddyz_August2020/images/logo_mob.png?height=37&name=logo_mob.png "BrandBuddyz")](https://brandbuddyz.com/) - [Who?](https://brandbuddyz.com/about/) - [Vision](https://brandbuddyz.com/vision/) - [Message](https://brandbuddyz.com/message/) - [Services](https://brandbuddyz.com/services/) - [Company](https://brandbuddyz.com/company/) - [Works](https://brandbuddyz.com/works/) - [Blog](https://blog.brandbuddyz.com/) - [Contact](https://share.hsforms.com/1EzTTaBreQACNnJXz4Ui3Yg2ohhk?__hstc=26595618.1c7cc254733071e7a41897617782950d.1598678740527.1598678740527.1598695242933.2&__hssc=26595618.2.1598695242933&__hsfp=347524095) - [Who?](https://brandbuddyz.com/about/) - [Vision](https://brandbuddyz.com/vision/) - [Message](https://brandbuddyz.com/message/) - [Services](https://brandbuddyz.com/services/) - [Company](https://brandbuddyz.com/company/) - [Works](https://brandbuddyz.com/works/) - [Blog](https://blog.brandbuddyz.com/) - [Contact](https://share.hsforms.com/1EzTTaBreQACNnJXz4Ui3Yg2ohhk?__hstc=26595618.1c7cc254733071e7a41897617782950d.1598678740527.1598678740527.1598695242933.2&__hssc=26595618.2.1598695242933&__hsfp=347524095) 1 min read # ユーザーフローとカスタマージャーニーマップの違いとは？ ![Hiroki Teruya](https://blog.brandbuddyz.com/hubfs/hiroki_BrandBuddyz%20(1).jpg) By Hiroki Teruya ![ユーザーフローとカスタマージャーニーマップの違いとは？](https://blog.brandbuddyz.com/hubfs/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%83%95%E3%83%AD%E3%83%BC%E3%81%A8%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%83%BC%E3%82%B8%E3%83%A3%E3%83%BC%E3%83%8B%E3%83%BC%E3%83%9E%E3%83%83%E3%83%97%E3%81%AE%E9%81%95%E3%81%84%E3%81%A8%E3%81%AF%3F-1.png) 商品やサービスを販売する際に避けて通れないのが「集客」と「コンバージョン」です。特に、オンライン上で決済まで導くプロセスをしっかりと設計することは、ビジネス成功の鍵となります。 今回は、[**ユーザーフロー**](https://blog.brandbuddyz.com/userflow?hsLang=ja)と[**カスタマージャーニーマップ**](https://blog.brandbuddyz.com/2017/09/07/journeymap2?hsLang=ja)の違いについて、AmazonとUber Eatsの具体例を交えながら、体験設計の本質を深掘りしていきます。 この記事は2025年5月19日にPodcastにて配信した音声を元に作成しています。 Podcastも合わせてお聞きください。 ## ウェブサイト制作でよくある誤解 ウェブサイトを制作する際、多くの人がワイヤーフレームを作成してデザインに起こすという流れを踏みます。しかし、**その前に必要不可欠なのが「企画」段階**です。 この企画段階で行うべき重要な作業が、以下の2つです。 - ユーザーフローの設計 - カスタマージャーニーマップの作成 では、この2つの違いは何なのでしょうか？ ## ユーザーフローとは？ **ユーザーフロー**とは、ユーザーがウェブサイトやアプリ内で目的（購入・申し込みなど）にたどり着くまでの**ページ遷移やクリック操作の流れを可視化したもの**です。 ### ユーザーフローの具体例 1. トップページのセクションにあるボタンをクリック 2. 商品詳細ページに遷移 3. 「今すぐ購入する」ボタンをクリック 4. 決済画面でクレジットカード情報を入力 5. 購入確定ボタンを押す 6. サンクスページが表示され、確認メールが自動配信 このように、**操作の流れのみ**を矢印などで表現したものがユーザーフローです。 ## カスタマージャーニーマップとは？ 一方、**カスタマージャーニーマップ**は、ユーザーが商品・サービスと出会ってから購入・利用・ファンに至るまでの**感情・行動・接点の流れを時系列で描いたもの**です。 ### ユーザーフローとカスタマージャーニーマップの違い カスタマージャーニーマップの特徴は、**顧客の心理状態が時系列で反映される**ことです。単なる操作プロセスではなく、「このボタンを押す前にユーザーはこういった感情になっている」「クリック後はこんな気持ちになるはず」といった心理面まで考慮します。 ![ユーザーフローとカスタマージャーニーマップの違い](https://blog.brandbuddyz.com/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-05-19%208.47.02.png?width=1940&height=1004&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-05-19%208.47.02.png) ### 分かりやすい例え - **ユーザーフロー**：今いる街から目的地までの最短ルート - **カスタマージャーニーマップ**：旅行全体のストーリーと気持ちの変化 ![ユーザーフローの例](https://blog.brandbuddyz.com/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-05-19%208.47.19.png?width=1940&height=846&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-05-19%208.47.19.png) ## Amazonの事例：急ぎでおむつを注文したいママの体験 32歳の働くママ、佐藤みさきさんが急いでおむつを注文したい場面を想定してみましょう。 ![アマゾンで購入する際のカスタマージャーにマップとユーザーフロー](https://blog.brandbuddyz.com/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-05-19%209.05.14.png?width=1310&height=841&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-05-19%209.05.14.png) ### カスタマージャーニーマップ（感情の変化） 1. **焦り**：Googleで「おむつ 当日配送」と検索 2. **安心**：Amazonページで当日配送を確認 3. **信頼**：レビューを見て商品の質を確認 4. **納得**：価格と品質のバランスに満足 5. **期待**：定期便登録で今後の手間を削減 ### ユーザーフロー（操作の流れ） 1. トップページアクセス 2. 検索窓でおむつを検索 3. 商品詳細ページをクリック 4. カートに追加 5. 配送オプション選択（当日配送） 6. 購入確定 **設計のキーワード**：最短で安心したい欲求を叶える導線設計 ## Uber Eatsの事例：在宅ワークのエンジニアがランチを注文 27歳のエンジニア田中翔太さんが手軽にランチを頼みたいシーンを考えてみます。 ![ウーバーイーツのカスタマージャーニーマップとユーザーフロー](https://blog.brandbuddyz.com/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-05-19%209.05.32.png?width=1310&height=863&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-05-19%209.05.32.png) ### カスタマージャーニーマップ（感情の変化） 1. **空腹**：仕事中にお腹が空く 2. **発見**：SNS広告でUber Eatsを認知 3. **期待**：アプリを起動して料理を比較検討 4. **安心**：注文後の配達状況をリアルタイム確認 5. **満足**：美味しい料理を受け取りリピート利用へ ### ユーザーフロー（操作の流れ） 1. ホーム画面表示 2. 料理ジャンル選択 3. 店舗選択 4. 商品選択 5. 支払い方法選択 6. 注文確定・配達追跡・受け取り **設計のキーワード**：簡単・早い・安心が動線のポイント ## 制作プロセスの理想的な流れ 効果的な体験設計のためには、以下の順序で進めることが重要です。 ![Webサイト制作の流れ](https://blog.brandbuddyz.com/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-05-19%209.05.42.png?width=1310&height=868&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-05-19%209.05.42.png) 1. **ペルソナ設定**：ターゲットユーザーの詳細な人物像を作成 2. **エンパシーマップ作成**：ペルソナの今この瞬間の内面を理解 3. **ジャーニーマップ作成**：時系列での感情変化を可視化 4. **ユーザーフロー設計**：具体的な操作の流れを設計 5. **ワイヤーフレーム作成**：サイト構成の骨組みを作成 6. **デザイン制作**：視覚的なデザインに落とし込み ## よくある混乱と誤解 ### ワイヤーフレームとユーザーフローの混同 サイト構成図（ワイヤーフレーム）は、あくまでウェブサイトの骨組みです。ユーザーフローは、ユーザーの具体的な行動パターンを可視化するものであり、全く異なる概念です。 ### ジャーニーマップを無視したデザイン制作 急ぎでウェブサイトを制作する際によくあるのが、ユーザーフローの共有なしにデザイン制作を始めてしまうことです。これにより以下のような問題が発生します。 - 「このボタンを押した後のアクションは？」といった抜け漏れ - デザイナーとの認識齟齬 - ユーザーの感情を無視した機能的すぎるデザイン ### チーム全体でのユーザーフロー理解の重要性 制作チーム全員がユーザーフローを理解していないと、各自が部分最適に陥りがちです。デザイナーはデザインだけ、エンジニアは機能だけに集中し、全体最適が図れません。 ## エンパシーマップとの関係性 [**エンパシーマップ**](https://blog.brandbuddyz.com/empathy-map?hsLang=ja)は、ペルソナの今この瞬間の内面を理解するためのツールです。これを時系列で発展させたものがジャーニーマップといえます。 ![ユーザーフローとカスタマージャーニーマップとエンパシーマップの関係](https://blog.brandbuddyz.com/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-05-19%208.49.34.png?width=1940&height=648&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-05-19%208.49.34.png) 理想的な設計プロセスは： エンパシーマップ → ジャーニーマップ → ユーザーフロー → ワイヤーフレーム → デザイン ただし、予算と時間の制約を考慮し、細かくしすぎないバランスも重要です。 ## 実践のススメ あなた自身の体験を分析してみることをおすすめします： - Amazonで商品を購入する際の心理状態の変化 - Uber Eatsで注文する時の感情の流れ - アプリやウェブサイトを操作する際の行動パターン これらを可視化することで、体験設計の理解が深まります。 ## まとめ：成果の出る体験設計のために ユーザー理解には段階があります。 1. **ペルソナ理解**：誰のために作るのかを明確化 2. **エンパシーマップ**：瞬間の感情を深掘り 3. **ジャーニーマップ**：時系列での体験全体を設計 4. **ユーザーフロー**：具体的な操作パターンを可視化 この流れを押さえることで、成果の出るウェブサイトやアプリを設計できます。 自社の商品・サービスを販売する際は、ぜひこれらの概念を活用して、ユーザー中心の体験設計に取り組んでみてください。表面的な見た目だけでなく、ユーザーの心に寄り添った設計こそが、真のビジネス成果につながるのです。 エンパシーマップ、カスタマージャーニーマップ、ユーザーフローを戦略的に考えてWebサイトを制作した方はお気軽にご相談ください。 [![今すぐ相談する](https://no-cache.hubspot.com/cta/default/4501640/interactive-188897374013.png)](https://blog.brandbuddyz.com/hs/cta/wi/redirect?encryptedPayload=AVxigLI5sffw8vR8J4JVOfN0lM5xNlDmBuX8ZnGIAm1DHAJaCrvtHYHckAOzvSvFQwGBPqoiT38IlfmzxDMOEbCA2HmE%2Fz08vWBRNHFkZhhhImd%2BrgPSwlbubt64LJ2e95E3CjWw7M9FA8G%2FlhPsTTXtiPKdGTdhWCdmgErfyuJioncxs3mBOP5qLqIobwqzCzja&webInteractiveContentId=188897374013&portalId=4501640&hsLang=ja) Tags: [マーケティング](https://blog.brandbuddyz.com/tag/マーケティング), [DX](https://blog.brandbuddyz.com/tag/dx) ## Related Articles ### カスタマージャーニーマップはもう古い？顧客の心を動かす「感情曲線」エモーショナルジャーニーとは？ *( 1 min read )* Tags: [マーケティング](https://blog.brandbuddyz.com/tag/マーケティング) ### カスタマージャーニーマップの作り方【前半】 *( Less than a minute read )* Tags: [ブランディング](https://blog.brandbuddyz.com/tag/ブランディング), [マーケティング](https://blog.brandbuddyz.com/tag/マーケティング) ### カスタマージャーニーマップの作り方【後半】 *( Less than a minute read )* Tags: [ブランディング](https://blog.brandbuddyz.com/tag/ブランディング), [マーケティング](https://blog.brandbuddyz.com/tag/マーケティング) ## ジャーニーマップをダウンロード！ オンラインとオフラインでメディア戦略を立てるときにご利用ください。 ![Bottom image](https://blog.brandbuddyz.com/hs-fs/hubfs/Brandbuddyz_August2020/Images/btm_img.webp?width=200&name=btm_img.webp "Bottom image") - [Who?](https://brandbuddyz.com/about/) - [Services](https://brandbuddyz.com/services/) - [Company](https://brandbuddyz.com/company/) - [Works](https://brandbuddyz.com/works/) - [Blog](https://blog.brandbuddyz.com/) - [Contact](https://share.hsforms.com/1EzTTaBreQACNnJXz4Ui3Yg2ohhk?__hstc=26595618.1c7cc254733071e7a41897617782950d.1598678740527.1598678740527.1598695242933.2&__hssc=26595618.2.1598695242933&__hsfp=347524095) Copyright ©2020 BrandBuddyz. All Rights Reserved. ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Hiroki Teruya", "url" : "https://blog.brandbuddyz.com/author/rocky59318" }, "dateModified" : "2025-05-19T03:42:08.085Z", "datePublished" : "2025-05-19T03:41:05.000Z", "headline" : "ユーザーフローとカスタマージャーニーマップの違いとは？", "image" : [ "https://blog.brandbuddyz.com/hubfs/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%83%95%E3%83%AD%E3%83%BC%E3%81%A8%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%83%BC%E3%82%B8%E3%83%A3%E3%83%BC%E3%83%8B%E3%83%BC%E3%83%9E%E3%83%83%E3%83%97%E3%81%AE%E9%81%95%E3%81%84%E3%81%A8%E3%81%AF%3F-1.png" ], "mainEntityOfPage" : { "@id" : "https://blog.brandbuddyz.com/userflow-journey", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.brandbuddyz.com/hubfs/bb_logo04.png" }, "name" : "BrandBuddy合同会社" } } ```