10年教えて分かった、LPデザインで失敗しないための4つの方法と迷ったときの参考サイト

Web 業界ではランディングページ（以降、LP）を、コンバージョン（問い合わせ、資料請求など）の獲得を目的とした縦長の1枚ページという認識を持った方が多い印象です。

LP が縦長の1枚ページで完結するか、サイト形式（トップページから複数ページにリンクがある構造のページ）にするかは、LP で伝える情報によります。そのため、LP を作るときの必須条件にする必要はありません。

良い LP を作りたいと思うのは、その先にある最終目的がコンバージョン獲得のためでしょう。そして、LP 作成時に悩みの種になるのが LP のデザインです。

LP のデザインは大きく成果に影響するので、コンバージョン目的に LP を作るときは「デザインの基本」を学ぶことが重要です。

この記事では、はじめて LP を作る方を対象に、成果を上げるデザインの基本についてお伝えします。

初めての LP 制作で失敗する確率を下げる4つの方法

何事も初めてだと失敗することは多いですよね。そんな中、LP 作成の際に失敗する確率を下げる方法は4つあります。

1. LP で紹介する商材を絞る
2. ターゲットを明確にする
3. 見た目のデザインよりも中身の情報を充実させる
4. LP の改善に役立つツールを導入する

1.LP で紹介する商材を絞る

まず初めに LP で紹介する商材（商品、サービス）を絞るのが重要です。LP で紹介する商材の数が多くなるほど、LP を作る難易度は上がります。

商材ごとに情報を用意する必要があり、たくさんの商材の情報を LP 内で整理するのは難しいからです。まずは、コンバージョンの獲得を目指す優先度が最も高い商材からはじめるとよいでしょう。

2.ターゲットを明確にする

2つ目は、LP を見てほしい人となるターゲットを明確にすることです。ターゲットが決まらないと、LP で何を伝えるかの情報が決まりません。デザインはターゲットにより変わることがあります。

たとえば、性別による好む色の違いです。男性は寒色系の色、女性は暖色系の色を好むと言われています。線でいうと、男性は直線、女性は曲線を好む傾向があります。

ターゲットに合わせたデザインを実現するためにも、どんな人に見てほしい LP なのかを明確にすることが大切です。

3.見た目のデザインよりも中身の情報を充実させる

3つ目は、LP は見た目のデザインよりも中身の情報（コンテンツ）を充実させることです。残念ながら、デザインの良さだけではコンバージョンしません。

ターゲットを考慮したデザインを実現したとしても、中身がスカスカの LP だと納得感を得られずコンバージョンに繋がらないでしょう。

そのため、LP はターゲットに対して、どんな情報を伝えるのかを徹底的に考えることが大切です。

4.LP の改善に役立つツールを導入する

最後にやるのは LP の改善に役立つツールを導入することです。LP は作って公開したらそこで終わりではありません。公開してからが本当のスタート！そこから、LP を改善し、目的を達成することを目指します。

導入するといいのは、Google Analytics です。Google Analytics には、「ランディングページ」という LP に集客した人の状況を確認できるレポートがあります。

Google Analytics の使い方は、以下ページの「集客したあとのページでの行動は Google Analytics で分析」をご参考にしてください。

それから、LP に集客した人の行動を分析できる「ヒートマップ」を導入するのもオススメです。ヒートマップは、ユーザーの行動を色や濃淡をつけて可視化するツールです。

結果が視覚的にわかりやすいため、改善に向けたアクションをしやすくなります。ヒートマップの概要は、以下の記事をご参考にしてください。

LP を作るときは、ターゲットにとって必要な良い情報を準備しなければなりません。ただ、見た目のデザインも大事です。

デザインは、LP に訪れた人の印象を決めるものです。見た目により、中身の情報が活きるか否かが決まるのです。

そんなデザインについて、成果を上げるうえで抑えたいの基本は次の5つです。

成果を上げるLP のデザインに必要な5つの基本

デザインの基本について、抑えてほしいのは次の5つです。それぞれ詳しく説明していきます。

