LPの相談ボタンはどこに置く？説明と次の行動をそろえる配置の考え方

どの行動へ進む相談ボタンか、先に決めます

相談ボタンは、読者へ次の行動を案内する入口です。Web制作ではCTAと呼ぶことがあります。「資料を見る」「相談する」「入力した内容を送信する」は、いずれも次の行動ですが、読者が行うことは違います。配置を考える前に、このLPで主に案内する行動を言葉にします。

たとえば、サービスの説明を見たい人へ、いきなり個人情報の入力を求める画面を開くと、期待と行き先がずれます。「詳しくはこちら」のような言葉だけでは、説明を読むのか、申込みを始めるのかが分かりにくくなります。ボタンの近くで何ができるかを伝え、実際の行き先もその説明に合わせます。

この記事の架空例は、事務所の定期清掃について、作業範囲を相談する入口です。入口の言葉は「清掃の範囲を相談する」。設計上の行き先は、相談対象と準備する資料を確認する画面という設定です。実在する清掃サービスの受付先や、送信できる画面を確認した例ではありません。

フォームにある送信ボタンは、入力内容を送るための操作です。LPから相談画面へ移る入口と、送信の確定を同じ言葉・同じ確認として扱わないようにします。GOV.UKのボタン指針も、行う動作が分かる言葉と、開始用のリンクと送信操作の違いを説明しています。行政サービスの配置例を、そのまま民間LPの最適個数にするものではありません。

NN/g：曖昧な「Get Started」が期待と行動をずらす例

GOV.UK：動作を説明するボタンと開始リンク

相談の前に読む説明を、実際の資料から選びます

入口の位置を決める材料は、読者が相談を判断するための情報です。担当者は対象のサービス資料と現在のLPを並べ、「誰の、どんな相談を受けるか」「作業範囲はどこまでか」「何を用意するか」「相談後に何を確認するか」を確かめます。分からない条件を、配置の都合で約束へ変えないことが前提です。

訪問者が、すでにサービスを知っているとは限りません。広告や紹介から初めて来た人が、短い紹介だけで相談対象を判断できるかを読みます。一方、同じ説明を十分読んだ人へは、次に進める場所を必要以上に探させないようにします。冒頭か末尾かを先に決めると、この違いを見落としやすくなります。

説明の各部分に、読者がそこで答えを得る疑問を付けてみます。対象・作業範囲の節なら「自分の事務所の相談か」、準備資料の節なら「何を確かめてから進むか」、相談後の案内なら「この後どんな説明を読めるか」です。実際に用意されている説明と入口を対応させて、ページを上から読みます。

自社の説明がまだ曖昧なら、相談ボタンを増やすだけでは不足を埋められません。広告で約束した内容やLP全体の根拠・条件から見直す場合は、広告とLPの説明をそろえる点検方法を使います。ここでは、一つのLPの中で、確認できた説明と相談入口をどこで結ぶかに絞ります。

広告の約束とLP全体の説明を点検する

紹介直後と説明後の入口を、別の下書きで比べます

次の図は、同じ架空サービスについて考えた、別々の配置下書きです。どちらも入口の言葉と設計上の行き先は同じです。違うのは、入口へ来るまでに読める説明と、対象・作業範囲の説明の位置です。変更前後や、問い合わせが増えた実験の結果ではありません。

紹介文の直後に置く案では、入口の近くで読めるのは短いサービス紹介のみです。対象・作業範囲はその後に続き、その説明後にも同じ入口を置く案があります。冒頭の入口を使う読者が何を分かっているか、先に説明を読みたい人がそのまま読み進められるかを確認する必要があります。

もう一つの案では、対象・作業範囲、準備する資料、相談後の案内を読んだ後に入口を置きます。必要な説明をそろえやすい反面、その情報を探して読む間に、どこから相談できるかが分からなくならないかも確かめます。説明が後にあるだけで最初の案を失敗、説明後に入口があるだけで二つ目を成功とは判定しません。

下書きを読むときは、入口を丸で囲むだけでなく、その直前で読者が分かることを書き出します。「この範囲を相談できると分かる」「資料の説明を読める」といった根拠を、実際の文章の位置で示します。二案の実際の理解や相談結果、固定表示は、元記録では未確認です。

図の内容を文章で読む

二つは架空の別配置下書きであり、実サイト・修正前後・改善結果ではありません。【紹介文の後に入口を置く下書き】配置の例は紹介文の後に入口を置く下書き。案内ページは事務所の定期清掃の案内LP（架空）。上から読む順序は短い紹介→相談入口→対象と作業範囲→準備する資料→相談後の案内。入口を置く場所は冒頭の短い紹介文の直後。入口の言葉は清掃の範囲を相談する。設計上の行き先は相談対象と準備する資料を確認する画面という設計上の設定。入口の近くで読める説明は短いサービス紹介のみ。作業範囲の説明の位置は対象と作業範囲の説明は入口より後に置く設計。同じ入口の繰返し案は対象と作業範囲の説明後にも同じ入口を置く案。固定する入口は未確認。実際の読者の理解は未確認。実際の相談結果は未確認。【説明を読んだ後に入口を置く別の下書き】配置の例は説明を読んだ後に入口を置く別の下書き。案内ページは事務所の定期清掃の案内LP（架空）。上から読む順序は短い紹介→対象と作業範囲→準備する資料→相談後の案内→相談入口。入口を置く場所は対象・作業範囲・準備する資料・相談後の説明の後。入口の言葉は清掃の範囲を相談する。設計上の行き先は相談対象と準備する資料を確認する画面という設計上の設定。入口の近くで読める説明は対象と作業範囲、準備する資料、相談後の案内。作業範囲の説明の位置は入口の前に説明を置く設計。同じ入口の繰返し案は未確認。固定する入口は未確認。実際の読者の理解は未確認。実際の相談結果は未確認。

