参考にするべきLPデザイン例14選と意識すべきコツを紹介

「LP(ランディングページ)を作成しなければいけないけど、どのようなデザインにすればいいんだろう」と悩まれている担当者の方も多いのではないでしょうか。

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

LP制作の事前チェックリスト(無料)

本記事では、各業界別の参考にすべきデザイン例14選と、LPデザインを制作するにあたって意識すべきポイントをわかりやすくまとめました。

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

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

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

目次


参考にするべきLPデザイン例14選

各業界の参考にするべきLPデザイン例をまとめました。

各LPデザインのポイントをまとめてますので、同じ業界の企業の方はぜひ参考にしてみてください。

【食品】ヤクルト株式会社のLPデザイン事例

ヤクルト BF-1(ビーエフワン) 画像引用:ヤクルト BF-1(ビーエフワン)

食後の負担を和らげるBF-1のLPデザイン事例です。

胃の負担を感じている方の悩みに共感し、イラストをふんだんに使用したデザインとユーザーの口コミを掲載することで商品の信頼感もアピールしています。

【美容・健康】プレミアアンチエイジング株式会社のLPデザイン事例

immuno 画像引用:immuno

オーガニック植物を使用した機能性スキンケアブランドのimmunoのLPデザイン事例です。

ユーザーが商品イメージを連想しやすいようスキンケア商品が一目で伝わるデザインをトップに表示しています。

また、商品コンセプトを解説することで、ブランディングも行っています。

【学校】梅花女子大学のLPデザイン事例

梅花ライフマガジン|学科紹介|梅花女子大学 受験生応援サイト 画像引用:梅花ライフマガジン|学科紹介|梅花女子大学 受験生応援サイト

梅花女子大学のLPデザイン事例です。

梅花女子大学での学校生活をイメージしやすいように、キャンパス内や食堂、図書館などの画像を使用しています。

デザインはシンプル性にこだわり、まとまりのあるデザインで構成されています。

【インテリア・家電】株式会社フィッツコーポレーションのLPデザイン事例

《公式》フィッツ ホームフレグランス|香水生まれのルームフレグランス。人気の香水をお部屋でも楽しめます。 画像
引用:《公式》フィッツ ホームフレグランス|香水生まれのルームフレグランス。人気の香水をお部屋でも楽しめます。

ホームフレグランスを提供する株式会社フィッツコーポレーションのLPデザイン事例です。

白系でシンプルなデザインで構成されており、洗練さをアピールしています。、ユーザーに利用イメージを連想してもらうため、ホームフレグランスの利用シーンも紹介しています。

ホームフレグランスの製法や利用者の口コミも記載し、利用者の商品に対する信頼度アップも行っています。

【ファッション】株式会社PIKOのLPデザイン事例

ビジュピコ 画像引用:ビジュピコ(BIJUPIKO)| 日本最大級の結婚指輪・婚約指輪・ジュエリー・ウォッチ セレクトショップ

ブライダル商品を販売している株式会社PIKOのLPデザイン事例です。

ブライダル商品の高級感あふれる写真やモデルの写真をふんだんに使用し、ブランディングを行っています。

LPデザインの各所に「Web来店予約でダイヤモンドピアスをプレゼント」というユーザーの目を引くコピーを挿入し、来店予約を増やす取り組みにも力を入れています。

【自動車】株式会社DeNA SOMPO MobilityのLPデザイン事例

AnycaKEY | Anyca (エニカ) “乗ってみたい“に出会えるカーシェアリングアプリ 画像
引用:AnycaKEY | Anyca (エニカ) “乗ってみたい“に出会えるカーシェアリングアプリ

どこでも車をレンタルできる「Anyca」を展開している株式会社DeNA SOMPO MobilityのLPデザイン事例です。

サービスの利用方法をイラストでわかりやすく解説しています。LPの最後にFAQを載せることで、利用方法についての問い合わせを減らす取り組みも実施しています。

【医療】郡山ファースト歯科矯正歯科のLPデザイン事例

インプラント専門サイト(LP) 画像引用:インプラント専門サイト(LP)

郡山ファースト歯科矯正歯科のLPデザイン事例です。

冒頭でインプラント治療を考えているユーザーの悩みに共感し、医院の特徴を解説する章で「安心してインプラント治療ができる」ことをアピールしています。

イラストをうまく絡めており、見やすく伝わりやすいLPデザインとなっています。

【保険・法律】ミカタ少額短期保険株式会社のLPデザイン事例

弁護士保険12|事業者のミカタ 画像引用:弁護士保険12|事業者のミカタ

弁護時に気軽に相談できる「事業者のミカタ」を提供している、ミカタ少額短期保険株式会社のLPデザイン事例です。

冒頭で事業主に降りかかるよくあるトラブルを提示し、ターゲットを明確化しています。監修者を紹介することでサービスの信頼性をアピールしているのもポイントです。

【不動産】株式会社ケイズ企画のLPデザイン事例

novaリフォーム|岐阜市の壁紙・床の張替え&リノベーション 画像引用:novaリフォーム|岐阜市の壁紙・床の張替え&リノベーション

