デザイン

CV導線の作り方|CVが止まる3か所と直す順番

この記事の対象: 問い合わせ・購入が伸びないサイトを預かっている制作者・EC担当者
読了時間: 約12分

CV導線を直したいとき、最初にやることはボタンの改修ではありません。CTAまで到達しているのにクリックされていないのか、そもそも到達していないのかを計測で切り分けることです。ここを飛ばすと、直すべきでない場所を直すことになります。到達しているのに押されていない場合、原因は3か所に集約されます——①自分向きか判断できない、②判断材料が足りない、③送信後に何が起きるか読めない。この記事では、この切り分けと3か所の埋め方、そして実際の改修手順を、順番どおりに扱います。


CV導線の直し方は「切り分け」から始まる

結論:押されないのか、押せないのか

CTAのクリック率が低いとき、原因は2種類しかありません。

CTAが機能しない2つの原因

意思決定の問題(到達率は高い)

  • 見えているが押す理由が揃っていない
  • 色やサイズを変えても動かない
  • 直すのは情報。3つの分岐点を埋める

視認性の問題(到達率が低い)

  • 見つからない・スクロールの底に沈んでいる
  • 位置・サイズ・色の修正で数字が動く
  • 改修は軽い。先に済ませる

視認性の問題は簡単です。位置と大きさと色を直せば数字が動きます。厄介なのは意思決定のほうで、これはボタンをいくら派手にしても改善しません。むしろ「押させようとしている」圧が強まって離脱が増えることさえあります。

切り分けは計測の2項目でできる

判別の方法はシンプルです。CTAが画面に入った回数とクリック数を並べる。到達率が低ければ視認性、到達率が高いのにクリックが伸びなければ意思決定の問題です。

注意点として、GA4のスクロールイベントは既定だと画面の90%まで到達した1点でしか発火しないため、粒度が足りません。CTAブロックの直前に可視化イベントを自前で仕込み、CTAごとの表示回数を取ります。この2つが並んで初めて、「到達しているのに押されていない」という状態が数字で見え、意思決定側の改修に入る根拠が立ちます。

計測環境そのものの整え方は、別途まとめてあります。

導線の起点はトップページではない

もうひとつ、切り分けの前提として押さえておきたいことがあります。検索やSNSから直接下層ページに着地し、そのページで判断し、そのページから離脱する——これが今の主流です。導線の起点は毎回ちがう場所にあります。

ここを見落とすと、トップページにだけ完璧な導線を敷いて、実際に入口になっている記事ページや商品ページが行き止まりのまま、という状態が生まれます。アクセスの多い順に10ページ並べ、そのそれぞれが「次の一歩」を持っているかを確認する。CV導線の点検は、この棚卸しから始めるのが早いです。

「次の一歩」は必ずしも問い合わせボタンである必要はありません。読者が今いる段階から半歩先へ進める選択肢——関連する事例ページ、条件を絞り込める比較表、資料のダウンロード——が置かれていればいい。情報を探している段階の人にいきなり問い合わせを出すと、圧になって離脱します。ページごとに読者の温度が違うことを前提に、置く「次の一歩」を変える。これが下層ページ起点の導線設計の基本です。


CV導線が切れる3つの分岐点と埋め方

導線が切れる場所は、経験上ほぼ3か所に集約されます。

CV前に読者が立ち止まる3つの地点
①自分向きか対象と提供内容が自分に当てはまるか判断できない
②信じられるか実績・第三者の声がなく判断材料が足りない
③何が起きるか送信後の流れと負担が読めず手が止まる

この3つは順番に並んでいます。①が解けていない人に②を見せても効きません。導線を直すときは、必ず上流から埋めていきます。埋まっていないもののうち最も上流にある1つが、次に直す場所です。

①自分向きかどうかが判断できない

「制作費◯万円〜」「豊富な実績」といった情報は、読者の「自分の場合はどうなのか」には答えていません。ここで必要なのは、条件付きの記述です。

  • ページ数・機能・進め方といった前提を明示する
  • 対象外のケースを先に書く(「◯◯には向きません」)
  • 判断に必要な選択肢を並べて、どれに当たるかを読者自身に選ばせる

