タグ: UI改善

スマホでLPを見ていると、画面下に「無料相談」「お問い合わせ」と書かれたボタンが追従してくることがあります。

いつでも押せるため便利に見えますが、設置しただけで問い合わせが増えるとは限りません。

• ボタンが本文を隠している
• 「お問い合わせ」だけでは、押した後が分からない
• 押すと長いフォームの先頭へ移動する
• 電話、LINE、フォームの3つが並び、選べない
• Cookie通知やチャットボタンと重なっている
• CTAクリックだけ増え、送信は増えていない

このような状態では、追従CTAが相談の入口ではなく、画面を狭くする固定パーツになってしまいます。

結論から言うと、スマホLPの追従CTAは「いつでも押せるボタン」ではなく、「読者が相談しようと思った瞬間に、次の行動を迷わず選べる入口」として設計します。

この記事では、小規模サービスや個人事業のLPを想定し、追従CTAを置くかどうか、何を表示するか、押した後をどうつなぐか、どこまで計測するかを整理します。

追従CTAが必要かは、ボタンの色より先に決める

追従CTAの改善というと、赤、オレンジ、緑などの色や、ボタンの大きさから考えがちです。

しかし、最初に決めるのはデザインではありません。

次の3点です。

1. 誰がスマホでLPを見るのか
2. その人はどの時点で何を確認したいのか
3. LPを読んだ後、最初に取ってほしい行動は何か

たとえば、初回相談に予約が必要なサービスなら「相談日時を選ぶ」が主な行動になります。見積もり前に要件確認が必要なら「制作について相談する」の方が自然です。

一方、営業時間中の緊急対応が中心なら、電話ボタンが優先される場合もあります。

追従CTAを置くこと自体を目的にせず、スマホ利用者が次に進むための行動を先に決めます。

追従CTAが向いているLP

追従CTAは、次のようなLPで使いやすい傾向があります。

• ページが長く、CTAまで戻る手間が大きい
• サービス内容を読んでいる途中で相談したくなる
• 主な行動が1つに絞られている
• スマホからの閲覧が多い
• 問い合わせ、予約、見積もり相談など、押した後の流れが明確
• CTAの遷移先がスマホでも使いやすい

反対に、次のような状態では、追従CTAを追加する前に導線を整理した方がよい場合があります。

• 電話、LINE、フォーム、予約、資料請求が同じ強さで並んでいる
• 問い合わせ前に必ず読んでほしい条件が整理されていない
• 押した先のフォームが長く、スマホで入力しにくい
• CTAごとに文言や遷移先がばらばら
• 画面下にチャット、Cookie通知、共有ボタンがすでにある

入口だけ強くしても、押した後で迷えば相談にはつながりません。

最初に「主CTA」を1つ決める

スマホ画面は狭いため、複数のボタンを並べるほど選びやすくなるとは限りません。

まず、最も取ってほしい行動を主CTAとして1つ決めます。

サービスの状態	主CTAの例	補助導線の例
要件を聞いてから見積もる	制作について相談する	料金目安を見る
相談日時を先に決める	相談日時を選ぶ	相談内容を確認する
資料を見てから検討してほしい	サービス資料を見る	個別に相談する
緊急性が高い	電話で確認する	フォームで問い合わせる
相談内容の分類が必要	相談フォームへ進む	よくある質問を見る

補助導線が必要でも、追従領域には主CTAだけを置き、他の選択肢は本文やフォーム付近へ分ける方法があります。

「選べる数を増やす」より、「今押すべき入口を分かりやすくする」ことを優先します。

ボタン文言は押した後の行動まで伝える

「お問い合わせ」「詳しくはこちら」「無料相談」だけでは、押した後に何が起きるか分かりにくい場合があります。

特にスマホでは、ボタンの周囲に説明文を置ける余白が少ないため、短い文言の中で行動を具体化します。

曖昧になりやすい文言

• お問い合わせ
• 詳しくはこちら
• 今すぐ
• 申し込む
• 無料相談

行動が分かりやすい文言

• LP制作について相談する
• 自動化できるか相談する
• 相談日時を選ぶ
• 見積もり条件を送る
• 料金と進め方を確認する

長すぎる文言は読みにくくなるため、すべてをボタン内へ詰め込む必要はありません。

たとえば、ボタンの上に短い補足を置きます。

相談内容が固まっていなくても大丈夫です

ボタン:

LP制作について相談する

このように、「押す不安を減らす補足」と「押した後の行動」を分けると整理しやすくなります。

CTAはページ内の検討段階に合わせて置く

