デザイン・施策
LPデザインで意識すべき6つのコツ｜参考事例を交えて効果的なLPの作り方を学ぼう
2021.01.23
LPをデザインする前に、いくつか覚えておいた方が良いことがあります。
「デザイン」という言葉から、美的センスが問われると考えられがちですが、実際に問われるのは美的センスよりもビジネス的なノウハウ。
本記事では効果的なLPを作るコツを6つのポイントに絞って解説！
その他にも「LP作成の基本となる流れ」「デザインの参考事例」についても触れています。
ぜひ効果の出るLPデザインを考える参考にしてみてください。
LPをデザインする前に知っておきたい基礎知識
LP（ランディングページ）のデザインを考える初歩として、LPの役割を定義し、理解しておく必要があります。
なぜLPなのか。その点を考えると、デザインのコツも見えてきます。
LPはデザインも重要ではありますが、デザインはあくまでも目的達成のためのプロセス。
ではその目的とは何か、その点を見てみましょう。
そもそもLP（ランディングページ）とは
LP（ランディングページ）とは、検索結果や広告、SNSを経由してユーザーがアクセスするページのこと。
Webが多くの人にとって当たり前の空間となっているからこそ、Webを介した集客や認知拡大、販促におけるLPの重要性が大きくなりつつあります。
WebマーケティングにおけるLPの役割
Webマーケティングにおいて、LPには「顔」や「看板」に近い役割があります。
ユーザーがページに興味を持ってから初めに目にするページであり、「商品注文」や「問い合わせ」「資料請求」といった行動促進と相性が良いです。
今や、LPの出来栄えがWebマーケティングの効果は大きく左右するといっても過言ではないでしょう。
LPとホームページの違い
LPとホームページでは、そもそもの役割、目的が異なります。
LPは従来のホームページと異なり、商品の紹介・アピールに特化したページです。
企業のホームページは、商品やサービスの紹介だけではなく、企業の特徴、沿革、プレスリリースなど様々な情報を発信するなど、広い役割を持っています。
LP作成の流れをおさらい
LPデザインについて考える前に、制作全体の流れを一度おさらいしておきましょう。
- 目的の決定
- ペルソナ設定・訴求軸の決定
- ワイヤーフレーム（LP構成）の決定
- コンテンツ作成
- デザイン
- コーディング
- 公開・運用
- 効果測定・改善
LPはデザインがクローズアップされることも珍しくありませんが、デザインの前に、まずは作成の流れを正しく把握する必要があります。
1.目的の決定
なぜLPを作るのか、目的を決めましょう。
従来のホームページではできないことなのか。LPでなければならないのか。それらは目的次第です。
その点ではLPありきとして考えるのではなく、企業戦略で立案した目的達成の最適解がLPの時こそ、LPの出番と考えてよいでしょう。
2.ペルソナ設定・訴求軸の決定
誰に訴求するのかはLPの作成に於いて重要なポイント。
LPはある程度訴求力を効率化したもの。無駄な情報を省略し、商品販売に注力したLPは、より効率が求められます。
「いろんな人にアピールしたい」ではなく、ある程度ペルソナを設定し、どのような角度からのアプローチを行うのか。
この点は、LP作成の肝となる部分。
当然このような特性はデザインにも影響を及ぼす部分です。
3.ワイヤーフレーム（LP構成）の作成
LPの設計図ともいうべきワイヤーフレームを作成します。
ワイヤーフレームとはある程度の全体像です。
Webページを家に例えるのであれば、コンテンツは間取りです。
どこに何を置くのかといった問題の前に、まずは設計図ともいうべきワイヤーフレームを作成し、LP作成に携わるスタッフの意思疎通を図りましょう。
裏を返せばワイヤーフレームの精度が高いものであればあるほど、LPのクオリティが高まります。
4.コンテンツ作成
実際にLPを作成します。作成にあたってはそれぞれの環境で異なることでしょう。
それまでのディスカッションを元に、目的に合わせたLPを作成します。
コンテンツに関しては運用後に追加したり減らしたりといったこともありますので、あくまでも暫定的なものでも構いません。
5.デザイン
LPのデザインを考えます。
デザインもまた、閲覧者に訴求する大切なポイントとなりますが、こちらもターゲットによって変わるものです。
例えば年配層がターゲットであれば落ち着いたデザインの方が良いです。
また、若年層をターゲットにするのであればポップなデザインの方が親しみを持たれます。
サイトのデザインそのものが何らかの形で話題となれば、訴求効果も高まります。
これらの点から、性別、年齢層、購買層の嗜好などを考えたデザインが求められます。
6.コーディング
Web上での形にするための作業です。
Web上で形にするためにはコードと呼ばれる指令言語にて構築する必要があります。
HTML、CSS、PHP等の言語がこれにあたります。そのため、ある程度の専門的な知識が必要になります。
特に個性的なデザインであればあるほど、コーディングのための知識が求められる傾向にあります。
そのため、コーディング段階で技術的な問題からデザインを変更するケースも見受けられます。
7.公開・運用
作成したLPをWeb上に公開し、運用を開始します。
これらに関してはさほど難しいことではありませんが、トラブルやアクシデントにいつでも対応できる運用体制が求められます。
8.効果測定・改善
LPの目的に対してどれだけの効果が出ているのか、それに伴う改善策をどうするのかなども考えなければなりません。
LPは公開して終了ではありません。むしろ公開がスタートです。
目的のためにLPを作成しているはずですが、目的を達成できないケースも。
その場合、目的達成のために何が足りていないのかなど、様々なデータを元に検討する必要があります。
効果的なLPをデザインする6つのコツ
効果的なLPをデザインするために、いくつか覚えておくべきコツがあります。
- ①第一印象（ファーストビュー）を大切にする
- ②顧客目線で考える
- ③顧客に信頼感を与えるデザインを考える
- ④ついついスクロールしたくなるデザインを考える
- ⑤メリハリをつける
- ⑥細部にこだわる
細かい部分ではありますが、これらのコツを理解してのLP作成と、理解しないままでのLP作成。
同じLP作成でも効果に大きな違いが出る可能性があります。
①第一印象（ファーストビュー）を大切にする
人間は第一印象が大切ですが、LPも同様です。
もしもですが、第一印象で「ダメ」「魅力がない」と判断されてしまった場合。
いくら中身が充実しているLPであっても、中まで見てもらえません。
中身を見てもらうためには、興味を持ってもらうための「第一印象」が大切です。
第一印象を決定づけるのはファーストビュー
第一印象を決定づけるファーストビュー。
それは色、文字の大きさやや配置等を含めた全体的な雰囲気です。「中を覗いてみようかな」と思わせるLPデザインか否か。
この点こそ重要な部分です。
顧客に与える印象によってCVRは大きく変わる
LPの目的はCV（コンバージョン）ですが、印象次第でCVが出る割合（CVR）は大きく左右されます。
この点は閲覧者の主観に左右される部分ではありますが、色彩学などを意識したターゲットに不快感を与えないデザインが求められます。
②顧客目線で考える
LPは作成者サイドの自己満足であってはなりません。
顧客目線でどのように映るのかを考えましょう。
新しい技術、使ってみたかった技術を駆使するのではなく、顧客が見やすく、かつ実際にCRVを獲得するためには顧客目線は不可欠です。
自分たちが良いと思っても、顧客に「見にくい」「興味がわかない」「最後まで見る気がしない」と思われてしまうようなLPでは意味がありません。
「誰に」見てもらうLPなのかを明確に
LP作成時、ある程度ターゲットをイメージしているかと思います。
そのターゲットがLPを見てどう思うのかは、シミュレーションも大切。
しかし、実際にターゲットに近いペルソナにLPを見てもらうのもよいでしょう。
自分たちが「良いLPを作れた」と満足したとしましょう。
しかし、ターゲットに「よく分からないサイト」「見る気がしない」と思われるようなLPは、残念ながら良いLPではありません。
ペルソナとカスタマージャーニーを設計するのがおすすめ
ペルソナの設定はもちろんですが、カスタマージャーニーの設計も大切です。
カスタマージャーニーとは、設定したペルソナがどのような行動でCRVに至るかのプロセスです。
もちろん必ずしもその通りになるとは限りませんが、ターゲットの行動心理を分析することで、カスタマージャーニーも設計できるはず。
また、カスタマージャーニーを設計することで、足りていないものも見えてくることでしょう。
③顧客に信頼感を与えるデザインを考える
LPのデザインは機能面だけではなく、信頼感を与えることが大切です。
CVRを獲得するためには、顧客からサービスや商品に対して魅力を感じてもらう前に、「このサイトなら安心」だと思われなければなりません。
「素人感」は出ていないか
安っぽいデザインや、工夫がみられないまるで「素人が作ったサイト」のようなデザインでは信頼は得られません。
難解なサイトにすれば良いということではありませんが、あまりにも素人感が出ているLPもあります。
その場合、閲覧者は魅力を感じないどころか、むしろ怪しいとさえ感じてしまうことでしょう。
「ここなら安心」という気持ちにさせるデザインが大切
LPを見た閲覧者が「ここなら安心」と思ってもらえるデザインかも大切です。
配色やデザイン次第では、怪しいと思われてしまうこともあります。
CVRはサービスや商品の魅力もさることながら、サービス提供者への信頼感も重要。
LPのデザインはまさに信頼感を左右する部分になりますので、細かいデザインも大切です。
そのため、閲覧者がサイトを見て信頼できるかという点もまた、頭に入れておきましょう。
④ついついスクロールしたくなるデザインを考える
LPは見てもらって終わりではありません。
見てもらうことで、目標を達成することにありますが、そのためにはLP全体を見てもらったり、あるいはリンクをクリックしてもらうことが大切です。
そして、基本的にはLPは縦長のデザインとなりますので、如何にしてスクロールをしてもらえるのかが重要になります。
PC,スマホのそれぞれでスクロールを計算して設計する
スクロールではなく画面を閉じられてしまうことのないよう、スクロールしたくなるデザインを考えましょう。
そのための大前提として、PCとスマホそれぞれのスクロールを計算しておきましょう。
スクロールした際にどこでページが区切られるのかもまた、大切。
せっかく細かい部分まで計算したのに、スクロールしたら文字がしっかり表示されなかったり、画像が中途半端になってしまったり。
これでは閲覧者にとってはストレスです。
文字と画像のバランスを考える
スクロールで肝となるのが文字と画像のバランス。
文字ばかりですと見る側は退屈に感じてしまいますが、画像ばかりだと何をアピールしたいのかが分かりにくいです。
だからこそ両者のバランスが重要なのですが、量の面だけではなく、スクロールした際にどのように表示されるのかも計算しておきましょう。
⑤メリハリをつける
LPのデザインにメリハリをつけることもコツ。
メリハリをつけなければ、閲覧者の心に引っかかるものがありません。
LPの目的はCVR。そのためにはカスタマージャーニーが重要ですが、他にも閲覧者心理を考え、デザインにメリハリをつけることもポイント。
これによりみてもらいたい部分に注目を集めやすくなります。
顧客にアピールしたい部分は目立たせる
極論すればLPの全てを見てもらいたいことでしょう。
しかし、閲覧者側は製作者サイドの意図など考える必要がありません。
目に入って興味を引けばスクロールしてくれますし、興味がなければ画面を閉じてしまいます。
そこでアピールしたい部分を目立たせることで、直感的に「何が目的のサイトなのか」をアピールできます。
メリハリをつけないと、何をアピールしたいのか上手く伝わらないでしょう。
大きさや配色で調整する
大きさ、さらには配色によってメリハリをつけてみるのもよいでしょう。
これらもまた、閲覧者の資格に直接働きかけ、印象付ける部分。
アピールしたい部分は大きく、さらには周囲との配色バランスを考えることで、自然と「何をアピールしたいLPなのか」を伝えられます。
⑥細部にこだわる
細かい部分のデザインにもこだわりたいものです。
閲覧者の第一印象は大まかなものですが、ページを見れば見るほど、細かい部分にも目がいくようになります。
そこで、細かい部分にまでこだわりを感じさせるか、あるいは手抜きなのかでも印象が変わりますので、細かい部分もおろそかにすることはできません。
ボタンの形や配置
ボタンの形や配置もまた、重要です。
どこでクリック・タップしてもらうのか、ボタンの位置によってCVRを左右する部分と言っても過言ではありません。
それだけに位置はもちろんですが、形にもこだわりましょう。
入力フォーム
入力フォームを使用する場合、いくつか気を付ける点があります。
資料請求等の場合、いくつかの情報を入力してもらうことになりますが、入力フォーム次第で閲覧者の気持ちも変わります。
そのため、入力フォームも「設置するかしないか」だけではなく、細かい部分にまでこだわる必要があります。
極力シンプルで簡単なフォームを心がける
できる限りシンプルで、かつ簡単な入力フォームを心がけましょう。
なぜなら、あまりにも複雑なデザインだったり、入力項目の多いデザインにしてしまうと、閲覧者は「入力が面倒」と感じてしまうからです。
まずは気軽に資料請求等をしてもらいたいと思っても、面倒な気持ちが勝ってしまうようでは良いLPとは言えません。
特にコンタクトのきっかけとなる部分は、メールアドレスだけでも良いくらいです。
必須項目と任意項目は一目で分かるように
入力フォームへの入力事項について、必須のものと任意のものは一目でわかるようにしておきましょう。
よくみなければ分からない場合、閲覧者が確認を怠って記入漏れしてしまうことも。
もしもですが、記入漏れをしてしまった場合、正しくコンタクトが取れません。
ともすれば閲覧者は「面倒だからもういい」と思ってしまうことでしょう。
せっかくの見込み客を手放すことにもなりかねませんので気を付けましょう。
LPデザインの参考にしたいギャラリーサイト6選
LPデザインはギャラリーサイトと呼ばれる、いくつかの見本が掲載されているサイトがあります。
これらは広く支持されていると共に、様々なLPが掲載されていますので参考になることも多々あるはずです。
1.「ランディングページ集めました。」
様々なLPが用意されており、クリックするだけで該当ページに移動し、チェックできます。
更新月や取り扱い商材のカテゴリーが用意されているので、検索しやすいのはもちろんですが、同業他社がどのようなLPを作っているのか参考になることでしょう。
2.「LPアーカイブ」
デザイナー観点で様々なLPアーカイブを検索できるギャラリーサイトです。
カテゴリーだけではなく、LPのカラーやイメージといった漠然としたものからの検索も可能。
具体的な情報も掲載されていますので、参考になることも多いはずです。
3.「LP advance」
様々なカテゴリが合わさったLPを検索できるギャラリーサイトです。
業界やビジュアル、タイプで検索できる点に加え、キャッチコピーも確認できます。
どのようなLPを作りたいのか、まだまだ具体的なイメージが固まっていない段階でも、閲覧することで参考になることも多いでしょう。
4.「Web Design Clip [L]」
![Web Design Clip [L]](https://markecchi-lab.com/wp-content/uploads/2021/01/Web-Design-Clip-L-1-1024x532.png)
様々な業界のLPが掲載されており、LPのデザインにマウスやカーソルを合わせるとより細かいカテゴリー等を確認できます。
デザイン一覧表示も可能なことから、同業他社がどのようなLPを作っているのかも参考になります。
5.「イケてるランディングページデザインまとめ」
直感的に検索できるギャラリーサイトです。
「ネタ系」「神秘系」「力強い系」など、他のギャラリーサイトでは見かけない検索カテゴリーが用意されている点が特徴。
更新日も掲載されているので、時系列を含めて細かい部分までチェックできます。
6.「縦長ページのデザイン集めました」
「セールスレターのデザインリンク集」をうたっているサイトです。
楽天市場や情報商材でみられるセールスレターが多々まとめられています。
ギャンブル、ハウツー、スポーツといったカテゴリー分類もありますので、同業者のLPチェックも可能です。
LPデザインのコツを覚えてWeb集客の効率をあげよう
LPについて様々な点からチェックしてみました。
デザインが如何に重要なものであるかが分かっていただけたかと思いますが、LPデザインの最大のコツはやはり閲覧者視点。
LPは決して自己満足ではなく、あくまでも閲覧者に見てもらうためのもの。
LPを見た閲覧者が何を思うのかという視点こそ、LPデザインに於いて最も大切なコツといっても過言ではないでしょう。
まーけっちは「LP制作〜マーケティング」をゼロからサポートします！
本記事では、LPデザインのコツについて解説をしてきました。
「毎日のように問い合わせが届く！」
「売りたい商品がバシバシ売れる！」
こんなLPを制作するためには、根底となるマーケティングリサーチが必要不可欠です。
「成果の出るLPが作りたい」
そんなあなたの願いをお手伝いするするため、この度ペライチとまーけっちが共同であなたのLP制作からマーケティング活動を一括でサポートするサービスを始めました。
「パソコンが得意じゃない」「マーケティングとか全くわからない」それでも大丈夫！
我々まーけっちがリサーチとブランディングの強みを生かして、貴社のサービスを戦略的にサポートいたします。
どなたでもお気軽にご相談ください。
◆代表プロフィール
株式会社まーけっち 代表取締役社長 山中思温
マーケティングリサーチのプラットフォームの企業で、 最年少で事業部を立ち上げ、広告予算ほぼゼロで、国内トップの実績を達成。
中小・スタートアップ企業のマーケティングに関する構造的課題を痛感し、それを解決するため、株式会社まーけっちを創業。大手企業・国家機関・スタートアップなど100社以上の戦略支援を行い、コミットと売り上げ貢献成果に定評がある。上智大学外国語学部卒。
ーー
