LPのボタンは置き場所と数で決まる｜文言とデザインの整え方

「ボタンをもっと目立つ色にすれば、問い合わせは増えるはず」。公開後のLPについて相談を受けるとき、この言葉は本当によく出てきます。デザインツールのテンプレートでは、ボタンは色と角丸をあとから選ぶ部品として並んでいます。押されない原因も見た目の側にあると考えるのは、自然な流れでしょう。

しかし、LPや記事の原稿と構成を数多く手がけてきた弊社の立場から言えるのは、結果を分けるのは見た目より、どこに何回置くかだという点です。読者が「申し込んでもいい」と考える位置は、ページの下端には揃っていません。納得した瞬間に視界へボタンがなければ、読者はそのまま下へ流れていくでしょう。

本記事では、LPのボタンをサイト内の他のボタンと分けて考える理由から、置き場所と数の決め方、文言とデザインの整え方、押されないときに直す順番までを、原稿と構成を作る側の視点で順にお伝えします。

LPのボタンが記事のボタンと違う3つの前提

LPのボタンは、コーポレートサイトやオウンドメディアに置くボタンと同じ部品に見えます。実際に作られるものも同じ、リンクの付いた四角形です。それでも設計の判断が変わるのは、LPというページが置かれている条件のほうが違うからです。

ボタンを押さなかった読者の行き先

記事ページでボタンを押さずに読み終えた人には、まだ回収の機会が残っています。関連記事へ進む、サービス一覧を開く、後日また検索から戻ってくる。LPには、その通路がありません。ヘッダーのグローバルナビゲーションを外して作るのが一般的で、読者に用意された分岐は、押すか閉じるかの2つだけです。

だからLPでは、1回の訪問のなかでボタンに触れる機会を何度作れるかが、そのまま結果に効いてきます。同じ「押されなかった」でも、失っているものの大きさが記事とは違うわけです。

広告の言葉を持ったまま着地する読者

LPへの流入は、検索結果からの自然流入だけではありません。リスティング広告の見出し、SNS広告のクリエイティブ、メールの一文。読者はそこに書かれていた言葉に反応してクリックし、期待を持ったまま着地します。

ここで、広告では「無料の資料」と伝えていたのに、LPのボタンには「お問い合わせ」と書かれている。この段差は、色を変えても大きさを変えても埋まりません。検索から入ってくる記事コンテンツではあまり起きない、LP特有の噛み合わせの問題です。

読者が決断する位置のばらつき

LPは1本の縦長ページに、課題の提示、実績、機能、価格、よくある質問までを積み上げます。すでに他社と比較している読者は価格を見た時点で決まりますが、情報を集めている段階の読者は事例を読み終えるまで決まりません。

つまり、読者が決断する位置は1か所に定まりません。ボタンを末尾に1つだけ置く設計は、この幅を無視していることになります。

経営者

制作会社に依頼したLPで、ボタンは最後に1つだけ置く形になっています。途中にも増やしたいと伝えたら、しつこく見えるので勧めないと言われました。どちらが正しいのでしょうか。

Writers-hub
編集部

行き先が同じボタンであれば、途中に置いてもしつこさにはつながりません。読者が煩わしく感じるのは、行き先の違うボタンが並んで選択を迫られるときです。価格やよくある質問を読み終えた直後など、納得が一段上がる位置に同じボタンを置く形なら、押す機会が増えるだけで判断の負担は変わりません。

関連記事：コンテンツマーケティングの基礎知識を総まとめ｜やり方から成果につなげる方法まで徹底解説

LPのボタンを置く位置と数の決め方

置き場所を決める作業は、デザインに入る前に終わらせられます。必要なのは、LPのセクションを上から並べ、それぞれを読み終えた読者がどこまで納得しているかを書き出すことだけです。

セクションごとの納得度の書き出し方

構成が決まっているなら、上から順に紙へ書き出してみてください。ファーストビュー、課題の提示、解決策、事例や実績、機能や内容、価格、よくある質問、最後の後押し。それぞれの右側に、そこまで読んだ読者が何を納得したのかを一言で添えます。

価格の直後なら「費用の見当がついた」、事例の直後なら「自分に近い立場の会社が使っていると分かった」。並べてみると、納得が一段上がる場所と、読んでも状態が変わらない場所がはっきり分かれます。ボタンを置くのは、納得が一段上がった直後だけで足ります。

ボタンを置く位置とそれぞれの役割

LPの型は商材で変わりますが、納得が上がりやすい位置には共通点があります。役割まで含めて整理すると、次のようになります。

