LPで効果的なボタン(CTA)デザインとは？【CVRを高める方法や具体的な改善方法を解説】

LPのボタン(CTA)がクリックされず、思うように成果が出ないと悩んでいませんか？LPで成果を出すにはボタンデザインを改善すると効果的です。ユーザーをLPに誘導できたとしても、ボタンデザインが魅力的でなければクリックされません。

この記事ではLPのボタンデザインの基本や効果的にデザインする方法、ボタンデザインを改善する方法について解説します。記事を読めば成果につながるボタンデザインの作り方がわかるため、LPのCVRを高められます。LPのボタンデザインを改善して成果を出すには、A/Bテストを繰り返して最適化することが大切です。

目次

• LPのボタン(CTA)の基本知識
• LPのボタン(CTA)デザインの要素
• LPで効果的なボタン(CTA)をデザインする方法
• LPのCVRを高めるボタン(CTA)の色
• LPのボタン(CTA)を実装する手法
• LPのボタン(CTA)を改善する方法
• LPのボタン(CTA)デザインでよくある失敗
• LPのボタン(CTA)デザインに関するよくある質問
• まとめ

LPのボタンのデザインに関する基礎知識を以下で解説します。

LPのボタンとは、Webサイトに訪れた人に特定の行動を取ってもらうよう促すボタンです。LPのボタンは「CTAボタン(Call To Actionボタン)」と呼ばれる場合もあります。資料請求や商品の購入などの目的を達成するために、LPのボタンは不可欠な要素です。

「資料請求はこちら」などのテキストがボタンに記載されており、クリックすると申し込みフォームや決済画面に進みます。ボタンのわかりやすさが、LPの成果に大きく影響します。

LPのボタンの役割は、ユーザーに特定の行動を取ってもらうことです。適切な位置にボタンを配置すれば、LP全体のCVRが高まります。ユーザーがLPを見て「次に何をすればいいのかな？」と迷わないように、ボタンで次のステップを示します。分かりやすいボタンは、コンバージョンにつながる重要な要素の一つです。

ユーザーがLPを見て商品の購入に迷ったときに、ボタンが気持ちを後押しして行動のハードルを下げる役割もあります。

LPのボタンを構成する要素は以下のとおりです。

LPのボタンは、ユーザーがクリックしやすい形とサイズに設定する必要があります。ボタンのクリックしやすさは、サイト全体の印象に大きく関わります。LPによく使われているボタンは、角が丸いボタンや四角いボタンです。角が丸いボタンはユーザーに親しみやすい印象を与えるため、クリックされやすい傾向にあります。

四角いボタンは、信頼感や安定感のある印象をユーザーに与えます。LPのボタンのサイズはユーザーが簡単に見つけられる大きさに設定しましょう。ただし、LPのボタンのサイズが大きすぎると、他の内容の邪魔になってしまいます。LPのボタンのサイズが小さすぎると、ユーザーが見つけにくかったり押し間違えたりします。

ボタンの配色と色のコントラストを工夫すれば、LPに訪れたユーザーの目を引きクリック率を高められます。LPのボタンの配色にはユーザーの気持ちや行動に影響を与える力があります。

LPのボタンの配色と色のコントラストを設定する際に意識するべきポイントは以下のとおりです。

• ・背景とボタンの色を明確に区別する
• ・見つかりやすい配色を意識する
• ・商品のイメージと視認性を両立させた色にする
• ・行動を喚起できる色を使う
• ・色の数を減らして統一感を出す

ボタンの配色と色のコントラストに気を配れば、LPの効果を最大限に引き出しCVR改善に役立ちます。

LPのボタンに記載するテキストは、ユーザーが見やすいフォントに統一しましょう。ユーザーがすぐに理解できるフォントを使えば、LPのボタンに記載したメッセージが正確に伝わります。読みにくいフォントや小さすぎる文字でメッセージが書かれたボタンは、ユーザーにストレスを与えクリック率を低下させます。

LP全体の雰囲気やブランドイメージに合ったフォントをボタンに使うことも、統一感を出すために重要です。ゴシック体は一般的に視認性が高く、多くの場合ユーザーにとって見やすいボタンを作成可能です。飾り文字のような装飾が多すぎるフォントは、情報量が多くなるためLPのボタンには適していません。

ラベリングとはボタンの中に書くテキストのことです。ラベリングはLPでユーザーに何をしてほしいのかを、はっきりと伝える役割があります。曖昧なラベリングだと、ユーザーがLPのボタンのクリックをためらってしまう可能性があります。

