すぐ実践できる！LPデザインのコツ16選と基本原則・参考事例の探し方

LP制作に携わる方であれば、「LPデザインのコツは？」「売れる法則やLP構成の鉄板はあるの？」と、疑問に思ったことがあるのではないでしょうか。

LPデザインのコツと一言でいっても、配色・フォント・レイアウト・見せ方・情報の伝え方など、さまざまな要素で意識したいポイントがあります。

この記事では、LPデザインのコツ16選とデザインの基本原則、LPデザインで迷った時に解決するためのコツ、参考事例の探し方について解説します。

関連記事：【必見】売れるランディングページの構成テンプレート2選！

LPデザインの「配色」に関するコツ2選

LPデザインにおける配色は、LPの印象や見やすさを左右する重要な要素です。

まずは、LPデザインの「配色」に関するコツをご紹介します。

メイン・ベース・コンバージョンカラーの3色を中心とした配色にする

LPで複数の色を使用しすぎると見にくくなるため、一貫性のある色使いを心がけましょう。

「メインカラー」「ベースカラー」「コンバージョンカラー」の3色程度に絞り、視認性を向上させることがポイントです。

メインカラーはブランドを象徴する色であり、商品や企業のイメージカラーを使用するケースが多く見られます。イメージカラーを用いる場合は、基本的には濃淡なども変えずに使用することをおすすめします。

LPの大部分を占めるベースカラーとして、背景や余白に使用する色を選びましょう。テキストの文字色を際立たせるような、明るく淡い色が適しています。

購入や問い合わせを促すボタンには、コンバージョンカラーを使用しましょう。メインカラーと対照的な色（補色）が効果的です。コンバージョンカラーは、LPの中で強調したいテキストに、アクセントカラーとして使用しても良いでしょう。

業種にあわせたイメージカラーを採用する

商品やブランドのイメージカラーがある場合は上記の方法で良いですが、特にない場合は、業種や商品タイプにあわせたイメージカラーを採用するのもコツの一つです。

例えば、飲食業のLPでは食欲を刺激する色を採用するといった方法です。暖色系は食べ物と相性が良く、商品の魅力を引き立てる効果が期待できます。逆に商品が冷たいものであれば、寒色系を採用することで印象が良くなる場合もあります。

教育系のLPでは派手なデザインや明るい色味は避け、知性や落ち着きを感じさせる寒色系を採用すると良いでしょう。ただし、子供向けの教育商品は両親が検討することが多いため、実際にLPを見る人の立場を考慮して設計することが重要です。

関連記事：LPの色選びでコンバージョン率を上げる！知っておきたいコツや注意点

LPデザインの「フォント」に関するコツ2選

LPデザインの制作において、フォントの選択も欠かせない要素です。LP内でテキストが占める割合は多く、ユーザーがもっとも目にする部分でもあります。

LP全体の雰囲気とそぐわないフォントが混在すると、ユーザーに違和感を抱かせる可能性があるため、以下をもとに慎重に検討していきましょう。

フォントのスタイルや太さを調整し、重要な情報を目立たせる

Web上で使用できるフォントには多様な種類がありますが、LPでは読みやすさやメリハリをもたせることがポイントです。読みにくいフォントでは、ユーザーの関心を失う恐れもあるためです。

例えば、日本語の「ゴシック体」は、均等な文字の太さによって視認性が高く、読みやすいフォントの一つです。明朝体は筆記体のように線の太さに強弱があり、上品で洗練された印象を与えられます。いずれも、見やすく汎用性が高いフォントといえます。

英語のようにアルファベットを多用する場合は、欧文フォントなどアルファベットを美しく表示できるフォントを選択すると良いでしょう。例えば、「Helvetica」は英字による見出し・タイトルに適したフォントです。

また、LPのフォント設計では、フォントのスタイルだけでなく、文字の太さも重要です。特に目立たせたい情報の部分は、太さを調整し際立たせるようにしましょう。

スマホでの見え方も意識する

パソコンとスマートフォンでは、表示画面の大きさも縦横比も異なるため、フォントの見え方を調整する必要があります。

一つはフォントのサイズです。スマートフォンの小さな画面では、テキストが小さすぎると読みにくく操作性も低下させてしまいます。適切なフォントサイズを選び、ユーザーが快適に可読・操作できるようにしましょう。

もう一つは文字間隔やテキストの行間です。文字が密集しすぎると読みにくくなるため、適度な文字間隔や行間を設定し、LPの可読性を向上させましょう。

LPデザインの「余白・レイアウト」に関するコツ3選

