CTA（Call To Action）は、ページを読み終えた人に次の行動を案内するボタンやリンクです。「詳しくはこちら」「お問い合わせ」とだけ書かれたボタンは、押すと何が起きるのかが分からず、読んだ人は押す前に迷います。この記事では、ボタンの言葉、置く数と位置、リンク先の整え方に加えて、色に頼らない表示とスマートフォンでの押しやすさ、文言を変えた後の見方を説明します。
答えを先に書くと、ボタンには「押した後に何が見られるか、何を申し込むことになるか」を書き、ページごとに主な行動を一つ決め、リンク先をその言葉どおりにしておきます。色や大きさで目立たせるのは、その後です。
文中のボタン文の例は考え方を示すための架空の例で、文言を変えた効果を示す実績ではありません。リンクの文言と押しやすさの基準は、GoogleとW3Cの公開資料で確認しました（2026年10月2日）。
ハウスメーカーで申込先が会場や窓口ごとに違う場合
03章の「リンク先を、ボタンの言葉どおりにしておく」は、来場予約や資料請求の受付先が展示場や部署で分かれる会社で、ボタンの言葉と実際の申込先がずれていないかを確かめる点検になります。
05章の変更後の見方では、押された数と進んだ先を拠点別に記録し、受付側の件数と照らします。
ボタンには、押した後に起きることを書く
「詳しくはこちら」は、どのページのどのボタンにも使えます。裏を返せば、その言葉からは行き先が分かりません。施工事例が出るのか、費用の説明なのか、申込みフォームが開くのかを、読者は押して確かめるしかありません。
Googleはリンクの文言について、具体的で、適度に簡潔で、リンクを置いたページとリンク先の両方に関連する言葉を勧めており、避ける例として「こちらをクリックして詳細をご確認ください」「詳細」を挙げています。前後の文を無視してリンクの文言だけを読み、意味が通じるかを試す方法も紹介されています（Google のリンクに関するベスト プラクティス）。ウェブアクセシビリティの指針であるWCAG 2.2も、リンクの目的が、リンクの文言だけ、または文言とその文脈から分かることを求めています（達成基準2.4.4）。
工務店のサイトでは、もう一つ区別したいことがあります。「見る」ボタンなのか、「申し込む」ボタンなのかです。訪問者にとって、事例を眺めることと、氏名や連絡先を入力することは重さが違います。「見学会について」では、開催概要を読むだけなのか、予約が始まるのかが分かりません。「見学会の日程を見る」「見学会を予約する」と動詞で書き分ければ、押す前に心づもりができます。
横にスワイプして、右側の列を確認できます
| 曖昧な文言 | 書き換えの例（架空） | リンク先に必要なもの |
|---|---|---|
| 詳しくはこちら | 収納動線の施工事例を見る | 収納動線を扱った事例のページ |
| 見学会について | 見学会の日程と場所を見る | 開催日、場所、予約の方法 |
| お問い合わせ | 家づくりの相談を予約する | 予約フォームと、相談で話せることの説明 |
長い文言にする必要はありません。Googleの資料も、不自然に長いリンクの文言を悪い例として挙げています。行き先と行動が分かる範囲で短くします。
ページごとに、主な行動を一つ決める
読み終えた人が次に知りたいことは、ページによって違います。ボタンは会社が押してほしいものではなく、その疑問に合うものを置きます。次の表は考え方の例です。
横にスワイプして、右側の列を確認できます
| ページの役割 | 読み終えた人の次の疑問 | 主な行動の例 |
|---|---|---|
| 検討を始めた人向けの解説記事 | この会社はどんな家を建てているか | 記事の内容に関連する施工事例を見る |
| 施工事例 | 自分の家でも同じことを頼めるか | この事例のような工夫を相談する |
| 日時と場所を載せた見学会の告知ページ | 自分も行けるか、どう申し込むか | 見学会を予約する |
| お知らせ一覧などの短い見学会の告知 | いつ、どこで開かれるか | 見学会の日程と場所を見る |
見学会の告知は、置く場所で主な行動が変わります。日時と場所をすでに載せているページなら、次の行動は予約です。お知らせ一覧のように開催の事実だけを伝える短い告知なら、先に日程と場所のページへ送ります。「詳細を見て予約する」のように二つを一つのボタンにまとめると、押した先が説明なのかフォームなのかが分からなくなります。
一つの場所に同じ強さのボタンが三つ四つ並ぶと、どれを押すかを読者が決めることになります。そのページの主な行動を一つ決めて目立つボタンにし、ほかは文中のリンクや控えめなボタンにします。
トップページのように、検討を始めたばかりの人と相談先を決めかけている人が混ざるページでは、一つに絞れません。その場合も、主な行動（たとえば相談の予約）と、まだ決めていない人向けの行動（たとえば施工事例を見る）の二つまでにして、見た目の強さに差を付けます。
置く場所は、まず本文を読み終えた位置です。検索やSNSから事例や記事へ直接来た人は、そこに入口がなければ、メニューを開いて相談ページを探すことになります。長いページでは途中にも置けますが、判断材料を読む前に申込みを繰り返し勧めると、読む流れを遮ります。相談までの入口全体の整え方は工務店ホームページの問い合わせを増やすにはで扱っています。
リンク先を、ボタンの言葉どおりにしておく
言葉を具体的にするほど、リンク先とのずれは目立ちます。「無料相談を予約する」と書いたボタンの先が相談の説明ページだけで、予約の方法が見つからなければ、押した人の期待は外れます。直し方は二つです。リンク先に予約フォームを置くか、ボタンを「相談の流れを見る」に変えるかです。そのページを読み終えた人に予約まで進んでほしいのか、まず内容を知ってほしいのかで選びます。
「収納動線の施工事例を見る」と書くなら、リンク先には収納動線を扱った事例が要ります。事例一覧の先頭へ送るだけでは、読者は一覧の中から該当する事例を探し直すことになります。該当する事例がまだないなら、文言のほうを「施工事例の一覧を見る」にとどめます。
公開した後にもずれは生まれます。見学会が終わったのに告知ページへのボタンが残っている、フォームを作り直してURLが変わった、事例を非公開にした、といった場合です。見学会の終了やページ・フォームの変更のたびに、そこへ向かうボタンを実際に押して確かめます。変更がない時期も、日を決めて主要なボタンを一通り押してみます。
色だけに頼らず、スマートフォンで押せるかを見る
目立つ色は、ボタンに気付いてもらう助けになります。ただ、色の違いだけで「ここが押せる」と伝えていると、色を見分けにくい人には伝わりません。WCAG 2.2は、色を、行動を促す唯一の視覚的な手がかりにしないことを求めています（達成基準1.4.1）。枠や形、文言でもボタンと分かるようにします。
押しやすさにも基準があります。WCAG 2.2の達成基準2.5.8は、押す対象の大きさを24×24 CSSピクセル以上とすることを求めています。それより小さい対象でも隣との間隔が十分にある場合や、文中のリンクなどは例外です（達成基準2.5.8の解説）。これは最低限の基準なので、実際の押しやすさはスマートフォンで自分の指で押して確かめます。隣のボタンや電話番号を誤って押さないか、画面の下に固定したボタンが本文やフォームの入力欄を隠していないかを見ます。主な行動のボタンが画面のどこに出るかは、パソコンとスマートフォンで違うので、両方で見比べます。スマートフォンでの点検は工務店ホームページのスマホ確認で扱っています。
文言を変えた後は、押された数と進んだ先を分けて見る
ボタンが押された回数だけでは、案内が役に立ったかは分かりません。押した先で事例が読まれたか、予約の送信まで進んだかは別の数字です。クリックと送信完了を分けて数える方法は工務店サイトのGA4イベント設計で説明しています。
文言を変えた日は記録しておきます。問い合わせの件数は季節や見学会の有無でも動くため、いつ何を変えたかが分からないと、変更の前後を比べられません。
参考にした公式資料
- Google のリンクに関するベスト プラクティス｜Google 検索セントラル確認日：
- Web Content Accessibility Guidelines (WCAG) 2.2｜W3C確認日：
- Understanding SC 2.5.8: Target Size (Minimum)｜W3C WAI確認日：
記入例・計算例は編集上の例です。制度の受付状況や仕様は変わるため、実行前にリンク先の最新情報をご確認ください。
