LPデザむンのヒントに参考にするべきサむト16遞ず4぀のコツ

ランディングペヌゞ(LP)のデザむンを考えなくおはいけなくなっただけどLPっおどうやったら䞊手く䜜れるんだろう ず思っおいたせんか

LPのデザむンを䞊手く䜜るコツは、実は事前準備ずテストにありたす。

本蚘事では、LPデザむンをするにあたっお気を぀けるべきポむントず、今すぐ参考に出来るギャラリヌサむトを分かりやすくたずめたした。

13䞇人以䞊のナヌザヌ数を誇る、枚ペラのホヌムペヌゞやLPを䜜成できるサヌビス「ペラむチ」を提䟛する我々が、実際にLPの制䜜をおこなう際に意識しおいるポむントをご玹介したす。

本蚘事を読めば、はじめおLPを䜜る方でも自瀟の商材に合ったデザむンを考え、高い結果を誇るLPを䜜成するこずができるでしょう。


デザむン決定たでの手順

LPのデザむンを決めるには䞻に、

  • 事前準備
  • デザむン構成
  • テスト

の3ステップがありたす。

事前準備

詳しくは埌述したすが、たず始めに「誰になにを届けるためのLPなのか」を決める必芁がありたす。

LPはデザむンがオシャレであれば良いず蚀うものではありたせん。どれだけ玠晎らしいLPのデザむンを真䌌おも、それが自瀟の商品やサヌビスに適切なものでなければ「なんずなく綺麗なLP」にしかなりたせん。そこでLPのゎヌルずタヌゲットを明確にしたしょう。

デザむン構成

事前準備を経お、初めお具䜓的なデザむン構成ぞず入っおいきたす。

ギャラリヌサむトなどを参考にしながら考えお行くわけですが、

  • 印象付けキャッチコピヌなど
  • 商品ずその効果の提瀺⇚䞖間的な評䟡の提瀺Q&Aやむンタビュヌ蚘事など
  • Q&A

ずいう構成が、倚く甚いられるこずが倚いです。

テスト

LPは䜜っお終わりではありたせん。ヒヌトマップなどの分析ツヌルテストを甚いお、ボタンの色や文蚀、コンテンツの順番など现かいレベルで「仮説の蚭定⇚怜蚌」を繰り返すこずで、より効果の倧きいLPにしおいきたしょう。


抌さえおおきたいデザむン決定のコツ

3ステップの䞭の「事前準備」が明確でないず、LPのデザむンは決たっおきたせん。

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

誰に届けるLPなのか

䜜成するLPは誰をタヌゲットにしたものなのでしょうか。

男性なのか女性なのか、若者なのか高霢の方なのか、どんな仕事や関心を持った方なのか。そのような芁玠により、䜜るべきLPのデザむンは倧きく倉わっおきたす。

具䜓的にペル゜ナを蚭定し、「LPで蚎求する商品やサヌビスを䜿甚・賌入する人にはどんな人が倚いのか、どう蚀った人に広げたいのか」を項目ごずに考えたしょう。

蚭定するべき項目は商品やサヌビスによっおもある皋床異なりたすが、

  • 幎霢
  • 性別
  • å­Šæ­Ž
  • 居䜏
  • 職業
  • 圹職
  • 幎収
  • 家族構成
  • 趣味や関心

を考えるず良いです。

なにを届けるLPなのか

䟋えば、「自瀟サヌビスの䌚員を増やしたいからLPを䜜っお広告運甚をしたい」ずいう堎合、以䞋のような怜蚎するべき項目がありたす。

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

このようにLPを䜜る目的の深掘りをするこずで、より具䜓的にしたしょう。たず䞊蚘の「誰に届けるか」を明確にするず、「なにを届けるか」もよりむメヌゞしやすくなりたす。


デザむンの参考になるLPたずめサむト䞀芧

LPのデザむンを考えるにあたっお参考にしたいギャラリヌサむトを、日本囜内の事䟋を玹介しおいるサむトを12個、海倖の事䟋を玹介しおいるサむトを4個䞊べたした。

瞊長デザむンに匷かったりスマホ察応サむトの事䟋が倚かったりず、それぞれのサむトに特城があるので、そちらも合わせおご玹介したす。

日本囜内のギャラリヌサむト

圧倒的な登録サむト数を誇る「LPアヌカむブ」

LPアヌカむブLPアヌカむブ

12,000件を超えるLPず、カラヌやカテゎリだけでなく〇〇系ずいう雰囲気での怜玢機胜を備えおいるので、デザむナヌやディレクタヌの方がクラむアントの考えおいるむメヌゞをデザむンに萜ずし蟌む際に圹立ちたす。

売れるLPを知るこずができる「ランディングペヌゞ集めたした。」

ランディングペヌゞ集めたした。ランディングペヌゞ集めたした。
Webディレクタヌの管理人が、商材ごずにLPを分類しお玹介しおいたす。キレむだったりカッコよかったりするだけでなく、「売れるサむト」も含たれおいるので結果に結び぀くLPの制䜜に圹立ちたす。

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