LPデザインの中で、余白は「ホワイトスペース」とも呼ばれ、何も書かれていない領域を指します。余白は単なる空きスペースではなく、デザインにさまざまな効果をもたらします。

ここでは、LPデザインの余白と、余白を活かすためのレイアウトに関するコツを3つご紹介します。

余白を活かして情報を見やすく整理する

情報の詰め込みすぎは、もっとも伝えたいメッセージが伝わりにくくなる要因となりえます。見やすく・理解しやすくするために、余白を活かして情報を整理しましょう。

余白を活かした情報整理の詳しい内容は、「LPデザインの7つの基本原則」の見出しで解説しています。

余白の取り方でユーザーの視線を誘導する

LP内の余白の取り方によって、ユーザーの視線を誘導することも可能です。

具体的には、上下のスペースを広めにとり、コンテンツを複数の段落の形で配置することで、ユーザーの視線を左上から右下に自然に導くことができます。

特に注目してほしい箇所がある場合や読み進めてほしい場合には、余白を利用することで、ユーザーに強制せずに自然な流れで情報を伝えられます。

無駄な余白は減らす

余白によって表現の幅をもたせ、ブランドの世界観を演出する手法もあります。しかし、あくまでもLPはコンパクトに情報を伝えてコンバージョンを生み出すためのページであるため、余白が多すぎると離脱率を高める懸念があります。

縦長のLPではスクロールを促進することが大切です。余白と情報のバランスに注意し、情報を簡潔かつ分かりやすくまとめ、全体のバランスを調整して過剰な余白は避けましょう。

LPデザインの「見せ方・情報の伝え方」に関するコツ3選

LPデザインでは、見せ方や情報の伝え方も大切なポイントです。特に注目すべき3点について解説します。

画像・イラスト・動画を活用し、情報を効果的に伝える

テキストのみでは伝わりにくい情報には、画像・イラスト・動画を活用すると良いでしょう。

例えば、「○○の睡眠サプリで、翌朝スッキリ目覚める効果が期待できます。」といった文章に加えて、ぐっすり寝ている様子や朝の清々しい表情の画像を配置することで、メッセージを具体化させ、読者に鮮明なイメージを与えられます。

画像の他にイラスト・動画なども検討し、どの素材が伝達効果を高めるかをユーザーの視点から考えることが重要です。

グラフや図形で分かりやすくする

数値を含むコンテンツでは、円グラフ・棒グラフなどを利用することもおすすめです。

LPにグラフを導入することで、デザインや長文に埋もれて読み飛ばされることを防ぎ、情報を分かりやすく表現できます。

比較表を挿入する場合は、強調して違いを分かりやすくする

LPでは競合他社との比較を用いて、商品の強みや特徴を伝える場面も多いです。比較表を挿入する場合は、強調して違いを分かりやすくすると良いでしょう。

ただし、過剰な表現は下記の薬機法に触れる恐れもあるため、注意が必要です。

“（誇大広告等）
第六十六条　何人も、医薬品、医薬部外品、化粧品、医療機器又は再生医療等製品の名称、製造方法、効能、効果又は性能に関して、明示的であると暗示的であるとを問わず、虚偽又は誇大な記事を広告し、記述し、又は流布してはならない。”

引用：医薬品、医療機器等の品質、有効性及び安全性の確保等に関する法律 | e-Gov法令検索

LPデザインの「CTAボタン（CVボタン）」に関するコツ4選

CTAボタン（CVボタン）とは、LPの訪問者に具体的なアクションを促すボタンです。CTAボタンの良し悪しはコンバージョン率に影響を与えるため、デザインには慎重に取り組むべきです。

ここでは、LPデザインのCTAボタン（CVボタン）に関する4つのコツをご紹介します。

ボタンの色は目を引きやすく、クリックを促すデザイン配色にする

CTAボタン（CVボタン）には、配色の見出しでもお伝えした「コンバージョンカラー」を使用し、際立たせましょう。

この時、ボタンの色を単体で選ぶのではなく、全体のLPデザインとの調和を考えることが重要です。ユーザーが注目しやすく、クリックしやすい色・形を目指しましょう。

A/Bテストを実施することで、自社のLPに最適なデザインを見つけやすくなります。

ファーストビューには必ず設置する

CTAボタン（CVボタン）の配置は、コンバージョン率の向上に欠かせない要素です。すでに問い合わせや申込みをすることを決めた上でLPに訪問するユーザーも一定数いるからです。長文のLPを下までスクロールしなければ、CVボタンにたどり着けないような配置は効果的ではありません。

