ちょっと差がつくランディングページのパーツデザイン｜成果につながる見せ方・レイアウトの工夫

ランディングページの成果は、ファーストビューやメインビジュアルだけで決まるものではありません。

LP全体の各コンテンツにおける、写真・配色・レイアウト・装飾など、ページを構成する一つひとつのパーツの見せ方によって、ユーザーの受け取る印象は大きく変わります。

たとえば、同じ情報を掲載していても、レイアウトが単調だったり、写真の選定がチープだったり、表やグラフの見せ方がわかりにくかったりすると、本来伝えたい魅力が十分に届かないことがあります。

一方で、ちょっとした見せ方の工夫によって、信頼感を高めたり、訴求内容を直感的に伝えたり、競合サービスとの差別化をわかりやすく見せたりすることができます。

今回は、ランディングページ制作・改善の現場で活用できる、パーツデザインの工夫についてご紹介します。

ランディングページにおける「パーツデザイン」とは

LPのパーツデザインとは、ランディングページの構成要素を、ユーザーが理解しやすく行動しやすいように設計することです。

ランディングページは、ファーストビューから課題提起、サービス紹介、選ばれる理由、実績、料金、FAQ、フォームなど、複数のコンテンツが縦に連なって構成されます。

その一つひとつのコンテンツを、どのような見た目で、どの順番で、どのくらいの強弱をつけて見せるかによって、ユーザーの理解度や印象は大きく変わります。

たとえば、同じ比較表でも、項目数が多すぎて読みづらいものと、自社の強みが自然に伝わるように整理されたものでは、ユーザーの受け取り方が異なります。

同じCTAボタンでも、一目でボタンとわかるUIデザインになっているか？によって、クリックする際の認知ハードルが変わります。

つまり、LPパーツデザインは、単にページをきれいに見せるための装飾ではありません。

ユーザーの視線を誘導し、情報の優先順位を伝え、不安を減らし、次の行動へ進みやすくするための設計です。

ランディングページ全体の完成度は、ファーストビューやメインビジュアルだけで決まるものではなく、各パーツの見せ方の積み重ねによって大きく左右されます。

だからこそ、LP改善ではページ全体の構成・デザインだけでなく、細かなパーツ単位での見直しが重要になります。

以降の章から、パーツデザインのコツ・工夫について具体例をいくつか紹介していきます。

重要コンテンツは「登場感」をつくる

まず1つ目は「登場感」の出し方について。

どのランディングページにも、必ずといってもいいほどに強調したい目玉となるコンテンツがあります。

中でも、悩みからの解決策を示すシーンだったり、商品やサービスを改めて登場させるシーンだったりと、そのようなコンテンツは特に訪問ユーザーに印象づけたいところです。

前置きの流れから、見せたいコンテンツをバーンとインパクトを持って表現したい。
そのための「登場感の出し方」についてお伝えします。

その場合は、たとえばこのような方法があります。

・前のコンテンツとのコントラストをはっきりと。
・背景に写真を使ってインパクトを出す。
・見出しの文字は大きく・可読性を高く・センターで強調。

定番コンテンツ「お悩みコンテンツの見せ方」

お悩みコンテンツは、導入コンテンツとして定番です。

多くのランディングでは似たようなレイアウトのため、ユーザーからすると少しくどい感じがしてしまったり、またか！という印象を与えてしまいがちです。

よく見るのは、チェックリストによる表現する手法だったりします。

また、どうしても多くのユーザーに共感させようとして文字量が多くなってしまいがちです。

できれば以下の点に注意したいところです。

・レイアウトを工夫する。
・伝える要素を3つか、多くても6つに絞る
・文字量は端的に。

レイアウトの参考として、いくつかあげてみました。

「コピー要素」のブロック化

見出しであっても、伝えたい内容が多ければ、文章はどうしても長くなってしまいます。

そんな時に、強調したいところをまとまり感をもって見せられれば、ユーザーの目線を迷わせずにすみます。

そのための方法として、使えるのが以下の方法です。

・コピーのブロック化

見栄えもよく、まとまり感をつくることができます。 見出しなどのキャッチコピーでもそうですが、価格などのCTA要素の見せ方でも使える方法です。

コピー要素の扱いは、グラフィックデザインの広告などを見るととても参考になるかもしれませんね。

参考例として2パターンあげてみたいと思います。

一味違った印象をつくる写真の活用方法

写真は、もっとも効果的にスピーディーにそのコンテンツで伝えたいことを訴求する手段です。

とはいえ、ただそこに写真を置くだけでは、せっかくの素材をうまく活かしきれていません。

そこで、写真を効果的に見せる方法についていくつかあげたいと思います。