リフォームやリノベーションを行う株式会社ケイズ企画のLPデザイン事例です。

社長自らの写真を掲載することで信頼感をアピールしています。また、リフォームやリノベーションの工程をイラストや写真をふんだん使用して解説しており、伝わりやすいデザインに仕上がっています。

LPの最後に口コミを掲載することで、リフォームやリノベーションを検討しているユーザーへの訴求にも力を入れています。

【IT】株式会社Mobility TechnologiesのLPデザイン事例

GO BUSINESS《ゴービジネス》法人向けタクシー配車管理 │ 株式会社Mobility Technologies(MoT) 画像
引用:GO BUSINESS《ゴービジネス》法人向けタクシー配車管理 │ 株式会社Mobility Technologies(MoT)

タクシーを代理で配車できるITサービスを運営している株式会社Mobility TechnologiesのLPデザイン事例です。

ページを開いてすぐ目に入るところに「簡単操作でタクシーを代理配車」という、ターゲットを引きつけるキャッチコピーを挿入しているのがポイントです。

サービスの利用イメージが伝わりやすいように、アプリの操作画面や解説を挿入しています。

CTAを適所に散りばめることで、ユーザーがいつでもお問合せ、申し込みできるよう工夫している点もポイントです。

【旅行・アウトドア】五斗長まちづくり協議会のLPデザイン事例

ごっさ-五斗長-GOSSA 画像引用:ごっさ-五斗長-GOSSA

兵庫県淡路市の五斗長という集落のLPデザインの事例です。

五斗長という集落がどのような場所かすぐにイメージできるような画像と文字が印象的です。

また、画像の下に配置されている手書き風のアイコンからも五斗長の雰囲気やアピールポイントがよく伝わります。

【スポーツ・ジム】コナミスポーツ株式会社のLPデザイン事例

スタート応援会員|料金プラン|コナミスポーツクラブ 画像引用:スタート応援会員|料金プラン|コナミスポーツクラブ

スポーツジムを運営しているコナミスポーツ株式会社のLPデザインの事例です。

ページを開いてすぐ目に入るターゲットを引きつけるキャッチコピーと、初月の会費が0円という表記がポイントです。

シンプルに必要な情報が記載されているため、一目で内容を理解することができます。

【酒類】株式会社ヤッホーブルーイングのLPデザイン事例

約束のよなよなエール | 10年後と20年後に発売されるビール 画像引用:約束のよなよなエール | 10年後と20年後に発売されるビール

クラフトビールの製造および販売を行っている株式会社ヤッホーブルーイングのLPデザインの事例です。

ページのトップにどのような商品なのかが一目でわかる画像と文字が配置されています。

そして、この商品の説明がストーリーになっていて下に続いているため、サイトを途中で離脱することなく読み進めたくなるしくみがあります。

商品の味でなく、「10年後20年後に発売されるビール」という特徴を訴求している点がとても印象的なLPです。

【採用】UUUM株式会社のLPデザイン事例

UUUM採用サイト 画像引用:UUUM採用サイト

様々なプラットフォームで活躍するインフルエンサーへ事業や、コンテンツ開発を行っているUUUM株式会社のLPデザイン事例です。

業務内容や社員のイメージを豊富なイラストで説明しているため、わかりやすさと親しみやすさを感じるデザインになっています。

また、LPの後半にはサイトに記載されている情報がカテゴリー別に一覧して配置されており、知りたい情報をワンクリックで得ることができるようになっています。

採用サイトは「エントリーしたくなるページ」であることが重要です。そのため、会社の雰囲気やイメージが伝わりやすいデザインを意識しましょう。


LPデザイン決定までの手順

LPのデザインを決めるまでの流れは大まかに以下の3つのステップにわかれています。

LPデザイン 決定

1番目の事前準備では、LPのターゲットを決めましょう。「誰に」「なにを」届けるべきかなど、方向性を決めることでデザインを決めやすくなります。

LPの方向性が決まり次第、デザイン構成を決めて作成します。デザイン構成については、以下記事の「売れるランディングページのテンプレート 4つのポイント」を参考にしましょう。

参考:申込率を5倍改善!ランディングページ制作で押さえるべきポイント

LPを作成した後は、クリック率(CTR)やコンバージョン率(CVR)を高めるために、修正や仮説検証を行います。これがLPデザイン決定までの一連の流れです。

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


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

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

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

誰に届けるLPなのか

作成するLPは、誰をターゲットにするべきなのか決めることがとても重要です。

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

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

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

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

を考えると良いです。

なにを届けるLPなのか

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

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

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


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

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

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

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

LPアーカイブ引用:LPの最新デザインまとめ参考サイト|LP アーカイブ

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

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

LP advance引用:LPデザインに参考になるランディングページ集|LP advance

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

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

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

Web Design Clip [L]引用:Web Design Clip [L]

メインカラーとサブカラーを掛け合わせてLPを検索できるので、ボタンの色や文字の色に悩んだ際に参考になります。

また「フッター固定」などかなり具体的なタグ付けもされており、痒い所に手が届くサイトです。

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

