トップページの問い合わせボタン 置き場所・文言・大きさ・色・測り方を公式資料で決める

トップページの問い合わせボタンは、置き場所・文言・押しやすさ・見た目・測り方の5つの軸で決めます。

5つのうち押しやすさ（大きさと間隔）と見た目（文字と背景の色の差）には、国際団体や国の機関が公開している基準に数値があります。文言と置き場所にも、公式資料に考え方が書かれています。

一方で、ボタンをどの位置や色にすると問い合わせが何件増えるかを示す数値は、今回開いた公式資料に見つかりませんでした。そこでこの記事は、公式資料に書いてあることと弊社の提案を分け、提案の側は自社の数字で確かめる手順まで書きます。

資料はすべて2026年10月27日に開いて確かめました。引用は、日本語版の原文のとおりに鉤括弧で示します。

この記事で使う言葉

最初に、この記事で繰り返し出てくる14の言葉を表にまとめます。GA4の画面の名前は、日本語版ヘルプの表記に合わせて書きます。

言葉	意味
W3C	ウェブの標準を作っている国際団体
WCAG 2.2	W3Cが2024年12月12日付けで勧告した、ウェブコンテンツを誰もが使えるようにするための指針
達成基準	WCAG 2.2の中の個々の基準。2.5.8のように番号がつく
適合レベル	達成基準は、A、AA、最も高いレベルの3段階に分かれる。Aが最も基本で、AAがその上
CSSピクセル	画面表示の長さの単位。日本語訳は「密度非依存で、ディスプレイに存在する実際のハードウェアピクセルとは異なる」と説明している
コントラスト比	文字色と背景色の明るさの差を表す数。日本語訳は「1:1～21:1」の範囲と書いている
ガイドブック	デジタル庁が2025年10月16日付けで公開した「ウェブアクセシビリティ導入ガイドブック」。この記事では、単にガイドブックと書く
JIS X 8341-3:2016	ウェブサイトのアクセシビリティに関する日本の規格。ガイドブックは、2016年にWCAG 2.0と同一内容の規格として改正されたものと説明している
インタースティシャル	Googleの説明では、ページ全体を覆うオーバーレイ（元の画面に重ねて出る表示）
追従ボタン	スクロールしても画面の同じ位置に貼り付いて見えるボタン（弊社の呼び方）。この記事では追従ボタンに統一する
GA4	Googleのアクセス解析（Google アナリティクス）の現行の版
拡張計測機能	GA4で、ページのコードを変更せずに有効にできる自動計測の機能
キーイベント	GA4で、ビジネスの成果にとって特に重要な操作を測る印をつけたイベント（利用者の操作の記録）
タグマネージャー	Googleのタグ マネージャー。クリックなどの条件に合ったとき、サイトに入れる計測用のコード（タグ）を配信する道具

先に結論 ボタンを決める5つの軸と公式資料の答え

5つの軸のそれぞれについて、公式資料に書いてあることと弊社の提案を並べます。右端の列が弊社の提案です。

軸	決めること	公式資料に書いてあること	弊社の提案
置き場所	どのページのどこに置くか	ヘルプの入口（連絡先や問い合わせページへのリンク）は全ページで同じ順序に置く（3.2.6）。ページ全体を覆うインタースティシャルを避ける（Google）	読み終えた位置にも置く
文言	ボタンに何と書くか	リンクの目的が文字から分かる（2.4.4）。見えている文字を名前に含める（2.5.3）。同じ機能は同じ呼び名にする（3.2.4）	押した先で起きることを文字に入れる
押しやすさ	大きさと間隔をどうするか	24×24 CSSピクセル以上。小さい場合は、周りに間隔があれば可（2.5.8）。最も高いレベルは44×44（2.5.5）	スマートフォンの幅で実測する
見た目	色の組み合わせをどうするか	文字と背景は4.5:1以上（1.4.3）。見分けに必要な枠や塗りは隣の色と3:1以上（1.4.11）	ブランドカラーに白文字を重ねる前に数値を測る
測り方	押されたかをどう数えるか	GA4の拡張計測機能のクリックは別ドメインへのリンクが対象。ボタンのクリックはタグマネージャーのクリック トリガーで測れる	変える前に判定日を決める

公式資料が答えている範囲

押しやすさと見た目は、数値で答えが出ます。ボタンの大きさは24×24 CSSピクセル以上、文字と背景の差は4.5:1以上という物差しがあり、手元のページを測れば合否が分かります。