LPでクリックされやすいラベリングを作る際のポイントは以下のとおりです。

• ・具体的な行動を示す
• ・緊急性を示す
• ・メリットを提示する
• ・ターゲットを明確にする
• ・数字を活用する
• ・わかりやすい言葉で伝える

LPのボタンのラベリングには「資料請求する」「無料で試す」のように具体的な行動を示すと効果的です。LPでは「今すぐ申し込む」といった緊急性を促す言葉もボタンのラベリングに効果的です。商品の購入が不安な人向けのLPなら「まずは相談」といったラベリングも考えられます。

マイクロコピーはボタンの周りに書かれる短い文章のことです。マイクロコピーにはユーザーがボタンを押すかどうか迷っているときに、背中を押してあげる役割があります。ボタンのラベリングだけでは伝えきれない商品の情報を、マイクロコピーで補足できます。

マイクロコピーには「今なら50%OFF」「交換保証付き」など、メリットを提示したり不安を解消したりする言葉が有効です。マイクロコピーをLPのボタンの近くに配置すれば、効果的にユーザーの行動を促せます。

LPのボタンにアイコンやイラストの要素を加えると、文字だけでは伝わりにくい情報をユーザーにわかりやすく表現できます。LPのボタンにおすすめのアイコンは以下のとおりです。

• ・矢印アイコン
• ・ダウンロードアイコン
• ・買い物かごアイコン
• ・注目アイコン

LPのボタンにアイコンやイラストを設定する際は、ラベリングの大きさとアイコンのバランスを考える必要があります。LPでは商品のイメージに合ったアイコンやイラストを選び、シンプルで見やすいボタンデザインを心がけましょう。

LPで効果的なボタンをデザインする方法は以下のとおりです。

LPのボタンをどこに配置するかによって、CVRに大きな差が出ます。ユーザーが自然とクリックしてしまう位置にLPのボタンを配置する必要があります。LPにボタンを配置する際におすすめの場所は以下のとおりです。

• ・ページを開いて最初に目に入る場所
• ・コンテンツの区切りや説明が終わった直後
• ・ユーザーがページを読むときの自然な目の動きを意識した場所
• ・ユーザーにとって重要な情報やメリットを伝えた直後

ボタンの周りに十分なスペースを確保しておけば、LP内での視認性が上がります。LPにボタンが複数ある場合は、クリックしてほしいボタンのデザインや配置を工夫して目立たせましょう。スマホでLPを見るユーザーを意識する場合、タップしやすい画面下の部分にボタンを配置すると効果的です。

LPのボタンデザインとWebサイト全体のデザインに一貫性がないと、ユーザーは混乱して目的の行動を取らずに離脱します。ボタンデザインとWebサイトの一貫性を保つ方法は以下のとおりです。

LPのボタンデザインは、スマホでの使いやすさを最優先に考える必要があります。現代は多くの人がパソコンではなくスマホからインターネットを利用するからです。LPのボタンは指でタップしやすいように、適切な大きさにする必要があります。ボタンの押し間違いを防ぐため、LPの他の要素とは間隔を空けておきましょう。

LPのボタンのラベリングはスマホの画面でも見やすいように、16ピクセル以上の大きさで作ります。スクロールしてもボタンが画面の下部に表示される「フローティングボタン」も、スマホでLPを表示させる際に効果的です。

LPのボタンデザインにユーザー心理を考慮した工夫を取り入れれば、クリック率を高められます。ボタンやマイクロコピーに以下の言葉を使うと、ユーザーの気持ちを動かしやすくなります。

• ・緊急性を伝える言葉：「期間限定」「今すぐ」
• ・希少性をアピールする言葉：「残り〇名様」「限定オファー」
• ・安心感を示す言葉：「〇〇人が利用中」「満足度No.1」
• ・信頼できる情報源を示す言葉：「専門家推奨」「〇〇受賞」
• ・行動への抵抗感を下げる言葉：「簡単登録」「まずは資料請求」「無料トライアル」
• ・不安を取り除く言葉：「いつでも解約可能」「全額返金保証」

ユーザーの心理を考えて言葉を選ぶことで、LPで自然とクリックしたくなるボタンを作れます。

以下のボタンの色について、LPのCVRを高める使い方と効果を解説します。

