月額定額制(サブスク)ホームページ制作 | ビズサイ
お役立ちコラム

LP(ランディングページ)のデザイン25選【ギャラリー・事例・トレンド別に紹介】

  
LPのデザイン25選

LP(ランディングページ)は、ユーザーにアクションを促すためのWebページです。

そのため、多くの担当者はコンバージョンのみに焦点を当て、デザインやUXに考慮を払わない傾向があります。

しかし、多くの企業がLPを採用するなかで、自社がより多くのコンバージョンを獲得するためには、ユーザーを惹きつけるようなデザインも必須といえるでしょう。

そんなLPのデザインについて考える上で、

『参考になるLPのデザインの探し方がわからない』
『LPデザインの参考になるサイトが知りたい』
『LPデザインのコツが知りたい』

上記のような課題が生じるかと思います。

今回のコラム記事では、企業の担当者様へ向けて「LPデザインの探し方のコツ」「LPのデザイン参考事例」「ギャラリーサイト」「2022年最新版のLPのトレンドデザイン」を紹介しています。

LP(ランディングページ)デザインの探し方のコツ

はじめにLPデザインを探すコツを2つ紹介します。 下記内容を理解した上で、自社にあったデザインを見つけてみましょう。

  • 同じ業種から探す
  • カラーで探す

同じ業種から探す

LPデザインの探し方のコツ1つ目は、同じ業種から探す方法です。

どんなLPが効果的なのかは、業種によってことなるので、同業種のLPから参考にするのがベストでしょう。

デザインで差別化を図りたいにしても、同業種のデザイン傾向を知っておかないと対処はできません。

今回紹介するギャラリーサイトは「業種別」で検索できるWebサイトも多いので、試してみましょう。

カラーで探す

LPデザインの探し方のコツ2つ目は、カラーで探す方法です。

コーポレートカラーが決まっているのであれば、ギャラリーサイトの検索機能を使ってカラーから好みのLPデザインを見つけます。

他社のLPから「カラーの組み合わせ」や「CTAのカラー」を学んで、自社LPに反映してみましょう。

参考になるLP(ランディングページ)のデザイン参考事例10選

参考になるLPのデザイン参考事例10選を紹介します。

下記の事例に同業種のものがあれば参考にしてみましょう。

Chatwork

Chatwork

出典:Chatwork

Chatwork(チャットワーク)は、電話や会議など仕事で必要なコミュニケーションを効率するビジネスチャットです。

LPデザインでは、ファーストビューに「ビジネスチャット国内利用者3年連続NO.1」の実績が記載されています。

その直近には「導入企業社数の提示」や「導入企業のロゴ」も掲載されていることから、社会的証明を全面に押し出したLPデザインといえるでしょう。

Video BRAIN

Video BRAIN

出典:Video BRAIN

Video BRAIN(ビデオブレイン)は、あらゆる用途での動画制作をワンストップで提供するプラットフォームです。

LPのファーストビューでは「受賞歴」と「大きなCTA」が目立つ配置になっています。

また、Video BRAINは動画制作のプラットフォームということもあり、背景に動画を採用しているのも特徴です。

ジョブカン

ジョブカン

出典:ジョブカン

ジョブカンは、誰でもかんたんに利用できる勤怠管理システムです。

知名度のある有名人を採用したファーストビューが印象的となっています。

また、LPの下部では「CTA」の直上に「1分間で登録完了」「30日間無料」など、コンバージョンを促すテキストが記載されているのも特徴です。

MiiTel

MiiTel

出典:MiiTel

MiiTel(ミーテル)は「IP電話」「自動録音」「文字起こし」などの機能が1つになったツールです。

LPの基本カラーを「水色」「白」の薄い色にすることで「オレンジのCTA」が目立つデザインになっています。

通常のコンテンツとCTAのメリハリのつけ方が参考になるLPデザインといえるでしょう。

WHILL