文言と置き場所は、考え方の形で書かれています。リンクの目的が文字から分かること、ヘルプの入口が全ページで同じ順序にあることです。

測り方は、GA4とタグマネージャーのヘルプに手順があります。

公式資料が答えていない範囲

最初の画面とページ末尾のどちらが押されるか、何色が押されるかに答えた記述は、今回開いた資料に見つかりませんでした。

この領域の判断は、自社のページで測った数字に任せます。測り方と判定の手順は、後半の2つの章に書きます。

根拠にした公式資料と読むときの注意

使った資料は、4つのグループに分かれます。W3Cの基準とその日本語訳、デジタル庁のガイドブック、Googleの検索セントラル、GA4とタグマネージャーのヘルプです。

資料	発行元	版と日付	この記事で使う箇所
WCAG 2.2	W3C	2024年12月12日付けの勧告	達成基準1.1.1、1.4.1、1.4.3、1.4.11、2.4.4、2.4.11、2.5.3、2.5.5、2.5.8、3.2.4、3.2.6
WCAG 2.2の日本語訳	ウェブアクセシビリティ基盤委員会	上記勧告の翻訳（作業進行中と明記）	達成基準の日本語の引用
達成基準の解説文書（英語版）	W3C	2026年10月27日に確認	2.4.11、2.5.8、3.2.6の補足
ウェブアクセシビリティ導入ガイドブック	デジタル庁	2025年10月16日付け	PDFの16、31、33、34、39、58ページ
煩わしいインタースティシャルやダイアログを避ける	Google 検索セントラル	日本語版の最終更新日2025-12-18、英語版は2025-12-10	全面表示の定義と注意点
ページ エクスペリエンスが検索結果に与える影響について	Google 検索セントラル	最終更新日2026-09-25	自己評価の質問
キーイベントについて ほか3ページ	Google アナリティクス ヘルプ	2026年10月27日に確認	キーイベントの設定と、拡張計測のクリック
クリック トリガー	タグ マネージャー ヘルプ	2026年10月27日に確認	ボタンのクリックの測り方

W3Cの基準と日本語訳

日本語訳はウェブアクセシビリティ基盤委員会が公開しています。訳の冒頭には「この文書の正式版は、W3C のサイトにある英語版です。」と書かれ、「この翻訳文書は作業進行中です。」とも書かれています。

そこで、達成基準の番号と数値はW3Cの英語版で確かめました。24×24、44×44、4.5:1、3:1の数値は、英語版と日本語訳で一致しています。

デジタル庁のガイドブック

デジタル庁の「ウェブアクセシビリティ導入ガイドブック」は、WCAG 2.2を「2023 年 10 月に勧告された WCAG の最新版です」と説明しています。W3Cの現行の版は2024年12月12日付けで、初版の発行は2023年10月5日です。

ガイドブックの「2023 年 10 月」は、W3Cの初版の発行日（2023年10月5日）と同じ月です。W3Cの変更履歴は、2024年12月12日の再公開を、定義や表記などの訂正を反映したものと記録しています（英語版の訳）。

Googleの検索セントラル

この記事が引くGoogleの文言は、日本語版の原文です。日本語版と英語版の更新日は、上の表に並べました。

ページ エクスペリエンスの資料には、自己評価の質問が6つ載っています。そのうち1つが、煩わしいインタースティシャルを避けられているかどうかです。

GA4とタグマネージャーのヘルプ

GA4のヘルプは「キーイベントについて」「イベントにキーイベントとしてマークを付ける」「キーイベントを作成または変更する」「拡張計測機能イベント」の4ページ、タグマネージャーのヘルプは「クリック トリガー」の1ページを読みました。

GA4の4ページには更新日の表示が見当たりません。そのため、確認日の2026年10月27日だけを記録しています。

訪れた人の状態でボタンの役目を分ける

ボタンの数や位置を決める前に、そのページを開いた人がどの状態にあるかを4つに分けます。ここは弊社の提案で、公式資料の記述ではありません。

訪れた人の状態	知りたいこと	ボタンの役目（弊社の提案）
何をしている会社か、まだ分からない	自分の困りごとを扱うかどうか	押させる前に、説明を読んでもらう
扱う内容は分かった	頼むと何が起きるか	押したあとの流れを一文添えたボタンを置く
頼むと決めている	どこから連絡するか	すぐ見つかる位置に、どのページでも同じ形で置く
他と比べている	自分の場合に当てはまるか	質問だけでも送れる入口を用意する

1行目の人に向けたボタンの役目は、押してもらうことより、何をしている会社かを伝えることにあります。ボタンの前に説明を置く理由は、この行にあります。