共用図の原寸画像を開く

二つは別の架空配置下書きです。観測済みの公開画面や変更前後の成果ではありません。各下書きの全項目と未確認を、以下で読めます。

同じ入口を繰り返すときは、置く理由をそろえます

長い説明を読んだ後に相談したくなった人が、冒頭へ戻らず進めるように、同じ入口を置く考え方はあります。ただし、段落ごとに増やす、必ず何個置く、といった数を先に決めるものではありません。読者がどの説明を読んだ時点で次の行動を判断できるかから、候補の位置を選びます。

架空の紹介直後案では、作業範囲を説明した後にも同じ入口を置く案があります。その位置を選ぶ理由は、範囲の説明を読んだ後に、同じ相談対象へ進むためです。実際にもう一つ置かれた記録や、繰り返しによる効果を確認した記録ではありません。別の説明後案の繰返し入口は未確認で、入口が一つしかないと補いません。

同じ行動へ進む入口では、何を相談するかが途中で変わらないようにします。同じ言葉でも別のフォームや別目的の画面へ行くなら、同じ入口とは読めません。反対に、「見積」「資料」「採用」など目的の違う入口を同じ強さで並べると、選ぶべき行動が増えます。本文に必要な情報リンクと主な相談入口の役割を分けます。

制作担当へは「ここにもボタンを」とだけ伝えず、「作業範囲を読んだ人が、同じ範囲の相談へ進むため」と理由を付けます。配置案では言葉と行き先の意図をそろえ、保存後はそれぞれの実リンクから確認します。ボタンの色やクリック数だけで、この理由が満たされたとは判定しません。

固定する入口は、説明や操作を隠さないかで判断します

画面の下などに相談入口を固定すると、スクロール中も見つけやすくできる場合があります。一方で、読める領域が減り、本文の最後、補足を開いた内容、入力中の欄や操作を隠すことがあります。固定は必須の機能ではなく、このページの読み方と作業に必要かを判断する選択です。架空の二案では、固定入口の有無はどちらも未確認です。

固定を使う案は、通常のスマートフォン幅で本文を上から下まで読み、説明や図の終わりまで見えるかを確かめます。キーボードでリンクや部品を選んだときに、選んだ対象と表示される案内を読めるかも確認します。入力画面へ移る設計なら、入力中の画面でも欄や次の操作を隠していないかを別に見ます。

重なりがある場合は、どの画面・位置・部品で起きたかを残します。そのページに固定が要るのか、表示する範囲や部品を絞れるかを担当者と見直します。一つの画面で重なったことを、すべての閲覧環境の結果に広げません。この記事の制作では、顧客のLPや共通CSS、OS設定を変更していません。

NN/gの固定ヘッダーの説明も、必要性と画面を占める量、本文の遮蔽を考えるものです。ヘッダーの研究例から、すべてのLPに固定相談ボタンを付ける結論は出しません。通常配置で十分たどれる場合も含め、読者の作業を助けるかを実ページで判断します。

NN/g：固定表示の必要性と本文を隠す問題

各入口から、同じ意図の相談画面へ進めるか確かめます

配置を保存した後は、対象の公開ページをスマートフォンとPCで開きます。冒頭や説明後など、置いた各入口について、直前の説明、入口の言葉、開いた先の見出しと本文を一組で読みます。同じ相談へ案内する設計なら、同じ対象と準備資料の説明へ進めるかを、入口ごとに確かめます。

「見えた」「開いた」「送信できた」「担当へ届いた」「対象の相談だった」は別の確認です。今回の架空記録にあるのは下書きの配置と意図した行き先で、実リンク到達や送信・受付の記録ではありません。実サイトで試す場合も、確認した段階と未確認の段階を混ぜず、送信試験は決めた試験先と手順で行います。

入口のURLや開いた本文が想定と違うときは、配置の良し悪しと分けて、リンク設定と表示本文を調べます。WordPressのボタン編集や共有テンプレートを確認する方法は、リンク先が違う場合の記事で扱います。ここではリンク先の個別原因を診断したり、一括して変更したりしません。

相談件数を後で比べる場合は、期間、訪問した人、広告や案内内容などの条件も残します。配置と同時に説明や訪問者が変われば、差を配置だけの効果とは言えません。まず説明と入口が対応し、必要な操作をたどれるかを確認し、その後の実際の相談は別に評価します。

WordPressのボタンの行き先と表示本文を確認する

まとめ：相談に必要な説明と、同じ入口を結びます

LPの相談ボタンは、冒頭か末尾か、何個かという位置や数だけでは決まりません。何を相談する入口かを決め、その判断に必要な対象・範囲・準備資料・相談後の説明と対応させます。説明を読みたい人の経路を残し、説明を読んだ人が次の行動を探し直さず進める配置を考えます。

同じ入口を繰り返すなら、その場所の説明と置く理由をそろえます。固定表示は任意で、本文や選んだ部品、入力中の操作を隠さないかを確かめます。別の配置案を勝者や修正後にせず、実際の理解・相談・受付の未確認も残します。

最初の作業は、自社LPの相談入口を一つ選び、その直前で読める説明を書き出すことです。相談対象、作業範囲、準備資料、次の案内のうち不足するものを確認し、「どの説明の後に、何の相談入口を置くか」を文章にします。その案をスマートフォンとPCで読み、各入口から行き先の本文まで確かめてください。