追従CTAがあっても、本文中のCTAが不要になるわけではありません。

読者は、ページのどこにいるかによって確認したいことが変わります。

ファーストビュー

何のサービスか理解した直後の入口です。

ここでは、対象者と提供価値がまだ伝わっていない状態で強い申込みを求めないようにします。相談型サービスなら、「相談する」「進め方を見る」など、検討段階に合う表現が使いやすくなります。

サービス内容の後

できることを理解した後です。

「この内容について相談する」「対応範囲を確認する」など、直前の説明とつながるCTAを置きます。

料金・納期の後

条件を確認した後です。

「条件を伝えて概算を相談する」「希望納期を送る」など、見積もりに必要な次の行動を示します。

FAQの後

不安を解消した後です。

「まだ決まっていない点を相談する」のように、FAQで解決しなかった疑問を送れる入口にします。

追従CTA

ページのどこでも使える共通入口です。

特定セクションの文脈に寄せすぎず、LP全体を通じた主行動を表示します。

本文中のCTAはその場所の文脈に合わせ、追従CTAは共通の主行動にする。この役割分担があると、同じボタンを繰り返すだけのページになりにくくなります。

追従CTAを邪魔にしない表示ルール

追従CTAは画面上に固定されるため、通常のボタンよりも表示確認が重要です。

最低限、次を確認します。

• 本文の最終行や表の下部を隠さない
• Cookie通知と重ならない
• チャットボタンやページ上部へ戻るボタンと重ならない
• スマホ下部の安全領域を考慮する
• 横向き表示で画面を占領しすぎない
• フォーム入力中にキーボードと重ならない
• モーダルやメニューを開いたときに前面へ残らない
• エラーメッセージや送信完了表示を隠さない

固定領域には、ボタン以外の情報を詰め込みすぎないことも重要です。

電話番号、営業時間、補足文、アイコン、2つのボタンをすべて入れると、本文を読む領域が狭くなります。

追従CTAの役割は、説明することではなく、次の行動を選びやすくすることです。

常時表示ではなく、表示開始と停止を決める

ページを開いた瞬間から追従CTAを出す方法もありますが、すべてのLPに向いているわけではありません。

ファーストビューのCTAと重複して画面が窮屈になる場合は、読者が少しスクロールした後に表示する方法があります。

また、フォームまで到達した後も固定CTAが残ると、入力欄や送信ボタンの邪魔になる場合があります。

表示ルールの例:

• ファーストビューを通過したら表示する
• 本文を一定量読んだら表示する
• 問い合わせフォームに到達したら非表示にする
• メニュー、モーダル、Cookie通知の表示中は隠す
• 送信完了ページでは表示しない

表示開始と停止を決めると、CTAを目立たせながら、必要な操作を邪魔しにくくなります。

押した先を最短にする

追従CTAを押した後の遷移先は、ボタン文言と一致させます。

「相談日時を選ぶ」と書かれているのに、サービス一覧の先頭へ移動すると、利用者はもう一度入口を探すことになります。

「LP制作について相談する」と書かれているなら、問い合わせフォームで相談種別が選ばれている、またはLP制作向けの入力項目がすぐ見える状態が理想です。

遷移先で確認したいこと:

• ボタン文言と遷移先の見出しが一致しているか
• ページ内リンクの移動先がずれていないか
• 固定ヘッダーで見出しが隠れていないか
• フォームの必須項目が多すぎないか
• スマホの入力方式が項目に合っているか
• 送信後に受付完了が分かるか
• 自動返信や次の連絡目安が示されているか

CTAはクリックで終わりではありません。押した後に迷わず完了できるかまでを導線として扱います。

電話・フォーム・予約を同じ強さで並べない

スマホLPでは、電話、フォーム、予約、LINEなど複数の連絡方法を用意したくなることがあります。

しかし、すべてを追従CTAへ並べると、どれを選ぶべきか利用者に判断させることになります。

連絡方法ごとに役割を分けます。

連絡方法	向いている状況	事前に伝えること
フォーム	内容を整理して確認したい	返信目安、必要項目
予約	初回相談の枠が決まっている	所要時間、相談方法
電話	緊急性があり、受付時間が明確	受付時間、対応できる内容
メール	添付資料や詳細説明が必要	返信先、必要情報

主CTAは最も標準的な相談方法にし、例外的な連絡方法は本文で案内する方が、入口を整理しやすくなります。

CTAクリックだけを成果にしない

追従CTAを設置した後、クリック数だけを見て「改善した」と判断すると、実際の問い合わせ増加とずれることがあります。