押す前の不安に答える一文

押した先で何が起きるかが書かれていないボタンは、押す人が先を想像するしかありません。ボタンの近くに、押したあとに起きることを一文で書きます。

例文です。「送信すると、担当者がメールで返信します。電話は、ご希望のときだけかけます。」自社の実際の進め方に合わせて書き換えてください。

読み終えた位置にも置く

本文を読み終えた位置にボタンがあると、押す人が納得してからボタンに出会う順番になります。長いページでは、読み終える場所が何か所もあるので、その節の終わりにも置きます。

この点は弊社の提案です。

置き場所 ヘルプの入口は全ページで同じ順序に置く

置き場所について公式資料が示すのは、ヘルプの入口（連絡先や問い合わせページへのリンク）を、ページが変わっても同じ順序に置く、という一貫性の考え方です。

達成基準3.2.6 一貫したヘルプ

3.2.6は、WCAG 2.2で加わった基準で、レベルはAです。日本語訳は「ウェブページが次のヘルプのメカニズムのいずれかを含み、かつ、それらのメカニズムがウェブページ一式の中にある複数のウェブページで繰り返されている場合、他のページコンテンツに対して相対的に同じ順序で出現する」と書いています。

挙げられているヘルプのメカニズムは4種類で、「人間への連絡先」「人間への連絡メカニズム」「自己解決のためのオプション」「完全に自動化された連絡メカニズム」です。

W3Cの解説文書（英語版）は、人間への連絡メカニズムの例に、メッセージ機能、チャット、問い合わせフォーム、SNSの窓口を挙げています（英語版の訳）。ヘルプは、ページ上に直接置いても、問い合わせページへの直接リンクにしてもよいとも書いています（英語版の訳）。

同じ文書は、ヘッダーに置いたヘルプが他のページでもヘッダーにあれば見つけやすい、と説明しています（英語版の訳）。この基準が求めるのは、ヘルプの入口を置いた場合の順序です。置くこと自体は求めていません。

デジタル庁のガイドブックも、WCAG 2.2で追加された内容として「フォーカスインジケーター、テキストリンクを想定したタップ時のサイズ、認証方法、ヘルプリンクなど」を挙げています。

置く場所の候補と注意

候補になる場所を5つ並べます。向く状態の列は弊社の提案、注意の列には公式資料の基準を添えました。

置く場所	向く状態（弊社の提案）	注意
ヘッダー	頼むと決めている人	全ページで同じ順序に置く（3.2.6）
最初の画面の中	扱う内容が分かった人	ページ全体を覆うインタースティシャルにしない（Google）
各節の終わり	その節を読み終えた人	同じ行き先は同じ文言にする（文言の章の3.2.4）
ページ末尾	最後まで読んだ人	押す前の不安に答える一文を近くに置く
追従ボタン	どこで決めるか分からない人	キーボード操作で隠れないか確かめる（2.4.11）。Googleは追従ボタンに触れていない

置き場所 追従ボタンと全面表示の線引き

追従ボタンを置くかどうかは、相談の多い点です。公式資料がどこに線を引いているかを、Googleと達成基準の順に見ます。

Googleが避けるよう書いている表示

日本語版は、煩わしいインタースティシャルやダイアログを「主にプロモーション目的で、ユーザーのコンテンツ閲覧を妨害するページ要素のことです」と説明しています。

続けて「インタースティシャルはページ全体を覆うオーバーレイ、ダイアログはページの一部のみを覆うオーバーレイ」と区別しています。

避けたいミスとして挙がっているのは2つです。1つ目は「インタースティシャルでページ全体を覆わないようにする。」、2つ目は「同意や入力のために、ユーザーを別のページにリダイレクトしないようにする。」です。

問い合わせボタンの置き場所に関わるのは、1つ目です。2つ目は、同意や入力のために別のページへ移動させる作りを指していて、この記事では扱いません。

影響については「煩わしいダイアログやインタースティシャルが表示されると、Google や他の検索エンジンがコンテンツを把握することが困難になり、検索のパフォーマンスが低下する可能性があります」と書かれています。断定せず、可能性として書かれています。

追従ボタンは資料に出てこない

Googleの資料の対象は、インタースティシャルとダイアログの両方です。ダイアログも、煩わしいものは避ける対象に入っています。

注意を引きたい場合の手段としては、画面のほんの一部だけを覆うバナーを挙げています。追従ボタンについての記述はなく、避ける対象に当たるとも当たらないとも書かれていません。