5か所すべてに置く必要はありません。実務では、ファーストビューと、事例か価格のどちらか一方、そして末尾の3か所から始めると扱いやすいでしょう。短いLPで納得の段が2つしかないなら、ボタンも2つで足ります。数の正解はページの長さではなく、納得が上がる回数のほうで決まります。

逆に、避けたい置き方も整理しておきます。

• ページの末尾にだけ1つ置き、途中には一切置かない
• 資料請求と無料相談と購入など、行き先の違うボタンを横に並べる
• 説明が途中のセクションの真ん中に差し込む
• 同じ画面のなかに複数のボタンが同時に見える間隔で置く

位置ごとに文言を書き分けるときの線引き

ファーストビューのボタンと末尾のボタンでは、読者の温度が違います。同じ行き先でも、ファーストビューでは迷いなく決めた人に向けて短く言い切り、末尾では「ここまでの内容で気になる点を相談する」のように、読んできた内容を受けた言い方に変えられます。

ただし、行き先は1つに揃えてください。文言を変えるのは読者の温度に合わせるためであり、選択肢を増やすためではありません。この線引きを曖昧にしたまま行き先を分けると、読者に比較と選択の作業が発生し、そこで手が止まります。

関連記事：CTAボタンのデザイン｜色・サイズ・動きの決め方と置き場所の選び方

LPのボタンの文言と広告の言葉のそろえ方

置き場所が決まったら、次はボタンに入れる言葉です。LPの文言づくりが記事のCTAと違うのは、出発点が自社の言い回しではなく、読者がクリックした広告の側にある点にあります。

広告の見出しとボタンの言葉の並べ方

出稿している広告の見出しと説明文を書き出し、その横にLPのファーストビューの見出しと、ボタンの文言を並べてみてください。3つが同じ約束を指しているかを見るだけの作業ですが、ずれが見つかることは珍しくありません。

広告で「料金表を無料でダウンロード」と伝えているなら、ボタンも「料金表をダウンロード」。ここで「お問い合わせはこちら」に変わると、読者は求めていたものが手に入るのかどうかを判断できなくなります。読者は広告で見た言葉を、そのままボタンの上に探しています。

読者が払うコストに合わせた動詞の重さ

ボタンの動詞には重さがあります。「見る」「ダウンロードする」は軽く、「申し込む」「購入する」は重い。読者がその時点で払ってもよいと思っているコストより重い動詞を置くと、指が止まります。

LPで扱いを間違えやすいのは、ファーストビューのボタンです。着地した直後の読者は、まだページの内容をほとんど読んでいません。ここに末尾と同じ重い動詞を置くと、決めている一部の読者にしか働かない。ページ上部は軽い動詞、下部は読んできた分の重さを受けた動詞、という配分が現実的でしょう。

ボタンの下の一文で先に伝えること

ボタンの直下に添える小さな補足は、マイクロコピーと呼ばれます。ここに書くのは、読者が押す前に確かめたいことだけです。LPは広告費をかけて連れてきた読者が相手ですから、確かめられずに閉じられた分は、そのまま費用として消えます。

• 入力にかかる時間、または入力項目の数
• 押した直後に表示される画面がフォームなのか、資料がすぐ開くのか
• 営業連絡の有無と、連絡が来る場合のタイミング
• 費用が発生するかどうか

4つすべてを書く必要はありません。自社の問い合わせで実際によく聞かれる内容から、上位2つを選べば足ります。何が気にされているか分からない場合は、営業担当に「初回の連絡でよく聞かれること」を尋ねるのが早い方法です。

関連記事：CTAボタンとは｜文言とデザインの決め方、色を変えても数字が動かないときの見直し方

LPのボタンのデザインで迷わない数値の目安

色や大きさの議論は、社内で意見が割れやすい領域です。好みの問題に見えるためですが、最低限の線は数値で引けます。ここを先に共有しておくと、レビューが感覚のぶつかり合いになりにくくなります。

寸法とコントラストの下限

押せる大きさと見分けやすさには、公開されている基準があります。数値で示せるため、社外の制作会社とのやり取りでも指示として使えます。

• ターゲットの寸法は24×24CSSピクセル以上（WCAG 2.2 達成基準2.5.8）
• ボタンと背景の色の差は3対1以上（同 達成基準1.4.11）
• ボタン内の文字と背景の色の差は4.5対1以上、大きな文字は3対1以上（同 達成基準1.4.3）
• スマートフォンでは、指で押す領域をさらに広く取る（Appleは44×44ポイント、Googleのマテリアルデザインは48×48dpを目安として示している）

