LPデザインのヒントに！参考にするべきサイト16選と4つのコツ

ランディングページ(LP)のデザインを考えなくてはいけなくなった！だけどLPってどうやったら上手く作れるんだろう…と思っていませんか？

LPのデザインを上手く作るコツは、実は事前準備とテストにあります。

本記事では、LPデザインをするにあたって気をつけるべきポイントと、今すぐ参考に出来るギャラリーサイトを分かりやすくまとめました。

13万人以上のユーザー数を誇る、１枚ペラのホームページやLPを作成できるサービス「ペライチ」を提供する筆者が、実際にLPの制作をおこなう際に意識しているポイントをご紹介します。

本記事を読めば、はじめてLPを作る方でも自社の商材に合ったデザインを考え、高い結果を誇るLPを作成することができるでしょう。

また、LPの制作会社に依頼する方法もあるので、自社制作がうまくいかない場合は検討してみると良いでしょう。

勝てるLPデザインをデータとAIで制作するサービス「AIR Design」

デザイン決定までの手順

LPのデザインを決めるには主に、

• 事前準備
• デザイン構成
• テスト

の3ステップがあります。

事前準備

詳しくは後述しますが、まず始めに「誰になにを届けるためのLPなのか」を決める必要があります。

LPはデザインがオシャレであれば良いと言うものではありません。どれだけ素晴らしいLPのデザインを真似ても、それが自社の商品やサービスに適切なものでなければ「なんとなく綺麗なLP」にしかなりません。そこでLPのゴールとターゲットを明確にしましょう。

デザイン構成

事前準備を経て、初めて具体的なデザイン構成へと入っていきます。

ギャラリーサイトなどを参考にしながら考えて行くわけですが、

• 印象付け（キャッチコピーなど）
• 商品とその効果の提示⇨世間的な評価の提示（Q&Aやインタビュー記事など）
• Q&A

という構成が、多く用いられることが多いです。

テスト

LPは作って終わりではありません。ヒートマップなどの分析ツールテストを用いて、ボタンの色や文言、コンテンツの順番など細かいレベルで「仮説の設定⇨検証」を繰り返すことで、より効果の大きいLPにしていきましょう。

LPデザインの改善に悩む担当者の方は多くいます。こちらの資料には半年でCV率が130%改善した事例がまとめられています。無料でダウンロードできますので、ぜひご覧ください。
20,000件以上のデータベースから、最短30秒でWebデザイン改善案を入手できる「dejam」

押さえておきたい！デザイン決定のコツ

3ステップの中の「事前準備」が明確でないと、LPのデザインは決まってきません。

そのため、「誰になにを届けるためのLPなのか」をしっかりと固めることがデザイン決定のための重要なポイントです。

誰に届けるLPなのか

作成するLPは誰をターゲットにしたものなのでしょうか。

男性なのか女性なのか、若者なのか高齢の方なのか、どんな仕事や関心を持った方なのか。そのような要素により、作るべきLPのデザインは大きく変わってきます。

具体的にペルソナを設定し、「LPで訴求する商品やサービスを使用・購入する人にはどんな人が多いのか、どう言った人に広げたいのか」を項目ごとに考えましょう。

設定するべき項目は商品やサービスによってもある程度異なりますが、

• 年齢
• 性別
• 学歴
• 居住
• 職業
• 役職
• 年収
• 家族構成
• 趣味や関心

を考えると良いです。

なにを届けるLPなのか

例えば、「自社サービスの会員を増やしたいからLPを作って広告運用をしたい」という場合、以下のような検討するべき項目があります。

• LPで会員登録をさせるのか、資料請求をさせるのか
• どんな用途でサービスを使う会員が欲しいのか
• 法人と個人どちらの会員が欲しいのか
• 増やしたいのは、無料会員なのか有料会員なのか

このようにLPを作る目的の深掘りをすることで、より具体的にしましょう。まず上記の「誰に届けるか」を明確にすると、「なにを届けるか」もよりイメージしやすくなります。