弊社は、画面の一部だけを覆う点で、追従ボタンはダイアログやバナーに近いと読んでいます。この読みの当否は、資料から判断できません。判断の材料になるのは、覆う範囲を小さく保つことと、次の達成基準です。

達成基準2.4.11 キーボードで移動しても隠れない

2.4.11はレベルAAで、WCAG 2.2で加わりました。日本語訳は「ユーザインタフェース コンポーネントがキーボードフォーカスを受け取るとき、コンテンツ制作者が作成したコンテンツによって、そのコンポーネントの全体が隠されるようなことがない」と書いています。

キーボードフォーカスとは、キーボードで次のリンクやボタンへ移ったとき、いま操作の対象になっている場所のことです。

W3Cの解説文書（英語版）は、フォーカスされた要素に重なりやすいコンテンツの典型として、画面下に貼り付くフッター、上に貼り付くヘッダー、モーダルでないダイアログを挙げています（英語版の訳）。

同じ文書の失敗例の技法F110は、貼り付いたフッターやヘッダーが、フォーカスされた要素を完全に隠すことを失敗としています（英語版の訳）。

追従ボタンを置く前の3つの確認

追従ボタンを置く前に、次の3つを確かめます。

確認	見方	根拠
1 キーボードで画面を移動する	タブキーで順に移動し、フォーカスされた場所が追従ボタンの下に完全に隠れない	達成基準2.4.11
2 スマートフォンの縦と横で見る	追従ボタンが本文のどこまで覆うかを見る	弊社の提案
3 押された回数を数える	覆う面積に見合う回数が押されているか比べる	弊社の提案

文言 リンクの目的が文字から分かること

文言の軸で公式資料が示すのは、押す前に行き先が分かること、見えている文字と内部の名前が合っていること、同じ機能に同じ呼び名を使うことの3点です。

達成基準2.4.4 リンクの目的

2.4.4はレベルAです。日本語訳は「それぞれのリンクの目的は、リンクのテキスト単独から、又はリンクのテキストとプログラムによって解釈されるリンクの文脈とから判断可能である」と書き、続けて「ただし、リンクの目的が一般的に利用者にとって曖昧な場合は除く」としています。

ガイドブックは「リンクがどこへのリンクなのか、単体で、または前後の文脈から簡単に理解できるようにしてください」と書いています。

図の説明には「リンクの文言が同一だと、スクリーンリーダーのリンク一覧で判別が難しくなる。リンク先の内容がわかるように表現する」とあります。スクリーンリーダーは、画面の内容を音声で読み上げるソフトです。

達成基準2.5.3 見えている文字を名前に含める

2.5.3はレベルAです。日本語訳は「ユーザインタフェース コンポーネントがテキスト又は文字画像を含むラベルを持つ場合、視覚的に提示されたテキストが名前 (name) に含まれている」と書いています。

ボタンに見えている文字が「お問い合わせ」なのに、コードの上での名前が別の言葉になっていると、この基準を満たしません。英語版の注記は、ラベルの文字を名前の先頭に置くのがよい実践だと書いています（英語版の訳）。

達成基準1.1.1 画像のボタンには文字の代替を付ける

1.1.1はレベルAで、日本語訳は「利用者に提示される全ての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている」と書いています。

除外の1つに「コントロール、入力」があり、「その目的を説明する名前 (name) を提供している」ことを求めています。文字を画像の中に描いたボタンには、同じ言葉の代替テキストを付けます。

達成基準3.2.4 一貫した識別性

3.2.4はレベルAAで、日本語訳は「ウェブページ一式の中で同じ機能を持つコンポーネントは、一貫して識別されている」と書いています。

ガイドブックはこれを、「同じ機能を複数のページで提供する場合は、同じラベル、説明で提供されているようにしてください」と言い換えています。「ボタン要素などのコンポーネント、アイコン、リンクなどに一貫性を持たせてください」とも書いています。

公式資料の記述はここまでです。弊社の提案は、同じフォームへ行くボタンを、ページが違っても同じ文言と同じ形にそろえることです。「お問い合わせ」「ご相談」「資料請求」と呼び名が混ざると、同じ入口だと気づく手間が増えます。

自社の文言を決める手順

トップページのボタンの文字だけを抜き出して並べ、次の表の観点で読みます。観点の列は公式資料の基準、直し方の方向の列は弊社の提案です。

