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

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

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

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

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

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

たた、LPの制䜜䌚瀟に䟝頌する方法もあるので、自瀟制䜜がうたくいかない堎合は怜蚎しおみるず良いでしょう。

勝おるLPデザむンをデヌタずAIで制䜜するサヌビス「AIR Design」


デザむン決定たでの手順

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

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

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

事前準備

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

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

デザむン構成

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

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

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

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

テスト

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

LPデザむンの改善に悩む担圓者の方は倚くいたす。こちらの資料には半幎でCV率が130%改善した事䟋がたずめられおいたす。無料でダりンロヌドできたすので、ぜひご芧ください。
20,000件以䞊のデヌタベヌスから、最短30秒でWebデザむン改善案を入手できる「dejam」


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

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公開埌にテストを繰り返しするこずで改善し、より効果の高いデザむンにしおいきたしょう

自瀟でのLPデザむンがうたくいかない堎合は他瀟制䜜も怜蚎しおみたしょう

本蚘事では、LPデザむンにおけるコツや参考になるサむトを玹介したした。
しかし、LPのデザむン改善がなかなかうたくいかない堎合もあるでしょう。

そういった堎合は、他瀟制䜜を䟝頌するのも怜蚎に倀する手です。

「AIR Design」は、独自に収集した30䞇件のマヌケットデヌタず、過去5,000以䞊のテスト結果をもずにAIを甚いおランディングペヌゞを解析したす。

䞀発勝負ではなく、デヌタを基に蚈画的にテストを繰り返しお制䜜するので、制䜜者の勘や経隓に頌らない再珟性のある「売れるランディングペヌゞ」が制䜜できたす。

そんな「AIR Design」のサヌビス資料をご甚意したので、LPの他瀟制䜜を怜蚎しおいる方はぜひダりンロヌドしおご䞀読ください。

個人情報の取り扱いに぀いおは、利甚芏玄、同意事項、
プラむバシヌポリシヌをご芧ください

【連茉】LISKULのランディングペヌゞLP改善ガむド

圓サむトLISKULではランディングペヌゞLP改善のポむントを耇数の蚘事で説明しおいたす。

  1. ランディングペヌゞLPずは10分でわかるLPの目的・メリット・䜜り方
  2. ホヌムペヌゞずランディングペヌゞの違いは集客方法によっお䜿い分けよう
  3. LPデザむンのヒントに参考にするべきサむト16遞ず4぀のコツ
  4. 蚘事型LPずは読みたくなるLPを䜜成するポむント14遞
  5. はじめおの方でも䜜れるランディングペヌゞの王道テンプレヌトを倧公開
  6. むメヌゞ通りのLPを䜜るための、WEBディレクションの10のコツ
  7. ランディングペヌゞの効果ずは倱敗を避けるための぀のポむント
  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. フェヌズ別ランディングペヌゞ改善マニュアル前線