WHILL

出典:WHILL

WHILL(ウィル)は、近距離移動に特化した次世代型電動車椅子です。

LP上では3つの車椅子を紹介しており、各コンテンツを水平に分割したデザインになっています。

コンテンツがしっかり区切られているので、LP上で複数の商品を紹介したいときに、最適なデザインといえるでしょう。

三井住友銀行

三井住友銀行

出典:三井住友銀行

三井住友銀行の人材獲得用のLPでは「いい子になるな、いい個になれ」というキャッチコピーが特徴的です。

社員インタビューに関しても「いい個たち」と表現しており、メッセージ性の強いLPに仕上がっています。

MOOJUU BREAD

MOOJUU BREAD

出典:MOOJUU BREAD

MOOJUU BREAD(モージューブレッド)は、北海道の素材をふんだんに生かしたパンをLP上で販売しています。

LPに採用されている「パンの画像」のクオリティが非常に高く、画像から「ふわふわ食感」が伝わってきます。

食品を扱う企業の方は、MOOJUU BREADのLPを参考にしてみましょう。

BOTANIST

BOTANIST

出典:BOTANIST

シャンプーブランドのBOTANIST(ボタニスト)では、新しくリニューアルした内容を含めたLPを公開しています。

「Webページ上部の共感」→「金額提示とCTA」→「口コミ紹介」と基本をしっかり押さえた、お手本となるLPデザインといえるでしょう。

SIXPAD STATION

SIXPAD STATION

出典:SIXPAD STATION

SIXPAD STATION(シックスパッドステーション)は、電気刺激によって筋肉トレーニングをサポートするEMSを活用したトレーニングジムです。

最先端のトレーニングとなるため、LP上には運動医科学によって証明されたデータが多く掲載されており、権威性を意識したデザインになっているのが特徴といえます。

個別指導 明光義塾

個別指導 明光義塾

出典:個別指導 明光義塾

個別指導 明光義塾は、中学生~高校生までの学習塾です。

「92%の保護者が成績アップを実感」など、保護者というターゲットに対して、さまざまなメリットがLP内で提示されているデザインとなっています。

LP(ランディングページ)のデザインギャラリーサイト10選

続いて、LPのデザインで参考になるギャラリーサイト10選を紹介します。

一度に複数のLPデザインを閲覧したい方は、下記内容を参考にしてみましょう。

Web Design Clip

Web Design Clip

出典:Web Design Clip

Web Design Clipは、国内・海外のLPを集めたギャラリーサイトです。

1,700以上のLPが登録されており「業種」「カラー」から検索できるようになっています。

また、LPを一覧で表示するサムネイルも縦長なので、デザインを確認しやすいのもポイントです。

MUUUUU.ORG

MUUUUU.ORG

出典:MUUUUU.ORG

MUUUUU.ORGは、厳選されたLPが掲載されているギャラリーサイトです。

「カテゴリ」「カラー」「デザイン」からLPを検索できます。

洗礼されたデザインが多く掲載されているので、少し凝ったデザイン設計を検討している方には参考になるでしょう。

SANKOU!

SANKOU!

出典:SANKOU!

SANKOU! は、日本国内のLPが掲載されているギャラリーサイトです。

LP以外にも「コンテンツページ」を閲覧できるので、幅広いデザインの情報収集ができるでしょう。

また「スライド」や「アニメーション」など、動きのある要素でも絞り込み検索が可能です。

One Page Love

One Page Love

出典:One Page Love

One Page Loveは、おしゃれな海外のLPデザインが集められたギャラリーサイトです。

約1,300以上のLPデザインが公開されており、無料テンプレートも配布しているので、ぜひ活用してみましょう。

Pinterest

Pinterest

出典:Pinterest

Pinterest(ピンタレスト)は、自分の好きな画像を他のユーザーとシェアできるサービスです。

