ホームページの問い合わせボタンはどこに置くか｜CTAを3層で設計する考え方と実装の実例
ホームページの問い合わせボタンはどこに置くか｜CTAを3層で設計する考え方と実装の実例
「ホームページはあるのに問い合わせが来ない」という相談を受けて中身を見ると、原因がデザインでも文章でもなく、問い合わせボタン（CTA）の置き方にあることがよくあります。ボタンが1個しかない、逆にあちこちに置きすぎて主役が分からない、置いてあるのに読み終わった場所から遠い――どれも「数」の問題ではなく「設計」の問題です。
先に結論を書きます。CTAは次の3層で設計します。
- 第1層＝ヘッダー常設。どのページのどの位置にいても、押そうと思った瞬間に押せる場所
- 第2層＝コンテンツ末尾。記事やページを読み終えた直後、読者の温度が最も高い場所
- 第3層＝補助線。LINEに寄せるならフォームのリンクを、フォームに寄せるなら電話を、控えめなテキストリンクで残す逃げ道
そして3層すべてに共通する原則が2つあります。リンク先は1箇所で管理すること、クリック計測をセットで置くことです。この2つを最初に組み込んでおかないと、CTAは置いた後の変更と検証ができない「置きっぱなしのボタン」になります。
以下、当社が自社サイトで実際にやった設計と、その6日後に起きたことをもとに、各層の判断基準を順に説明します。
実例：175記事のCTAを設計し直したら、6日後に相談が届いた
当社（名古屋のWEB制作・LINE公式アカウント支援会社）は、自社ブログ175記事の記事下CTAを一斉に設計し直しました。それまでの記事下は「サービスページへ詳しく見る→」というリンクで、読者にとっては次の行動がワンクッション遠い状態でした。これを「LINEで気軽に相談」を主ボタンにしたCTAブロックへ切り替え、あわせて全ページ（235ページ）のヘッダーにもLINE相談ボタンを追加しています。
結果は早く出ました。設置から6日後、検索でブログ記事に流入した読者が記事下のCTAからLINEに登録し、その日のうちに相談フォームを送信。アクセス解析（GA4）では同日にその記事のCTAクリックが記録されており、「検索→記事→記事下CTA→LINE登録→相談」という経路が一気通貫でつながったことを確認できました。相談内容は、その読者が読んだ記事のテーマ（LINEでの追客自動化）とぴたり一致していました。
ここで強調したいのは「LINEにしたから増えた」ではなく、読み終えた場所に、記事の内容と噛み合った次の一歩を置いたから動いたという点です。この「場所と文脈の設計」が3層それぞれの役割になります。
第1層：ヘッダー常設ボタン――主従を決めてから置く
ヘッダーのCTAは「いつでも押せる保険」です。読者が問い合わせを決心する瞬間はページのどこで訪れるか分からないので、常に視界の端にある状態を作ります。
ここで最初に決めるのは色でも文言でもなく主従です。当社の場合、以前からあった「無料相談」ボタン（サイトの基調色）を主のまま残し、後から足したLINEボタンは白地に枠線の控えめな見た目にしました。ベタ塗りの目立つボタンを2つ並べると、どちらが本命か読者に伝わらなくなり、結果的に両方の反応が薄まるためです。スマホではメニュー内に置き、こちらはメニューを開いた人しか見ないため、逆にしっかり目立つベタ塗りにしています。同じボタンでも、置かれる場所の競合状況によって見た目の強さを変えるのが判断基準です。
もう1つ、ヘッダーにボタンを増やすときに必ずやっておきたいのが、最小のPC画面幅（1024px前後）での表示確認です。ナビゲーション項目が多いサイトでボタンを1つ足すと、大きな画面では余裕があっても、小さめのノートPCではロゴとメニューが接触します。実際に当社のサイトでも、追加時の実測で1024px幅の余白がゼロになっており、その幅の帯だけ余白と文字サイズを詰める調整を入れて回避しました。ヘッダー改修は「大きい画面で確認して終わり」になりやすいので、確認する画面幅をあらかじめ手順に入れておくと事故を防げます。
第2層：コンテンツ末尾――文言はページの文脈に合わせ、本体はテンプレートで持つ
3層の中で最も問い合わせに直結するのがこの層です。記事やサービス紹介を読み終えた直後は、読者の関心が最も高い瞬間で、ここに何も置かないのは、興味を持ったお客様の前でただ話を終えるのと同じです。
設計のポイントは2つあります。
1つ目は、文言をページの内容に合わせること。 当社は175記事を内容で分類し、AI活用の記事なら「AI導入のご相談」、LINE運用の記事なら「LINE公式アカウントのご相談」、制作系の記事なら「ホームページ制作のご相談」というように、6種類の文言を出し分けています。読んだ内容と誘い文句が噛み合っていることが、押される確率を大きく左右します。
2つ目は、CTAを記事本文に直接書き込まず、テンプレート（共通部品）として持つこと。 ここが実務上いちばん重要です。CTAの文言やリンク先は運用の中で必ず変わります。本文に直書きしてしまうと、変更のたびに全記事を1本ずつ触ることになり、さらに後からテンプレート型のCTAを導入した際に直書き分と二重表示になる、直書き側だけ古いリンク形式が残って食い違う、といった事態が起こり得ます。最初から「CTA本体は共通部品・リンクURLは設定ファイルの1箇所」で持っておけば、文言変更もURL変更も1ファイルの修正で全記事に反映されます。
なお、文言をカテゴリで自動的に出し分ける場合は、1つの記事が複数カテゴリに属するケースを想定しておく必要があります。カテゴリを機械的に先頭から判定すると、範囲の広いカテゴリ（「WEB全般」のようなもの)が先に該当してしまい、大半の記事に汎用文言が付く結果になりがちです。カテゴリに優先順位を明示し、広いカテゴリほど後ろで判定する。当社の実装でも、この優先順位を入れる前後で文言の割り当てが大きく変わりました（修正後はAI関連124本・LINE関連16本など、内容どおりの分布に落ち着きました）。
第3層：補助線――寄せ切らずに逃げ道を残す
主導線をLINEにするなら、フォームで問い合わせたい人の道を消さないことです。当社の記事下CTAでも、主ボタンはLINEですが、その下に「フォームで問い合わせる」をテキストリンクで残しています。LINEを使わない読者、会社のPCから問い合わせたい担当者、要件をまとめて書いて送りたい人は確実に存在します。
補助線の原則は「あること」と「控えめであること」の両立です。主ボタンと同じ強さで並べると第1層で述べた主従の崩れが起き、無くすと受け皿から漏れる。テキストリンク程度の弱い見た目で、必ずそこにあるのが適切な強さです。
逆に、追従バーや本文中への挿入CTAをここに足すかどうかは慎重に判断します。層を増やすほど効くわけではなく、読む邪魔になった時点で逆効果です。当社もトップページや本文中へのCTA追加は「効果を見てから」と保留にしており、まず3層を置いて計測し、データが必要性を示してから足す順番にしています。
押した後と、計測をセットで組む
CTA設計は「押させて終わり」ではありません。2つの仕組みをセットで置きます。
クリック計測。 当社はCTAのボタンに識別用の属性を付け、GA4にクリックイベントを送る仕組みを1つだけ実装しています。属性を拾う方式にしておくと、後からCTAを増やしても計測側の改修が要りません。計測がないと、冒頭の実例のような「どの記事のどのCTAが相談につながったか」の裏取りができず、改善が勘頼みになります。なお、計測タグを追加するときは既存の計測設定に手を触れない構成にすることをおすすめします。設定の書き換えが原因で計測が長期間止まる事故は実際に起こり得ますし、止まっていることには表示上気づけません。
押した後の受け皿。 LINEなら登録直後のあいさつメッセージと相談フォーム、フォームなら自動返信と通知先。ここが空だと、せっかくの登録が「登録されただけ」で終わります。冒頭の実例で6日後に相談まで届いたのは、CTAの先に「あいさつ→アンケート→相談フォーム」の流れを同時に用意していたためで、ボタン単体の成果ではありません。
運用で起こりやすい取りこぼしを先に潰す
最後に、CTAを運用していく中で起こりやすい問題と、その予防策です。
リンク先の差し替えは「3箇所」を確認する。 LINEの入口URLなどは運用の中で変わることがあります。このとき、目に見えるリンク（href）だけ置き換えて終わりにすると漏れが出ます。確認すべきは、①リンクそのもの、②クリック計測の判定条件（計測コードが旧ドメイン名で判定していると、表示は正常なまま計測だけが全滅します）、③QRコード画像の中身、の3箇所です。置換後は、旧ドメイン名そのものでサイト全体を検索し、0件になるまで確認するのが確実です。
QRコードは目視で確認できない。 紙の販促物やページ内にQRを置いている場合、画像の見た目からリンク先は分かりません。リンクだけ新しくしてQRが旧URLのまま、という不整合は実際に起こり得ます。QRは必ず読み取って、テキストのリンク先と突き合わせてください。
印刷される前提のページは、紙になった瞬間に死ぬ導線を点検する。 ページを印刷して配る運用があるなら、ボタンは押せず、追従バーは消えます。紙に残すべきはQRコード・電話番号・住所で、印刷用の表示設定でこれらが消えていないかを確認しておきます。
まとめ：置き場所を決めてから、増やすかどうかを決める
問い合わせを増やしたいとき、CTAの「数を増やす」前に確認すべきことを整理します。
- ヘッダーに常設ボタンがあるか。主ボタンと副ボタンの主従は明確か
- 記事・ページの末尾に、その内容と噛み合った文言のCTAがあるか
- 主導線に乗らない人の逃げ道（フォームや電話の補助線）が控えめに残っているか
- リンク先は1箇所で管理されているか。文言変更が1ファイルで済む作りか
- クリック計測と、押した後の受け皿（あいさつ・フォーム・通知）まで用意されているか
この3層と2原則が揃っていれば、CTAは「置いたら終わり」ではなく、データを見て育てられる導線になります。当社の実例では、この設計に切り替えて6日で最初の相談が届きました。ボタンの色や文言の工夫はその後の話で、まず効くのは置き場所の設計です。