いまの文言	観点	直し方の方向
「詳しくはこちら」が複数並ぶ	2.4.4 前後の文脈からも行き先が分からない場合は満たせない	行き先ごとに、何が分かるかを文字に入れる
「送信」だけ	弊社の提案	何を送るのかを文字に入れる
文字を描いた画像のボタン	1.1.1と2.5.3	同じ言葉の代替テキストを付ける
ページごとに呼び名が違うが、行き先は同じフォーム	3.2.4と、ガイドブックの「同じラベル」	呼び名を1つにそろえる

文言の作り方そのものは、問い合わせボタンが押されない本当の理由で詳しく扱っています。

押しやすさ 大きさと間隔

押しやすさは、公式資料が数値で答えている軸です。2つの基準があり、守る水準が違います。

達成基準2.5.8 24×24 CSSピクセル

2.5.8はレベルAAで、WCAG 2.2で加わりました。日本語訳は「ポインタ入力のターゲットのサイズは、少なくとも 24 × 24 CSS ピクセルである」と書いています。ポインタ入力のターゲットとは、マウスや指で押す対象のことです。

例外は5つで、「間隔」「同等」「インライン」「ユーザエージェントによる制御」「必要不可欠」です。

間隔の例外は、24 CSSピクセルより小さいボタンに使えます。そのボタンの中心に直径24 CSSピクセルの円を置き、円が隣のボタンにも、隣の小さなボタンの円にも重ならなければ、基準を満たします。

W3Cの解説文書（英語版）には、ターゲットの内側に24×24の正方形が収まるかで判定する、と書かれています（英語版の訳）。角丸が大きくて正方形が収まらないボタンは、小さい扱いになります。

同じ文書は、この要件がページの拡大率に左右されないとも書いています（英語版の訳）。利用者が拡大すれば足りる、という理屈は通りません。

達成基準2.5.5 44×44 CSSピクセル

2.5.5は、WCAGの3段階の最も高いレベルに置かれた基準です。日本語訳は「ポインタ入力のターゲットのサイズは、少なくとも 44 × 44 CSS ピクセルである」と書いています。

例外は「同等」「インライン」「ユーザエージェントによる制御」「必要不可欠」の4つです。2.5.8と比べると、間隔の例外がありません。

大きさの測り方

ブラウザの開発者向けの表示で、ボタンの幅と高さを確かめます。スマートフォンの画面幅にして測るのが、弊社の提案です。

ガイドブックは、JIS X 8341-3:2016は2016年策定の基準で、スマートフォン対応を考えると十分とは言い切れないと述べています。そして「スマートフォンでサービスにアクセスする利用者が過半数を占めることが多くなっていること」を踏まえ、WCAG 2.1や2.2にも対応を検討するよう書いています。

基準	数値	レベル	例外	弊社の提案
2.5.8	24×24 CSSピクセル以上	AA	間隔、同等、インライン、ユーザエージェントによる制御、必要不可欠	全ボタンで最低線として測る。小さい場合は、周りの間隔を測る
2.5.5	44×44 CSSピクセル以上	最も高いレベル	同等、インライン、ユーザエージェントによる制御、必要不可欠	問い合わせボタンは目標にする

見た目 色の組み合わせ

見た目の軸で公式資料が示すのは、色の好みでなく、色と色の差の数値です。

達成基準1.4.3 文字と背景の差

1.4.3はレベルAAで、日本語訳は「テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある」と書いています。例外の1つが「サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある」です。

サイズの大きなテキストの定義は「少なくとも 18 ポイント、又は 14 ポイントの太字」で、中国語、日本語、韓国語のフォントには同等のサイズが定められています。

コントラスト比は、明るいほうの色の相対輝度をL1、暗いほうをL2として、(L1 + 0.05) / (L2 + 0.05) で求めます。計算はチェックツールに任せられます。ガイドブックも「チェックツールによりある程度確認できる」と書いています。

ガイドブックは、4.5:1が必要な範囲を「太字でないテキスト 22 ポイント（29px）未満、太字のテキストは 18 ポイント（24px）未満」と説明しています。W3Cの定義は18ポイント（太字は14ポイント）からなので、4.5:1が必要になる範囲の境が資料ごとに違います。食い違いの理由は、資料から読み取れませんでした。

弊社の提案は、ボタンの文字を大きさにかかわらず4.5:1にすることです。4.5:1が必要な範囲が広いほうの資料に合わせれば、どちらの基準も満たします。

達成基準1.4.11 ボタンの枠や塗り

1.4.11はレベルAAで、日本語訳は「次の視覚的提示には、隣接した色との間で少なくとも 3:1 のコントラスト比がある」と書き、最初の項目に、ボタンなどの部品と、その状態を見分けるために必要な視覚的な情報を挙げています。

