LPデザインに欠かせない8つのコツと参考にしたいまとめサイト｜Webサイト制作 / CMS・MAツール｜LeadGrid（リードグリッド）

「LP（ランディングページ）を作成したいが、どのようにデザインしていいか分からない」とお悩みのWeb担当者の方は多いのではないでしょうか。

実は失敗しない効果的なLPデザインを作るには、必要なコツを抑える必要があります。

本記事では、抑えるべきLPデザインのコツと参考にしたいLPデザインまとめサイト12選をご紹介。初めての方にも分かりやすい、目的に応じたデザイン例の探し方もお伝えします。

ぜひ、最後までご覧ください。

関連記事：ランディングページ（LP）とは？作り方やホームページとの違いについて解説

効果的なLPデザインにする8つのコツ

効果的なLPデザインを作成するために必要な、8つのコツをお伝えします。コツを意識しながら、デザインを見返すことで、最適なデザインを導けるでしょう。

• ファーストビューを重要視する
• 顧客志向を意識したトンマナ
• メリハリのある構成／デザイン
• 細部までこだわりを持つ
• ユーザーの心理的負担を最小限にしたデザイン
• 色使いを工夫している
• モバイルに最適化させている
• イメージに当てはまる参考デザインを探す

なお、これらのデザインのポイントはランディングページを制作する目的や特徴、望ましいページ構成を理解しておくと自然と意識できる項目も多いため、ランディングページ制作の全体像もあらかじめチェックしましょう。

詳細はランディングページ制作・最適化マニュアルにてまとめておりますのでぜひご利用ください。

ランディングページ制作・最適化マニュアル|Webサイト制作・CMS開発｜LeadGrid

goleadgrid.com

1. ファーストビューを重要視する

訪問ユーザーが最初に目にするランディングページの上部をファーストビューと言います。ファーストビューは、ユーザーがランディングページをスクロールするかどうか決める重要な要素です。

そのためファーストビューを重要視して、ユーザーの興味をひきつける魅力的なデザインであるか確認しましょう。

関連記事：LPのファーストビューを見直して成果アップ！改善や設計のポイント

2. 顧客志向を意識したトンマナ

デザイン作成では、顧客志向を意識して、カラーやテキスト表現などのトンマナを合わせることが重要です。

たとえば、不動産業界のLPでは、商材やターゲットに合わせてデザインを大きく変えています。「女性向けの賃貸物件」であれば、ピンクなど女性らしい色を基調として、おしゃれできれいな印象を与えるデザインが多いです。一方で「一戸建て住宅」であれば、家族や住宅の写真を使って、暮らしがイメージできるようなデザインがよく用いられます。

トンマナにズレがないか、見ていて違和感がないかを確認しましょう。

3. メリハリのある構成／デザイン

LPでは、視覚的に訴求することが重要です。

しかし全ての要素に装飾を加えすぎると、訴求ポイントが分かりづらいページになってしまいます。

そのためCVボタンや、キャッチコピーなど、目立たせるべきポイントのみを大きく目立たせ、メリハリをつけた構成／デザインになっているか確認しましょう。

4. 細部までこだわりを持つ

細部までこだわれていないLPは、素人感が出てしまい、自社のブランディングに悪い影響を与えかねません。

誤字脱字やレイアウトの乱れがないかなど、細部までこだわっているか確認しましょう。

5. ユーザーの心理的負担を最小限にしたデザイン

ユーザーが素早く欲しい情報を得られるようにするなどして、ユーザーの心理的負担を最小限にすることもポイントです。

CVボタンが見つけにくかったり、入力フォームの入力項目が多すぎたりすると、離脱率が上がる場合があります。ユーザーがめんどくささを感じる要素を徹底的に抑え、スムーズにCVに誘導できるようにデザインされているか確認しましょう。

6. 色使いを工夫している

デザインでは色使いの工夫も重要です。

CVボタンに補色を上手く活用して誘導しやすくなっているか、ブランディングを意識した色になっているかなど、色使いを確認しましょう。

関連記事：ホームページカラーの配色決定の方法とコツ｜HTMLでの表現と便利ツールも解説

7. モバイルに最適化させている

Webページ全体の閲覧デバイスはモバイルが主流のため、モバイル最適化は重要です。

モバイルに最適化されたLPの参考事例を探すには、モバイルデザインやレスポンシブデザインに特化したのLP事例サイトを見るのがいいでしょう。

関連記事：レスポンシブデザインの作り方を解説！ 初心者向けにテンプレートも紹介

8. イメージに当てはまる参考デザインを探す

初めてLPをデザインする場合、イメージに当てはまるデザインを探すことは、効果的なデザインを作る方法の1つです。参考デザインを探す際は、まとめサイトを活用すると良いでしょう。

次の章ではまとめサイトで参考事例を効率的に探す3つの方法をご紹介します。

デザインまとめサイトで参考事例を効率的に探す方法3つ

LPのまとめサイトの活用は、作りたいページのイメージが掴みやすくなるため、おすすめです。

一方で事例が多すぎるため、自分が求めるものを探すことに時間がかかることもあります。効率的に参考にできるデザインを探すために、次の3つの探し方をしてみましょう。

• 業界やカテゴリーで探す
• カラーで探す
• イメージやメインビジュアルで探す

関連記事：LPの制作実績を制作会社や業界ごとに紹介｜おすすめ事例サイトも

1. 業界やカテゴリーで探す

LPの特徴は業界ごとに異なります。そのため、どんなLPにしたいかイメージを掴めない場合、まずは業界内で探して特性を掴むようにしましょう。