1. 「色」はメイン、サブ、アクセントの3色を中心に配色する
2. 「フォント」の表現手法でデザインにメリハリをつける
3. 情報を「揃え」、認識しやすくする
4. 「余白」を使い伝わりやすくする
5. 写真やイラスト、動画も使い伝わりやすくする

1.「色」はメイン、サブ、アクセントの3色を中心に配色する

たくさんの色で配色するデザインは難易度が高く熟練したデザイナーでも難しいでしょう。

以下は、多色で配色したコンテンツを3色で配色したコンテンツに変更した例です。

色を絞った方が良い印象ですよね。意図なく色を増やすと散らかった印象を持たれたり、情報が入りづらくなったりします。

みなさんがデザインを通して与えたい印象に信頼、高級感、清潔感などがあるとき、色に一貫性を持たせることは大事です。そこで使用する色にルールを設けることをおすすめします。

配色は、メインカラー、サブカラー、アクセントカラーの3つを中心に決めるとよいです。

メインカラーは、メインで使う中心の色です。サブカラーは、メインを補完する役割の色です。そしてアクセントカラーは、注目させたいときに使用する色です。

まずはこの3つの色を中心に配色しましょう。そのうえで、色の追加を検討するのがオススメです。

配色で悩むのは、3色をどう決めるか？配色のバランスは難しいものです。そこで実行できるのは、配色パターンの見本を見ることです。

Google で「配色見本」と検索しましょう。配色の見本を掲載した参考サイトがたくさん表示されます。また、本で学ぶのもオススメです。配色のアイディアが載っている本もたくさん販売されています。

2.「フォント」の表現手法でデザインにメリハリをつける

フォントの表現手法で学びたいのは、種類、大きさ（フォントサイズ）と太さです。文章の表現を統一しすぎると、目立たせたい情報が目立たないデザインになります。

以下は、見出しのフォントサイズを通常の文章と同じにしているものを、フォントサイズ大きくし、太字に変更した例です。

フォントの大きさや太さを変えることで、目立たせたい情報が目に入ってきやすくできます。

フォントの種類は、日本では大きく分けるとゴシック体と明朝体があります。オススメなのは、ゴシック体のフォントです。ゴシック体の方が、視認性が高い、読みやすい文章になります。

参考：ホームページに使えるおすすめフォント12選と選び方のポイント｜ジンドゥー

3.情報を「揃え」、認識しやすくする

文章や画像の位置を揃えるのはデザインの基本です。揃えることで統一感が生まれ、情報を認識しやすくなります。揃え方により、読みやすさが変わるのですね。

以下は、各コンテンツが揃っていないデザインを左揃えにした例です。

どちらのデザインが良いかは、一目瞭然ですよね。左揃え、中央揃え、右揃えを混在することは避けましょう。

文章は、情報を洗練させることができる左揃えにするのが基本です。見出しは、中央揃えにすることもありますが、迷ったら、まずは左揃えでデザインするとよいでしょう。

4.「余白」を使い伝わりやすくする

余白を活用すると、情報が入ってきやすいデザインにできます。余白を入れるのは、コンテンツとコンテンツの間や文章の行間です。

余白は、情報を区切る効果があります。余白をうまく使うと、読み手に意図することを伝えやすくなるのです。以下は、コンテンツとコンテンツの間に余白が少ないデザインを、余白が十分あるデザインに変更した例です。

余白を十分とることがコンテンツを区切る効果となり、読み手に情報のまとまり感を与えることができます。

そんな余白も統一感をもたせることが大事です。各コンテンツの前後にもうける余白の高さ、また、文章の行間の余白は統一させましょう。

5.写真やイラスト、動画も使い伝わりやすくする

写真は、直感的に伝えたいことが伝わりやすくなる効果的なものです。文章だけでなく、写真を使うことも考えましょう。写真を使うことで文章で伝えたいことを補完することもできます。

以下の例は文章だけのコンテンツに、写真を追加したものです。伝えたいことが「対面コンサルティングのサービスがある」であるので、実際の様子を写真で掲載しました。