レッド系のボタンはユーザーの注意を強く引きつけ、すぐに行動を促したい場面で役立ちます。レッド系のボタンには人の気持ちを高ぶらせる効果があります。LPでは「期間限定セール」や「今だけの特別オファー」など、時間制限を伝えたいときにレッド系のボタンが効果的です。

ただし、レッド系のボタンを使いすぎるとユーザーに圧迫感を与えるリスクもあるため、使う場面を制限する必要があります。サイト全体のデザインや伝えたいイメージに合わせて、強調したい場所にだけレッド系のボタンを使いましょう。

ブルー系のボタンはユーザーに信頼感や安心感を与える効果があります。ブルー系のボタンは誠実さや冷静さ、知的なイメージを与えるため、多くのWebサイトで採用されています。ユーザーにとってなじみ深いため「クリックできるボタン」として認識されやすい点も、ブルー系のボタンのメリットです。

LPでは「詳しくはこちら」「資料請求」など、ユーザーに信頼感や安心感を与えたい場面でブルー系のボタンが使用されます。ブルー系のボタンはレッド系のボタンと比べて、ユーザーに行動を強く促す力はありません。ブルー系のボタンを使う際は背景の色に溶けこまないよう、色の組み合わせを工夫しましょう。

グリーン系のボタンは木や草花といった自然をイメージさせ、ユーザーの気持ちを落ち着かせる力があります。グリーン系のボタンは、ユーザーに安心感や信頼感を与える効果も期待できます。「ボタンを押しても危険はない」といった、前向きなメッセージをユーザーに伝えたい場面でグリーン系のボタンは有効です。

グリーン系のボタンは、以下のようなジャンルのLPやサービスを紹介するページでよく見られる傾向があります。

• ・環境配慮製品
• ・健康食品・飲料
• ・自然由来の商品
• ・オーガニック製品
• ・リラクゼーションサービス

明るいグリーンのボタンはユーザーに行動を促す効果が期待できます。濃い緑色のボタンは、落ち着いた印象を与え、安定感を演出するのに役立つと考えられています。

イエロー系のボタンはユーザーの注目を集め、明るく前向きな印象を与えるために使われます。イエロー系のボタンは警告を示したい場面で使われる場合もあります。LPでは親しみやすさや楽しさを表現したいときにも、イエロー系のボタンが効果的です。

子ども向け商品を扱うサイトやイベントを告知するページでイエロー系のボタンを使うと、親しみやすい雰囲気を演出できます。イエロー系のボタンは「今だけの特別セール！」「限定オファー！」などの言葉と一緒に使うと、緊急性や限定感を高められます。

イエロー系のボタンを多用するとページ全体が安っぽく見えるため、LPでは使う頻度や場所を工夫しましょう。

ゴールド系のボタンは、高級感や特別感を演出したいときに役立ちます。ゴールド系のボタンは豊かさや成功といったイメージがあるため、高価な商品や特別なサービスを紹介する際に多く使われます。LPでゴールド系のボタンを有効に使える場面は以下のとおりです。

• ・高額商品の購入時
• ・特別キャンペーンや先行販売申込時
• ・特別プログラムへの参加時
• ・希少性を訴求するタイミング

ゴールド系のボタンは適切に使用すればユーザーに高級感や特別感を抱かせ、LPでのクリック率向上に貢献する可能性があります。ただし周りの色との組み合わせを工夫しないとLPが安っぽく見える可能性があるため、ゴールド系のボタンの使用には注意が必要です。

LPのボタンデザインを実装する手法に関して、以下の内容を解説します。

最近はツールなどでLPのボタンを簡単に実装できるようになっているため、専門知識がなくても問題ありません。

LPのボタンデザインには「フラットデザイン」と「立体デザイン」があります。フラットデザインは、立体感のないシンプルな平面で構成されたボタンのデザインです。立体デザインは影や光沢を利用して、本物のボタンのような見た目を表現するデザインです。

フラットデザインと立体デザインのボタンのメリット・デメリットを以下の表にまとめました。

フラットデザインのシンプルさを生かしつつ、ボタン部分に影をつけて立体的にしたデザインも最近のLPには使われています。ボタンデザインはLPのターゲットやブランドイメージ、全体の雰囲気によって選択する必要があります。2つのボタンデザインをA/Bテストして、CVRの変化を確認することも大切です。

ボタンにマウスカーソルを合わせたときに見た目が変わる動きを、マウスオーバー(ホバーアクション)と呼びます。マウスオーバーには、LPにクリックできるボタンがあることをユーザーに伝える効果があります。マウスオーバーを活用すればユーザーが迷わずLPのボタンをクリックできるため、CVRの改善が可能です。