デザインの参考になる！LPまとめサイト一覧

LPのデザインを考えるにあたって参考にしたいギャラリーサイトを、日本国内の事例を紹介しているサイトを12個、海外の事例を紹介しているサイトを4個並べました。

縦長デザインに強かったりスマホ対応サイトの事例が多かったりと、それぞれのサイトに特徴があるので、そちらも合わせてご紹介します。

日本国内のギャラリーサイト

圧倒的な登録サイト数を誇る「LPアーカイブ」

LPアーカイブ

12,000件を超えるLPと、カラーやカテゴリだけでなく〇〇系という雰囲気での検索機能を備えているので、デザイナーやディレクターの方がクライアントの考えているイメージをデザインに落とし込む際に役立ちます。

売れるLPを知ることができる「ランディングページ集めました。」

ランディングページ集めました。
Webディレクターの管理人が、商材ごとにLPを分類して紹介しています。キレイだったりカッコよかったりするだけでなく、「売れるサイト」も含まれているので結果に結びつくLPの制作に役立ちます。

キャッチコピーでLPを探せる「LP advance」

LP advance
「カテゴリー」「カラー」「タイプ」「メインビジュアル」を掛け合わせ、より詳細な条件でLPを探すことができます。

また、LPのキャッチコピーを探すこともできるのでデザイナーやディレクターの方だけでなくコピーライターの方にも役立つサイトとなっています。

メインカラーとサブカラーの組み合わせで検索できる「Web Design Clip [L]」

Web Design Clip [L]
メインカラーとサブカラーを掛け合わせてLPを検索できるので、ボタンの色や文字の色に悩んだ際に参考になります。
また「フッター固定」などかなり具体的なタグ付けもされており、痒い所に手が届くサイトです。

スマホ向けLPに特化した「LANDINGPAGE DESIGN BOOKMARK SMARTPHONE」

LANDINGPAGE DESIGN BOOKMARK SMARTPHONE
スマートフォン向けLPに特化したギャラリーサイトです。カテゴリーは限られているものの、美容や不動産のスマートフォン向けLPを作る際には参考になるでしょう。

レスポンシブウェブデザインを集めた「RESPONSIVE WEB DESIGN JP」

RESPONSIVE WEB DESIGN JP
レスポンシブウェブデザインのLPに特化したギャラリーサイトです。ECサイトや採用サイトなどの「サイトタイプ」やBootstrapやHTML5など用いられている技術から選べる「テクニック」という他のギャラリーサイトにはあまりないカテゴリーからサイトを探せることが特徴です。

美容関係のLPを商材ごとに探せる「LANDINGPAGE BOOKMARK」

LANDINGPAGE BOOKMARK
美容関係のLPに強いギャラリーサイトです。カテゴリーの分類が細かく「グルコサミン」「黒酢」「しょうが」など、美容関係の方なら自社商品に近いページを探し参考にすることができます。

なんとなくのイメージでLPを探せる「イケてるランディングページデザインまとめ」

イケてるランディングページデザインまとめ
LPの制作もおこなっている企業が運営しているギャラリーサイトです。「オーガニック系」や「信頼・安心系」などイメージごとのカテゴリー分けもあるので、クライアントとの打ち合わせなどの際にデザインイメージを共有するためにも役立ちます。

ブログと組み合わせて優れたUIを！「MUUUUU.ORG」

MUUUUU.ORG
「視差効果（パララックス）」や「特殊なWebフォント使用」「雑誌風」など他のギャラリーサイトでは見ないカテゴリーもありWebデザイナーの方が情報設計する際に役立ちます。

また、同じ方が運営しているQUOITWORKS BLOGでは主にUIについての記事があるので合わせて参考にすると良いでしょう。

セールスレターを作るなら「縦長ページのデザイン集めました」

縦長ページのデザイン集めました
セールスレターに特化したギャラリーサイトです。その特性上、胡散臭いものになりがちなセールスレターですが、どうしたら良いイメージを抱かせるページを作れるのかを学べます。