ボタンの塗りや枠がボタンだと見分ける唯一の手がかりなら、背景との差が3:1以上になるよう測ります。どの視覚情報が「必要」にあたるかの判断は、W3Cの解説文書で確かめてください。

達成基準1.4.1 色だけで伝えない

1.4.1はレベルAで、日本語訳は「色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段としては使用されていない」と書いています。

押す場所を赤やオレンジの色だけで示さず、文字、枠、矢印の形を添えます。これは弊社の当てはめです。

ブランドカラーの上に白い文字を重ねるとき

ガイドブックのQ&Aは、「「オレンジ背景に白文字」や「青背景に白文字」は見た目の印象と異なって、コントラスト比が低く出る場合があります」と書いています。数字を優先して配色を調整するよう勧めています。

ブランドカラーが変えられない場合の答えは「ブランドカラーに文字が重なる UI を使わないようにするか、ブランドカラーの配色方法を調整したり、コントラスト比の高い代替色を用意すること」です。

理由として「文字サイズやウィンドウ幅は、利用者側で調整しやすいですが、色の組み合わせは利用者が調整しにくい部分です」と書かれています。

対象	必要な差	基準	補足
通常の文字と背景	4.5:1以上	1.4.3	ボタンの文字は大きさにかかわらずこの値を目標にする（弊社の提案）
サイズの大きな文字と背景	3:1以上	1.4.3	W3Cは18ポイント、太字なら14ポイントから。ガイドブックの境は22ポイントと18ポイントで、理由は資料から読み取れなかった
見分けに必要な枠や塗りと隣の色	3:1以上	1.4.11	「必要な」視覚情報にあたるかを確かめる
押す場所を示す手がかり	色以外の手段を併用	1.4.1	文字、枠、矢印の形を添える

測り方 押されたかを数える

最後の軸は、押されたかどうかを数える仕組みです。数えられていない状態のまま置き場所や色を変えても、変えた結果が分かりません。

先に確かめるのは、計測が入っているか

数えられているかは、対象のボタンを自分で押して確かめます。イベントの一覧に何かが並んでいるだけでは、証拠になりません。次の節で書くとおり、拡張計測機能のクリックは別ドメインへのリンクしか数えないからです。

手順は3つです。1つ目に、対象のボタンを自分で押します。2つ目に、GA4のリアルタイム レポートで[イベント名別のイベント数]カードを開きます。ヘルプによると、このカードには過去30分間に収集されたイベントが出ます。

3つ目に、ボタンに当たるイベント名が現れ、押すたびに数が増えるかを見ます。現れなければ、押された回数は取れていません。

拡張計測のクリックが数えるもの

GA4の[管理]画面の[データの収集と修正]にある[データ ストリーム]で、拡張計測機能を有効にできます。ヘルプには「コードを変更する必要はありません」と書かれています。

この中のクリックは、離脱クリックです。ヘルプは「デフォルトでは、現在のドメインから移動するすべてのリンクに対して離脱クリック イベントが発生します」と書いています。

同じサイトの中の問い合わせフォームへ移るボタンは、これに入りません。フォームが別のドメインにある場合は、押すと離脱クリックとして届きます。

タグマネージャーのクリック トリガーで数える

同じサイトの中のボタンの押された回数を数えるときは、タグマネージャーのクリック トリガーを使います。トリガーの種類は2つあります。

[すべての要素]は「ページ上のすべての要素（リンク、画像、ボタンなど）のクリックを測定します」と説明され、[リンクのみ]はリンクのタグを使うHTMLリンクのクリックを測定します。

クリックが起きるページだけに絞る場合は、[このトリガーの発生場所]で[一部のクリック]を選び、ページを絞る条件を追加します。

道筋を図にまとめます。矢印の上の言葉が、次の箱に渡るものです。

キーイベントに印をつける

GA4の[管理]画面の[データの表示]で[イベント]を開き、[最近のイベント]タブで対象のイベントを探します。イベント名の横にあるスターアイコンをクリックすると、そのイベントがキーイベントになります。

ヘルプには、標準プロパティでは最大30個のイベントにキーイベントの印をつけられること、標準レポートに表示されるまで最大24時間かかることが書かれています。過去のデータは変わらず、印をつけた時点以降のレポートに反映されます。

リアルタイム レポートは、ユーザーがキーイベントを動かしてから数分後に更新されます。

送信完了を数える ありがとうページの表示

