ランディングページ(LP)とは、CTA(行動喚起)に特化した縦長レイアウトのWebページを指します。ランディングページのデザインをターゲットに合わせておしゃれで魅力的にすることは、コンバージョンにも深く関係してきます。

→ダウンロード: 見込み客を惹きつけるランディングページ作成無料ガイド

洗練された見た目のランディングページを作成するには、多くのサイトからデザインを参考にすることが大切です。本記事では、おしゃれなデザインを探せるギャラリーサイトや、2022年の最新トレンドを反映したデザインを紹介します。

見込み客を惹きつけるランディングページ作成ガイド

おしゃれなランディングページを探せるギャラリーサイト

おしゃれなランディングページ

おしゃれなランディングページを探すには、ギャラリーサイトの利用が便利です。おすすめのギャラリーサイトを、各サイトの検索機能の特徴と併せてご紹介します。
 

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

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

ランディングページ集めました。」は、10年以上の運営歴がある老舗サイトです。不動産をはじめ、金融や美容など幅広いジャンルのランディングページが紹介されています。トップページにはランディングページが新着順に表示されるため、最新のデザインから確認が可能です。また、テーマカラーと業種を掛け合わせて検索することもできます。

【検索機能】

  • カラー:9種類
  • 業種:50業種
  • 年月
     

LP ARCHIVE

LP ARCHIVE

LP ARCHIVE」は、Web制作会社が運営しているサイトです。毎日10以上のランディングページが追加されており、常に最新のデザインを閲覧できます。

検索機能では、カラーやイメージ、カテゴリーなどを複合して探せるため、イメージに近いランディングページを見つけられるでしょう。

アカウントを作成すれば、ランディングページのお気に入り登録をはじめ、デザインをフォルダ別に保存、共有する機能を使用できます。

【検索機能】

  • フリーワード検索
  • PCデザイン:2万9,000件以上
  • SPデザイン:1万9,000件以上
  • カラー:14種類
  • イメージ:スタイリッシュ、ナチュラル、和風など19種類
  • カテゴリー:23業種
  • 表示方法:おすすめ順、登録が新しい順、古い順、お気に入りが多い順
     

イケてるランディングページ集めてみました

イケてるランディングページ集めてみました

イケてるランディングページ集めてみました」は、Webマーケティングのプロが選んだランディングページを紹介しています。そのため、デザインだけでなく、集客に向けて構成や訴求内容が工夫された高クオリティなページを見ることができます。

【検索機能】

  • カラー:13種類
  • ジャンル:25種類
  • イメージ:17種類
     

Web Design Clip

Web Design Clip

Web Design Clip」では、日本だけでなく海外のホームページも紹介しています。

登録サイトは1,800以上。キーワード、カラー、業種からランディングページを絞り込めることに加えて、タグ検索機能も付いています。

タグはWeb Design Clip上のデザインに紐づけられており、キャンペーンや特設サイトなどの「タイプ」や、スタイリッシュのようなページの「テイスト」など、数多くの要素から選択可能です。

【ランディングページの検索機能】

  • キーワード検索
  • カラー:メインカラー、サブカラー各12種類
  • カテゴリー:21種類
  • タグ検索:タイプ、テイスト、レイアウト他
     

LP advance

LP advance

LP advance」は、1,800以上のランディングページが紹介されているサイトです。ジャンルやカラーを掛け合わせてランディングページを探すなど、検索機能が充実しているため、デザインを細かく絞り込みたい場合に適しています。

また、人物やイラストなど、メインとなるビジュアルからランディングページを検索できるのも珍しい特徴です。

【検索機能】

  • フリーワード検索
  • カテゴリー:13種類
  • カラー:13種類
  • タイプ:7種類
  • メインビジュアル:7種類
  • 効果・エフェクト:3種類
  • 管理人のお気に入り
     

番外編:Pinterest

Pinterest

ランディングページのギャラリーサイトではありませんが、画像を軸に情報を探せるSNS「Pinterest」もおしゃれなデザイン検索に使用できます。フリーワード検索を利用すれば、さまざまなランディングページが閲覧可能です。中には制作会社が発信しているランディングページの制作事例もあります。

さまざまなランディングページ

画像はワンクリックで保存したり、コレクションとしてフォルダ別に管理したりできるため、参考にしたいランディングページをまとめることができます。
 

参考となるおしゃれなランディングページ

