問い合わせボタンの配置と文言｜導線を確認する手順

1. ページの目的とボタンの到達先を一つずつ書く

ページの目的が「相談を受け付ける」なら、ボタンの到達先は相談フォーム、必要な前提情報は対応範囲・料金条件・相談時に用意するものです。まだ比較中の人には料金説明へのリンクも役立ちますが、すべてを同じ強さのボタンにしないようにします。

「詳しくはこちら」では、料金説明なのか申し込みなのか判断しにくくなります。「修正の対象と料金を見る」「困っている箇所を相談する」のように、クリック後の内容を表します。単なるリンクを申込完了と誤解させる文言は避けてください。

2. 配置は読者の判断が進む場所で検討する

スマホでは表を横にスクロールできます。

この表は配置候補で、全箇所への設置を推奨するものではありません。短いページに同じボタンを何度も並べると、本文を読む妨げになります。長いページでは、判断材料の後に自然な区切りとして置けるかを確認します。

3. スマホとキーボードで到達できるか確認する

• 文字の拡大時にラベルが切れず、周囲のリンクと区別できるか。
• 指で押す場所に十分な余白があり、近くの広告や別の操作を誤って選ばないか。
• 固定ボタンが本文、料金条件、フォームの入力欄を隠さないか。
• Tabキーで移動でき、フォーカス位置が見えるか。リンクを開くと期待するページへ進むか。
• フォーム側で名前・メールなどの欄に、入力例だけでなくラベルが付いているか。

入力欄のラベルはW3Cのフォームラベルの解説も参考になります。見た目の色だけで意味を伝えず、リンクや操作の名前で目的を示します。表示が崩れる場合はスマホの表示確認から切り分けます。

4. クリック、フォーム表示、受付を別々に見る

ボタンを押したこと、フォームを開いたこと、送信が受け付けられたこと、実際に相談が届いたことは異なります。計測名と発生条件を先に決め、入力エラーを成果として数えないようにします。受付完了ページを再読み込みするたびに成果が増える構成にも注意します。

内部リンクの位置を識別する場合は、ページと配置を表す値を使い、氏名や入力内容を計測に送らない設計にします。広告リンクの動作確認として自分で広告をクリックしないでください。タグ導入はGA4とSearch Consoleの設定を参照してください。

5. 少数の変更を記録し、成否を急いで決めない

改善記録の例：「9月19日、料金の追加条件をボタンの前へ移動。ボタン名を『申し込む』から『見積もりを相談する』へ変更。到達先と受付処理は維持。翌週、対象ページの訪問・フォーム表示・受付を確認」。変更日と対象を残せば、後から原因を考えられます。

訪問が数件しかない状態で「率が2倍になった」と効果を断定しないでください。流入元や期間もそろえ、まず導線の欠落・誤解・動作不良が解消したかを確かめます。ページ全体を作り直す前に、サービスの説明項目が不足していないかも点検します。

当サイトの2つの相談ボタンを照合した例

2026年10月8日、公開HTMLからボタン文言とリンク先を取り出し、問い合わせページの入力・受付とは分けて点検しました。

表は横にスクロールできます。

同じフォームでも、文言は記事で困っている作業に合わせています。用途のパラメータは入力の補助で、価格や契約を確定させる値ではありません。フォーム送信・メール受信・実際の受注は、このHTML照合では試していません。

自分のページでは「ラベル／到達URL／移動後に表示される内容」の3欄を作ります。ラベルが「資料を保存」なのに相談フォームへ移動する、料金を確認したいのに申込みへ飛ぶ、といった不一致を先に直します。広告リンクは点検用にクリックせず、発行コードとの照合で確認します。

目的別のボタン文言の例

表は横にスクロールできます。

文言の例は書き方の参考です。実際に用意している受付の方法に合わせて書き換えてください。

よくある失敗

• ボタンが多すぎる：1つのページに行き先の違うボタンが並ぶと、読者が迷います。ページの目的に合うボタンを1種類に絞ります。
• スマホで押しにくい：小さな文字のリンクや、ほかのリンクと近すぎるボタンは、指で押し間違えやすくなります。スマホで実際に押して確かめます。
• 押したあとのページが合っていない：「料金を見る」と書いたボタンが問い合わせフォームにつながっていると、読者は戻ってしまいます。文言と行き先が合っているかを確認します。