ただし後述しますが、前提として写真の選定が重要ですので、できれば、オリジナルで撮影したものが望ましいのですが、時間やコストの制約もあるかと思います。

その場合は、素材写真の購入サイトなどからありものの素材を活用することになりますが、その際にも、できるだけ質の高い写真を選ぶということがまずはポイントです。

という前提があった上で、写真のレイアウト・活用方法について2つほどご紹介します。

一目で伝わる「グラフデザイン」

グラフは数値情報を視覚化してメッセージを伝えることができます。

ランディングページに限らず、普段の資料作りなどでグラフに触れる機会は多々あるのではないでしょうか。

ただし、グラフは便利な手法ですが使い方を間違えると誤解を生んでしまうこともあります。

非常に奥深い分野のため、弊社でもわかりやすいグラフデザインをするために、試行錯誤を繰り返しています。

直感的なグラフを作成するためのコツを、いくつかご紹介します。

円グラフデザインのコツ

円グラフは100%中の構成比を表す用途で使用されることが多いと思います。

ランディングページでは満足度やリピート率、ユーザー種別などを表す際に用いられているケースをよく見受けます。

わかりやすい円グラフを作成するためには、以下のようなポイントに気をつけると良いでしょう。

＜POINT＞

・特に伝えたい項目を目立たせる

参考イメージを作成してみました。

また、直観性を高めるために、写真やアイコンと組み合わせることも有効です。

円グラフは項目が多すぎるとわかりにくくなりやすいという短所があるため、項目が多い場合には、別のグラフ手法を検討するのも良いかもしれません。

棒グラフデザインのコツ

棒グラフも円グラフ同様、非常にポピュラーなグラフです。

ランディングページではコスト削減や効率アップなど、商材・サービスを利用した前後の比較として用いられることが多いかと思います。

化粧品のランディングページでは「お肌の水分量変化」など、経年変化を棒グラフで表す例もよく見受けられます。棒グラフのデザインは、前後の強調を強めると、より印象深くメッセージが伝わります。

参考イメージをご覧ください。

また、GIFやCSSアニメーションで動きを取りいれるデザインも近年では増えてきました。こちらもグラフの強調として、有効な手法と言えるでしょう。

このように少しの工夫で、伝えたい情報が直感的に伝わりやすいグラフデザインに変わります。

競合サービスとの差別化「比較表デザイン」

比較表コンテンツは競合サービスとの違いを一覧化して伝えるコンテンツとして、多くのランディングページに用いられています。

市場にライバルが多く、サービスの内容そのものが難しい商材の場合には、競合との違いを端的に伝えることのできる比較表は、ユーザーの意思決定を助ける重要コンテンツになりえます。

気をつけたいポイントは、詳細に伝えようとして項目を増やしすぎることで情報過多になってしまう点です。

主要な項目に絞って、なるべく1画面内に収まる形でデザインすることで一覧性が高くわかりやすい比較表を作成できるでしょう。（目安としては、多くても6~8個程度でしょうか。）

また、情報を記載するだけでも良いのですが、一手間を加えることで自社サービスの優位性をより明確に伝えることができます。

＜POINT＞

・自社の項目を強調する

参考例として以下をご覧ください。

デザインのクオリティを左右する「写真選定のポイント」

写真は商材の魅力を直感的に伝える非常に重要な要素です。

極端な話、本当に質の高い写真であればそれだけでユーザーの心を振り向かせることができます。

特に化粧品やサプリメント業界では、規制によりページ上で謳えるキャッチ表現には一定の制限があるため、写真選定の重要性はとても高いと言えます。

BtoB向けのランディングページにおいても同様です。チープな写真では「怪しいサービスかもしれない・・・」とユーザーに先入観を与えてしまうかもしれません。

理想はオリジナルで撮影した素材が望ましいですが、今回は素材サイトでの写真選定の際にちょっと差がつく判断基準をご紹介します。

＜POINT＞

・ユーザーのリアルな生活シーンに近い写真を選ぶ

いかにもランディングページ的な写真はわかりやすいかもしれませんが、ユーザーも見慣れていて、共感や魅力を感じることは少ないでしょう。

なるべくユーザーの実生活にリンクするような写真を選定することが、違いを生み出すポイントです。

参考例をあげてみます。

ユーザーの実生活にリンクする写真とは、言葉を変えれば、カメラ目線すぎない、いかにも今から撮影するぞというようなポージングの写真ではなく、被写体がナチュラルな状態で写っている写真とも言えます。

また可能であれば、ページ全体を通して写真の質感を統一することが望ましいでしょう。

ユーザーを飽きさせないレイアウトの工夫

ランディングページは1ページ内に複数のコンテンツが並び、縦に長くなる傾向があります。

