CVが高まるLPのボタンデザインとは？UI改善のポイント

1ページで全ての情報を伝えるLPでは、コンテンツの配置はコンバージョンに関係する重要な要素の一つです。

関連性の高いコンテンツは近い距離に配置することで、理解されやすいレイアウトを制作することができます。

まずは位置関係を改善するだけで、ユーザーの視認性が向上するため自然にコンバージョン率の向上にもつながります。

コンテンツの関連性だけでなく、画像や見出し間の余白を整理して隙間を埋めるのではなく効果的に余白を使用することを意識してください。

テキストやビジュアルなどは整列させることで一気に見やすさが向上します。

LPでは、見出しを中央揃えにして目を引き、本文は左揃えにして読みやすくするデザインが多く見られます。どの揃え方にする場合も、関連したコンテンツごとに揃え方を統一することが、UIデザインの改善の重要なポイントとなります。

コンテンツがただ羅列されていると、テキストのフォントやサイズを変更しても見にくく感じてしまうため、コンテンツの揃え方は一定に。

ページ全体に整合性を発揮させるためにも、配色やレイアウトなどを繰り返して使用してください。

トーン＆マナーと呼ばれるルールを意識し、効果的に反復させることで強調したい要素がわかりやすくなります。

テキスト部分ならサイズ、カラー、フォントを変更してページ全体のメリハリをつけることが大切です。

ユーザーを惹き付けるデザインにするためにも、対比させることでコンテンツの重要性や優先度を強調できます。

あわせて、文字と背景の色の差（コントラスト）にも注意が必要です。色の差が小さいと、画面の明るさや見る人の視力によっては文字が読みにくくなります。薄いグレーの文字や、淡い色のボタンに白い文字を載せる場合などは、十分な色の差がついているかを確認してください。

各レベルを明確にし、ユーザーにスクロールしてもらう内にベネフィットをイメージしてもらえるデザイン制作を意識してください。

マウスカーソルをボタンに合わせることで画像が切り替わったり、動きが加わったりするエフェクトのことをマウスオーバー効果と言います。パソコンで閲覧しているユーザーに、ボタンがクリックできる要素であることを伝える方法の1つです。

ただし、マウスオーバー効果が働くのは、マウスを使うパソコンだけです。スマートフォンにはカーソルがないため、画面に触れる前にボタンの見た目が変わることはありません。スマートフォンで閲覧するユーザーが多いLPでは、マウスオーバーに頼らず、ボタンの形や影、色の違いなどで、何もしなくても押せる要素だと分かるデザインにしておくことが大切です。

他のコンテンツに埋もれずに、ボタンであることがひと目で伝わるデザインにすることで、コンバージョンボタンであることを認識させられるためコンバージョン率の向上が期待できます。

コンバージョンボタンの上に表示させるテキストをラベリングと言います。このテキストで商品を購入するメリットを明確にしておくことが大切です。

「このボタンを押すことで何が起こるのか」という疑問が解決されるように、わかりやすい文言を使用してください。

資料請求をしてもらいたいのであれば、「無料」という言葉を一緒に使用する。購入してもらいたいのであれば、「カートに入れる」など、気軽にボタンを押せる文言を添えることが大切です。

CVRを向上させるには、CVボタンがページに埋もれたり隠れたりしていないことを確認することが重要です。これにはGoogleアナリティクスのイベントの計測が利用できますが、ページ数が多い場合や CVボタンが多いサイトでは作業に時間が必要になる場合があります。

CVボタンのデザインやコピー文だけではなく、前後の内容や文章の質がCVR（コンバージョン率）に影響しています。

具体的には、ヒートマップを使って前後の文章やコンテンツが熟読されているかを確認し、熟読されていない場合はコンテンツの改善やCVボタンの位置変更を検討するようにしましょう。

また、文章が続くコンテンツには適度に画像や装飾を加え、ユーザーが興味を示すコンテンツ作りを目指すことも重要です。つまり、CVRを高めるためには、あくまでもCVボタンのデザインやコピー文だけではなく、前後の内容や文章の質を改善することが必要です。

CVボタンを設置していても、そこに到達する前に離脱してしまう可能性があります。この場合、CVボタンをどこに移動してもCVRが向上するわけではありません。

そのため、まず離脱率の高いエリアを確認し、そこにたどり着くまでにユーザーが見逃さないように、ページデザインを改善する必要があります。

離脱率の高いエリアを確認する方法としては、ヒートマップツールが便利です。また、ユーザーが実際にCVボタンまでたどり着いているかを把握するために、Googleアナリティクスなどの分析ツールを活用するのもおすすめです。

ヒートマップツールやアナリティクスで分析した結果、CVボタンにたどり着く前に離脱されてしまっていることがわかれば、CVボタンの前にユーザーの注意を引くコンテンツを配置するように、コンテンツの内容を再考しましょう。

CVボタンは、ファーストビューなどLPの中で目立つ場所に配置しましょう。長いLPでは、商品の説明を読み終えた箇所やページの最後など、ユーザーが申し込みを考えるタイミングに合わせて、同じボタンを複数か所に置くと効果的です。

CVRを上げるためには、CVボタンは目を引くデザインにすることが重要です。

また、動的な「フローティング型CVボタン」は、ユーザーがCVボタンに到達する前に離れるのを防ぐために、長いLPに効果的です。

具体的なアクションを示すコピーを使うことで、ユーザーにとって必要な行動が明確になり、CVRを上げることができます。例えば、商品を購入してほしい場合のCVボタンは、カートのイラストのみのCVボタンを設置するよりも、「カートに入れる」などの具体的な行動を言葉で記した方が、実際の行動につながりやすいです。

その他にも、「今すぐ購入する」「資料請求はこちら」のようなコピーも例として考えられます。このように、誰でも理解しやすいコピーをCVボタンに使うことで、ユーザーは迷わずに簡単に購入・請求ページにたどり着くことができるのです。