押された回数と、送信が完了した数（完了数）は別の数字です。送信後に表示するページを、この記事ではありがとうページと呼びます。GA4のヘルプの表記は、確認ページです。完了を数える方法は、ヘルプの[キーイベントを作成または変更する]に例があります。

ヘルプの説明は次のとおりです。ページビューのイベントをそのまま使うと、すべてのページビューがキーイベントとしてカウントされるため、このイベントにはキーイベントとしてマークを付けられません。

ヘルプの手順は、[+ イベントを作成]を押し、[イベントの作成方法の選択]で[コードなしで作成]を選び、ページビューを元にして、ありがとうページのURLを条件にする、という流れです。例は「ユーザーが連絡先情報を送信し、確認ページに移動したときに、イベントをトリガーします」と書かれています。

ありがとうページ方式の設定手順は、GA4で問い合わせ完了を計測する設定手順に画面ごとにまとめています。

方法	数えられるもの	必要な作業	向く場面
拡張計測機能のクリック	別ドメインへ移るリンクのクリック	[データ ストリーム]で有効にする。コードの変更は不要	フォームが別ドメインにあるとき
クリック トリガー	リンク、画像、ボタンなどのクリック	トリガーとタグを作る	同じサイト内のボタンの押された回数を知りたいとき
ありがとうページの表示を条件にしたイベント	送信の完了	[+ イベントを作成]で条件を決め、キーイベントの印をつける	問い合わせの完了数を知りたいとき

変えたあとの判定を、先に決める

この章は、7日の進め方まで含めて弊社の提案です。公式資料の記述は含みません。ボタンを変えたあとの評価が印象になると、直した意味が残りません。

判定する日を先に決める

変更する前に、何を見て、いつ判定するかを書き留めます。判定日までは同じ状態に保ちます。

月に数件の規模では、1回の変更の効き目を短い期間で言い切れません。件数が少ないほど、判定日は先に置きます。

押された回数と完了数を並べて見る

見る数字は2つです。ボタンが押された回数と、送信が完了した数を並べます。

押された回数が増えて完了数が増えていなければ、ボタンの先のページかフォームに引っかかりがあります。両方増えていれば、ボタンの変更が働いています。

一度に変えるのは1つだけ

位置と文言と色を同時に変えると、どれが効いたのか分かりません。変更は1つに絞り、記録しておきます。

7日の進め方

1週間で一巡する進め方を、日ごとにまとめます。最初に数えられているかを確かめるのは、数えられていない状態で変えても、結果を比べられないからです。判定日は、直す前の5日目に決めます。

日	やること	終わった状態
1日目	対象のボタンを自分で押して、数えられているか確かめる	ボタンごとの押された回数が読める。または、数えられていないと分かる
2日目	トップページの問い合わせの入口をすべて書き出す	位置、文言、大きさ、色の組み合わせが1枚の表にある
3日目	大きさと色の差を測る	24×24 CSSピクセル（届かない場合は間隔の例外）と4.5:1に届かない箇所が分かる
4日目	全ページで同じ順序、同じ文言か見る	ずれている箇所が分かる
5日目	判定日と、見る数字（押された回数と完了数）を決めて記録する	判定日と、見る数字が書いてある
6日目	直す箇所を1つだけ選んで直す	変更が1つに絞られている
7日目	スマートフォンで押して、送信まで通す	送信の完了と自動返信まで確認済み

状況別の置き方

自社の状況に近い行を選んで、最初に確かめる基準を決めます。置き方の列は弊社の提案、最初に確かめる基準の列は公式資料の達成基準です。

状況	置き方（弊社の提案）	最初に確かめる基準
説明が長いページが多い	各節の終わりにも、同じ文言で置く	3.2.4 同じ機能は同じ識別
スマートフォンからの訪問が多い	最初の画面とページ末尾に置き、大きさを44×44 CSSピクセルに近づける	2.5.8と2.5.5
追従ボタンを使いたい	覆う面積を小さくし、キーボード操作で隠れないか見る	2.4.11と、Googleのインタースティシャルとダイアログの注意
ブランドカラーが濃い	ボタンの文字色を、数値を測って決める	1.4.3と1.4.11

ボタン以外に見る場所

ボタンを直しても問い合わせが動かないときは、ボタンの前後を見ます。この章は、公式資料の記述と弊社の提案を、文ごとに示します。

ボタンの手前 ページの中身

何を引き受ける会社か、進め方はどうなるか、頼んだあとに何が起きるか。この3つが読んで分かる状態になっているかを、ボタンより先に見ます。

