WEBデザインに関わっていると、いつかは出会うことがあるLP(ランディングページ)のデザイン。
構成がちゃんとできていても、いきなり作り始めるのはなかなか難しいものです。
この記事では、ランディングページが何であるかを簡単にご紹介し、有名な参考サイトと見るポイントについてご紹介します。
LP(ランディングページ)とはそもそも何?ざっくり説明!
LPとは、Landing Page(ランディングページ)の略で、ネット上にあるバナー広告やテキスト広告をクリックした先にあるページのことを指します。
ページの特徴として、1つの商品を売るためのページであることが多いですが、現在ではそのようなページ1ページだけでなく、WEBサイト全般を指しています。
ただし、WEBデザイナーの間ではLP(ランディングページ)というと1つの商品を売るためのページを指すことが多く、ページにやってきたユーザーをいかに購入やお問い合わせのコンバージョンに導けるか、という技術を要します。
[chat face=”NkOllkLU_400x400.jpg” name=”しろまる” align=”left” border=”gray” bg=”none”] もちろん通常のサイトデザインにも色んな目的や目標に沿った制作をしていますよ! [/chat]
色んなジャンルから探せる
ランディングページの参考サイト【PC向け・日本語】
それでは、ランディングページの参考サイトをご紹介します。
Web Design Clip(ウェブデザインクリップ)
ランディングページだけでも1,000以上のページが掲載されています。
また、右にあるハンバーガーメニューを押すと、キーワード・カラー・カテゴリー・タグなどで絞り込みをすることができます。
ランディングページだけでなく、通常の日本のサイトや海外の参考サイトも掲載されいてるのが特徴です。
[jin-iconbox10]https://lp.webdesignclip.com/[/jin-iconbox10]
[chat face=”NkOllkLU_400x400.jpg” name=”しろまる” align=”left” border=”gray” bg=”none”] 芸能人やアニメのイラストを使ったランディングページも多く掲載されているので、そのような素材を提供されたときにどのような扱い方をすればいいのかとても参考になります! [/chat]
LP アーカイブ
圧倒的な登録LPデザイン数で、14,000以上のページを閲覧することができます。
絞り込みはカラー・カテゴリー・イメージで絞り込むことができます。
[jin-iconbox10]https://rdlp.jp/lp-archive[/jin-iconbox10]
[chat face=”NkOllkLU_400x400.jpg” name=”しろまる” align=”left” border=”gray” bg=”none”] プロモーション期間が終わったランディングページでも、画像で保存してあるのでほとんどのページを確認できるのが嬉しいところです。 [/chat]
運営会社でもランディングページの制作を受けているようで、LPに関する記事一覧が充実しているのもポイント。
ランディングページあつめました。
2009年からあるランディングページの参考サイト。(掲載数は不明)
カラー・カテゴリー・掲載年月で絞り込むことができます。ただし、画像などで保存はされてないので昔のランディングページだと確認できないこともあるようです。
[jin-iconbox10]http://lp-web.com/[/jin-iconbox10]
[chat face=”NkOllkLU_400x400.jpg” name=”しろまる” align=”left” border=”gray” bg=”none”] クリックしたらすぐに該当のランディングページに飛べる![/chat]
スマホのランディングページの参考になるサイト【スマホ向け・日本語】
1pxにこだわりたい。iPhoneデザインボックス
数少ないスマートフォンのランディングページ参考サイトの一つです。(掲載数は不明)
カテゴリーのところに色やジャンルがまとめてあり、そこから絞り込みをすることができます。
[jin-iconbox10]http://design.web-hon.com/[/jin-iconbox10]
[chat face=”NkOllkLU_400x400.jpg” name=”しろまる” align=”left” border=”gray” bg=”none”] スマホサイトで使えるネタ帳・スマホサイトで困ったらなどのメニューで、スマホ独特のネタをまとめてあるみたいです![/chat]
Responsive Web Design JP
ランディングページだけにこだわった参考サイトではありませんが、一目でPC・タブレット・スマホの見栄えがわかりやすいと思ったのでご紹介です。(掲載数は不明)
カテゴリー・カラー・テクニック(どんな技術を使っているか)・サイトのタイプ(サイトであるか、ランディングページであるかなど)で絞り込むことができます。
[jin-iconbox10]https://responsive-jp.com/[/jin-iconbox10]
[chat face=”NkOllkLU_400x400.jpg” name=”しろまる” align=”left” border=”gray” bg=”none”] 技術による絞り込みが珍しく、「こういう動きをしたい!」というクライアントからの要望を受けた際にも参考として重宝しそうです。[/chat]
スマートフォンサイト集めました。
ランディングページ集めました。の姉妹サイトです。
カテゴリー・タグ・年月で絞り込むことができます。パソコンで見ていると、クリックした場合にパソコンのサイトにそのままリンクしているため、スマホで見る方が良いようです。
[jin-iconbox10]http://sp-web.jp/[/jin-iconbox10]
[chat face=”NkOllkLU_400x400.jpg” name=”しろまる” align=”left” border=”gray” bg=”none”] クリックしたらすぐに該当のランディングページに飛べる![/chat]
LPデザインは、WEBデザインと少し違ってストーリーを組み立てていくのがとても難しいです。
しかし、一番大事なのはたくさんの参考サイトを見て、目を養うことです!たくさんのサイトを見て、ぜひ勉強してみてくださいね。