ホームページの問い合わせボタンはどこに置く?スマホで迷わせないCTA設計

ホームページの問い合わせボタンの位置とスマホで迷わせないCTA配置を示すアイキャッチ ホームページ制作・運営
CTA DESIGN

ボタンは、目立たせるより
「押した後」を分かりやすく。

CTAは数を増やすのではなく、読者の判断が終わる場所に置きます。文言・リンク先・フォーム・送信完了までを一続きで設計します。

サイト全体の順番から見直す場合は、個人事業主のホームページ設計ロードマップで、トップ・サービス・料金・FAQ・プロフィール・問い合わせの流れを先に確認できます。

対象レベル初心者〜中級者
初心者主要CTAを1つ決める
中級者押す前後まで改善する

CTA COPY EXAMPLES

対応できるか相談する自分の場合の費用を確認する予約方法を確認する

文言とリンク先で実際にできることを一致させます。

サイト全体の設計から確認する場合: トップページ構成サービス紹介ページ問い合わせ導線の順に確認できます。

確認する順番

  1. ファーストビューに主要行動を1つ
  2. サービス説明後にCTA
  3. 料金・FAQ後にもCTA
  4. 文言を具体化
  5. スマホで見切れ確認

30秒で決める|CTAは「読者の判断が終わる場所」に置く

読者の状態 置く候補 文言の方向
目的が決まっている ファーストビュー 予約方法を見る/相談方法を確認
サービス内容を理解した サービス説明の直後 このサービスについて相談する
料金・不安を確認した 料金表・FAQの直後 自分の場合の費用を確認する
最後まで読んだ ページ末尾 問い合わせる/次の手順を見る

固定CTAは必須ではありません。使う場合はスマホ実機で本文・ブラウザUI・Cookie表示・入力欄と重ならないか確認します。問い合わせまでの流れ全体を見直す場合は、問い合わせ導線の作り方へ進んでください。

CTAが押されないときは「位置」以外も確認する

確認すること よくある原因 見直し方
位置 判断材料より前にボタンがある サービス・料金・FAQなどを読んだ直後へ移す
文言 「こちら」「詳しく見る」だけで行き先が分からない 「相談方法を見る」「料金を確認する」など押した後を示す
判断材料 料金・対象・流れが分からない CTA直前に迷いの原因になる情報を補う
リンク先 ボタン後に長いフォームや別内容が出る 期待したページへ着くか、入力項目が多すぎないか確認する

表示回数だけ増やすのではなく、押す前に納得できるか、押した後に迷わないかを一続きで確認します。

ボタン文言は「押した後」を伝える

「こちら」「送信」だけではなく、「無料相談の内容を見る」「見積もりを依頼する」「予約方法を確認する」のように、押した後に何が起きるか分かる文言にします。固定ボタンを使う場合はCookieバナーやブラウザUI、入力フォームと重ならないかスマホ実機で確認します。

やらない方がよいこと

  • 全ボタンを同じ強さにする
  • 詳しくはこちらだけにする
  • スマホ本文を隠す固定CTA

公開前チェック|CTAだけでなく導線全体を見る

PCだけでなくスマホ実機で、ボタンの見え方から送信完了まで一連の流れを確認します。

  • 主要CTAがページ内で最も分かりやすい行動になっている
  • CTA文言だけで押した後の内容を予測できる
  • 料金・対象・条件など判断材料の後に配置されている
  • スマホで本文、固定メニュー、Cookie表示と重ならない
  • リンク先が正しく、フォーム入力に不要な項目が多すぎない
  • 送信後に受付完了と次の流れが分かる

CTAの色や位置だけを評価せず、「押す前に納得できるか」「押した後に迷わないか」まで確認すると、問い合わせ導線全体の弱点を見つけやすくなります。

よくある質問

問い合わせボタンは何個置けばよいですか?

数で決めるより、読者が判断するタイミングに置きます。ファーストビュー、サービス説明後、料金・FAQ後、ページ末尾が候補です。

固定CTAは必須ですか?

必須ではありません。本文を隠すなら逆効果なので、固定する場合はスマホ実機で重なりを確認します。

ページ別にCTAを置く場所を決める

同じ『問い合わせ』でも、トップページ・サービスページ・料金ページでは読者が知りたいことが違います。ページごとに判断が終わる位置へCTAを置くと、ボタンの役割が明確になります。

ページ 置く候補 CTA文言例
トップページ 主要サービス紹介後・ページ末尾 サービス内容を確認する/相談方法を見る
サービスページ 対象・内容・流れを説明した後 このサービスについて相談する
料金ページ 料金表と追加費用の説明後 自分の場合の費用を確認する
FAQ 不安を解消した後 解決しない内容を問い合わせる

1ページ1つの「主要CTA」を決める

問い合わせ、資料請求、料金確認、予約など複数の行動を同じ強さで並べると、どれを選べばよいか迷いやすくなります。ページごとに最も重要な行動を1つ決め、それ以外は補助リンクとして強弱をつけます。

ページの目的 主要CTA 補助CTA
サービス理解 相談方法を確認する 料金を見る
料金比較 自分の場合の費用を確認する サービス内容へ戻る
不安解消 問い合わせる FAQをさらに見る
予約・申込み 予約方法を確認する 対象条件を見る

CTAの直前に「押す理由」をそろえる

ボタンだけを強くしても、その直前に必要な情報が不足していると押しにくくなります。料金、対象、所要時間、対応範囲、申込み後の流れなど、判断に必要な情報を先に示してからCTAを置きます。

  • 料金が不安:料金表・追加費用の説明後にCTA
  • 対象か不安:対象者・条件の説明後にCTA
  • 何が起こるか不安:申込み後の流れを説明してからCTA
  • まだ比較中:すぐ問い合わせではなく比較・FAQへの補助導線も用意する

CTA改善は『押される前後』まで確認する

ボタンの色や位置だけを変えても、リンク先で迷えば問い合わせにはつながりません。変更するときは、①表示位置、②文言、③リンク先、④フォーム入力、⑤送信完了までを一続きで確認します。

  • ボタンを押した先で、期待した内容が表示されるか
  • スマホで本文・Cookie表示・固定メニューと重ならないか
  • 料金や対象条件を確認してから押せる位置か
  • 送信後に受付完了と次の流れが分かるか

問い合わせまでの流れ全体を見直す場合は、ホームページの問い合わせ導線の作り方もあわせて確認してください。料金説明を整える場合は、ホームページ料金表の作り方へ進めます。

参考情報