LPだけをまとめているわけではありませんが、検索窓から「LP + 業種名」と検索すると、多くのデザインを閲覧できます。

PinterestのユーザーがLPをアーカイブしているので、ギャラリーサイトよりも多くのデザインを見つけることが可能です。

LP advance

LP advance

出典:LP advance

LP advanceは、LP制作・Web広告の参考になるLPデザインのギャラリーサイトです。

「業種・商材」「カラー」でLPデザインを検索できます。

LP advanceではブックマーク機能もついているので、あとで気になるデザインを見直したいときに最適です。

LP幹事

LP幹事

出典:LP幹事

LP幹事は、日本最大級のLPデザインのギャラリーサイトです。

「カラー」「業界」「イメージ」など、さまざまな検索項目に対応しています。

また、掲載LP数も2500以上となっているので、たくさんのデザインのなかで好みを探したい方におすすめです。

ランディングページ集めました。

ランディングページ集めました。

出典:ランディングページ集めました。

ランディングページ集めました。は「カテゴリ」「カラー別」にLPデザインを検索できるギャラリーサイトです。

そのほかのギャラリーサイトとは違い、更新年月ごとにLPデザインを確認できるので、トレンドを抑えたい方におすすめです。

LPアーカイブ

LPアーカイブ

出典:LPアーカイブ

LPアーカイブは、登録デザイン数28,000件以上を誇るギャラリーサイトです。

「商品」「カラー」「イメージ」からLPデザインを検索できます。

サムネイルが縦長になっているので、1ページで多くのデザインを閲覧できるのも特徴です。

イケてるランディングページデザインまとめ

イケてるランディングページデザインまとめ

出典:イケてるランディングページデザインまとめ

イケてるランディングページデザインまとめは、イメージ検索が特徴的なギャラリーサイトです。

「さわやか系」「高級系」「派手系」など、さまざまなイメージからLPを検索できるので、好みのデザインが見つからないときは利用してみましょう。

【2022年】LP(ランディングページ)のトレンドデザイン5選

2022年最新版、LPのトレンドデザインを5つ紹介します。

  • 最小限のデザイン
  • 動画の背景
  • カスタムイラスト
  • グラデーション要素の追加
  • 特大のタイポグラフィ

自社LPにトレンドを反映させたい方は、参考にしてみましょう。

最小限のデザイン

shopify

出典:shopify

LPのトレンドデザイン1つ目は、最小限のデザインです。

近年では、LPに訪問したユーザーが視覚的に圧倒されないように、できる限りコンテンツの無駄を省いたシンプルなデザインがトレンドになっています。

また、シンプルなデザインを採用することで、Webページの読み込み速度の最適化にもつながるメリットもあります。

動画の背景

マルコメ

出典:マルコメ

LPのトレンドデザイン2つ目は、動画の背景です。

ファーストビューの背景に動画を採用するとユーザーを惹きつけやすくなり、インパクトも残せるのでLPとの相性がよいとされています。

動画は、カット数が少なくて流れる動画に編集し、ファイルサイズをなるべく縮小するのがトレンドになっています。

カスタムイラスト

Findaguru

出典:Findaguru

LPのトレンドデザイン3つ目は、カスタムイラストです。

カスタムイラストを採用すると、オファーのさまざまな側面を視覚的に伝えられ、人目を引くメリットもあります。

ただし、カスタムイラストは素材を見つけるのが難しいため、多くの時間を費やす可能性があると覚えておきましょう。

グラデーション要素の追加

Stripe

出典:Stripe

LPのトレンドデザイン4つ目は、グラデーション要素の追加です。

グラデーションは、新しいアイデアを求めるWebデザイナーの間で人気が高まっており、今後さらに多くのLPデザインにグラデーションが組み込まれると予想されます。

グラデーションは、視覚的な興味をそそり、イラストに奥行きを与えるなどのメリットがあると覚えておきましょう。

特大のタイポグラフィ

David Calle