マウスオーバーを実装すると、カーソルをLPのボタンの上に移動させた際の背景色や文字色、立体感に変化が加わります。ただし、マウスオーバーによってLPのボタンに過度な動きがあると、ユーザーの注意が散漫になるため注意が必要です。スマホやタブレットでは通常マウスオーバーを実装できない点も覚えておきましょう。

LPのボタンにアニメーション効果を取り入れれば、ユーザーの行動を効果的に促せます。アニメーションでユーザーの視線をボタンに集め、クリックできるとわかりやすく伝えられるからです。LPのボタンに活用できるアニメーション効果の例は以下のとおりです。

• ・マウスカーソルを乗せたときに色が変わる動き
• ・クリックした後に波紋が広がったりチェックマークが出たりする動き
• ・画面をスクロールしてもボタンが付いてくる動き
• ・読み込み中の状態をわかりやすく示す動き

LPのボタンにアニメーション効果を使いすぎると、ページの表示が遅くなったりユーザーを混乱させたりする可能性もあります。LPのボタンには、シンプルで目的のはっきりしたアニメーションを選ぶ必要があります。スマホでのアニメーションの見え方や動きも考慮して、ボタンに最適なアニメーションを使いましょう。

LPのボタンを改善する方法は以下のとおりです。

LPのボタンのテストや分析を行えるツールがあるため、無料プランを利用して小規模なテストから始めると取り組みやすくなります。

A/Bテストは複数のデザイン案を試して、成果が出たデザインを採用するためのテストです。LPでA/Bテストを実施すれば、ボタンのデザイン変更の効果を具体的な数字で判断できます。LPのボタンを改善する場合、A/Bテストではボタンの色や形、大きさなどいくつかのパターンを用意することが一般的です。

A/Bテストで得たデータを分析し、成果が出たデザインを採用すればLPのボタンの改善が可能です。適切な期間とユーザー数でボタンのA/Bテストをすると、信頼性の高い結果を得られます。A/Bテストを効率化する専用ツールを活用すると、専門知識がなくてもLPのボタンを改善できます。
» A/Bテストの基本とおすすめのA/Bテストツールを紹介！
» LPのA/Bテストの正しいやり方を初心者にもわかりやすく解説
» 総務省「ウェブサイトの改善」(外部サイト)

ヒートマップ分析をすればLPのボタンがどのように見られ、操作されているのかが簡単にわかります。ユーザーの行動が色の濃淡で示されるため、ボタンのデザインや配置に関する問題点が明確になります。ボタンデザインの改善に使えるヒートマップ分析の種類は以下のとおりです。

ヒートマップ分析の結果、LPのボタンが見られていない場合は、ボタンのデザインや配置場所を見直す必要があります。LPにボタンが複数ある場合は、それぞれのボタンがどのくらい効果を発揮しているかの比較も可能です。
» おすすめのヒートマップツールを比較！

ユーザーの行動や市場の状況は常に変化するため、LPのボタンの効果も時間とともに変わります。以下の手順でLPのボタンの継続的な改善を行いましょう。

1. 1.目標の見直し
2. 2.データ収集と分析
3. 3.改善案の立案
4. 4.優先順位付け
5. 5.改善策の実行
6. 6.効果測定
7. 7.評価と次の計画

LPの改善は「計画を立てる→実行する→結果を確認する→改善する」の流れを地道に繰り返します。改善サイクルを回し続けることで、LPのボタンの効果を着実に高めていけます。

LPのボタンデザインでよくある失敗は以下のとおりです。

LPのボタンの数が少なすぎると、ユーザーに行動を促すチャンスを失います。商品がほしいと感じたタイミングでボタンがないと、ユーザーは次に何をするのか迷うためです。スマホでのLPのボタンの見え方も確認しましょう。スマホでLPを表示したときに、ボタンが見当たらないケースがあります。

ボタンが少なすぎるとLPが長い場合に探す手間が発生し、ユーザーは面倒になりページから離脱します。LPのボタンは適切な位置に配置してユーザーを迷わせない工夫をしましょう。

ボタンが目立たないとユーザーに気付かれないため、クリックされない可能性があります。ボタンの色が目立たない理由は以下のとおりです。