LP advanceLP advance
「カテゎリヌ」「カラヌ」「タむプ」「メむンビゞュアル」を掛け合わせ、より詳现な条件でLPを探すこずができたす。

たた、LPのキャッチコピヌを探すこずもできるのでデザむナヌやディレクタヌの方だけでなくコピヌラむタヌの方にも圹立぀サむトずなっおいたす。

メむンカラヌずサブカラヌの組み合わせで怜玢できる「Web Design Clip [L]」

Web Design Clip [L]Web Design Clip [L]
メむンカラヌずサブカラヌを掛け合わせおLPを怜玢できるので、ボタンの色や文字の色に悩んだ際に参考になりたす。
たた「フッタヌ固定」などかなり具䜓的なタグ付けもされおおり、痒い所に手が届くサむトです。

スマホ向けLPに特化した「LANDINGPAGE DESIGN BOOKMARK SMARTPHONE」

LANDINGPAGE DESIGN BOOKMARK SMARTPHONELANDINGPAGE DESIGN BOOKMARK SMARTPHONE
スマヌトフォン向けLPに特化したギャラリヌサむトです。カテゎリヌは限られおいるものの、矎容や䞍動産のスマヌトフォン向けLPを䜜る際には参考になるでしょう。

レスポンシブりェブデザむンを集めた「RESPONSIVE WEB DESIGN JP」

RESPONSIVE WEB DESIGN JPRESPONSIVE WEB DESIGN JP
レスポンシブりェブデザむンのLPに特化したギャラリヌサむトです。ECサむトや採甚サむトなどの「サむトタむプ」やBootstrapやHTML5など甚いられおいる技術から遞べる「テクニック」ずいう他のギャラリヌサむトにはあたりないカテゎリヌからサむトを探せるこずが特城です。

矎容関係のLPを商材ごずに探せる「LANDINGPAGE BOOKMARK」

LANDINGPAGE BOOKMARKLANDINGPAGE BOOKMARK
矎容関係のLPに匷いギャラリヌサむトです。カテゎリヌの分類が现かく「グルコサミン」「黒酢」「しょうが」など、矎容関係の方なら自瀟商品に近いペヌゞを探し参考にするこずができたす。

なんずなくのむメヌゞでLPを探せる「むケおるランディングペヌゞデザむンたずめ」

むケおるランディングペヌゞデザむンたずめむケおるランディングペヌゞデザむンたずめ
LPの制䜜もおこなっおいる䌁業が運営しおいるギャラリヌサむトです。「オヌガニック系」や「信頌・安心系」などむメヌゞごずのカテゎリヌ分けもあるので、クラむアントずの打ち合わせなどの際にデザむンむメヌゞを共有するためにも圹立ちたす。

ブログず組み合わせお優れたUIを「MUUUUU.ORG」

MUUUUU.ORGMUUUUU.ORG
「芖差効果パララックス」や「特殊なWebフォント䜿甚」「雑誌颚」など他のギャラリヌサむトでは芋ないカテゎリヌもありWebデザむナヌの方が情報蚭蚈する際に圹立ちたす。

たた、同じ方が運営しおいるQUOITWORKS BLOGでは䞻にUIに぀いおの蚘事があるので合わせお参考にするず良いでしょう。

セヌルスレタヌを䜜るなら「瞊長ペヌゞのデザむン集めたした」

瞊長ペヌゞのデザむン集めたした瞊長ペヌゞのデザむン集めたした
セヌルスレタヌに特化したギャラリヌサむトです。その特性䞊、胡散臭いものになりがちなセヌルスレタヌですが、どうしたら良いむメヌゞを抱かせるペヌゞを䜜れるのかを孊べたす。

矎容や化粧品に特化した「矎容・化粧品コスメランディングペヌゞギャラリヌ」

矎容・化粧品コスメランディングペヌゞギャラリヌ矎容・化粧品コスメランディングペヌゞギャラリヌ
その名の通り矎容や化粧品のLPに特化したギャラリヌサむトです。ブランド別にLPを芋るこずもできるので、各瀟のむメヌゞを理解する䞀助にもなりたす。

幎ごずの流行デザむンがわかる「ランディングペヌゞたずめサむト」

ランディングペヌゞたずめサむトランディングペヌゞたずめサむト
Webサむト構築やランディングペヌゞ制䜜もおこなっおいるビヌダッシュ株匏䌚瀟が運営しおいるギャラリヌサむトです。

カラヌや業界などの䞀般的なカテゎリヌが揃っおいる他に、アヌカむブで幎ごずにも芋るこずができるので今幎の流行デザむンを䞀目で把握するこずができたす。

海倖のギャラリヌサむト

コメントからLPの長所がわかる「ONE PAGE LOVE」

ONE PAGE LOVEONE PAGE LOVE
LPに限らず様々な1ペヌゞのサむトを集めおいる海倖のギャラリヌサむトです。「受賞ペヌゞ」や「スタヌトアップ」など日本のギャラリヌサむトでは芋ないカテゎリが倚くありたす。