近年のトレンドであるタイポグラフィやパララックス、動画などを使用したおしゃれなランディングページデザインを紹介します。自社のランディングページ制作の参考にしてください。
 

スタイリッシュなデザインのLP

まずは、トレンドを活かしたスタイリッシュなデザインの事例をご紹介します。

タイポグラフィとパララックスのトレンドデザイン

デジタル・アドバタイジング・コンソーシアム株式会社

文字を魅力的に装飾する「タイポグラフィ」と、遠近感や奥行きのあるデザイン表現「パララックス」を使用したトレンドデザインです。こちらは「デジタル・アドバタイジング・コンソーシアム株式会社」の採用ランディングページ。カーソルを動かすことでタイポグラフィが変化します。
 

3Dアート

TinyFaces NFT

立体的な3Dアートを使用した「TinyFaces NFT」のランディングページです。アイキャッチ部分にインパクトのある3Dアートを配置。まるで実際のお店に商品が陳列されているようなデザインです。
 

グラデーションとアニメーション加工されたタイポグラフィ

グラデーションとアニメーション加工されたタイポグラフィ

グラデーションカラーとアニメーション加工されたタイポグラフィが特徴の、「高専キャラバン2022」の特設ランディングページです。トレンドのグラデーションを使用することで、見る人におしゃれな印象を与えています。
 

シンプルなデザインのLP

続いて、シンプルで洗練された印象のサイトをご紹介します。シンプルなデザインはサイトの訴求を目立たせる効果が期待できます。
 

動画でインパクトをつけたデザイン

富士通株式会社

デザインはシンプルですが、複数の動画によってインパクトを出している「富士通株式会社」の商品ランディングページ。実際に商品を使用している様子や、ユーザーの感想、使い方などを動画にして紹介。商品の疑似体験を通して、見る人の理解を深める工夫がされています。
 

ファーストビューの写真とテキストで印象付け

株式会社ARIGATOBANK

ファーストビューの大きな写真と、ARIGATOのテキストが印象的な「株式会社ARIGATOBANK」のランディングページ。商品のイメージ画像をトップに配置し、サービスの概要や思いを伝えるコピーが使用されています。白い背景と写真をメインにすることで、全体的に簡潔なデザインになっています。
 

白い背景に黒のテキストでコピーを目立たせる

BREST株式会社

BREST株式会社」のランディングページは、白い背景に黒のテキストで、コピーにはアニメーションが付けられています。あえてシンプルなデザインを使用し、サイトの訴求を目立たせています。
 

かっこいいデザインのLP

続いて、カラーや素材によって、モダンでかっこいい世界観を演出しているデザインをご紹介します。
 

ダークグレーで統一されたカラー

Vogaro株式会社

全体的にダークグレーで統一している「Vogaro株式会社」のランディングページ。ビジネスを連想させる画像と、説得力のあるテキストが配置され、落ち着いたかっこいいデザインに仕上がっています。
 

ファーストビューに動画を使用

bird and insect ltd.

ファーストビューに「bird and insect ltd.」のブランドイメージ動画を配置し、見る人をひきつけるデザインです。また、ランディングページ下部までパララックスが使用されており、ユーザーが最後までスクロールしたくなる工夫がされています。
 

ミュージックバンドに合わせてレコードデザイン

BiSH

ミュージックバンドに合わせてレコードがデザインされている「BiSH」の特設ランディングページ。レコードをクリックすると実際に音楽を再生できる仕組みになっています。ミュージックバンドの世界観をデザインによって再現しています。
 

爽やかなデザインのLP

最後に、爽やかな印象を演出しているデザインをご紹介します。トレンドである「グラデーション」や、曲線でできている円・楕円・多角形の「流体シェイプ」をデザインに取り入れているサイトが多いのが特徴です。
 

ライトグリーンと流体シェイプ

株式会社I-ne

全体的にライトグリーンで統一されている「株式会社I-ne」の商品ランディングページです。近年のトレンドである、「流体シェイプ」をデザインに使用しています。
 

トレンドのグラデーションを使用

JAバンク高知

トレンドのグラデーションを使用した「JAバンク高知」のサービスランディングページです。全体的にブランドのテーマカラーであるグリーンを用いて、清々しく優しい印象を与えています。

ランディングページデザインの詳しい一覧はこちらの記事をご覧ください。

 

おしゃれなランディングページを探すポイント