• ・ボタンの色が背景色と同化している
• ・ボタンが小さすぎる
• ・ボタンが他の情報に埋もれている
• ・ボタンの周りに十分なスペースがない
• ・ボタンをクリックできるかどうかがわかりにくい
• ・ボタンに目線を誘導する工夫が足りない

ユーザーがボタンを見つけやすい工夫をすれば、LPでのクリック率が高まりCVRの改善につながります。

LPのボタンデザインがターゲットに合っていないと、ユーザーは「自分のことではない」と感じるためクリックしてもらえません。スマホユーザー向けのLPがスマホで見にくかったり、高齢者向けのLPなのに難しい操作を要求したりするケースも多くあります。

ターゲットが興味を持たない言葉をLPのボタンに使っていても、クリック率は上がりません。LPのボタンデザインを考える際は、ターゲットの気持ちに寄り添って使いやすく設計する必要があります。

LPのボタンデザインに関するよくある質問は以下のとおりです。

LPのボタンの配色で迷ったときは、A/Bテストを通じて最適な色を見つける方法がおすすめです。ボタンの色はLPのCVRに大きな影響を与えるため、感覚に頼らず、データに基づいて改善を進める必要があります。LPのボタンの配色に迷ったときに考えるべきポイントは以下のとおりです。

• ・ターゲット顧客
• ・ボタンの目的
• ・競合との差別化
• ・色の印象
• ・背景とのコントラスト

A/Bテストの結果をもとに、1番成果が出た配色のボタンを選択しましょう。

LPのボタンでユーザーの注意を引くには、視覚的に目立たせてクリックしたくなる工夫をする必要があります。LPの背景とボタンの色を明確に変えたり、ボタンをクリックしやすい大きさに変更したりする方法が一般的です。矢印やアニメーションで自然とボタンに視線を誘導するLPのデザインもあります。

ボタン周りのマイクロコピーにはすぐ行動したくなる言葉を入れて、ユーザーの興味を引き出しましょう。さまざまな工夫を組み合わせれば、LPでユーザーの目を引くデザインのボタンを作れます。

LPのボタンの配置に最適な場所は1つだけではありません。ユーザーはLPを読み進めるうちに、さまざまなタイミングで「申し込みたい」と感じます。ユーザーの気持ちが高まったタイミングでクリックできるように、LPの複数の場所にボタンを配置する必要があります。

LPのボタン配置におすすめの場所は以下のとおりです。

• ・ファーストビュー
• ・コンテンツの区切り
• ・ページの最後
• ・視線が集中している場所
• ・重要な情報の直後

スマホユーザーにはLPをスクロールしても追従してくるタイプのボタンが効果的です。スマホで押しやすい位置にボタンを配置すれば、モバイルフレンドリーなLPを作れます。

LPのボタンデザインの更新頻度に決まった期間はありません。ボタンデザインを更新するタイミングは、LPの成果に応じて柔軟に判断する必要があります。ボタンデザインの変更は、LPのCVRを改善したいタイミングで行うことをおすすめします。

A/Bテストの結果から改善の余地が見つかった場合も、LPのボタンデザインの変更を考慮しましょう。LPのボタンを改善するときはデザインの流行や技術の変化、市場の状況にも対応する必要があります。
» ABテストの最適な期間と期間を決める6つの要素

お問い合わせボタンは、Webサイトに訪れたユーザーが安心してクリックできるデザインにしましょう。ユーザーは相談があってお問い合わせボタンを探すため、LPの中で見つけやすいデザインにする必要があります。

お問い合わせボタンの形や大きさ、ラベリングを工夫して、ユーザーがクリックするためらいをなくす工夫が重要です。ユーザーを安心させるアイコンやマイクロコピーを考えれば、LPでお問い合わせボタンを効果的に活用できます。

ボタンデザインは、LPの成果を大きく左右する重要な要素です。LPのボタンの色や形、大きさに配慮すれば、ユーザーの目を引くボタンデザインを作れます。スマホでの見やすさも考慮して、最適な位置にLPのボタンを配置しましょう。ボタンが目立たない状態だと、LPに来てくれたユーザーにクリックされません。

LPのボタンデザインを変更する際は、A/Bテストやヒートマップ分析でデータをもとに改善していく必要があります。A/Bテストを繰り返してボタンの改善を進めれば、LPの目標達成に大きく近付けます。

SiTestのABテスト機能であれば、簡単にボタンの作成や変更が可能です。LPのボタンデザインに悩んでいる人は、SiTestのABテスト機能の利用を検討してみてください。