UX Design Process — Case Study / Portfolio
Google UXデザインフレームワークに基づき、初心者の犬の飼い主を対象に共感マップ・ペルソナ定義・カスタマージャーニーマップ・問題定義・ゴールステートメント・ユーザーフロー・情報設計・検証まで一連のプロセスを整理したポートフォリオ記録。
「歯みがきが必要なのはわかる。
でも、どう始めればいいかわからない。」
Core User Tension
本ケーススタディでは、初心者の犬の飼い主が抱える「使い方がわからない」「商品が多すぎて選べない」「定期購入が怖い」といった不安を前提に、商品理解・初心者支援・購入導線を一体で設計した。さらに、設計後にユーザビリティテストを実施し、どこで不安が解消され、どこで迷いが残るのかを検証している。
犬用歯みがき商品のLP / モバイル前提の初心者向け購買導線設計
「理解できる」「自分でも使えそう」と感じた状態で、迷わず購入へ進めること
Empathy Map / Persona / Journey / User Flow / Structure / Validation / Insights / Recommendations
初心者の犬の飼い主が、歯みがきの必要性を理解している一方で、開始方法や商品選択に不安を感じている状態を4象限で整理した。
共感マップから、特に設計判断に影響する2タイプの初心者ユーザー像を定義した。
ユーザーがサイトに何を期待して訪れ、何が揃えば購入判断できるのかを文章化した。
検索からLPに訪問し、「初心者向け」「3ステップ」という言葉を見て自分向けだと判断する。
商品詳細とガイドを確認し、「使い方まで支援してくれる」と感じて不安が軽くなる。
単品か定期購入かを比較した上で、自分のペースで選べることを理解して購入に進む。
ユーザーが認知から購入判断まで進む間の行動・思考・感情・改善機会を整理した。
| ① 認知 | ② 理解 | ③ 比較 | ④ 検討 | ⑤ 購入 | |
|---|---|---|---|---|---|
| 行動 | 検索・SNSからLPに訪問 | 3ステップ・商品概要・初心者ガイドを確認 | 単品と定期購入を見比べる | 購入導線と最終確認を読む | 注文ボタンを押して購入を完了 |
| 思考 | これなら初心者向けかも | 本当に自分でも使えるかな | 定期購入は怖くないかな | このボタンで即購入確定？ | これで始めてみよう |
| 感情 | 興味期待 | 理解まだ不安 | 迷い慎重 | 不安確認したい | 安心実行 |
| 改善機会 | 初心者向けメッセージを最上部で明示 | 動画 / PDF / 3ステップの複線支援 | 解約・変更条件を先回り表示 | 確認ステップとボタン意味を明文化 | 注文後の安心導線も補強 |
調査で見えた根本課題を、「誰が / 何を必要とし / なぜか」の構文で整理した。
初心者の犬の飼い主は、歯みがき商品の価値だけでなく、実際の使い方まで短時間で理解できる支援を必要としている。
「重要性はわかるが始め方がわからない」という不安が、購入判断の障壁になっているため。
ユーザーは、定期購入や購入ボタンの意味が曖昧だと、購入直前で強い不安を感じる。
支払い・継続・注文確定に関するリスク認知が高く、曖昧さが離脱要因になりやすいため。
初心者ユーザーには、説明形式をひとつに絞るより、複数フォーマットで情報提供する方が安心感につながる。
理解の仕方に個人差があり、「自分のペースで確認できる」ことが信頼形成につながるため。
設計仮説を「もし〜なら、ユーザーは〜できる」形式で定義した。
このLPが実現すべき状態と、成功指標を明文化した。
課題を解決する方向性を、具体施策に落ちる粒度で定義した。
ユーザーが流入から購入完了に至るまでの主要導線を、ページ役割と不安解消ポイントまで含めて設計した。
元の設計で弱かった「サイト構造」と「各ページの役割」を明示し、導線設計の意図が伝わるよう補完した。
共感 → 使い方理解 → 商品理解 → 不安解消 → 購入判断 の順番で情報を配置し、比較と行動を急がせずに進める構造にした。
CVは単にボタン配置ではなく、「買っても大丈夫」と思える状態を作った直後に発生するように設計した。
設計仮説が実際に機能するかを確認するため、低忠実度プロトタイプを用いたユーザビリティテストを実施した。
多くの初心者の犬の飼い主は、犬の歯みがきの重要性を理解している一方で、どのように始めればよいのかわからず不安を抱えていた。そこで、商品を1つに絞り、初心者向けの3ステップ説明、ガイド、購入導線を組み合わせたLPを設計した。本テストでは、この設計がユーザーの不安を減らし、安心して購入まで進めるかどうかを検証した。
Location：Remote / Japan
Format：Unmoderated usability study
Prototype：Interactive low-fidelity prototype (Figma)
Tasks：LP閲覧、商品確認、ガイド確認、購入導線、チェックアウト確認
Follow-up：オンラインフォーム / SUS
テストで観察されたパターンをテーマとして整理し、各テーマに対して観察事実とインサイトを紐づけた。
頻度・影響度・改善可能性の3軸から、特に重要な学びを抽出した。
定期購入は価格訴求よりも先に「自由にやめられるか」の明示が必要だった。ルールの不明瞭さは、お得さより強く不安を引き起こした。
最終ボタンの意味が不明瞭だと、ユーザーは念のため操作を止める。購入直前では、説明不足よりも「状態遷移の見えなさ」が強い離脱要因になる。
フォーマットの複線化は単なる情報追加ではなく、初心者の理解スタイルの違いを吸収する支援として機能した。
選択肢があることで、ユーザーは「押しつけられていない」と感じる。初心者支援と自己決定感は両立できる。
このLPで最も重要なのは、「説明量を増やすこと」ではなく、不安が発生するポイントの直前で、必要な安心材料を置くことだった。特に、定期購入比較と最終確認画面の明確化が改善インパクトの大きい領域である。
検証結果を踏まえ、優先度と実装しやすさの両面から改善案を整理した。
「いつでも変更可能」「解約方法」「縛りなし」など、ユーザーが最も知りたい安心材料を、価格比較の近くに配置する。ルールの存在を別ページに逃がさない。
「確認画面」「このボタンで注文が確定します」など、現在位置と次に起こることを明示する。購入直前の曖昧さをなくすことが最優先。
「PDFで保存してあとから見返せます」「タップすると別タブで開きます」など、クリック後の挙動を事前に伝えることで迷いを減らす。
いずれも「購入意欲はあるのに、最後の不安で止まる」領域に効く。商品理解をさらに増やすより、離脱ポイントの不安を減らす方がCV改善効果が大きい。
定期購入比較での離脱低減、最終確認画面での躊躇減少、初心者ガイド利用率の改善、購入完了率向上。
ユーザーが課題認識から購入後の安心まで進む一連の体験を6コマで可視化した。
情報設計の役割をページ単位で整理し、「なぜこの順番なのか」を明確化した。
| Section | Role | User Need | Phase |
|---|---|---|---|
| Hero | 初心者向けの悩みと価値を最初に提示し、自分ごと化させる | 「これは自分向けのサイトか？」を即判断したい | Empathize |
| 3-step How-to | 使い方の全体像を短時間で理解させ、自己効力感を上げる | 「自分でもできそうか？」を知りたい | Define |
| Product Detail | 商品特徴と導入価値を明確にする | 「何を買うのか？」を理解したい | Define |
| Guide / FAQ | 動画・PDF・FAQで不安を解消し、理解を補強する | 「あとで見返せる支援が欲しい」「不安を解消したい」 | Ideate |
| Pricing / Purchase | 単品 / 定期の違いを理解させ、選択と行動を支援する | 「どちらを選ぶべきか」「安心して押せるか」を知りたい | Prototype |
| Checkout Confirmation | 現在位置と注文確定タイミングを明示する | 「この操作で何が起きるか」を明確に知りたい | Prototype |