カスタマージャーニー

売れないWebサイトは、ただの「高価なデジタルポスター」である 毎日、星の数ほどのWebサイトが生まれ、そして誰にも見られずに死んでいきます。 アニメーションが滑らかで、Pexelsで見つけたようなシネマティックな画像を使い、タイポグラフィも完璧。 同業者からは「かっこいいサイトだね」と褒められる。 ……でも、全く商品が売れない。問い合わせが一件も来ない。 なぜでしょうか？ それは、デザイナーが「Attention（注意を引く）」と「Interest（興味を持たせる）」のUIしか作っておらず、 その後の「Search（検索・比較）」「Action（行動）」「Share（共有）」というUX（体験のレール）が断絶しているからです。 デザインに特化した人間（ビジュアルデザイナー）は、往々にして「パッと見の美しさ」に全リソースを注ぎます。しかし、あなたがもし上流工程（ディレクターやUXデザイナー）を目指すのであれば、ユーザーがサイトを訪れる「前」から、商品を買った「後」までの全体像を俯瞰しなければなりません。 そのために必須となるのが、マーケティングフレームワークとデザインの融合です。 デザインとビジネスを繋ぐ「AISAS」モデル UXを設計する際、ユーザーがどのような心理プロセスを経て行動（購入や問い合わせ）に至るのかをモデル化した枠組みが必要です。 今回は、インターネット普及後の消費行動モデルとして最も有名な「AISAS（アイサス）」（※電通が提唱した概念）を用います。 A（Attention - 認知）： サービスを知る（SNS、広告、検索など） I（Interest - 関心）： 「お、いいな」と興味を持つ S（Search - 検索）： Googleで詳細や評判を調べる（SEOの主戦場） A（Action - 行動）： サイトに訪れ、購入・問い合わせをする（UIの主戦場） S（Share - 共有）： 体験をSNSやレビューで第三者に共有する 通常のWebデザイナーは「AとI」のビジュアル作りに注力します。 しかし、UXデザイナーは「S（検索）」でどう見つけさせ、「A（行動）」でいかに迷わせず、「S（共有）」したくなる感動を与えるか、このすべてを設計します。 このAISASのレールを敷くための具体的なプロセスが、「ペルソナ構築」と「カスタマージャーニーマップ」です。 ペルソナ構築 〜「20代女性」はペルソナではない〜 UX設計の第一歩は、「誰に届けるのか（ペルソナ）」を異常な解像度で定義することです。 初心者がよくやる間違いが、以下のような浅いペルソナです。 × 悪い例：「都内に住む30代の男性経営者。Web集客に悩んでいる」 これはペルソナではなく、ただの「ターゲット層（デモグラフィック）」です。これではUIに落とし込めません。 本当に使えるペルソナは、「血の通った一人の人間」として、その人の痛み（ペイン）や日常の行動まで言語化します。 〇 良い例（ペルソナ：佐藤さん・35歳）： 地方都市で小さなカフェを経営して3年目。最近、近所に大手チェーン店ができ、客足が3割減って焦っている。 毎日深夜2時まで店に残り、スマホで「カフェ 集客 インスタ」「ホームページ 制作 費用」と検索しているが、専門用語（SEOやコンバージョン）がわからず、どの業者を信じていいか疑心暗鬼になっている。 一番の恐怖は「高いお金を払ってWebサイトを作ったのに、誰にも見られないこと」。 いかがでしょうか？ ここまで深掘りすると、佐藤さんに対する「最適なUX（体験）」と「最適なUI（画面）」が自ずと見えてきます。 UXの方向性： 専門用語でマウントを取らず、寄り添い、安心感を与える体験。 UIの方向性： ギラギラしたIT企業風のデザインではなく、温かみのある配色。難解な英語メニュー（Solutionなど）は避け、直感的な日本語（私たちができること）を採用する。 ペルソナ構築とは、デザインの「正解の基準」を作る作業なのです。 カスタマージャーニーマップ 〜感情のジェットコースターを描く〜 ペルソナ（佐藤さん）が決まったら、彼がAISASのプロセスをどう進むのか、時系列で地図（マップ）にします。これが「カスタマージャーニーマップ」です。 各フェーズにおける佐藤さんの「行動」「思考」「感情の起伏」、そして私たちが提供すべき「施策（タッチポイント）」を埋めていきます。 フェーズ1：Attention（認知）＆ Interest（関心） 行動： 深夜、Instagramで「売上の上がるホームページの作り方」という当社の投稿を見る。 感情（ややポジティブ）： 「おっ、今の自分に必要な情報かも。でも本当に効果あるのかな？」 UX施策： 専門用語を使わない図解投稿で目を引く。プロフィールのリンクへ誘導する。 フェーズ2：Search（検索） 行動： 後日、改めてGoogleで「地域名 ＋ ホームページ制作 ＋ 集客」で検索し、当社のサイトを見つける。（SEO対策の成果） 感情（不安）： 「検索上位に出たけど、騙されないかな。料金はいくらだろう」 UX施策： 検索意図（集客したい・騙されたくない）に完璧に答える記事やLPを用意する。 フェーズ3：Action（行動） 行動： サイトを読み進め、納得して「無料相談」のボタンを押す。フォームに入力する。 感情（期待と面倒くささ）： 「頼んでみよう！……でも、入力項目が多くて面倒だな」 UX施策： フォームの入力項目を極限まで減らし、心理的ハードルを下げる。 フェーズ4：Share（共有） 行動： 無料相談が想像以上に丁寧で感動し、X（旧Twitter）で「すごく親身に相談に乗ってくれる制作会社を見つけた！」と呟く。 感情（感動）： 「自分事のように考えてくれた。誰かに教えたい」 UX施策： 相談後に、役立つPDF資料を無料でプレゼントし、「期待値を超える体験」を提供する。 このように、ユーザーの感情が「不安」に落ち込むポイント（Search時やAction直前）を事前に予測し、そこを先回りして「安心」へと引き上げる設計図を作るのが、UXデザイナーの腕の見せ所です。 魔法の翻訳。UX（ジャーニー）をUI（画面）に落とし込む方法 さあ、ここからが本番です。 作ったカスタマージャーニーマップを、実際のWebサイトの「UI（画面設計）」へと翻訳していきます。 上流工程の思考が、どうピクセルに変換されるのかをご覧ください。 1. Search（検索）フェーズのUI設計 佐藤さんは、Google検索から「不安」を抱えてランディングページ（LP）にやってきます。 ここで「オシャレすぎるだけの抽象的なファーストビュー」を見せたら、彼は3秒で離脱します。 UIへの落とし込み： ヘッダー（FV）： 左上にロゴ、右上に前回紹介した配色の黄金比を活用した、コントラストの高い「無料相談」ボタン（CTA）を配置。 キャッチコピー： 「Webデザイン×集客」という、彼の検索意図（Search）に直結するキーワードを最も大きなフォント（H1）で配置。 権威性の提示： FVのすぐ下に「飲食店の集客成功事例」や「お客様の声」のセクションを配置。これにより、佐藤さんの「騙されないか」という不安（Pain）を視覚的・即座に払拭します。 2. Action（行動）フェーズのUI設計（EFOの徹底） 佐藤さんが「よし、問い合わせよう」と思った瞬間（Action）のUIは、「極限の引き算」が求められます。 UIへの落とし込み（入力フォーム）： フォームの画面では、上部のグローバルナビゲーションやサイドバーをすべて消し去ります。これは「他のページへの目移り（離脱）」を防ぐためです。 入力項目は「会社名・お名前・メールアドレス・相談内容」の4つのみに絞る。 ボタンのマイクロコピー（小さなテキスト）を工夫する。「送信する」という事務的な言葉ではなく、「無料で集客の相談をする（1分で完了）」という、彼が得られるメリットと手軽さをUI上のテキストとして実装します。 3. Share（共有）フェーズのUI設計 佐藤さんが問い合わせを完了した直後の「サンクスページ（完了画面）」。通常のサイトは「お問い合わせありがとうございました。担当者からの連絡をお待ちください」というテキストだけで終わります。 しかし、UXを重視するなら、ここは「次の行動（Shareなど）」を促す最大のチャンスです。 UIへの落とし込み： サンクスページに「お返事をお待ちの間に、こちらの『カフェ集客成功の裏側レポート』をぜひお読みください」というPDFのダウンロードリンク（UI）を配置。 記事の下に、押しやすいSNSのシェアボタンを配置。 期待値を超える「おもてなしのUI」を挟むことで、ユーザーの感情を最高潮に持っていき、Shareへと誘導します。 アート、デザイン、ビジネスの交差点に立つということ いかがだったでしょうか。 UI（ボタンの配置や色、文字の大きさ）は、決して「デザイナーのセンス」で決まるものではありません。 「ペルソナの不安を消すため（UX）に、ここに実績のバナー（UI）を置く」 「購入の迷いを断ち切るため（UX）に、ボタンのテキスト（UI）を変える」 すべてはカスタマージャーニーという論理的なレールの上に成り立っています。 これが、デザインがビジネス（売上）に直結するメカニズムです。 しかし、ここで忘れてはいけないのが、「アート（人間への深い洞察）」の視点です。 どれだけAISASやジャーニーマップといったフレームワークを使いこなしても、その中心にいる「佐藤さん」という人間の痛みに心から共感し、「彼を救いたい」という血の通った思い（アート思考）がなければ、出来上がるUIはどこか冷たく、結局人の心は動きません。 ビジネス： 売上を上げるための戦略（AISAS、SEO） アート： ユーザーの痛みに寄り添う共感力（ペルソナへの愛） デザイン： その両者を、使いやすい画面へと翻訳する技術（UI） この3つを高い次元で統合できる人間こそが、これからのAI時代に生き残る、真のUXデザイナーであり、最強のビジネスパートナーです。 あなたは「装飾者」か、それとも「設計者」か 綺麗なバナーを作り、美しい配色を考えるのは、素晴らしい技術です。 しかし、AIが数秒でプロ級の見た目を生成できるようになった現在、ビジュアルを作るだけの「装飾者（デコレーター）」の価値は下がり続けています。 もしあなたが、現状のスキルや単価に頭打ちを感じているなら。 今日から、IllustratorやFigmaを開く前に、ノートに「ペルソナ」と「カスタマージャーニーマップ」を手書きで殴り書いてみてください。 「このユーザーは、どこから来て、何を不安に思い、どうなったら嬉しいのか？」 見えない「体験（UX）」を設計し、それを論理的に「画面（UI）」に落とし込む。 この一連のプロセスを息をするように行えるようになった時、あなたの作るデザインは、単なる「綺麗な絵」から、ビジネスを動かす「強力な武器」へと進化しているはずです。 泥臭く、しかし最高にクリエイティブな「UX設計」の世界。 次回のプロジェクトで、ぜひこの思考プロセスを試してみてくださいね！ 関連する記事はこちら

ユーザーの心を操るUX設計プロセス。ペルソナ構築からカスタマージャーニー、そしてUIへの落とし込み方