コンバージョンを設計するデザイン思考——「見た目」から「動線」へ
Course B — Chapter 3 / Lesson 1 【Webデザイナー向け】
コンバージョンを設計するデザイン思考
——「見た目」から「動線」へ
⏱ 35分 📖 知識 🎨 Webデザイナー向け
ロードマップに戻る
次の章に進む
「デザインは綺麗なのに、問い合わせが来ない」——この問題の根本は「見た目を整えること」と「コンバージョンを設計すること」を混同していることです。
CRO（コンバージョン率最適化）の視点を持つデザイナーは、クライアントに「成果」で選ばれます。このレッスンで土台を作りましょう。
CRO（コンバージョン率最適化）とは
CRO — Conversion Rate Optimization
CVR = コンバージョン数 ÷ セッション数 × 100
「同じ訪問者数でも、もっと多くの人に行動してもらう」
例: 月1,000人が訪問、10人が申し込む → CVR = 1%
LP改善で申し込みが20人に → CVR = 2%（同じ広告費で成果が2倍）

CROはデザイナーが直接関与できる数字です。「どこで迷っているか」「何が不安か」「どこで離脱しているか」——ユーザーの行動をデータで把握し、それを改善するデザインが「CROを設計するデザイン」です。

LPの構成要素と各セクションの役割

LPの各セクションには、ユーザーが「認知→信頼→行動」に至るための役割があります。

LPの基本構成（ファーストビューから下まで）
1
ファーストビュー（FV）
ページを開いて最初に見える部分。「このページは自分に関係あるか」を0.5秒で判断される。
CROポイント: キャッチコピー（ペルソナの悩みに直撃）・ビジュアル・CTAボタンの存在
2
問題提起・共感
「こういう悩みありませんか？」でペルソナに「これ私のことだ」と感じさせる。
CROポイント: インサイトを言語化できているか。「わかってくれる」と感じさせる
3
解決策・ベネフィット提示
「私たちはこうやって解決します」「あなたはこうなれます」を伝える。
CROポイント: 機能ではなくベネフィット（感情的価値）で語る
4
信頼・実績・口コミ
「本当に大丈夫か」という不安を払拭する。実績・受賞・口コミ・メディア掲載など。
CROポイント: 具体的な数字と顔写真付きの口コミが最も効果的
5
FAQ・不安解消
「でも…」という残った懸念を先回りして解消する。
CROポイント: ペルソナが持つ典型的な不安をブリーフから洗い出して掲載
6
CTA（最終行動促進）
「今すぐ申し込む」「無料体験へ」など明確なアクションを促す。
CROポイント: ボタンの文言・色・大きさ・「今やる理由」の添え書き
ヒートマップで「どこで離脱しているか」を発見する

Microsoft Clarity（無料）などのヒートマップツールを使うと、ユーザーがどこで止まり、どこで離脱するかが見えます。

🔴
よくある問題①: FVで50%離脱
ファーストビューのキャッチコピーが「会社紹介」になっており、ペルソナの悩みに触れていない。「誰のためのページか」が0.5秒で伝わっていない。
🟢
改善アクション: FVキャッチを「ペルソナの悩み直撃型」に変更
「残業後でも来られる夜ヨガで、体の疲れと心のストレスをリセット」→ ペルソナがFVを見た瞬間「これ私のことだ」と感じる設計に。
🔴
よくある問題②: 料金セクションで大量離脱
料金が「高い」のではなく、料金に対する「価値の根拠」が示されていない。「なぜこの値段なのか」が伝わっていない。
🟢
改善アクション: 料金セクションに「価値の根拠」と「不安解消」を追加
「体験後の強引な勧誘はありません」「月4回通えば1回あたり〇〇円」という形式で価値と安心を見せる。
CRO視点が入るとデザイン判断がどう変わるか
デザイン思考のみ
CTAボタン
「ブランドカラーに合わせて薄いグリーンのアウトラインボタン」
デザインとしては整っているが、ボタンが「見えにくい」→クリック率が低い
CRO視点あり
CTAボタン
「背景と対比が高いコーラルの塗りつぶしボタン。文言は"今すぐ無料で体験する"」
視認性が高く、行動を促す文言が明確 → クリック率が向上
デザイン思考のみ
FVビジュアル
「インスタ映えするオシャレなヨガポーズ写真」
綺麗だが「自分ができるか」のイメージがわかない → 初心者が離脱
CRO視点あり
FVビジュアル
「夜の落ち着いたスタジオで、スーツ姿から着替えて1人でリラックスしている写真」
「仕事帰りのさつきさん」がそのまま投影できる。「これが自分の未来」と感じさせる
このレッスンのまとめ
デザインの目的は「見た目を整えること」ではなく
「行動してもらうこと」。
CRO: 同じ訪問者数でより多く行動してもらう設計
LP6構成: FV→問題提起→ベネフィット→信頼→FAQ→CTA
ヒートマップで「どこで離脱しているか」を可視化→改善

次のレッスンでは、ペルソナと行動モデルをLP設計に落とし込む実践的なUI設計を学びます。
次の章に進む
ロードマップに戻る