LP（ランディングページ）のデザイン２５選【ギャラリー・事例・トレンド別に紹介】
LP（ランディングページ）は、ユーザーにアクションを促すためのWebページです。
そのため、多くの担当者はコンバージョンのみに焦点を当て、デザインやUXに考慮を払わない傾向があります。
しかし、多くの企業がLPを採用するなかで、自社がより多くのコンバージョンを獲得するためには、ユーザーを惹きつけるようなデザインも必須といえるでしょう。
そんなLPのデザインについて考える上で、
『参考になるLPのデザインの探し方がわからない』
『LPデザインの参考になるサイトが知りたい』
『LPデザインのコツが知りたい』
上記のような課題が生じるかと思います。
今回のコラム記事では、企業の担当者様へ向けて「LPデザインの探し方のコツ」「LPのデザイン参考事例」「ギャラリーサイト」「２０２２年最新版のLPのトレンドデザイン」を紹介しています。
LP（ランディングページ）デザインの探し方のコツ
はじめにLPデザインを探すコツを２つ紹介します。 下記内容を理解した上で、自社にあったデザインを見つけてみましょう。
- 同じ業種から探す
- カラーで探す
同じ業種から探す
LPデザインの探し方のコツ１つ目は、同じ業種から探す方法です。
どんなLPが効果的なのかは、業種によってことなるので、同業種のLPから参考にするのがベストでしょう。
デザインで差別化を図りたいにしても、同業種のデザイン傾向を知っておかないと対処はできません。
今回紹介するギャラリーサイトは「業種別」で検索できるWebサイトも多いので、試してみましょう。
カラーで探す
LPデザインの探し方のコツ２つ目は、カラーで探す方法です。
コーポレートカラーが決まっているのであれば、ギャラリーサイトの検索機能を使ってカラーから好みのLPデザインを見つけます。
他社のLPから「カラーの組み合わせ」や「CTAのカラー」を学んで、自社LPに反映してみましょう。
参考になるLP（ランディングページ）のデザイン参考事例１０選
参考になるLPのデザイン参考事例１０選を紹介します。
下記の事例に同業種のものがあれば参考にしてみましょう。
Chatwork
出典：Chatwork
Chatwork（チャットワーク）は、電話や会議など仕事で必要なコミュニケーションを効率するビジネスチャットです。
LPデザインでは、ファーストビューに「ビジネスチャット国内利用者３年連続NO.１」の実績が記載されています。
その直近には「導入企業社数の提示」や「導入企業のロゴ」も掲載されていることから、社会的証明を全面に押し出したLPデザインといえるでしょう。
Video BRAIN
出典：Video BRAIN
Video BRAIN（ビデオブレイン）は、あらゆる用途での動画制作をワンストップで提供するプラットフォームです。
LPのファーストビューでは「受賞歴」と「大きなCTA」が目立つ配置になっています。
また、Video BRAINは動画制作のプラットフォームということもあり、背景に動画を採用しているのも特徴です。
ジョブカン
出典：ジョブカン
ジョブカンは、誰でもかんたんに利用できる勤怠管理システムです。
知名度のある有名人を採用したファーストビューが印象的となっています。
また、LPの下部では「CTA」の直上に「１分間で登録完了」「３０日間無料」など、コンバージョンを促すテキストが記載されているのも特徴です。
MiiTel
出典：MiiTel
MiiTel（ミーテル）は「IP電話」「自動録音」「文字起こし」などの機能が１つになったツールです。
LPの基本カラーを「水色」「白」の薄い色にすることで「オレンジのCTA」が目立つデザインになっています。
通常のコンテンツとCTAのメリハリのつけ方が参考になるLPデザインといえるでしょう。
WHILL
出典：WHILL
WHILL（ウィル）は、近距離移動に特化した次世代型電動車椅子です。
LP上では３つの車椅子を紹介しており、各コンテンツを水平に分割したデザインになっています。
コンテンツがしっかり区切られているので、LP上で複数の商品を紹介したいときに、最適なデザインといえるでしょう。
三井住友銀行
出典：三井住友銀行
三井住友銀行の人材獲得用のLPでは「いい子になるな、いい個になれ」というキャッチコピーが特徴的です。
社員インタビューに関しても「いい個たち」と表現しており、メッセージ性の強いLPに仕上がっています。
MOOJUU BREAD
出典：MOOJUU BREAD
MOOJUU BREAD（モージューブレッド）は、北海道の素材をふんだんに生かしたパンをLP上で販売しています。
LPに採用されている「パンの画像」のクオリティが非常に高く、画像から「ふわふわ食感」が伝わってきます。
食品を扱う企業の方は、MOOJUU BREADのLPを参考にしてみましょう。
BOTANIST
出典：BOTANIST
シャンプーブランドのBOTANIST（ボタニスト）では、新しくリニューアルした内容を含めたLPを公開しています。
「Webページ上部の共感」→「金額提示とCTA」→「口コミ紹介」と基本をしっかり押さえた、お手本となるLPデザインといえるでしょう。
SIXPAD STATION
SIXPAD STATION（シックスパッドステーション）は、電気刺激によって筋肉トレーニングをサポートするEMSを活用したトレーニングジムです。
最先端のトレーニングとなるため、LP上には運動医科学によって証明されたデータが多く掲載されており、権威性を意識したデザインになっているのが特徴といえます。
個別指導 明光義塾
出典：個別指導 明光義塾
個別指導 明光義塾は、中学生～高校生までの学習塾です。
「９２%の保護者が成績アップを実感」など、保護者というターゲットに対して、さまざまなメリットがLP内で提示されているデザインとなっています。
LP（ランディングページ）のデザインギャラリーサイト１０選
続いて、LPのデザインで参考になるギャラリーサイト１０選を紹介します。
一度に複数のLPデザインを閲覧したい方は、下記内容を参考にしてみましょう。
Web Design Clip
Web Design Clipは、国内・海外のLPを集めたギャラリーサイトです。
１,７００以上のLPが登録されており「業種」「カラー」から検索できるようになっています。
また、LPを一覧で表示するサムネイルも縦長なので、デザインを確認しやすいのもポイントです。
MUUUUU.ORG
出典：MUUUUU.ORG
MUUUUU.ORGは、厳選されたLＰが掲載されているギャラリーサイトです。
「カテゴリ」「カラー」「デザイン」からLＰを検索できます。
洗礼されたデザインが多く掲載されているので、少し凝ったデザイン設計を検討している方には参考になるでしょう。
SANKOU!
出典：SANKOU!
SANKOU! は、日本国内のLPが掲載されているギャラリーサイトです。
LP以外にも「コンテンツページ」を閲覧できるので、幅広いデザインの情報収集ができるでしょう。
また「スライド」や「アニメーション」など、動きのある要素でも絞り込み検索が可能です。
One Page Love
One Page Loveは、おしゃれな海外のLPデザインが集められたギャラリーサイトです。
約１,３００以上のLPデザインが公開されており、無料テンプレートも配布しているので、ぜひ活用してみましょう。
出典：Pinterest
Pinterest（ピンタレスト）は、自分の好きな画像を他のユーザーとシェアできるサービスです。
LPだけをまとめているわけではありませんが、検索窓から「LP ＋ 業種名」と検索すると、多くのデザインを閲覧できます。
PinterestのユーザーがLPをアーカイブしているので、ギャラリーサイトよりも多くのデザインを見つけることが可能です。
LP advance
出典：LP advance
LP advanceは、LP制作・Web広告の参考になるLPデザインのギャラリーサイトです。
「業種・商材」「カラー」でLPデザインを検索できます。
LP advanceではブックマーク機能もついているので、あとで気になるデザインを見直したいときに最適です。
LP幹事
出典：LP幹事
LP幹事は、日本最大級のLPデザインのギャラリーサイトです。
「カラー」「業界」「イメージ」など、さまざまな検索項目に対応しています。
また、掲載LP数も２５００以上となっているので、たくさんのデザインのなかで好みを探したい方におすすめです。
ランディングページ集めました。
ランディングページ集めました。は「カテゴリ」「カラー別」にLPデザインを検索できるギャラリーサイトです。
そのほかのギャラリーサイトとは違い、更新年月ごとにLPデザインを確認できるので、トレンドを抑えたい方におすすめです。
LPアーカイブ
出典：LPアーカイブ
LPアーカイブは、登録デザイン数２８,０００件以上を誇るギャラリーサイトです。
「商品」「カラー」「イメージ」からLPデザインを検索できます。
サムネイルが縦長になっているので、１ページで多くのデザインを閲覧できるのも特徴です。
イケてるランディングページデザインまとめ
イケてるランディングページデザインまとめは、イメージ検索が特徴的なギャラリーサイトです。
「さわやか系」「高級系」「派手系」など、さまざまなイメージからLPを検索できるので、好みのデザインが見つからないときは利用してみましょう。
【２０２２年】LP（ランディングページ）のトレンドデザイン５選
２０２２年最新版、LPのトレンドデザインを5つ紹介します。
- 最小限のデザイン
- 動画の背景
- カスタムイラスト
- グラデーション要素の追加
- 特大のタイポグラフィ
自社LPにトレンドを反映させたい方は、参考にしてみましょう。
最小限のデザイン
出典：shopify
LPのトレンドデザイン１つ目は、最小限のデザインです。
近年では、LPに訪問したユーザーが視覚的に圧倒されないように、できる限りコンテンツの無駄を省いたシンプルなデザインがトレンドになっています。
また、シンプルなデザインを採用することで、Webページの読み込み速度の最適化にもつながるメリットもあります。
動画の背景
出典：マルコメ
LPのトレンドデザイン２つ目は、動画の背景です。
ファーストビューの背景に動画を採用するとユーザーを惹きつけやすくなり、インパクトも残せるのでLPとの相性がよいとされています。
動画は、カット数が少なくて流れる動画に編集し、ファイルサイズをなるべく縮小するのがトレンドになっています。
カスタムイラスト
出典：Findaguru
LPのトレンドデザイン３つ目は、カスタムイラストです。
カスタムイラストを採用すると、オファーのさまざまな側面を視覚的に伝えられ、人目を引くメリットもあります。
ただし、カスタムイラストは素材を見つけるのが難しいため、多くの時間を費やす可能性があると覚えておきましょう。
グラデーション要素の追加
出典：Stripe
LPのトレンドデザイン４つ目は、グラデーション要素の追加です。
グラデーションは、新しいアイデアを求めるWebデザイナーの間で人気が高まっており、今後さらに多くのLPデザインにグラデーションが組み込まれると予想されます。
グラデーションは、視覚的な興味をそそり、イラストに奥行きを与えるなどのメリットがあると覚えておきましょう。
特大のタイポグラフィ
出典：David Calle
LPのトレンドデザイン５つ目は、特大のタイポグラフィです。
ファーストビューのほぼ、全体をカバーする大きなテキストは、ユーザーにメッセージを伝えるのに最適といえるでしょう。
ただし、特大のタイポグラフィを採用するには「最小限のデザイン」でないと、ごちゃごちゃした印象を与えてしまいます。
LP（ランディングページ）デザインのコツは３つ
最後に、LPデザインのコツを３つ紹介します。
下記内容を参考に、自社だけのオリジナルデザインを設計してみましょう。
- 最小限のスクロールに抑える
- 画像に商品の命を吹き込む
- FまたはZパターンを使用する
最小限のスクロールに抑える
LPデザインのコツ１つ目は、最小限のスクロールに抑える点です。
コンバージョンを達成するために、多くの「テキスト」「画像」を記載すると、LP上でのスクロールが多くなり、ユーザーの負担が増えてしまいます。
たとえば、LP上に複数の「画像」を採用したい場合は「ライトボックス」を活用すると、コンテンツがコンパクトにまとまるので、試してみましょう。
ライトボックスとは、画像を表示させる方法です。
画像をクリックすると同じWebページ内に画像が表示されて、画像の領域外をクリックすると元の表示に戻ります。
スクロールが長くなるほど「CTA」が見つけにくくなるリスクがあるため、最小限のスクロールに抑えるべきでしょう。
画像に商品の命を吹き込む
LPデザインのコツ２つ目は、画像に商品の命を吹き込む点です。
自社のLPの目的が「商品購入」であれば、最高の商品画像をLPに掲載する必要があります。
ほとんどのユーザーの購入決定には「商品画像」が影響するため、商品の「サイズ」「材料」「香り」など、ユーザーが関心をもつ要因を画像で伝えなくてはいけません。
また、約７３%のユーザーが商品を購入するときに、3枚以上の画像を見たいといったデータ（※）もあるので、LP上には複数の商品画像を掲載する必要があるといえるでしょう。
※参考：REPORT 2018 Consumer Research Report
FまたはZパターンを使用する
LPデザインのコツ３つ目は、FまたはZパターンを使用する方法です。
LPに訪問したユーザーは、FまたはZパターンの目線でコンテンツを閲覧するといわれています。
そのため、法則に沿って各コンテンツを配置すれば、コンバージョンの見込みやすいデザインを設計できるでしょう。
Zパターンであれば「左上」→「右上」→「左下」→「右下」と目線が移動するので「右下」にCTAを設置します。
まとめ
LP（ランディングページ）のデザイン２５選を紹介しました。
LPデザインを探すときは、下記２つの方法がおすすめです。
- 同じ業種から探す
- カラーで探す
２０２２年、LPのトレンドデザインは下記の通りです。
- 最小限のデザイン
- 動画の背景
- カスタムイラスト
- グラデーション要素の追加
- 特大のタイポグラフィ
LPデザインのコツは下記３つです。
- 最小限のスクロールに抑える
- 画像に商品の命を吹き込む
- FまたはZパターンを使用する
今回のコラム記事を参考にして、LPのデザインを設計してみましょう。
また、当サイト「ビズサイ」では、ホームページ制作サービス（サブスクリプション）を提供しています。
ビズサイでは、ホームページの目的にあわせて３種類のプランを用意しており、お申込みから公開まで最短５営業日でホームページ制作ができます。
LP（ランディングページ）制作にも対応していますので、お気軽にご相談くださいませ（くわしいプラン内容はこちら）。
まずは無料でご相談ください。
※年末年始・土日祝は休業日となります
※受付時間 9：00～17：30
※担当者：佐藤 順規