また同じ業界内の、特に競合他社のLPは確認しましょう。これは業界内でも、扱う商材によって特性が異なることが多いためです。たとえば同じ食品業界でも、サプリと飲料ではLPの構成が変わります。より絞ることで、自社のイメージに近いものを探しやすくなります。

また業界と似た検索方法で、カテゴリーで探すこともあります。まとめサイトで業界の検索方法が見つからない場合は、カテゴリーで検索してみてください。

2. カラーで探す

会社や商品、サービスのイメージに合った、カラーで探す方法も有効です。多くのまとめサイトでは、カラーで検索する方法を用意しています。

会社や商品で意識しているカラーに合わせたLPは、統一感もありユーザーに納得感を与えます。メインカラーとサブカラーをそれぞれ決めて、検索できるサイトも多いです。イメージカラーにあった具体的な例を探してみましょう。

またカラーが具体的に決まっていない場合は、色の特性から探す方法もおすすめです。たとえば、赤色には「情熱的」、黄色には「希望」というイメージがあります。カラー選びに迷った場合は、その商品やサービスのイメージからカラーを選び、検索してみてください。

3. イメージやビジュアルで探す

「かっこいい」や「かわいい」、「高級感がある」といったイメージで探す方法もあります。会社や商品、サービスのイメージを考え、それに合ったものをまとめサイトで探してみてください。

またメインビジュアルで探せるサイトもあります。LP内で登場させたいものが、男性、女性、動物など決まっている場合は、こちらの方法も有効です。

デザインの参考になる国内のLPまとめサイト9選

それでは、デザインの参考になる国内のLPまとめサイトの中から、おすすめ9選を紹介します。

• matome
• LPアーカイブ
• ランディングページ集めました。
• LP advance
• WebDesignClip
• RESPONSIVE WEB DESIGN JP
• LP幹事
• SANKOU!
• bookma!

1. matome｜マーケティング視点で厳選したデザインを掲載

2. LPアーカイブ｜3万点越えの圧倒的掲載量

3. ランディングページ集めました。｜Webディレクターが厳選

4. LP advance｜メインビジュアルやエフェクトで検索できる

5. WebDesignClip｜検索タグの豊富さが売り

7. LP幹事｜組み合わせ検索で効率的に

8. SANKOU!｜細かい条件設定ができる

9. bookma!｜PCデザインとSPデザインが横並びで表示

デザインの参考になる海外のランディングページまとめサイト3選

海外のサイトでも、おしゃれで洗練されたデザインが掲載されているランディングページのまとめサイトがあります。本記事では厳選して、3つ紹介します。

• ONE PAGE LOVE
• Land-book
• OnePageMania

1. ONE PAGE LOVE｜無料テンプレートも配布

2. Land-book｜シンプルで見やすい

3. OnePageMania｜いいねランキングで探せる

LPをデザインするための代表的な4つの手段

ここまででLPのデザインが固まったら、実際に制作に取り掛かります。

制作方法は4つあり、それぞれ費用やメリットが異なります。予算や目的に合わせて、自社に合った方法を選びましょう。

• LP制作会社に依頼する
• フリーランスに依頼する
• 社内デザイナーに依頼する
• LP制作ツールを利用する

1. LP制作会社に依頼する

LP制作会社に依頼する方法です。

制作会社に発注する場合には、テンプレートを使用しないオリジナリティのあるデザインを作成してもらえる場合が多いです。

制作会社の規模や依頼内容によって、10万円程度から50万円以上まで費用に幅があります。

関連記事：LP制作に強い制作会社13社｜選び方のポイントも解説

2. フリーランスに依頼する

LP制作はフリーランスに依頼することもできます。

フリーランスに依頼する場合は、LP制作会社よりもコストを押さえて依頼できるでしょう。

フリーランスは柔軟に対応してくれる場合が多く、10万円以下でデザインのみ依頼することもできます。

3. 社内デザイナーに依頼する

社内にデザイナーがいる場合には社内デザイナーに依頼することもできます。

社内デザイナーであれば、外部に依頼するよりもコミュニケーションコストが下がるため、スムーズにデザイン作成が進められるでしょう。

4. ランディングページ制作ツールを利用する

LPを自社で内製したいときは、LP制作ツールを利用する手段もあります。こちらは社内にデザイナーがいない場合に有効です。

LP制作ツールを使うと、テンプレートを活用して、誰でも簡単にハイクオリティーなデザイン作成ができます。

無料のLP制作ツールもあるので、気軽に試してみてください。

関連記事：無料LP制作ツール5選｜選ぶポイントやメリットとデメリット

まとめ

ランディングページの参考デザインを探す際には、ランディングページまとめサイトを活用するのがおすすめです。

ランディングページまとめサイトは、自分でランディングページをデザインする際はもちろん、ランディングページ制作会社やフリーランス、社内デザイナーとイメージをすり合わせる際にも役立ちます。

後半に紹介した7つのポイントも参考に、自社に合った参考例を探してみてください。

LPを作成するときには、LeadGridがおすすめです。

LeadGridはLPやWebページの作成機能だけでなく、運用に必要な機能を多角的に備えたCMSツールとなっています。さらにテンプレートを活用することで、デザイン性の高いLPを比較的安価に作成することも可能です。

ページを見たまま編集できる「ページ管理機能」や、ドラッグ&ドロップで簡単にフォームを作成できる「フォーム管理機能」が用意されており、運用も簡単。無料ツールで作成するLPと完全オーダーメイドのLPのいいところどりが可能なLeadGridをぜひお試しください。

LeadGridの詳細はこちら