ストレスなく読み進めてもらうために、ユーザーを飽きさせないレイアウトの工夫を心がけるといいでしょう。

例えばランディングページで最も重要といってもいい、ファーストビューでも色々なレイアウトが考えられます。

ただ色々なレイアウトパターンを取り入れるのではなく、情報要素の量に合わせて内容が入ってきやすい最適なレイアウトを見つけていくことが肝心です。

また、1つのコンテンツ内でのレイアウトもそうですが、シナリオの流れに合わせて前後コンテンツのレイアウトを変化させていくことで、デザイン展開にリズムが生まれます。

例えば、横並びレイアウトのコンテンツが続いているなと感じた場合は、間のコンテンツを縦並びレイアウトに変えるなどの工夫をしてみてはいかがでしょうか。

こちらもユーザーを飽きさせない大事なポイントです。

身近な所でいうと、雑誌デザインにはレイアウトの工夫がたくさん散りばめられているので、観察してみると参考になるかもしれません。

ケーススタディ：パーツデザインの改良によるCVR改善事例

ここからは、実際にパーツデザインを改良したことで、CVR改善に結びついた事例をご紹介します。

事例1：コラーゲンサプリ

パーツデザイン改修箇所：CTA（コンバージョンエリア）
改修内容：CVボタンのデザイン変更
結果：CVR1.6倍に改善

こちらの事例は、コンバージョンエリアのボタンデザイン変更によるCVR改善事例です。

改修前のボタンは、カラーやサイズによる強調が足りず視認性に課題がありました。

そこでコンバージョンラボでは、全体デザインの中でも目立つカラーやボタンの形状（長方形や円形など）を複数バリエーションで検証し、もっとも成果につながる組み合わせを特定。ボタンのクリック率が上昇し、最終的な購入完了CVRの改善に繋がりました。

事例2：税理士法人

パーツデザイン改修箇所：ページ全体のビジュアル要素
改修内容：スタッフの撮影写真を要所に活用
結果：継続的なCVRの底上げに成功

こちらの事例は、ビジュアルイメージの変更による改善事例になります。

元々はイラストを用いた表現が主体のLPデザインでしたが、税理士法人としての信頼性や品質感の訴求を強めるために、実際に業務を担当する税理士の写真を随所に盛り込んだコンテンツデザインを検証いたしました。

メインビジュアルやコンバージョンエリアなど、主要コンテンツを中心に少しずつ改良を加えていきながら継続的に検証を重ねることで、CVRのベースライン向上に貢献した事例です。

事例3：英語学習アプリ

パーツデザイン改修箇所：ユーザーボイス
改修内容：テキスト主体の見せ方をビフォーアフターを強調したデザインに変更
結果：CVR1.3倍に改善

こちらの事例は、ユーザーボイスコンテンツのデザインを変更したことでCVR改善につながった事例です。

ページ上のクリックデータ等の痕跡からユーザーボイスの注目度が高いことが分かっていたため、内容自体はそのままで、見せ方を変えることで成果につながるのではないか？という仮説のもと、デザイン改修を加えました。

もともと情報量の分厚さを意識したコンテンツであったため、テキスト量が多くスマホデバイスで閲覧するには認知負荷が高い状況だったので、課題と施策、学習成果のビフォーアフターといった分かりやすい軸に整理し、端的にリスト型で訴求を並べるデザインに改良を加えました。

情報の伝わりやすさが向上したことで、CVR改善につながった事例となります。

まとめ｜小さなパーツの工夫が、LP全体の印象を変える

ランディングページのデザインは、ファーストビューやメインビジュアルだけで決まるものではありません。

お悩みコンテンツ、コピー要素、写真、グラフ、比較表、レイアウトなど、一つひとつのパーツの見せ方によって、ユーザーの理解度や信頼感は大きく変わります。

重要なのは、装飾としてデザインを加えるのではなく、ユーザーが情報を理解しやすく、納得しながら読み進められる状態をつくることです。

・重要コンテンツには登場感をつくる
・お悩みコンテンツは共感と整理のバランスを取る
・コピー要素はブロック化して視線を誘導する
・写真は選び方と見せ方の両方を工夫する
・グラフは伝えたい数値を明確にする
・比較表は自社の優位性が自然に伝わるように設計する
・縦長LPではレイアウトにリズムをつくる

このような小さな工夫の積み重ねが、ランディングページ全体の完成度を高め、競合との差別化にもつながります。

「なんとなく見やすい」「なんとなく信頼できる」と感じてもらえるページには、細かなパーツ設計の工夫が隠れています。

ぜひ、現在のランディングページを見直す際には、各パーツの見せ方にも注目してみてください。