LPを訪問して最初に目にする「ファーストビュー」には、CTAボタン（CVボタン）を必ず設置するようにしましょう。これにより、ユーザーはすぐにアクションできるようになるため、コンバージョン率アップが期待できます。

ボタンの大きさや、マウスや指からの距離を考慮する

CTAボタン（CVボタン）の大きさや配置も、慎重に検討する必要があります。

パソコン向けのLPデザインでは、CTAボタン（CVボタン）を操作しやすいディスプレイの四隅に配置する方法が一般的です。

対して、スマートフォン用サイトではボタンを指で簡単にタップでき、誤操作が少ない位置に設置すると良いでしょう。

ボタンのテキストやコピーを工夫する

CTAボタン（CVボタン）の枠内の指示文を「ラベリング」、ボタン周辺に配置される短い文章を「マイクロコピー」と呼びます。

ラベリングでは、「無料で見積もり依頼」や「今すぐ注文する」といった、ユーザーに行動を促す言葉を使用します。マイクロコピーには、「セールス電話はありません」や「今なら送料無料！」のように、コンバージョンを促進するコピーを使用します。

この時、「ここをクリック」や「メール送信」といった曖昧な言葉ではなく、具体的なアクションを示すコピーにすることがポイントです。クリックによって次に何が起きるかを明確に伝え、安心感を与えてコンバージョンを促しましょう。

LPデザインの「入力フォーム」に関するコツ2選

LPで商品購入や資料請求などを行うためには、入力フォームでユーザーから複数の情報を提供してもらう必要があります。入力フォームはコンバージョンに至る最後の要素であるため、デザインの細部に注意を払わなければなりません。

LPデザインの入力フォームに関するコツを2つ見ていきましょう。

シンプルで使いやすいフォームを設計する

複雑なデザインや多くの入力項目は、ユーザーへ「使いにくい」「手間がかかる」と感じさせてしまい、ページ離脱を招く恐れがあります。

そのため、入力フォームはシンプルで使いやすいデザインにすることが大切です。

必須・任意の項目を明確に区別できるようにする

入力フォームの項目について、どれが必須でどれが任意かを明確に示しておくことが重要です。項目の違いが分かりにくいと、ユーザーが必要事項を入力し忘れてしまい、企業側としても必要な情報を得られなくなってしまいます。

一目で必須・任意の項目が分かるよう、分かりやすい表現・デザインを意識しましょう。

関連記事：EFO対策とは？実施すべき15の施策と期待できる効果

LPデザインの7つの基本原則

デザイン全般について記された『ノンデザイナーズ・デザインブック（Robin Williams 著）』の中で紹介されている「デザインの4原則」は、LPデザインにも応用できます。

近接・整列・反復・コントラストの4原則に、さらに3つの原則を加えた、7つの基本原則をご紹介します。

【近接】

人は近くにあるものをグループとして認識する傾向があります。この特性を利用し、LP内のコンテンツを配置する際に似た要素は近くにまとめ、異なる要素との間には余白を持たせることで、目を引くことができます。

【整列】

テキストの始まりの位置やコンテンツの配置を揃えることで、デザインに統一感を与えられます。

【強弱】

対照的な色・異なるフォント・テキストのサイズの大小を用いると、重要な情報を際立たせ、目を引くデザインにすることが可能です。

【反復】

LPデザインが単調だとユーザーの記憶に残りにくく、他社との差異化も図れません。サイズ・フォント・書体など、視覚的な要素を繰り返すことで、一貫性を持たせながらユニークさも表現できます。ただし、過度な使用は混乱を招く可能性があるため、バランスを考慮して活用しましょう。

【統一】

LPにおけるデザインの統一とは、すべての要素が調和し、メッセージが一貫している状態を指します。統一されたデザインは、視認性の向上やメッセージを伝わりやすくすることに効果的です。

【階層化】

LPデザインの階層化とは、デザイン内の要素を重要度に応じて配置し、視覚的な整合性を持たせる方法です。最重要情報を上部で大きく強調し、次に重要な情報を順に下に配置することで、ユーザーにとって見やすいデザインとなります。

【リズム】

リズムは音楽の分野だけでなく、建築や絵画など多くの領域においても重要な役割を果たす要素です。反復することによって視覚的なリズムを生み、LP内のコンテンツにメリハリや統一感を与えられます。

これら7つのLPデザインの基本原則をすべて採用する必要はないですが、デザインを考える際の指針として活用してみてください。

LPデザインで迷った時に解決するためのコツ

LPデザインで迷った時の解決法として、3つのコツをご紹介します。

LPデザインまとめサイトを参考にする