Web Design Clip [L]引用:Web Design Clip [L]

レスポンシブウェブデザインのLPに特化したギャラリーサイトです。

ECサイトや採用サイトなどの「サイトタイプ」やBootstrapやHTML5など用いられている技術から選べる「テクニック」という他のギャラリーサイトにはあまりないカテゴリーからサイトを探せることが特徴です。

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

LANDINGPAGE BOOKMARK引用:ランディングページデザインリンク集

美容関係のLPに強いギャラリーサイトです。

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

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

LANDINGPAGE BOOKMARK引用:イケてるランディングページデザインまとめ

LPの制作もおこなっている企業が運営しているギャラリーサイトです。

「オーガニック系」や「信頼・安心系」などイメージごとのカテゴリー分けもあるので、クライアントとの打ち合わせなどの際にデザインイメージを共有するためにも役立ちます。

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

MUUUUU.ORG引用:縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

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

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

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

MUUUUU.ORG引用:縦長ページのデザイン 集めました

セールスレターに特化したギャラリーサイトです。

その特性上、胡散臭いものになりがちなセールスレターですが、どうしたら良いイメージを抱かせるページを作れるのかを学べます。

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

美容・化粧品(コスメ)ランディングページギャラリー引用:美容・化粧品(コスメ)ランディングページギャラリー

その名の通り美容や化粧品のLPに特化したギャラリーサイトです。

ブランド別にLPを見ることもできるので、各社のイメージを理解する一助にもなります。

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

ランディングページまとめサイト引用:ランディングページまとめサイト

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

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


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

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

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

LPに限らずサイト作成において画像の選定は重要な要素です。

中でも、ファーストビューに用いる画像にはこだわりましょう。

ファーストビューはページを訪れたユーザーが読み進めるかを決めるポイントであり、ファーストビュー次第で離脱率が大きく変わります。

キャッチコピーなどの文章と画像をうまく掛け合わせましょう。

日本ガラスびん協会引用:びんむすめプロジェクトキャンペーンサイト|日本ガラスびん協会

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

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

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

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

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

ベストアグリフーズ1引用:カット野菜、オーダーカット野菜の株式会社ベストアグリフーズ|石川県金沢市、福井県、富山県

ベストアグリフーズ2引用:カット野菜、オーダーカット野菜の株式会社ベストアグリフーズ|石川県金沢市、福井県、富山県

サイトにおいて色味の統一というのは重要です。

最もよくある例が、ブランドや商品のイメージカラーを基調の色とするというものです。

しかし、ここで活用するべきなのが補色です。補色とは、互いを最も目出せる色のことです。

例えばペライチのイメージカラーは水色なので、ホームページのトップ画面も水色が基調となっていますが、登録ボタンは補色のオレンジ色となっています。

こうすることでザッと流し読みしているユーザーの目にも登録ボタンが入りやすくなります。

ペライチ1

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

情報が多すぎるようになった現在、ユーザーはUGC(ユーザー作成コンテンツ)というユーザーが作ったコンテンツをより信じる傾向があります。

実際に、ECサイトで買い物をする際にレビューをチェックする方は多いのではないでしょうか。

それと同じくLP上にも、お客様の声を掲載することは重要です。

サービスや商品の場合は実際の利用者の声を掲載します。

またキャンペーンの場合はハッシュタグを活用し、参加しているユーザーのSNSでの投稿を載せることも効果的です。


まとめ

LPのデザインは、事前準備とデザイン構成、テストの3段階のステップで完成できます。

デザインを決める際は、ペルソナに対してどのようなことを届けるのかを詳細に決めることで、よりターゲットに刺さるLPのデザインに仕上げることが可能です。

記事内で紹介した各業界のデザイン例とギャラリーサイトを参考にしつつ、コツを押さえてLPのデザインを作成しましょう。

Web制作成功のための『専用RFPシート』【PR】

RFPとは、制作会社からの提案をしてもらう前に、発注する側が作る「提案依頼書」となる資料です。

RFPを作らずに曖昧な希望を口頭で伝えた結果、見当違いな提案に時間を費やすことになってしまい、制作・発注の両者 にとって非効率的です。

Web制作の内製を考えている場合も、プロジェクト進行の行き違いを防ぐためにも重要です。

今回特別にREPシートをご用意しましたのでダウンロードしてみてください。

※Web制作会社やWeb制作を行う個人事業主の方のダウンロードは、ご遠慮頂いております。

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

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

  1. ランディングページ(LP)とは?10分でわかるLPの目的・メリット・作り方
  2. ホームページとランディングページの違いは?集客方法によって使い分けよう!
  3. LPデザインのヒントに!参考にするべきサイト16選と4つのコツ
  4. 記事型LPとは?読みたくなるLPを作成するポイント14選
  5. はじめての方でも作れるランディングページの王道テンプレートを大公開!
  6. イメージ通りのLPを作るための、WEBディレクションの10のコツ
  7. ランディングページの効果とは?失敗を避けるための6つのポイント
  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. フェーズ別ランディングページ改善マニュアル<前編>