ここは弊社の提案です。3つが曖昧なページでは、ボタンの見た目を整えても、押す理由が足りないままです。

ボタンの先 フォーム

押された回数が増えても完了数が増えないときは、フォームを見ます。入力項目の数や、送信後の表示、自動返信の有無です。

項目の決め方は問い合わせフォームの作り方にまとめています。電話番号の載せ方は、ホームページに電話番号を載せるべきかで扱っています。

スマートフォンでの表示

ガイドブックは、スマートフォンでアクセスする利用者が過半数を占めることが多いと書いています。これは公式資料の記述です。ボタンの大きさと間隔をスマートフォンの画面幅で測るのは、弊社の提案です。

Googleのページ エクスペリエンスの資料にも、コンテンツがモバイル デバイス上で適切に表示されているかを問う自己評価の質問があります。こちらも公式資料の記述です。

よくある質問

ボタンの色は何色がよいですか

押されやすい色を示す記述は、見つかりませんでした。示されているのは色の差の数値で、文字と背景は4.5:1以上、見分けに必要な枠や塗りは隣の色と3:1以上です。

この条件を満たす色の中から選び、色を変える場合は変更を1つに絞って、押された回数を比べます。

ボタンはトップページにいくつ置いてよいですか

個数の上限や下限を定めた記述は、今回開いた公式資料に見つかりませんでした。公式資料が求めているのは、同じ行き先を同じ文言にそろえること（3.2.4）と、ヘルプの入口を全ページで同じ順序に置くこと（3.2.6）です。

個数は、入口の役目を表で書き出し、同じ役目の入口が重なっていないかで決めます。

追従ボタンは置かないほうがよいですか

Googleの資料は、煩わしいインタースティシャルとダイアログの両方を避ける対象にしています。追従ボタンがそれに当たるとは書かれていません。達成基準2.4.11は、貼り付くフッターやヘッダーがフォーカスされた場所を完全に隠さないことを求めています。

置くかどうかは、先に述べた3つの確認をしたうえで、押された回数と本文を覆う面積を比べて決めます。

ボタンのクリックが数えられているかは、どう確かめますか

対象のボタンを自分で押し、リアルタイム レポートの[イベント名別のイベント数]カードに、そのイベントが現れて増えるかを見ます。手順は、測り方の章の最初の節に書きました。

現れなければ、タグマネージャーのクリック トリガーを作る段階から始めます。

JIS X 8341-3:2016に合わせていれば、ボタンの大きさの基準も満たせますか

満たせるとは言い切れません。ガイドブックは、JIS X 8341-3:2016が2016年にWCAG 2.0と同一内容の規格として改正されたものだと説明しています。

24×24 CSSピクセルの2.5.8は、WCAG 2.2で加わった基準です。2016年版に合わせただけでは、この基準は確かめられていません。

まとめ

トップページの問い合わせボタンは、5つの軸の順に確かめます。置き場所は、ヘルプの入口を全ページで同じ順序に置く。文言は、押す前に行き先が分かる文字にして、同じ行き先は同じ呼び名にそろえる。押しやすさは、24×24 CSSピクセル以上か、周りの間隔を測る。見た目は、文字と背景の差を4.5:1以上にする。測り方は、ボタンのクリックをタグマネージャー経由で数え、完了数と並べて見る。

公式資料に位置や色と問い合わせ件数の関係を示す数値はないので、変更は1つに絞り、変える前に判定日を決めて、押された回数と完了数を自社の数字で確かめます。

今日できる点検

5つの軸ごとに、今日のうちに確かめられる点検をまとめます。合格の目安のうち、24×24 CSSピクセルと4.5:1は公式資料の基準で、ほかは弊社の提案です。

軸	点検すること	合格の目安
置き場所	トップページと下層ページのボタンの位置を並べて見る	問い合わせの入口（連絡先やフォームへのリンク）が、どのページでも同じ順序にある
文言	ボタンの文字だけを抜き出して読む	文字だけで、押した先で何が起きるか言える
押しやすさ	スマートフォンの画面幅で、ボタンの幅と高さを測る	24×24 CSSピクセル以上、または周りの余白で間隔の例外を満たす
見た目	ボタンの文字色と背景色のコントラスト比を測る	4.5:1以上
測り方	対象のボタンを自分で押して、GA4のリアルタイム レポートにそのイベントが現れて増えるかを見る。変える前に、判定日と見る数字を書く	押した分だけイベントが増え、判定日が書いてある

何から手を付けるか迷っている場合は、集客の手法を増やす前に確かめる1つのこともあわせてご覧ください。