費用の書き方も同じです。金額を単独で置くのではなく、「何ページ・どの機能・どの進め方だといくらになるか」という条件とセットで出す。たとえばテンプレート利用の数ページ構成ならこのレンジ、オリジナルデザインで機能実装が入るならこのレンジ、という形です。条件が付いた瞬間、読者は自分の案件がどこに入るかを自分で判断できるようになります。逆に条件のない「◯万円〜」は下限だけが独り歩きし、見積を出した段階で落胆に変わる。CV導線としては、その場の問い合わせ数より、条件を理解したうえで来る人の割合を上げるほうが結果的に効きます。

対象外を先に書くのは勇気が要りますが、効きます。除外条件があるほど、残った人の「自分は当てはまる」という確信が強くなるためです。

②判断材料が足りない

ここで効くのが第三者の情報です。制作会社が自分で書いた文章より、使った人の言葉のほうが圧倒的に強い。ECであればレビュー、制作であれば実績と担当者の顔が見える情報が該当します。

実績の出し方にも差が出ます。ロゴを並べただけの実績一覧は「他社もやっている」以上の情報を持ちません。効くのは、どんな課題で相談が来て、何を作り、その後どうなったかが読める形です。読者は自分の状況と近い事例を探しているので、業種・規模・依頼内容で絞り込める作りになっていると、②の分岐点をそのまま通過できます。

事例の見せ方そのものに迷う場合は、他社サイトがどう並べているかを見るのが早いです。

ECのレビューは「集める仕組み」を先に作らないと溜まりません。導線の材料として使うつもりなら、収集の設計から逆算しておく必要があります。

③このあと何が起きるかが読めない

問い合わせフォームの手前で止まる人の多くは、送信後に何が起きるかを知りません。営業電話がかかってくるのか、いつ返事が来るのか、費用が発生するのか。

書かれていないこと 読者の解釈
返信までの日数 いつ来るか分からない。放置されるかもしれない
返信の手段(メール/電話) 電話がかかってくるかもしれない
この時点の費用 相談だけで請求されるのでは
次に何を聞かれるか 準備ができていないから、まだ早い

フォームの直前に3行足すだけで解消する項目ばかりです。CV導線の改修で最も費用対効果が高いのは、この「送信後の予告」だと考えています。設計変更もデザイン改修も伴わず、テキストを置くだけで済むためです。

ECの場合も構造は同じです。送料がいつ確定するのか、いくらで無料になるのかがカート前で読めないと、そこで止まります。商品ページの情報をどの順で置くかは、③を閉じる位置そのものに直結します。


ギャラリーの実例に見るCV導線の設計

Soreiine!!のギャラリーには、導線の考え方がはっきり表れているサイトが並んでいます。ここでは構造の読み取り方を、実例に沿って紹介します(掲載サイト名・URLはギャラリー該当ページで確認してください)。

実例1:対象を名指しして絞り込むコーポレートサイト

分類: Soreiine!!ギャラリー/コーポレートサイト部門

見どころ: ファーストビューのコピーが「何をする会社か」ではなく「誰のための会社か」から始まっています。業種と規模が最初の1行で示されるため、読者は自分が対象かどうかを一目で判断できます。

講評: 訪問者を減らす書き方ですが、CV導線としては正しい選択です。対象外の人が早く離脱するぶん、残った人の読了率と問い合わせ率が上がる。全員に向けて書いたコピーは、結果として誰の背中も押しません。注目したいのはナビゲーションで、「サービス/実績/会社概要」という提供側の分類ではなく、来訪者の目的名で切られています。さらにサービス紹介ページへ入る前に「相談前に読むページ」が独立して置かれており、費用の考え方と進め方がそこで先に開示される。①と③の分岐点を、問い合わせページに入る手前で畳んでいる設計です。

実例2:判断材料を階段状に出すECサイト

分類: Soreiine!!ギャラリー/EC・ブランドサイト部門

見どころ: 商品ページの情報の並び順です。写真 → 使用シーン → 素材とサイズ → レビュー → 配送条件、という順で並んでおり、上から読むだけで判断材料が揃っていきます。