デザインの構想段階でヒントが欲しい場合には、LPデザインまとめサイトを参考にすることがおすすめです。

多くのLPデザインを見ることでアイディアが湧きやすくなり、自社のLPのイメージを具体化しやすくなります。

具体的なデザインの探し方は、次章で解説しています。

LPデザイン作成ツールやWordPressのテンプレートを活用する

LP制作の初心者の方であれば、デザインやコーディングの知識不要で利用できるLP作成ツールを活用するのも良いでしょう。

LP作成ツールには一般的なLPのテンプレートやデザインが用意されており、カスタマイズするだけで基本のLPを制作できます。無料のLP作成ツールとして、ペライチ・Wix・Jimdo・STUDIOなどがあります。

また、Webサイト構築プラットフォームのWordPressでは、LPも制作可能です。多様な無料テンプレート（テーマ）が提供されているため、自社の商品やサービスにあわせて選定・活用しましょう。

ペライチ・Wix・WordPressを用いたLP制作については、下記を参考にしてください。

関連記事：【画像付き】ペライチを使ったLP(ランディングページ)の作り方や事例まとめ！
関連記事：Wixを活用したLPの作り方を解説！初心者向けのコツや事例も紹介
関連記事：【無料】WordpressでLPは自作可能！テーマやプラグインのおすすめを紹介

LP制作会社に相談・外注する

より高品質なLPを目指す場合は、洗練されたデザインの実現や、専門的な機能の実装が必要です。

自社での制作が難しい場合は、LP制作会社に依頼することも一つの選択肢となります。

LPの外注制作にかかる費用は、デザインの複雑さや、顧客・競合調査の有無、ライティングの有無など、提供されるサービスの内容によって大きく異なります。

外注依頼時のポイントについては、こちらの記事で詳しく解説しています。

関連記事：LPのコーディングにかかる費用や時間は？外注依頼時の9つのポイントも解説 

LPデザインまとめサイトで参考事例を探すコツ

LPデザインまとめサイトには多種多様なLPが掲載されています。やみくもに閲覧すると効率が悪いため、下記の3つのコツを意識すると活用しやすいでしょう。

業界・カテゴリーで絞り込む

LPデザインの特性は業界によって異なります。自社が目指すLPのイメージが明確でない場合は、まずは同じ業界内でLPを探し、その特徴を把握しておきましょう。

特に競合他社のLPをチェックすることは重要です。同じ業界でも、商品やサービスによって特性が異なることが多いためです。

例えば、食品業界でもサプリメントと飲料ではLPの構成が異なります。特定の要素に絞って探すことで、自社のイメージにあったLPを見つけやすくなります。

また、カテゴリーで検索することも有効です。情報が不足している場合は、関連カテゴリーから探してみると良いでしょう。

配色で絞り込む

コーポレートカラーや商品のイメージカラーなど、製品・サービスのイメージにあったカラーを探す方法も有効です。多くのまとめサイトでは、カラーによる検索機能があるため、積極的に活用しましょう。

カラーテーマが企業や商品と調和しているLPは、デザインに一貫性があり、ユーザーに好印象を与えることができます。

なお、特定の配色が決まっていない場合は、色の心理効果に着目して選ぶこともおすすめです。例えば、赤は「情熱的」、黄色は「希望」といったように、色によって心理効果が期待できます。

単色の検索だけでなく、「多色」「カラフル」などのワードで絞り込みできるまとめサイトもあるため活用しましょう。

イメージやビジュアルで絞り込む

多くのLPデザインまとめサイトには、「かっこいい」「可愛い」「高級感がある」といった、キーワードによる検索機能もあります。企業イメージや、商品・サービスのイメージにあわせて、まとめサイトで適したデザインを探してみましょう。

他にも、メインビジュアルに特定の要素を含めたい場合、「男性向け」「女性向け」「動物」などのキャラクターやイメージで検索するオプションも提供されています。

まとめ

LPデザインのコツとして、「配色」「フォント」「余白・レイアウト」「見せ方・情報の伝え方」「CTAボタン（CVボタン）」「入力フォーム」のそれぞれの要素で意識したいポイントがあります。

LPデザインで迷った時は、まとめサイトを参考にすることや、LP制作会社に相談・外注することもおすすめです。

LP制作をプロに任せたい方は、株式会社クロスバズの“バズLP”をご活用ください。中小企業を中心に多くの実績があり、Web広告の運用支援や代行も行っております。

市場調査と行動心理にもとづくストーリー設計により、コンバージョン率UPを実現します。無料相談・お見積り対応中ですので、ぜひお気軽にご相談ください。