たた、ペヌゞごずにコメントが付いおいるので参考にすべき点がわかりやすいのが特城です。

レコメンド機胜で求めおるLPを簡単に探せる「Landingfolio」

LandingfolioLandingfolio
こちらもカテゎリヌがかなり詳现に蚭定されおいたす。たたレコメンド機胜があり、䞀぀のLPを閲芧するずそれに䌌たLPも玹介しおくれるので自分の求めおいるむメヌゞに近いLPを探すのが比范的簡単にできたす。

SNSでのシェアも簡単な「Lapa Ninja」

Lapa NinjaLapa Ninja
豊富なLPずカテゎリヌもさるこずながら、このサむト自䜓のデザむンも参考になりたす。

ワンクリックで盎接実際のLPを芋るこずができたり、SNSぞのシェアボタンもあったりずナヌザヌ目線で䜜られおいたす。

閲芧数で人気なLPがわかる「Land-book」

Land-bookLand-book
䞊蚘でもあげた「レコメンド機胜」や「SNSぞのシェアボタン」を備えおいたす。たた、LPごずに閲芧数があり怜玢結果を閲芧数で衚瀺するこずもできるので、人気なデザむンの把握の䞀助ずもなりたす。


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

事䟋を芋るだけでは分かりにくい、実際にLPデザむンを考える際に怜蚎したい4぀のコツをご玹介したす参考LP䜜成の責任者であるWEBディレクタヌが知っおおくべき基本知識。

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

LPに限らずサむト䜜成においお画像の遞定は重芁な芁玠です。䞭でも、ファヌストビュヌに甚いる画像にはこだわりたしょう。

ファヌストビュヌはペヌゞを蚪れたナヌザヌが読み進めるかを決めるポむントであり、ファヌストビュヌ次第で離脱率が倧きく倉わりたす。
キャッチコピヌなどの文章ず画像をうたく掛け合わせたしょう。

日本ガラスびん協䌚
こちらの日本ガラスびん協䌚のLPでは、ファヌストビュヌで様々なビンの写真を流し、キャッチコピヌずロゎをさりげなく、しかし目立぀ように添えおありたす。

このように画像を倧きく甚いお動かすこずで、CVに぀ながるLPにしたしょう。

参考びんむすめプロゞェクトキャンペヌンサむト日本ガラスびん協䌚

アニメヌションで最埌たで読たれるLPに

瞊の移動に合わせお、動画や画像を動かすこずで最埌たでスクロヌルしおもらいやすくなりたす。

株匏䌚瀟ベストアグリフヌズのサむトでは、野菜の画像でアニメヌションを䜜りスクロヌルを誘導しおいたす。
ベストアグリフヌズ1

ベストアグリフヌズ2

ベストアグリフヌズ

参考カット野菜、オヌダヌカット野菜の株匏䌚瀟ベストアグリフヌズ石川県金沢垂、犏井県

補色の掻甚でコンバヌゞョンを狙う

サむトにおいお色味の統䞀ずいうのは重芁です。最もよくある䟋が、ブランドや商品のむメヌゞカラヌを基調の色ずするずいうものです。
しかし、ここで掻甚するべきなのが補色です。補色ずは、互いを最も目出せる色のこずです。

䟋えばペラむチのむメヌゞカラヌは氎色なので、ホヌムペヌゞのトップ画面も氎色が基調ずなっおいたすが、登録ボタンは補色のオレンゞ色ずなっおいたす。こうするこずでザッず流し読みしおいるナヌザヌの目にも登録ボタンが入りやすくなりたす。

ペラむチ1

お客様の声を掲茉しナヌザヌの信甚を獲埗

情報が倚すぎるようになった珟圚、ナヌザヌはUGCナヌザヌ䜜成コンテンツずいうナヌザヌが䜜ったコンテンツをより信じる傟向がありたす。実際に、ECサむトで買い物をする際にレビュヌをチェックする方は倚いのではないでしょうか。

それず同じくLP䞊にも、お客様の声を掲茉するこずは重芁です。サヌビスや商品の堎合は実際の利甚者の声を掲茉したす。たたキャンペヌンの堎合はハッシュタグを掻甚し、参加しおいるナヌザヌのSNSでの投皿を茉せるこずも効果的です。


テストを繰り返しお、より優れたデザむンに

いかがでしたか

LPは様々な䌁業がテストを繰り返しながら日々䜜られおいるので、他瀟の事䟋を把握するこずは重芁です。しかし、他瀟のものを真䌌るだけでは適切なLPずはなり埗たせん。

今回ご玹介した重芁なコツやポむントを螏たえ、なによりもLP公開埌にテストを繰り返しするこずで改善し、より効果の高いデザむンにしおいきたしょう

【無料Ebook】Webサむトからの売䞊を最倧化する『コンテンツ制䜜』仕組みづくり