次の段階を分けて確認します。

1. CTAが表示された
2. CTAがクリックされた
3. フォームへ到達した
4. 入力を始めた
5. 送信処理を実行した
6. 送信が成功した
7. 管理画面やメールに受付記録が残った

追従CTAだけでなく、ファーストビュー、料金表の後、FAQの後など、設置場所も分けて記録すると、どの文脈で相談意欲が高まったかを見やすくなります。

たとえば、計測項目として次を持ちます。

• cta_location: sticky、first_view、pricing、faq
• cta_label: ボタン文言
• destination: form、booking、phone
• page_path: CTAが押されたページ

ただし、イベント名やパラメータを増やすだけでは改善できません。

「クリックは増えたが入力開始が増えない」なら遷移先やフォームを確認します。「入力開始は増えたが送信成功が増えない」なら必須項目、エラー、送信処理を確認します。

実機確認で見るポイント

制作画面のスマホプレビューだけでは、実際のブラウザUIやキーボードとの重なりを見落とすことがあります。

公開前には、少なくとも複数の画面幅と実機で確認します。

確認項目:

• 親指で押しやすい位置か
• ボタン内の文字が改行していないか
• 長いページ名やブラウザバー表示時でも崩れないか
• 縦向き、横向きの両方で本文を隠さないか
• フォーム入力時に固定CTAが邪魔にならないか
• Cookie通知、チャット、共有ボタンと重ならないか
• ページ内リンク後の見出しが固定ヘッダーで隠れないか
• 読み上げやキーボード操作でも意味が分かるラベルか
• ボタンを連打しても二重遷移や二重送信が起きないか
• 通信が遅いときに押せたか分かるか

特に、画面下に固定する要素が複数ある場合は、個別に正常でも同時表示で崩れることがあります。

「CTA単体」ではなく、「実際のページ上で他の固定要素と同時に表示した状態」を確認します。

小規模サービス向けのCTA例

YOSHIO.devのサービス領域に近い例で考えると、次のように整理できます。

LP制作

補足:

既存LPの一部改善から相談できます

主CTA:

LP制作について相談する

業務自動化

補足:

自動化できるか未確定でも大丈夫です

主CTA:

減らしたい作業を相談する

小型ツール開発

補足:

Excelやスプレッドシートの現状から確認します

主CTA:

作りたいツールを相談する

ローカルLLM・RAG

補足:

対象文書や利用人数が未整理でも相談できます

主CTA:

RAGの導入条件を相談する

同じ「お問い合わせ」でも、サービスごとに利用者が伝えたい内容は異なります。

サービスページの主題に合わせて文言とフォーム項目をつなげると、問い合わせ時の説明負担も減らしやすくなります。

追従CTAの導入前チェックリスト

• 主な行動を1つに決めた
• CTAの対象者を説明できる
• ボタン文言から押した後の行動が分かる
• 補助導線を追従領域へ詰め込みすぎていない
• ファーストビューと追従CTAの役割を分けた
• 本文中のCTAは直前の内容とつながっている
• 表示開始と停止の条件を決めた
• フォーム到達後は邪魔にならない
• Cookie通知やチャットと重ならない
• 遷移先の見出しとボタン文言が一致している
• CTAクリックと送信成功を分けて計測できる
• 設置場所ごとのクリックを区別できる
• 実機で縦向き、横向き、フォーム入力を確認した
• 低速通信や連打時の挙動を確認した
• CTAを外した状態とも比較できる

まずは1ページ、1行動から見直す

スマホLPの追従CTAは、目立つ色のボタンを画面下へ固定するだけの機能ではありません。

誰に、どの行動を取ってほしいかを決め、ボタン文言、表示位置、表示条件、遷移先、フォーム、計測までを一続きで設計する必要があります。

最初から複数のCTAや複雑な出し分けを作る必要はありません。

まずは1つのLPで、主CTAを1つに絞ります。そのうえで、追従CTAのクリック、フォーム到達、入力開始、送信成功を確認します。

クリックされない場合は文言や表示位置を見直します。クリックされても送信されない場合は、遷移先やフォームを見直します。

このように段階を分けると、LP全体を作り直さなくても、問い合わせ導線のどこを改善すべきか判断しやすくなります。

関連リンク

• LP制作の相談
• CTA以外も含めて問い合わせ導線を確認する
• 問い合わせ計測の段階とGA4設定を確認する
• ファーストビューの見出しとCTAを見直す
• 料金・納期・対応範囲の見せ方を整理する

FAQ