写真込みの方が、伝えたいことがしっかりと表現でき、読者も具体的なイメージが湧きやすくなります。

写真で伝わりやすさを追求するときに、写真の内容はゴチャゴチャしたものよりも、伝えたいことに焦点をあてた内容にするのが基本です。

もちろん写真だけではなく、イラストや図、動画を使うことも検討しましょう。

どの素材を使うかで迷うときに考えることはシンプルです。考えるのはどの素材を使えば、伝えたいことが伝わりやすくなるかです。ユーザーの気持ちに立って考えてみましょう。

LP のデザインに迷うときに見る参考サイト

LP をはじめて作るときは、デザインのイメージがわかないものです。その原因として考えられるのは、参考になる LP に出会えていない可能性が高いです。そこでオススメなのは、数多くの LP に見ることです。

他の LP のデザインをたくさん見ることで、色や写真をはじめとした「自分が LP を作るときのアイディア」が出やすくなります。結果的に LP を作るときのイメージがしやすくなるわけです。

参考サイトをなんとなく見るのでは、自分が LP を作るときの学びになりません。参考にする LP やサイト見る前に次のことを考えながら見るようにしましょう。

• 誰をターゲットにした LP か？
• LP の目的（コンバージョン）は何か？
• 目的の達成を目指し、どんなコンテンツを掲載しているか？
• コンテンツを、デザインの力でどのように表現しているか？

では、どうやって参考サイトを探すのか？具体的なアクションは2つあります。

まず1つ目は、実際に検索して、過去に作成されたページを見ることです。Google で「ランディングページ デザイン」、「LP 制作 実績」などと検索しましょう。

また、自分が作りたい商材に関する LP を見るのもオススメです。たとえば、「英会話」のページを作りたいのであれば、「英会話スクール」、「オンライン英会話」などで検索して、実際に出てくるページを見てみましょう。

2つ目は、LP のデザインをまとめているサイトを見ることです。オススメのサイトとその特徴を簡単にまとめたので参考にしてみてください。

サイト名	特徴
LP 幹事	・業種／色／イメージから検索可能 ・PC 版、スマホ版を切り替えて確認できるので便利 ・現在みている LP と似ているLP デザインの事例を掲載する機能あり
LP アーカイブ	・LP デザインが30,000以上も掲載（PC デザイン：20,000以上、スマホデザイン：10,000以上） ・色、イメージ、カテゴリ（業種）などで検索可能
LP advance	・色、イメージ、カテゴリだけでなく、メインビジュアル（男性、女性、物、イラスト、動物など）でも検索可能 ・お気に入り機能あり ・サインインなしで利用可能
Wed Design Clip	・「メインカラー」と「サブカラー」で検索可能 ・スマホのデザインのみの絞り込みあり ・海外の LP もあり
Land-book	・海外の LP のまとめ ・人気のあるデザインに並べ替え可能 ・EC やブログでの絞り込みあり

デザインの「ルール」を決めるのが重要

LP の制作は、その前の準備で勝負が決まるといっても過言ではありません。準備の1つはコンテンツ、そしてもう1つはデザインです。

デザインの準備については、まずはこの記事を参考にデザインのルールを決めるとよいでしょう。

ルールは制約、守らなければならないものです。ルールを定めない状態は無法地帯になります。ルールなしで LP を制作すると統一感のないページになるかもしれません。そうすると準備したコンテンツを台無しにしかねません。

LP を作ったあとは、ターゲット視点で確認しましょう。読みやすいか、わかりやすいか、そして伝わりやすいかの視点です。

良いコンテンツを良いデザインで表現することが、コンバージョン率を上げるうえで大事なこと。まずは、今回お伝えした5つの基本を参考に、LP のデザインに挑んでいただけると嬉しいです。

LP の悩み相談を受け付けています。LP の制作と改善から、リスティング広告の運用、マーケティング全般の悩みまで相談できる研究会は以下のページをご覧ください。