講評: カートボタンが複数回出てくるのに押しつけがましく感じません。理由は、ボタンの前に必ず新しい情報が1ブロック挟まっているから。同じ情報量でボタンだけ繰り返すと圧になりますが、材料が増えた直後に置かれたボタンは「ここで決めてもいい」という合図として機能します。CTAの反復回数ではなく、反復の間に何を置いたかが効いている例です。配送条件を最後ではなく、レビューの直後・最終カートボタンの直前に置いているのも意図的で、③の「このあと何が起きるか」をカート投入の手前で閉じています。

実例3:フォームの手前で不安を畳むサービスサイト

分類: Soreiine!!ギャラリー/サービス・LP部門

見どころ: 問い合わせフォームの直上に、相談の流れと返信目安、そして「この段階では費用は発生しません」の一文が置かれています。

講評: ③の分岐点を、そのまま埋めにいった構成です。加えて入力項目が絞られており、任意項目に「任意」と明記されている。フォームの離脱要因は項目数そのものより「どこまで書けば送れるのか分からない」ことにあるので、必須と任意の区別を視覚的に立てるだけで完了率は変わります。相談の流れが「送信 → 内容確認 → 日程調整 → 打ち合わせ」と番号付きで並んでいるため、読者は送信後の自分の作業量まで見積もれる。フォーム改修というとUIの話になりがちですが、この例が効かせているのは情報の追加のほうです。

キャンペーンや特設ページでも同じ読み取り方が使えます。短期で成果を出す必要があるページほど、導線の設計が剥き出しで見えます。

ギャラリーを見るときは、デザインの美しさだけでなく「どの順番で読ませているか」を追ってみてください。順番が設計されているサイトは、見た目を真似ても再現できない強さを持っています。


CV導線を実際に直す手順

1ページだけ選んで、1か所ずつ直す

サイト全体の導線を一度に直そうとすると、何が効いたのか分からなくなります。流入が多くCVが発生しうるページを1枚選び、そこだけ直して数字を見る。

CV導線改修の進め方
1. 計測CTA表示回数とクリック数を取る
2. 切り分け到達率かクリック率か、どちらが低いか判定
3. 1か所改修3つの分岐点のうち上流から1つ埋める
4. 2〜4週観測次の1か所に進むか、戻すかを決める

改修は1回につき1か所。複数同時に変えると効いた要因が特定できず、次のサイトに知見を持ち越せません。

観測の前に、変更前の数字を控えておくことも忘れないでください。改修後にしか数字を見ていないと、「上がった気がする」以上の話ができなくなります。CTA到達率・クリック率・フォーム到達率・送信完了率の4つを、改修前の同じ曜日構成の期間で取っておく。この控えがあるかどうかで、クライアントへの報告の質が変わります。

数字の読み方そのものを手早く済ませたいときは、AIに渡す形を整えておくと分析が速くなります。

やってはいけない改修

やりがちな改修 なぜ効かないか
CTAボタンを全ページ下部に追加 到達率が低いページでは表示すらされない
ポップアップで問い合わせを促す ①②が未解決の読者には圧になるだけ
CTAの文言だけを何度も変える 意思決定の材料が増えていないため差が出ない
全ページのナビを一括で変更 効果測定の単位が消え、原因追跡ができなくなる
追従バナーを常時表示にする 画面が狭いスマートフォンで本文を隠し、読了そのものを削る

レイアウトの設計は別の判断軸

ここまで扱ってきたのは「迷いを消す」側の話です。ページの中で情報をどう並べるか、どのブロックをどの順に置くかというレイアウト側の設計には、別の判断軸が必要になります。たとえば画面を左右に割って情報と視覚を同時に出す構成は、②の判断材料をCTAの近くに置きたいときに相性がいい選択肢です。


設計より先に潰す技術的な要因

設計が正しくても、実装側の問題でCVが落ちることがあります。制作者側で先に点検しておきたいのは次の3点です。

表示が遅いページではCTAまで到達しない

読み込みが重いページは、スクロールされる前に閉じられます。特にECでアプリを積み重ねているサイトは、商品ページのスクリプトが増えて体感が落ちやすい。導線の改修より先に、速度の点検が必要なケースは珍しくありません。

判断の目安は、実際のユーザー環境で測った数値を見ることです。開発用の速い回線と端末で確認すると問題なく見えるので、モバイル・低速回線の条件で一度測る。そこでファーストビューの表示に時間がかかっているなら、導線の文言をどう直しても数字は動きません。

要素の並び順を後から変えられるか