おしゃれなランディングページはインターネット上に数多く存在しているため、見ればみるほど、どれが良いのか分からなくなってしまうことがあります。ランディングページを探すときは、自分なりの「軸」を持つことが大切です。ここでは、おしゃれなランディングページを効率良く検索するポイントをご紹介します。
 

カラー検索

サイトで使用されているカラーは、ランディングページのデザインにおいて重要な要素です。そのため、ほとんどのギャラリーサイトにカラー検索機能があります。

色彩は人間心理やブランドイメージにつながります。たとえば「赤」はエネルギッシュ、「青」は清潔感や冷静さの象徴といわれています。ランディングページに使用したいテーマカラーをある程度決めてから検索しましょう。コーポレートカラーに合わせるのもおすすめの方法です。
 

テーマやイメージから検索

ランディングページのギャラリーサイトでは、ブランドイメージやテーマに沿って検索できます。ランディングページは、企業や商品のイメージと雰囲気を統一させることで説得力が上がり、コンバージョンにつながります。安心感や信頼、シンプル、和風など、ブランドや企業が持つイメージに合わせてデザインを探してみてください。
 

業種で検索

訴求内容や構成を確認したい場合は、業種での検索が適しています。この方法なら、検索時に競合サイトを併せて分析することもできます。構成はランディングページにおいて重要な要素のため、事前にしっかりと見ておきましょう。

ランディングページの構成についてはこちらの記事をご覧ください。

 

おしゃれなランディングページにするポイント

おしゃれなランディングページを作成するためには、デザインのポイントを事前に知っておくことが大切です。ここでは、デザインに必要な4つの視点を学びましょう。
 

テーマカラーを統一

ランディングページに多くのカラーを使用すると、まとまりがない印象になります。デザインに統一感を持たせるためにも、色の種類は厳選することが大切です。テーマカラーとして設定するメインカラーと、アクセントとして使用するカラーの2~3色にとどめましょう。

カラーが決まっていない場合には、流行色を使って印象付けるのも手段の一つ。2022年のトレンドカラーは、PANTONEのベリー・ペリと JAFCA のジョリーコーラルです。
 

素材やフォントにこだわる

ランディングページのデザインは、写真などの素材や、テキストのフォントで印象が大きく変わります。全体の雰囲気がブランドイメージに合っていないと、ユーザーは違和感を覚えるでしょう。また、見た目を重視したおしゃれなフォントは、テキストが読みづらくなることもあります。

特にファーストビューは、見る人の印象を左右すると同時に、ランディングページを読み進めるかを決める重要な部分です。素材やフォントの選定は丁寧に行いましょう。
 

アニメーションを使用

アニメーションは見る人をひきつけ、最後までスクロールしてもらいやすくなる効果があります。

アニメーションは2021年頃からトレンドとなり、パララックス・アニメーションは、Appleをはじめ幅広い業種で用いられています。

パララックスには次のような種類があります。

  • スクロールと同時に要素が動くアニメーション
  • 紙芝居のようなアニメーション
  • 前面のテキストと背景の画像など、スクロール速度に差を付けるアニメーション

ランディングページの具体的な作成方法を知りたいという方はこちらの記事をご覧ください。

 

おしゃれなテンプレートを使用

簡単にハイクオリティなデザインにしたい場合は、テンプレートを活用すると良いでしょう。テンプレートには、制作に必要なHTMLやCSSなどがあらかじめ含まれているため、デザイン未経験の方でも手軽に利用できます。中には無料で使用できるツールもあり、コストが抑えられることもメリットです。

ランディングページの無料作成ツールはこちらの記事をご覧ください。

 

トレンドを意識したおしゃれなランディングページ制作を

おしゃれなランディングページを作成するためには、他社の事例を参考にするのが一番の近道です。ギャラリーサイトでは多くのデザインが紹介されているため、まずは自社の商品やブランドイメージを分析し、ランディングページのカラーやテーマを決めて検索しましょう。

そのうえでトレンドのデザインを取り入れて、目的に合わせたおしゃれなランディングページを制作してください。

HubSpotではこの他にもマーケティングやセールスに役立つ資料を無料で公開していますので、ぜひこちらからご覧ください。

 

見込み客を惹きつけるランディングページ作成ガイド

 見込み客を惹きつけるランディングページ作成ガイド

元記事発行日: 2022年6月14日、最終更新日: 2022年6月14日

トピック::

ランディングページ