CTA設計とフォーム最適化で問い合わせを増やす方法|ページ別の設計ポイントと優先順位

ホームページを作り直したのに問い合わせが増えない。アクセスはあるのにコンバージョンにつながらない──そんな状況が続いているなら、CTA(Call to Action:行動喚起)とフォームの設計を見直すことが最初のステップになります。
CTAは訪問者に「次のアクション」を促すボタンやリンクのこと。フォームは実際に問い合わせを受け取る入口です。この2つの設計が整っていないと、どんなに優れたコンテンツがあっても問い合わせは届きません。
この記事では、サイトのページタイプ別にCTAの設計を整理し、フォームの最適化(EFO)との組み合わせ方を解説します。改善の優先順位も整理しているので、「何から手をつければいいか」が明確になります。
- ページタイプ別のCTA設計:コーポレートサイト・サービスページ・ブログ記事・LPそれぞれに適したCTAの考え方と配置のポイント
- フォーム最適化(EFO):入力項目の絞り方・操作性の改善・スマートフォン対応で離脱を減らす具体的な方法
- 改善の優先順位:インパクトと実施コストから考える、CTA・フォーム改善の着手順序とチェックリスト
なぜCTAとフォームが問い合わせに直結するのか
サイトから問い合わせが来ない理由は、「コンテンツの質が低い」よりも「導線が機能していない」ことのほうがはるかに多く見られます。訪問者が情報を読み終えた後、次に取るべき行動が不明確になっているケースです。
問い合わせが来ない主な原因の整理
問い合わせが来ないサイトには、共通する構造的な問題があります。コンテンツの内容とは関係なく、CTAとフォームの設計に起因するものがほとんどです。
| よくある原因 | 具体的な状態 |
|---|---|
| CTAが視認されていない | ボタンが背景に溶け込んでいる、スクロールしないと見えない位置にある |
| CTAのタイミングが「遅すぎる」 | 最後のまとめにしかボタンがなく、途中で離脱した訪問者に届かない |
| フォームの項目が多すぎる | 名前・会社名・住所・電話・メール・問い合わせ内容…と10項目以上ある |
| フォームへの動線がわかりにくい | サービスページからフォームへたどり着くまでに複数クリックが必要 |
| スマートフォンで入力しにくい | テキストが小さい・ボタンが押しにくい・エラー表示が分かりにくい |
これらの問題は、コンテンツの品質とは無関係に発生します。内容が充実していても、CTAとフォームの設計が機能していなければ問い合わせには至りません。
CTAとフォームの役割の違いと連携の考え方
CTAとフォームは別々の要素として扱われがちですが、実際には「誘導→受け取り」のセットとして機能します。CTAは「問い合わせたい気持ちを行動に変えるきっかけ」を作るもの。フォームは「その気持ちを実際に届ける仕組み」です。
CTAのクリック率が高くても、フォームが使いにくければ入力途中で離脱します。フォームが使いやすくても、CTAが目立たなければそもそもクリックされません。両者を一体的に設計することが、問い合わせを増やすうえで最も重要な視点です。
ページタイプ別・CTAの設計基本
CTAは「すべてのページに同じものを置けばよい」というわけではありません。訪問者がどのフェーズにいるかによって、適切なCTAの種類と文言は変わります。フェーズを無視した設計が、問い合わせにつながらない原因になることも多くあります。
コーポレートサイトのCTA(認知・信頼形成フェーズ)
コーポレートトップページや会社案内ページは、「まだ依頼するかどうか決めていない」訪問者が多い場所です。このフェーズで「今すぐお問い合わせ」という強い訴求をしても、心理的ハードルが高く機能しにくい状況です。
認知・信頼形成フェーズでは、「実績を見る」「サービス一覧を確認する」「よくある質問を読む」など、次の情報へ自然に誘導するCTAが効果的です。問い合わせボタンは設置しつつも、メインのCTAはサービスへの理解促進に置くのが基本的な考え方です。
サービスページのCTA(検討・比較フェーズ)
サービスページを訪問している人は、すでに課題を認識していて解決策を探している段階です。このフェーズでは「お問い合わせ」「無料相談」「見積もり依頼」といった直接的なCTAが機能します。
設計のポイントは、ページ内に複数のCTAを配置することです。ファーストビュー(ページを開いた瞬間に見える範囲)に1つ、コンテンツを読み終えた位置に1つ。最低でもこの2箇所を設置することで、読み方のタイプが異なる訪問者両方にアプローチできます。
ブログ記事からのCTA(認知・興味フェーズ)
ブログ記事は、課題を認識し始めた初期フェーズの訪問者が多い場所です。「今すぐ依頼したい」という気持ちはまだ薄く、いきなり「お問い合わせ」というCTAは早すぎるケースが多くなります。
ブログ記事のCTAは、関連するサービスページへの誘導や、「まずはサービス内容を見てみる」という低負荷なアクションを設計するのが有効です。記事末尾に「関連サービスはこちら」というリンクを設置するだけでも、サービスページへの流入を増やせます。
LPのCTA(クロージングフェーズ)
LP(ランディングページ)は、特定のキーワードや広告経由で訪問した、購買意欲が高い訪問者が集まる場所です。このフェーズのCTAは、「お問い合わせ」「申し込む」「無料で相談する」など、具体的なアクションを直接的に促す形にします。
LPではCTAが1種類しかないと対応できる訪問者の範囲が狭まるため、「今すぐ相談する」と「まず資料を確認する」という温度感の異なる2段階のCTAを用意することも有効です。LP制作・設計サービスの詳細については、実績とともにご確認いただけます。また、LPのCTAボタンの色・文言・配置を科学的に設計する方法については、LPの申し込みボタン設計に関する記事もあわせてご参照ください。
CTAの配置と見せ方の基本設計
CTAを「どこに」「どのように」置くかは、クリック率を大きく左右します。設置場所・デザイン・文言の3つの観点で基本を整理します。
設置すべき位置と優先順位
CTAの設置場所は、訪問者の視線の流れに沿って配置することが基本です。優先順位の高い場所から整理すると次のようになります。
| 設置場所 | 効果・特徴 |
|---|---|
| ファーストビュー | ページを開いた瞬間に見える範囲。最優先。目的をもって訪問した人が即アクションできる |
| コンテンツ中盤 | 情報を読んで関心が高まったタイミングで設置。「もう少し聞いてみたい」という気持ちをキャッチできる |
| ページ末尾 | 最後まで読んだ人への最終訴求。読み終えた納得感があるためクリックされやすい |
| フローティングボタン | スクロールに追従して常時表示。特にモバイル端末での問い合わせ率向上に効果的 |
| グローバルナビ | 全ページに表示。「問い合わせ」「無料相談」などをヘッダーに設置することで、どのページからでも誘導できる |
CTAボタンのデザイン(色・サイズ・視認性)
ボタンのデザインで最も重要なのは「視認性」です。ページの背景色とのコントラストが低いと、訪問者の目に止まりません。白背景のページでは、オレンジ・青・緑などのアクセントカラーを使うと視認性が上がります。
ボタンのサイズはスマートフォンでの操作を考慮し、タップしやすい高さ(44px以上)を確保することが推奨されています。形状は角丸のほうが親しみやすい印象を与えます。また、ボタンの近くにマイクロコピー(例:「1分で入力完了」「返信は1〜2営業日以内」)を添えると、クリックのハードルが下がります。ボタン周辺のテキスト設計の詳細は、マイクロコピーの活用事例もご参照ください。
CTA文言の作り方(動詞始まり・ベネフィット訴求)
「送信する」「お問い合わせ」という文言は、訪問者に「何が得られるのか」が伝わりません。文言を少し変えるだけでクリック率は変わります。
効果的なCTA文言の基本は、「動詞始まり」と「ベネフィット訴求」の組み合わせです。
| 見直し前の文言 | 改善後の文言(例) |
|---|---|
| 送信する | 相談してみる |
| お問い合わせ | 無料で相談する |
| 詳しくはこちら | 実績と対応範囲を確認する |
| 申し込む | 30秒で申し込む |
| 資料請求 | サービス概要資料を受け取る |
「無料」「〇秒/〇分で完了」「返信〇営業日以内」といった具体的な情報を付け加えることで、クリックに踏み出せる訪問者が増えます。
フォーム設計で離脱を防ぐ
CTAをクリックしてもらえても、フォームの設計が悪ければ入力途中で離脱されます。フォーム設計の基本は「訪問者の入力負荷を最小化すること」です。
入力項目の絞り方と必須・任意の整理
入力項目が多いほど離脱率は上がります。「とりあえずすべての情報を取得したい」という意図から項目を増やしがちですが、初回の問い合わせで本当に必要な情報は限られています。
最小構成は「お名前・メールアドレス・お問い合わせ内容」の3項目です。会社名・電話番号・担当者名などは「任意」に変更するか、後続のやり取りの中で収集する設計にすることで、送信完了率が大きく改善します。
フォームの入力項目を10項目前後から5項目以内に削減した場合、送信完了率が1.5〜2倍に改善した事例が複数報告されています。「この情報は本当に初回問い合わせで必要か?」という問いを基準に、1項目ずつ見直すことをおすすめします。
フォームの見た目と操作性(EFO)
EFO(Entry Form Optimization:入力フォーム最適化)は、フォームの使いやすさを改善してコンバージョン率を高める取り組みです。代表的な施策を整理します。
| EFO施策 | 内容・効果 |
|---|---|
| リアルタイムバリデーション | 入力直後にエラーを表示する(送信後にまとめて表示しない)。入力し直しのストレスを軽減できる |
| 入力例の表示 | プレースホルダーやフォームの下に入力例を記載。「どう書けばいい?」という迷いをなくす |
| 必須・任意の明示 | 必須項目には「必須」バッジをつける。任意項目は省略できることを明示する |
| 確認画面の省略 | 確認画面を挟むと離脱しやすい。送信前の確認をフォーム内で完結させる設計も有効 |
| 送信完了メッセージの最適化 | 「送信しました」だけでなく「〇営業日以内に返信します」と明記し、不安を取り除く |
スマートフォン環境での注意点
BtoBサイトでもスマートフォンからの閲覧・問い合わせが増えています。PCで使いやすいフォームが、スマートフォンでは使いにくいことも多く、専用の対応が必要です。
基本的な対応ポイントとして、入力フォームのテキストサイズは16px以上(ズームが発生しない最低サイズ)を確保すること、送信ボタンは親指で操作しやすい画面下部に配置すること、数字入力には数字キーボードが自動で表示される設定(type=”tel”)を活用することが挙げられます。
問い合わせハードルを下げるマイクロCV設計
「いきなり問い合わせ」という1段階だけのCV設計は、BtoBサービスや高額案件では特に機能しにくいことがあります。問い合わせのハードルを段階的に下げる「マイクロCV」の設計が、最終的な問い合わせ増加に効果的です。
マイクロCVとは
マイクロCVとは、最終的なコンバージョン(問い合わせ・発注)に至る前の、中間的なアクションのことです。直接の問い合わせよりも心理的ハードルが低く、まだ検討段階にある訪問者との接点を作ることができます。
| マイクロCVの種類 | 特徴・向いているシーン |
|---|---|
| 資料ダウンロード | メールアドレスだけで受け取れる。サービス概要・料金表・事例集など。検討初期層に有効 |
| メール相談フォーム | 「まずはメールで気軽に相談」という形式。電話に比べてハードルが低い |
| 無料診断・チェックシート | 「今のサイトの課題を診断します」など。回答を通じて自社の課題を整理してもらえる |
| セミナー・ウェビナー申込 | 購入意思がなくても参加しやすい。ブランド接触の機会を継続的に作れる |
BtoB企業サイトでのマイクロCV活用例
BtoBサービスの場合、決裁者と担当者が異なるケースが多く、「担当者が情報収集→社内稟議→問い合わせ」というフローが一般的です。この流れを踏まえると、担当者が「これなら上司に提案できる」と感じられる資料やコンテンツを提供することが、最終的な問い合わせ増加につながります。
例えば「サービス概要資料(PDF)のダウンロード」をマイクロCVとして設計することで、まだ問い合わせに踏み切れない担当者との接点を作り、その後のメールフォローで問い合わせへ転換するというフローが組めます。LP設計の文脈でこうしたCV設計を実装する際には、digrartのLP制作サービスもあわせてご検討ください。
CTA・フォーム改善の進め方と優先順位
改善できる箇所は多岐にわたりますが、すべてを同時に手をつけるのは現実的ではありません。インパクト(効果の大きさ)と実施コスト(手間・費用)の両面から優先順位を整理します。
まず確認すべきチェックリスト
改善に着手する前に、現状のCTAとフォームの状態を確認します。以下のチェックリストで課題を洗い出してください。
| チェック項目 | 確認ポイント |
|---|---|
| ファーストビューにCTAがあるか | スクロールせずに問い合わせボタンが見えるか |
| CTAボタンが目立っているか | 背景とのコントラストが十分か。他の要素に埋もれていないか |
| CTA文言がベネフィットを伝えているか | 「送信する」「お問い合わせ」だけになっていないか |
| フォームの入力項目が最小化されているか | 10項目以上あれば要見直し。必須と任意が明確に分けられているか |
| スマートフォンで操作しやすいか | 実機でフォームに入力してみて、ストレスや迷いがないか確認 |
| 送信完了後のメッセージが適切か | 「いつ返信が来るか」が分かる文言になっているか |
改善の優先順位の考え方
改善施策をインパクトと実施コストで評価すると、着手順序が明確になります。最初は「高インパクト×低コスト」の施策から始めるのが基本的な考え方です。
| 施策 | インパクト | 実施コスト | 優先度 |
|---|---|---|---|
| フォームの入力項目削減 | 高 | 低 | ★★★ 最優先 |
| ファーストビューへのCTA設置 | 高 | 低〜中 | ★★★ 最優先 |
| CTA文言の変更 | 中 | 低 | ★★☆ 早期対応 |
| CTAボタンの色・サイズ変更 | 中 | 低 | ★★☆ 早期対応 |
| フローティングCTAの追加 | 中 | 中 | ★★☆ 早期対応 |
| マイクロCV(資料DL等)の導入 | 中〜高 | 中〜高 | ★★☆ 中期対応 |
| EFO(リアルタイムバリデーション等) | 中 | 高 | ★☆☆ 余裕があれば |
効果測定と継続改善の方法
CTAのクリック数やフォームの入力完了率は、Google アナリティクス(GA4)のイベント計測で把握できます。「CTAボタンをクリックした」「フォームを送信した」というイベントを事前に設定しておくことで、どのページのCTAが機能しているか、どこでフォーム離脱が起きているかが数値で確認できます。
改善施策の効果を検証するにはA/Bテスト(2パターンを同時に比較する方法)が有効です。1回の検証で変更する要素は1つに絞ること(文言だけを変える、色だけを変えるなど)が、効果の判断を正確にするポイントです。
まとめ:CTA・フォームは「設計の前提」から見直す
CTAとフォームの改善は、小さな変更でも結果に直結しやすい部分です。まず着手すべき3点を整理します。
- フォームの入力項目を最小化する(名前・メール・問い合わせ内容の3項目が理想)
- ファーストビューにCTAを設置する
- CTA文言を「動詞+ベネフィット」の形に変える
一方で、CTAとフォームの設計は、ページ全体の構成・コンテンツとの連動・ターゲット設定とも深く関わっています。LP(ランディングページ)のように特定のキーワードやユーザー層を狙ってCV率を最大化したい場合は、CTAとフォームだけでなくページ設計全体を見直すことが近道です。
CTAやフォームの設計・改善をプロと一緒に進めたい場合は、digrartのWebコンサルティングサービスをぜひご活用ください。
この記事を書いた人
大阪市中央区にて2009年よりWeb制作・運用支援を行い、1,000件以上の実績を持つWeb制作会社「digrart(ディグラート)」編集部が、本記事を執筆・監修しています。
現場で培った豊富な知見を活かし、Webサイト制作、ECサイト制作、SEO対策、Webコンサルティングの実践的なハウツーをお届けします。
初心者からプロまで、Web戦略の成功をサポートする実務ベースの情報が満載です。
関連記事
-
LPの「申し込みボタン(CTA)」一つで成約率は変わる。クリックを誘う色・文言・配置の科学
ランディングページ(LP)における「CTA(Call To Action:行動喚起)ボタン」は、単なるリンクではありません。ユーザーが検討を終え、実際の行動に移...
-
「マイクロコピー」図鑑|申し込みボタンや入力フォームの「一言」で成約率を変える心理テクニック
「LP(ランディングページ)のデザインは綺麗なのに、なぜかコンバージョン(申し込み)に繋がらない」 「入力フォームまでは来てくれるのに、送信ボタンを押さずに離...
-
LPのコンバージョン率(CVR)平均は?業界別の目安と数字を上げる改善施策
ランディングページ(LP)を運用している中で、「問い合わせが少ない気がするけれど、これが普通なのかな?」と不安になったことはありませんか? LPの成果を測る最...
-
BtoBランディングページで問い合わせを増やす構成と稟議対応の設計術
「LPを作ったのにリードが増えない」「フォームへのアクセスはあるのに問い合わせに至らない」——BtoB企業のWeb担当者からよく聞く悩みです。その原因の多くは、...