「レビューを出したい」「ウィッシュリストを付けたい」といった導線上の要望は、アプリで足すかテーマを改修するかで、その後の柔軟性が変わります。導線は運用しながら直し続けるものなので、後から動かせない作りにしないことが重要です。

特に注意したいのは、アプリが自前のブロックを固定位置に差し込む場合です。レビューの表示位置を変えたいだけなのに手が入れられず、②の判断材料をCTAの手前に置けない、という詰まり方をします。導線上の要素は、あとから並び順を変えられるかを導入前に確認しておく。

CV後の導線を作り忘れる

問い合わせや購入はゴールではなく、次の接点の起点です。サンクスページと確認メールは、ほぼ確実に開かれる数少ない接点なのに、テンプレートのまま放置されていることが多い。

サンクスページに置くものは、感謝文だけで終わらせない。次に何が起きるか(返信の時期と手段)をもう一度書き、待っている間に読める記事や事例を1〜2本並べる。問い合わせ後の不安が最も高いのはこの直後なので、ここを埋めておくと辞退や連絡不通が減ります。


CV導線の点検チェックリスト

改修に入る前に、対象ページで次の項目を確認します。

  • 流入上位10ページそれぞれに「次の一歩」があるか
  • その「次の一歩」が、そのページの読者の温度に合っているか
  • ファーストビューで対象読者が名指しされているか
  • 対象外のケースが明記されているか
  • 費用が条件とセットで書かれているか
  • 第三者の声(レビュー・実績)がCTAの手前にあるか
  • 送信後に何が起きるかが書かれているか
  • フォームの必須/任意が視覚的に区別されているか
  • CTAの表示回数とクリック数が計測されているか
  • CV後のページとメールに次の導線があるか

埋まっていないもののうち、最も上流にある1つが次に直す場所です。下から埋めても、上流で止まっている人には届きません。


よくある質問

CV導線とは何を指しますか

訪問者がページを開いてから、問い合わせや購入を完了するまでに通る一連の流れを指します。ボタンの配置だけでなく、途中で読む情報の順番、迷いが生まれる地点、送信後の案内までを含みます。ボタン設計だけを指す言葉として使うと、改修の範囲を見誤ります。

CV導線はどこから直せばいいですか

流入が多くCVが発生しうるページを1枚だけ選び、そこから始めてください。CTAの表示回数とクリック数を計測し、到達率が低いのかクリック率が低いのかを切り分けてから1か所だけ直します。複数箇所を同時に変えると、効いた要因が特定できなくなります。

CTAボタンは1ページに何個置くのが正解ですか

個数そのものに正解はなく、ボタンとボタンの間に新しい判断材料が入っているかどうかで決まります。同じ情報のまま繰り返すと圧になりますが、材料が増えた直後のボタンは合図として機能します。情報ブロックが増えるたびに置く、という考え方が扱いやすいです。

問い合わせフォームの離脱を減らすには何を変えればいいですか

入力項目を減らす前に、送信後に何が起きるかを書いてください。返信までの日数、返信の手段、この時点で費用が発生しないこと。この3行が最も効きます。そのうえで必須項目と任意項目を視覚的に区別すると、完了率が動きます。

料金はサイトに載せたほうがCV導線としては有利ですか

金額そのものより、条件とセットで書かれているかが効きます。ページ数・機能・進め方といった前提のない「◯万円〜」は下限だけが独り歩きし、見積の段階で落差になります。条件付きで示すと、読者は自分の案件がどのレンジに入るかを自分で判断でき、①の分岐点を通過できます。


まとめ

CV導線の設計は、ボタンを目立たせる作業ではなく、読者が立ち止まる地点を上流から順に埋めていく作業です。

  • 最初にやるのは計測。押されないのか、押せないのかを切り分ける
  • 迷いは「自分向きか」「信じられるか」「何が起きるか」の3か所で生まれる
  • 費用も実績も、条件と文脈をセットにして初めて判断材料になる
  • 改修は1ページ・1か所ずつ、2〜4週の観測を挟む
  • 設計より先に、速度と実装の柔軟性を点検しておく

ギャラリーのサイトを見るときは、見た目ではなく「どの順番で読ませているか」を追ってみてください。順番の設計は模写では再現できない部分で、そこが導線の本体です。