出典:David Calle

LPのトレンドデザイン5つ目は、特大のタイポグラフィです。

ファーストビューのほぼ、全体をカバーする大きなテキストは、ユーザーにメッセージを伝えるのに最適といえるでしょう。

ただし、特大のタイポグラフィを採用するには「最小限のデザイン」でないと、ごちゃごちゃした印象を与えてしまいます。

LP(ランディングページ)デザインのコツは3つ

最後に、LPデザインのコツを3つ紹介します。

下記内容を参考に、自社だけのオリジナルデザインを設計してみましょう。

  • 最小限のスクロールに抑える
  • 画像に商品の命を吹き込む
  • FまたはZパターンを使用する

最小限のスクロールに抑える

LPデザインのコツ1つ目は、最小限のスクロールに抑える点です。

コンバージョンを達成するために、多くの「テキスト」「画像」を記載すると、LP上でのスクロールが多くなり、ユーザーの負担が増えてしまいます。

たとえば、LP上に複数の「画像」を採用したい場合は「ライトボックス」を活用すると、コンテンツがコンパクトにまとまるので、試してみましょう。

ライトボックス

ライトボックスとは、画像を表示させる方法です。
画像をクリックすると同じWebページ内に画像が表示されて、画像の領域外をクリックすると元の表示に戻ります。

スクロールが長くなるほど「CTA」が見つけにくくなるリスクがあるため、最小限のスクロールに抑えるべきでしょう。

画像に商品の命を吹き込む

LPデザインのコツ2つ目は、画像に商品の命を吹き込む点です。

自社のLPの目的が「商品購入」であれば、最高の商品画像をLPに掲載する必要があります。

ほとんどのユーザーの購入決定には「商品画像」が影響するため、商品の「サイズ」「材料」「香り」など、ユーザーが関心をもつ要因を画像で伝えなくてはいけません。

また、約73%のユーザーが商品を購入するときに、3枚以上の画像を見たいといったデータ(※)もあるので、LP上には複数の商品画像を掲載する必要があるといえるでしょう。

※参考:REPORT 2018 Consumer Research Report

FまたはZパターンを使用する

10 Recommended Website Layout Ideas to Get You Started

出典:10 Recommended Website Layout Ideas to Get You Started

LPデザインのコツ3つ目は、FまたはZパターンを使用する方法です。

LPに訪問したユーザーは、FまたはZパターンの目線でコンテンツを閲覧するといわれています。

そのため、法則に沿って各コンテンツを配置すれば、コンバージョンの見込みやすいデザインを設計できるでしょう。

Zパターンであれば「左上」→「右上」→「左下」→「右下」と目線が移動するので「右下」にCTAを設置します。

まとめ

LP(ランディングページ)のデザイン25選を紹介しました。

LPデザインを探すときは、下記2つの方法がおすすめです。

  1. 同じ業種から探す
  2. カラーで探す

2022年、LPのトレンドデザインは下記の通りです。

  • 最小限のデザイン
  • 動画の背景
  • カスタムイラスト
  • グラデーション要素の追加
  • 特大のタイポグラフィ

LPデザインのコツは下記3つです。

  1. 最小限のスクロールに抑える
  2. 画像に商品の命を吹き込む
  3. FまたはZパターンを使用する

今回のコラム記事を参考にして、LPのデザインを設計してみましょう。

また、当サイト「ビズサイ」では、ホームページ制作サービス(サブスクリプション)を提供しています。

ビズサイでは、ホームページの目的にあわせて3種類のプランを用意しており、お申込みから公開まで最短5営業日でホームページ制作ができます。

LP(ランディングページ)制作にも対応していますので、お気軽にご相談くださいませ(くわしいプラン内容はこちら)。

ホームページに関する記事

まずは無料でご相談ください。

※年末年始・土日祝は休業日となります
※受付時間 9:00~17:30
※担当者:佐藤 順規