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

売れないWebサイトは、ただの「高価なデジタルポスター」である

毎日、星の数ほどのWebサイトが生まれ、そして誰にも見られずに死んでいきます。アニメーションが滑らかで、Pexelsで見つけたようなシネマティックな画像を使い、タイポグラフィも完璧。同業者からは「かっこいいサイトだね」と褒められる。

……でも、全く商品が売れない。問い合わせが一件も来ない。

なぜでしょうか？それは、デザイナーが「Attention（注意を引く）」と「Interest（興味を持たせる）」のUIしか作っておらず、

その後の「Search（検索・比較）」「Action（行動）」「Share（共有）」というUX（体験のレール）が断絶しているからです。

デザインに特化した人間（ビジュアルデザイナー）は、往々にして「パッと見の美しさ」に全リソースを注ぎます。しかし、あなたがもし上流工程（ディレクターやUXデザイナー）を目指すのであれば、ユーザーがサイトを訪れる「前」から、商品を買った「後」までの全体像を俯瞰しなければなりません。

そのために必須となるのが、マーケティングフレームワークとデザインの融合です。

デザインとビジネスを繋ぐ「AISAS」モデル
ペルソナ構築〜「20代女性」はペルソナではない〜
カスタマージャーニーマップ〜感情のジェットコースターを描く〜
魔法の翻訳。UX（ジャーニー）をUI（画面）に落とし込む方法
アート、デザイン、ビジネスの交差点に立つということ
あなたは「装飾者」か、それとも「設計者」か

デザインとビジネスを繋ぐ「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へと誘導します。