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

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

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

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

YOHAKU FREE TOOL

問い合わせボタン30秒チェック|5つ全部OK?

  • □ ボタン文言だけで「押した後」が分かる
  • □ スマホで親指が届く位置・大きさになっている
  • □ 料金・対象・条件など判断材料の後にもCTAがある
  • □ 同じ画面に主役CTAが何種類も並んでいない
  • □ リンク先で、ボタン文言と同じ行動ができる

「詳しくはこちら」より「無料相談の流れを見る」「見積もりを依頼する」のように、遷移後の内容が想像できる文言を優先します。

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

ページ 読者の状態 CTA例
トップ まだ比較前 サービスを見る
サービス 内容を確認中 料金・流れを見る
料金・FAQ 不安を解消中 相談・見積もりへ進む
記事 情報収集中 関連サービスを確認

全ページで同じ「お問い合わせ」ボタンを強く出すより、読者が次に判断したい内容へ進むCTAを置き、最後に問い合わせへつなげます。

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

CTA COPY EXAMPLES

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

文言とリンク先で実際にできることを一致させます。例(架空):「料金の条件を確認する」は料金と追加条件、「見積もりを依頼する」は見積窓口へ。予約だけ受け付けるフォームを「相談する」と案内しません。「無料」と書く場合は、本当に無料の対象と条件がリンク先で確認できることを先に確かめます。

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

この記事は、ホームページの問い合わせボタンを「どこに置くか」に絞った記事です。導線全体ではなく、スマホで押しやすく、押す前後の意味が分かるCTA配置を確認します。フォームまで含む問い合わせ導線全体は問い合わせ導線の記事へ分けます。

確認する順番

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

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

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

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

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

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

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

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

文言は到着先や実際の動作とそろえます。例(架空):料金ページへのリンクなら「料金と追加条件を見る」、相談フォームへのリンクなら「相談内容を入力する」、フォームの送信ボタンなら「この内容で相談を送る」。「予約を確定する」と書きながら問い合わせを送るだけの窓口へ進めないようにします。各ボタンの文言/開始URL/到着URLまたは実行する処理を1行で照合します。

CTAをページ中に増やしすぎない

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

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

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

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

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

よくある質問

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

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

固定CTAは必須ですか?

必須ではありません。スマホで本文を読むとき、フォーム入力でキーボードが出たとき、Cookie案内が出たときを分けて確認します。送信ボタンやエラー文が隠れるなら、固定を外す・表示位置を見直すなど操作を回復させます。見切れの点検はスマホ表示崩れの確認、入力から受信までの点検は問い合わせ導線へ進みます。

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

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

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

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

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

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

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

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

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

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

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

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

問い合わせまでの流れ全体を見直す場合は、ホームページの問い合わせ導線の作り方もあわせて確認してください。CTAの前にサービス説明が不足している場合はサービス紹介ページの作り方、料金説明を整える場合はホームページ料金表の作り方へ進めます。変更後はホームページKPIの4指標で、クリックだけでなく問い合わせまで同じ期間で確認します。

YOHAKU CTA LOG

CTAは1回に1要素だけ変えて記録する

記録 例
変更前 「お問い合わせ」
変更内容 「相談方法を確認する」へ変更
変えた場所 料金説明の直後
確認するもの クリック・フォーム到達・送信完了

まず文言・位置など1要素だけを変え、同じページ・期間・定義で比較します。ボタンクリック、フォーム到着、送信完了、担当者受信を同じ数として扱いません。計測がない段階は「未取得」とし、スマホでリンク先と入力・受信の不具合を先に確認します。架空例として、クリックが増えても誤った窓口への移動が増えたなら改善成功としません。比較条件はKPIの4指標、変更理由は変更履歴で揃えます。

この記事は「問い合わせボタンの位置・文言・リンク先」を改善する記事

入力項目を減らす・増やす判断はフォーム項目設計、ボタン→フォーム→送信完了までまとめて確認する場合は問い合わせ導線全体へ進みます。

参考情報