美容や化粧品に特化した「美容・化粧品（コスメ）ランディングページギャラリー」

美容・化粧品（コスメ）ランディングページギャラリー
その名の通り美容や化粧品のLPに特化したギャラリーサイトです。ブランド別にLPを見ることもできるので、各社のイメージを理解する一助にもなります。

年ごとの流行デザインがわかる「ランディングページまとめサイト」

ランディングページまとめサイト
Webサイト構築やランディングページ制作もおこなっているビーダッシュ株式会社が運営しているギャラリーサイトです。

カラーや業界などの一般的なカテゴリーが揃っている他に、アーカイブで年ごとにも見ることができるので今年の流行デザインを一目で把握することができます。

海外のギャラリーサイト

コメントからLPの長所がわかる！「ONE PAGE LOVE」

ONE PAGE LOVE
LPに限らず様々な1ページのサイトを集めている海外のギャラリーサイトです。「受賞ページ」や「スタートアップ」など日本のギャラリーサイトでは見ないカテゴリが多くあります。

また、ページごとにコメントが付いているので参考にすべき点がわかりやすいのが特徴です。

レコメンド機能で求めてるLPを簡単に探せる「Landingfolio」

Landingfolio
こちらもカテゴリーがかなり詳細に設定されています。またレコメンド機能があり、一つのLPを閲覧するとそれに似たLPも紹介してくれるので自分の求めているイメージに近いLPを探すのが比較的簡単にできます。

SNSでのシェアも簡単な「Lapa Ninja」

Lapa Ninja
豊富なLPとカテゴリーもさることながら、このサイト自体のデザインも参考になります。

ワンクリックで直接実際のLPを見ることができたり、SNSへのシェアボタンもあったりとユーザー目線で作られています。

閲覧数で人気なLPがわかる「Land-book」

Land-book
上記でもあげた「レコメンド機能」や「SNSへのシェアボタン」を備えています。また、LPごとに閲覧数があり検索結果を閲覧数で表示することもできるので、人気なデザインの把握の一助ともなります。

意識するべきLPデザインのコツ

事例を見るだけでは分かりにくい、実際にLPデザインを考える際に検討したい4つのコツをご紹介します（参考：LP作成の責任者であるWEBディレクターが知っておくべき基本知識）。

画像にこだわり効果的なファーストビューに

LPに限らずサイト作成において画像の選定は重要な要素です。中でも、ファーストビューに用いる画像にはこだわりましょう。

ファーストビューはページを訪れたユーザーが読み進めるかを決めるポイントであり、ファーストビュー次第で離脱率が大きく変わります。
キャッチコピーなどの文章と画像をうまく掛け合わせましょう。

こちらの日本ガラスびん協会のLPでは、ファーストビューで様々なビンの写真を流し、キャッチコピーとロゴをさりげなく、しかし目立つように添えてあります。

このように画像を大きく用いて動かすことで、CVにつながるLPにしましょう。

参考：びんむすめプロジェクトキャンペーンサイト｜日本ガラスびん協会

アニメーションで最後まで読まれるLPに

縦の移動に合わせて、動画や画像を動かすことで最後までスクロールしてもらいやすくなります。

株式会社ベストアグリフーズのサイトでは、野菜の画像でアニメーションを作りスクロールを誘導しています。

参考：カット野菜、オーダーカット野菜の株式会社ベストアグリフーズ｜石川県金沢市、福井県

補色の活用でコンバージョンを狙う

サイトにおいて色味の統一というのは重要です。最もよくある例が、ブランドや商品のイメージカラーを基調の色とするというものです。
しかし、ここで活用するべきなのが補色です。補色とは、互いを最も目出せる色のことです。

例えばペライチのイメージカラーは水色なので、ホームページのトップ画面も水色が基調となっていますが、登録ボタンは補色のオレンジ色となっています。こうすることでザッと流し読みしているユーザーの目にも登録ボタンが入りやすくなります。

