ホームページのCTAはどこに置く？問い合わせまでの導線を設計する
更新日：14 時間前
ホームページにCTAを置くとき、迷いやすいのが「どこに置けば押してもらえるのか」という問題です。ただ、配置だけを先に決めると、読者がまだ検討中なのに問い合わせを迫ったり、詳しく知りたい人をいきなりフォームへ送ったりしがちです。
CTAは、読者が次に知りたいことへ進むための案内です。ボタンの色や数を考える前に、「この場所まで読んだ人は何を理解し、次に何を確かめたいか」を整理すると、置き場所も文言も決めやすくなります。
この記事では、公的ガイドと検索エンジンの公式仕様を確認したうえで、ホームページで使いやすいCTAの配置案、文言、遷移先、公開前の確認項目をまとめます。配置案はゼマーケ編集部の提案であり、掲載率や成功率を示す調査結果ではありません。
CTAは「押させるボタン」ではなく、次の一歩を示す案内
CTAはCall to Actionの略で、問い合わせ、予約、資料請求、購入、見積もり、関連記事の閲覧など、次の行動へ案内する要素を指します。コンバージョンにつながるボタンだけでなく、サービス詳細や料金ページへのリンクも、読者の検討を前へ進めるCTAです。
大切なのは、ページの目的とCTAの目的を混同しないことです。たとえばサービスページの最終目的が問い合わせでも、初めて訪れた人の次の一歩は「事例を見る」「料金の考え方を知る」かもしれません。検討段階に合う小さな行動を用意すると、ページが一方的な営業案内になりにくくなります。
まず、ページごとに主CTAを1つ決めます。そのうえで、まだ問い合わせる段階ではない人向けに補助CTAを置きます。主CTAと補助CTAを同じ強さで並べるのではなく、色、サイズ、余白、文言で優先順位を伝えるのが実務的です。
置き場所は、読者がそこまでに得た情報から考える
CTAの位置に万能の正解はありません。同じヘッダーでも、予約が目的の店舗サイトと、比較検討に時間がかかる法人サービスでは役割が変わります。以下は、読者の状態を基準にした編集部の配置案です。自社サイトの構成に合わせて取捨選択してください。
置き場所 | 読者の状態 | 向いている遷移先 | 気をつけること |
|---|---|---|---|
ヘッダー | 問い合わせ先をすでに探している | 問い合わせ・予約・資料請求 | 全ページ共通なら目的を1つに絞る |
ファーストビュー | 提供価値を短時間で判断している | サービス概要・料金・相談 | 説明不足のまま強く迫らない |
サービス説明の直後 | 内容を理解し、次の情報を求めている | 事例・料金・詳細・問い合わせ | 読んだ内容と遷移先を一致させる |
料金・事例の直後 | 比較や社内検討に入っている | 見積もり・相談・資料 | 条件や対象をボタン周辺に書く |
記事末 | 疑問が解消し、次の行動を考えている | 関連記事・相談・フォーム | 記事内容と無関係な営業導線を置かない |
フッター | ページを最後まで見た、または補助情報を探している | 会社情報・連絡先・主要サービス | 主要CTAの代わりではなく補助として使う |
この表は効果を保証する順位表ではありません。ページを見ながら、「この場所まで読んだ人は、判断に必要な情報を得ているか」「クリック後のページは、その疑問に答えるか」を確認するためのたたき台です。
とくにファーストビューでは、すぐ相談したい人への導線と、まだ内容を知りたい人への導線を分けると考えやすくなります。主ボタンを「無料相談」、補助リンクを「サービス内容を見る」とするような設計です。ただし、無料の範囲や連絡方法などに条件があるなら、ボタン周辺で補足します。
CTAの文言は、クリック後に起きることを具体的に書く
「詳しくはこちら」「CLICK」のような文言だけでは、移動先を予測しにくくなります。Google検索セントラルは、リンクテキストを具体的で簡潔にし、遷移先の内容と関連させるよう案内しています。また、W3CのWCAG 2.2解説でも、リンクの目的をリンクテキスト単体、または周囲の文脈から判断できることが求められています。
たとえば「詳しく見る」ではなく、「制作事例を見る」「料金プランを確認する」「相談内容を入力する」と書けば、読者はクリック後を想像できます。文言は行動を促す強さよりも、行き先のわかりやすさを優先します。
問い合わせフォームへ進む：入力画面に移ることが明確
料金プランを確認する：比較に必要な情報があると伝わる
導入事例を業種別に見る：どの事例を見られるか具体的
オンライン相談を予約する：相談方法と行動がわかる
資料の内容を確認する：いきなりダウンロードさせず、内容確認を挟める
同じページ内で同じ文言を使う場合は、原則として同じ遷移先にします。「お問い合わせ」が場所によって電話、フォーム、メールに分かれると予測しづらいためです。複数の連絡方法があるなら、「電話で相談」「フォームで相談」のように分けます。
ボタンの先で話が変わらないようにする
CTAが見つけやすくても、遷移先が期待と違えば離脱につながります。「料金を見る」を押したのに相談フォームが開く、「資料を確認する」を押した直後に個人情報の入力だけを求められる、といった設計は避けたいところです。
問い合わせフォームへつなぐ場合は、ボタンの前後で、相談できる内容、入力に必要な時間の目安、返信方法、営業日の考え方などを伝えます。フォーム側も、CTAの文言と見出しをそろえると、別のページへ移った不安を減らせます。
入力項目の決め方は、問い合わせフォームの項目設計の記事で詳しく整理しています。CTAだけを直すのではなく、移動後のフォームまで一続きの導線として確認してください。
目的別に並べると、ページ全体の流れが見える
CTAをページ単位でばらばらに考えるのではなく、検討の順番に沿って並べると、足りない情報が見つかります。以下は法人向けサービスページを想定した編集部の一例です。
冒頭：サービスの対象と得られる価値を伝え、「サービス内容を見る」へ案内する
特徴の後：違いを確かめたい人に「導入事例を見る」を示す
料金の後：条件を理解した人に「見積もりを相談する」を示す
よくある質問の後：不安が残る人に「担当者に質問する」を示す
ページ末：判断材料がそろった人に、主CTAとして「相談内容を入力する」を置く
すべての場所に問い合わせボタンを置く必要はありません。各章の内容と次の行動が自然につながるところだけに置きます。CTAが多くなったら、ページの主目的に直接つながるもの、検討を助けるもの、サイト内を移動するだけのものに分け、強弱をつけます。
スマートフォンとキーボード操作でも確かめる
CTAは、見た目だけでなく操作しやすさも必要です。デジタル庁のウェブアクセシビリティ導入ガイドブックは、ウェブ担当者向けにスマートフォンを含む確認の考え方を案内しています。公開前には、実機または開発者ツールで、文字の折り返し、画面端との余白、誤タップしやすい並びになっていないかを確認します。
WCAG 2.2の達成基準2.5.8では、ポインターで操作する対象について、原則24×24 CSSピクセル以上、または周囲との十分な間隔などの条件が示されています。例外もあるため、数字だけを満たせばよいわけではありませんが、小さなテキストリンクやボタンを密集させないための最低限の目安になります。
キーボードのTabキーでも順に移動し、現在選ばれているCTAが見た目でわかるかを確認します。フォーカスの枠をデザイン上の理由で消すと、マウスを使わない人が現在地を把握しにくくなります。色だけに頼らず、輪郭や下線などでもリンクとボタンを判別できる状態が安心です。
検索エンジンがたどれるリンクになっているか
Google検索セントラルは、一般に<a>要素とhref属性を使ったリンクをクロール可能な形として案内しています。見た目がボタンでも、JavaScriptのクリック処理だけで遷移させるのではなく、通常のリンクとして実装できる箇所はリンクにします。
内部リンクの文言と周囲の文章は、読者だけでなく検索エンジンが遷移先を理解する手がかりにもなります。一方、内部リンクに理想的な本数があるわけではありません。数を増やすのではなく、ページの内容を補い、読者が次に必要とする情報だけをつなぎます。
公開前はCTAごとに4点を通しで確認する
最後に、パソコンとスマートフォンの両方で、CTAを実際に押して確認します。デザインカンプ上で見えていても、公開ページでは固定ヘッダーに隠れたり、別タブの設定が想定と違ったり、フォーム送信まで進めなかったりすることがあります。
文言：クリック後の内容や行動を予測できるか
配置：直前の説明を読んだ人にとって自然な次の一歩か
遷移先：ページ、電話番号、メール、フォームが正しく開くか
操作性：スマートフォン、キーボード、拡大表示でも使えるか
公開後は、アクセス解析でクリック数だけを見るのではなく、その先でフォームが完了したか、料金や事例を見た後に問い合わせへ進んだかも確認します。クリックが少ない場合も、すぐに色や位置だけを変えず、CTAの前に判断材料が足りているか、遷移先が期待に合っているかを先に見直します。
配置よりも、読者の次の疑問をそろえる
ホームページのCTAは、目立つ場所に数多く置けばよいものではありません。読者がそこまでに理解したことと、次に知りたいことをつなぐ案内として設計します。
ページの主CTAを決め、説明の区切りごとに必要な補助CTAを置き、文言と遷移先を一致させる。さらにスマートフォン、キーボード操作、検索エンジンがたどれる実装を確認する。この順番なら、デザインだけに偏らず、問い合わせまでの導線を整えられます。
免責事項
本記事は、2026年9月20日時点で確認できる公的機関・公式文書をもとに、一般的なウェブ制作の判断材料を整理したものです。紹介した配置例は編集部の提案であり、成果を保証するものではありません。サイトの目的、利用者、法令、計測環境に合わせて検証してください。
主な出典
Google検索セントラル「クロール可能なリンク」（2026年9月20日確認）
デジタル庁「ウェブアクセシビリティ導入ガイドブック」（2026年9月20日確認）
