ブログ

噂のカスタマージャーニーマップの研修を社内でしたのでまとめてみた

img_0350

こんにちは、エム・フィールド広島オフィスのフロントエンド番長・かみーゆです。
最近めっきり冷え込んできましたが弊社オフィスのメンバーの情熱は南国か松岡 ◯造並みに暑苦しいです。

本日、社内研修として午前中にカスタマージャーニーマップ(CJM/AsIs)のワークショップを行いました。カスタマージャーニーマップとはUXデザインで使われている手法の一つなんだそうです。

ちなみにみなさん、UXデザインてご存知でしょうか?
デザインって聞くと色や色彩だけでなく、動きや形状、使い心地など思い浮かべますよね?結構広い領域だと思います。
UX(ユーザーエクスペリエンス)デザインは、さらに広げてお客さんの体験・経験をデザインする手法だそうです。
製造業などではカスタマーエクスペリエンスなどとも言うらしいですが、Web業界ではUXデザインと呼ぶ人が多いみたいですね。私もまだまだ分からないことが多く勉強中ではありますが、今後いい仕事をするためには必要な知識にもなってくると確信してますので頑張って学んだことをまとめます!

カスタマージャーニーマップは手法の一つ

そもそもUXデザインをする上で、避けて通れぬ4つがあります。

  • 調査
  • 分析
  • 設計
  • 評価

この4つをPDCAサイクルで回して、より良いもの・サービスを提供するのがUXデザインです。
ちなみにカスタマージャーニーマップを使うとお客さんの行動・考え・感情などを時系列で見える化でき、それを元に調査と分析を行うことができます。

いやあ、見える化って本当に大切です

習うより慣れろ!ということで座学はそこそこで
今回はTantan、ゆきパンダ、かみーゆの3人で「弊社広島オフィスサイト」をお題にチャレンジしてみました。
ゆうさんはその様子を生暖かい目で見守るという流れ。

それでは、やってみましょう!!

まずは行動を抽出

今回時間の都合でどんな人(いわゆるペルソナ)が訪れるかなどの選定は割愛します。
とりあえず、弊社サイトにユーザーが訪れてどうするかまでの流れの行動を細かく分けて、ポストイットに書き出します。抽出後は時系列に似た行動の項目ごとに並べ、時系列ごとにタイトルをつけます。
ああでもない、こうでもないと、みんなでディスカッション。そして、ポストイットの貼り方が曲がっているとかみーゆが怒り出します。

次に思考の抽出

ポストイットの色を変えて、今度はとりあえずユーザーが思っていること考えてることをポストイットに書き出してみます。
行動同様、時系列に、行動を抽出した時に付けたタイトルごとに整理して並べ替えます。

課題点を抽出

ここまで整理されると行動や思考から課題点が見えてきます。課題は行動・施行同様、時系列・タイトルごとに整理して並べます。

img_0366

感情の推移を曲線で描く

問題点、思考、行動から感情の推移をディスカッションしながら曲線でグラフを作っていきます。
結果こんな感じになりました!!!!

img_0367




…ちーん。

chine

最初はウキウキしてサイト訪問するけど、最終的にはテンションは下がるであろうという結果に至りました。

まとめ・キーワードはやはり「見える化」

感情曲線が下がったからといって悲観する必要はありません。今回はカスタマージャーニーマップを使って「調査・分析」をしただけです。
今回出てきた課題点を潰していけば、感情曲線は上向きになっていくので結果オーライなんです。

そして、今回やってみて感じたのは、いつものサイト制作前にするミーティングに比べると問題点の抽出も早く明らかに効率的と感じました。
ホント時短になりますね!!目からウロコです。

ということで次はこれをもとにみんなで「設計・評価」のステップに行こうと思います。
続・レポート書きますので乞うご期待くださいませ。

※ご注意※
ハロウィーンが近づいているので雰囲気を醸し出そうとスタッフ一同被り物をしてますが、実は普段は真面目なスタッフばかりです。ご安心ください。

■この記事を書いた人 かみーゆ(フロントエンドエンジニア)

CMS concrete5の認定エバンジェリスト。コーディングからプログラミングまでフロント周りを中心にお仕事してます。広島支社でフロントエンドからサーバエンドまで幅広く触れるリベロなエンジニアを目指してます。お得意のconcrete5や技術的なTipsの記事を主にUPしてます。好きなものは肉とビール。

関連記事

  1. Google-auto-mail-return-8 Googleフォームの自動返信機能を追加する(後編)
  2. Materialicon-00 デザイナーのためのGoogle Material iconsの使…
  3. news_study コーディングで大事なこと5点
  4. blog_twitter 良いホームページを制作するためのコツ
  5. blog_panda_penguin ユーモアのあるサムネイル画像をデザインするための発想法
  6. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など 【初心者OK】IllustratorCCで漫画風吹き出しの作り方…
  7. img_0350 噂のカスタマージャーニーマップの研修を社内でしたのでまとめてみた…
  8. チェックリストイラスト オフィスでコーチングのタイプ診断をしたら楽しい結果になった

最近の記事

  1. IMG_1781
  2. Hirofuro-logo-8
  3. eyecatch7-1
  4. SEO-eyecatch
  5. wtm100
PAGE TOP