お客様の声を掲載しユーザーの信用を獲得

情報が多すぎるようになった現在、ユーザーはUGC（ユーザー作成コンテンツ）というユーザーが作ったコンテンツをより信じる傾向があります。実際に、ECサイトで買い物をする際にレビューをチェックする方は多いのではないでしょうか。

それと同じくLP上にも、お客様の声を掲載することは重要です。サービスや商品の場合は実際の利用者の声を掲載します。またキャンペーンの場合はハッシュタグを活用し、参加しているユーザーのSNSでの投稿を載せることも効果的です。

テストを繰り返して、より優れたデザインに

いかがでしたか？

LPは様々な企業がテストを繰り返しながら日々作られているので、他社の事例を把握することは重要です。しかし、他社のものを真似るだけでは適切なLPとはなり得ません。

今回ご紹介した重要なコツやポイントを踏まえ、なによりもLP公開後にテストを繰り返しすることで改善し、より効果の高いデザインにしていきましょう！

自社でのLPデザインがうまくいかない場合は他社制作も検討してみましょう

本記事では、LPデザインにおけるコツや参考になるサイトを紹介しました。
しかし、LPのデザイン改善がなかなかうまくいかない場合もあるでしょう。

そういった場合は、他社制作を依頼するのも検討に値する手です。

「AIR Design」は、独自に収集した30万件のマーケットデータと、過去5,000以上のテスト結果をもとにAIを用いてランディングページを解析します。

一発勝負ではなく、データを基に計画的にテストを繰り返して制作するので、制作者の勘や経験に頼らない再現性のある「売れるランディングページ」が制作できます。

そんな「AIR Design」のサービス資料をご用意したので、LPの他社制作を検討している方はぜひダウンロードしてご一読ください。

【連載】LISKULのランディングページ（LP）改善ガイド

当サイトLISKULではランディングページ（LP）改善のポイントを複数の記事で説明しています。

1. ランディングページ（LP）とは？10分でわかるLPの目的・メリット・作り方
2. ホームページとランディングページの違いは？集客方法によって使い分けよう！
3. LPデザインのヒントに！参考にするべきサイト16選と4つのコツ
4. 記事型LPとは？読みたくなるLPを作成するポイント14選
5. はじめての方でも作れるランディングページの王道テンプレートを大公開！
6. イメージ通りのLPを作るための、WEBディレクションの10のコツ
7. ランディングページの効果とは？失敗を避けるための６つのポイント
8. おすすめLPOツール10選を徹底比較！CVR向上につなげる施策とは？
9. 【保存版】作りたいイメージ別！ランディングページ 「デザインの指南書」
10. リスティング広告のLPで効果3倍！5分でわかる改善のコツ
11. 成果につながるLP制作のノウハウ記事14選|初心者～上級者のお悩み別テクニック集
12. 申込率を5倍改善！ランディングページ制作で押さえるべきポイント
13. 4つの参考事例から学ぶ、ランディングページの成果を3倍にするコツ
14. ランディングページ最適化（LPO）とは？たった一つの工夫で問い合わせを10倍にした事例
15. LPOツールでCVR4倍！12のセグメント別出し分け手法
16. 売上を大きく左右するランディングページ作成前の戦略設計3ステップ
17. ランディングページの制作を依頼する上で知っておくべき相場など、重要な3つのポイント
18. 戦略的LPO｜まだ伸ばせる?! さらに効果を上げるためのLP定石14個とその対策
19. 今すぐ使える！スマホLP最適化Tips6選！
20. 業界平均に意味は無い｜コンバージョン率を最大6倍アップさせたLP改善ポイント
21. LPでネット獲得率倍増！│最低限知っておくべき3つの基礎

（あわせて読みたい資料）

1. 【事例付き】マーケティング最適化に役立つA/Bテスト入門ガイド
2. フェーズ別ランディングページ改善マニュアル＜前編＞