※ 出典: Web Content Accessibility Guidelines（WCAG）2.2 達成基準2.5.8「ターゲットのサイズ（最小）」、達成基準1.4.11「非テキストのコントラスト」、達成基準1.4.3「コントラスト（最低限）」

Web Content Accessibility Guidelines (WCAG) 2.2 (日本語訳)

Web Content Accessibility Guidelines (WCAG) 2.2 は、ウェブコンテンツをよりアクセシブルにするための広範囲に及ぶ推奨事項を網羅している。このガイドラインに従うことで、全盲又はロービジョン、ろう又は難聴、運動制限、発話困難、光感受性発作及びこれらの組合せ、並びに学習障害及び認知限界への一部の適応を含んだ、様々な障害のある人に対して、コンテンツをアクセシブルにすることができる。しかし、これらの障害のある人に対するあらゆる利用者のニーズに対処するものではない。このガイドラインは、あらゆる種類のデバイス (デスクトップ、ラップトップ、キオスク、及びモバイルデバイスを含む) におけるウェブコンテンツのアクセシビリティを扱う。このガイドラインに従うことは、一般にウェブコンテンツが利用者にとってより使いやすいものにもなる。

🌐 waic.jp

外部リンク

数値を満たしていても、押せると分かる記号が消えていれば意味がありません。影、角丸の枠線、周囲と切り離された背景色。装飾を削ぎ落とした設計を進めた結果、見出しの帯とボタンが同じ形になっているLPは、実際にしばしば見かけます。

色は目立たせる前にページ全体から引く

ボタンの色を決める作業は、候補の色を並べて選ぶことではありません。先にやるべきなのは、そのページの他の要素で同じ色を使っていないかを確かめることです。見出しにも、アイコンにも、罫線にも同じ色が入っていると、読者はボタンだけを目で見つけられなくなります。

LPはデザインの自由度が高いぶん、装飾の強いページになりがちです。背景に色を敷き、帯を重ね、強調を増やしていくと、ボタンを目立たせる余地が残りません。ボタンを目立たせる作業は、ボタン以外を落ち着かせる作業でもあります。

スマートフォンの追従ボタンの扱い方

広告からLPへ流入する読者は、スマートフォンで見ている割合が高くなります。そこで画面下部に固定表示する追従ボタンを検討することになりますが、付ければ数字が上がる部品ではありません。

追従ボタンが働くのは、縦に長く、読者が決断する位置がばらつくLPです。逆に、条件が合わないページでは本文を狭めるだけの存在になります。

条件を満たしているかどうかは、実機で確かめるのが確実です。手元のスマートフォンでLPを開き、価格表とフォームの位置までスクロールして、固定ボタンが何の上に重なるかを見てください。パソコンの画面を縮めた確認では、指の位置も画面の高さも実際とは違います。

実装の面では、区間ごとに表示を切り替えるのが扱いやすい方法です。本文を読み進めている間は表示し、価格表とフォームの区間では消す。この切り替えを入れておくと、追従ボタンを付けるか外すかという二択の議論そのものが不要になります。

押されないLPのボタンを直す順番

公開したLPで数字が動かないとき、手を付ける順番を間違えると、原因が分からないまま作業だけが増えていきます。上流から順に確認するほうが、結果として早く終わります。

変更するときは、1回に1か所だけにしてください。色と文言と位置を同時に動かすと、数字が変わっても理由が分かりません。変更した内容と日付を記録に残しておけば、半年後に「なぜこの形になったのか」を説明できる状態が保てます。

判断を急がないことも大切です。月に数十件しかクリックのないLPで、変更の前後に数件の差が出たとしても、それが施策の効果なのか週ごとのばらつきなのかは分かりません。日数で区切らず、集まったクリック数で判断してください。

まとめ｜LPのボタンは作り込みより置き場所

LPのボタンで結果を分けるのは、1個の完成度より、ページ全体のどこに何回置くかという判断です。セクションを上から並べ、読者の納得が一段上がる位置を書き出し、その直後に同じ行き先のボタンを置く。決める順番はここから始まります。

文言は自社の言い回しではなく、読者がクリックした広告の言葉から決めます。デザインは、寸法とコントラストの下限を数値で押さえたうえで、ボタン以外を落ち着かせる方向で整える。スマートフォンの追従ボタンは、区間ごとに表示を切り替える前提なら扱いやすい部品になります。

そして、最も手間がかかるのはボタンの中ではなく、その手前の文章です。合同会社Writers-hubが引き受けているのは、記事コンテンツの制作を軸に、読者が納得する順番で文章を組み立て、その読み終わりに置く一文とボタンの文言までを続きとして設計する仕事です。いまの原稿のどこで読者の納得が途切れているかを見るところから、ご相談いただけます。