LPデザイン決定までの5つの流れ

LPとはランディングページの略で、Webサイトにおいてユーザーのアクションを誘導するためのページです。具体的には商品紹介ページやサービス紹介ページなどがLPになります。

LPのクオリティはサイト売り上げに大きく影響するため、LPはWebサイト制作において非常に重要な役割を担っています。

しかし、闇雲に頑張ればクオリティの高いLPが作れるわけではありません。LPには基本的な作り方の流れが存在します。

ここではLPデザインを決定するまでの、5つの流れについて解説していきます。基本的な制作の手順を把握して、効率的にLP制作を行いましょう。

1：LPのゴール・ターゲットなどの戦略設計

LPデザインを決定する上で最初に行うことは、LPのゴール・ターゲットを決めることです。

LPのゴールとは、LPを訪問したユーザーに期待する行動のことで、具体的には商品購入や会員登録、資料請求などが挙げられます。また、ターゲットはLPに誘導するユーザーの性別や年齢層のことです。

LPのゴール・ターゲットを明確にしてLPデザインの制作方針が決定することで、より効果的なデザイン構成を作ることにつながります。

2：戦略設計に沿ったデザイン構成案の検討

LPのゴールやターゲットなどの戦略設計が完了したら、次はLPデザイン構成の検討を行います。ここでは、ユーザーにどんな情報を伝えるか、情報をどのような順番・手法で伝えるかなどを検討します。

LPのゴールに向けて必要な情報を精査し、ユーザーに分かりやすい方法で伝えることでゴールへの到達率（成約率）が向上します。
そのため、前述した戦略設計が甘いと不必要な情報が増え、適切なデザイン構成ができなくなってしまいます。

3：LPデザイン構成の具体化

大枠の構成が完成したら、デザイン構成の具体化を行っていきます。この作業は「ワイヤーフレームの作成」とも言います。ワイヤーフレームとはWebサイトの設計図のようなもので、LPデザイン構成をより具体的にしたものです。

ワイヤーフレームを作成することで、情報やレイアウトが整理でき、他の人との認識合わせが容易にできるようになります。

このワイヤーフレームを元に、Webサイトに載せるLPデザインの制作を行います。

4：コーディング

LPデザインが完成したら、次に行うのはコーディングです。コーディングとは、作成したLPをWeb上で見られるようにする作業です。

最近では、PCやスマホ、タブレットなど様々なデバイスでWebサイトを閲覧できるため、各デバイスで正しく表示されるようコーディングする必要があります。

5：実装・確認・改善

コーディング完了後は、LPをWebサイトへ実装（公開）します。公開したらLP制作は一旦終了ですが、LP制作は公開後の対応も非常に重要です。

公開後は解析ツールなどを用いて、LPへの訪問率や成約率を確認し、確認した結果によってLPの改善を行いましょう。

LPデザインの解析・改善を行うことで、よりクオリティの高いLPが製作され、Webサイトの売り上げ向上につながります。

LPデザインを成功に導くポイント5つ

ここまで、LPデザインの制作手順について紹介してきました。続いては、LPデザインを成功させるためのポイントについて見ていきます。

以下で紹介する5つのポイントを押さえて、効果的なLPデザインを制作していきましょう。

1：ターゲットを明確にする

LP制作のポイントは、ターゲットを明確にすることです。LPでは、ユーザーに興味を持って商品購入などの行動をとってもらう必要があるため、より効果的なデザインを作る必要があります。

ターゲットの年齢や性別、趣味などのペルソナをできるだけ詳細に決定することで、効果的な宣伝方法やデザインを採用できます。

このとき、ターゲットのイメージが曖昧だと、当たり障りのないデザインとなり、ユーザーの興味を引けないLPデザインになってしまうため、注意が必要です。

2：ゴール・目的を明確にする

LPのゴール・目的を明確にすることも非常に重要なポイントになります。

「LPを訪れたユーザーに何をして欲しいのか」を明確にすることで、シンプルでわかりやすいLPデザインにできます。

例えば、LPのゴールが資料請求（無料）の場合、LP上に資料請求の情報と資料請求ボタン（無料）をわかりやすく配置することで、ユーザーは迷うことなく判断できるでしょう。

しかし、ゴールが明確になっておらず、LP上に資料請求ボタン（無料）や商品購入ボタン（有料）などが混在しているようなデザインの場合は、ユーザーに躊躇いが生まれ、期待した結果につながらない場合があります。

3：紹介する商品は優先度の高いものに限る

商品を紹介する場合は、優先度の高いものに限ることが重要です。ひとつのページ上に多くの情報が混在していると、ひとつひとつの商品への関心が薄れてしまい、成約率低下のリスクが生じます。

売りたい商品が複数ある場合でも優先度を考慮し、優先度が高い商品に限定して紹介することで、その商品に対してより効果的なLPデザインとなります。

4：自社商品が優れているポイントなどの中身を充実する

当たり前のことですが、どんなに良いLPデザインを作成しても内容が充実していなければ成約にはつながりません。LPにおいて、ユーザーに売りたい商品やサービスの魅力を伝えることは必要不可欠です。

商品の優れているポイントをアピールする方法はいくつかあります。例えば、商品の強みをわかりやすく伝えるキャッチコピーや過去の実績、お客様からのレビューコメントなど内容を充実させることで、ユーザーが信頼や安心を獲得し商品購入へとつながっていくでしょう。

5：LP 公開後の改善を大事にする

LPは公開後の改善が大切です。逆に、一発で最高のLPを制作することは非常に困難でしょう。また、常に流行などは変化しているため、それらに合わせた訴求方法を選択する必要もあります。

つまり、LPは公開後に効果測定を行い、測定結果や流行に合わせて改善していくことで、成約率を向上させていくと言えます。

LPデザインの参考になるおすすめ18サイト

ここまで、LPデザインの制作手順や成功するLPデザインを制作するためのコツなどについて紹介してきました。

続いて、LPデザインの参考になるおすすめのサイトを紹介していきます。

下記サイトを参考に、成約率の高いLPを制作していきましょう。

1：Dejam

「Dejam」は、LP・Webデザインの豊富なデザインデータベースを無料で公開している、参考事例サイトです。LPだけでなくWebサイトのデザインを画面ごとに閲覧することが可能できるのが大きな特徴です。

また有料版を用いると該当サイトの過去のデザインも見ることができるようになります。

https://leango.co.jp/dejam/

2：LP advance

LP advanceは、掲載LP数約1,600以上のLPデザインまとめサイトです。

LP advanceのおすすめポイントは検索機能が充実している点で、業種やLPの色、デザインタイプなどによってLPデザインを検索できます。LPデザインのイメージが明確になっている方にはおすすめのサイトです。

3：LPアーカイブ

LPアーカイブは、登録LPデザイン数が約25,000を超え、豊富なLPデザイン数が魅力のサイトです。

キーワードやカラー、カテゴリ、イメージなどによる検索機能も充実しています。LP関連記事やLP制作のコツについての記載もあるため、初心者の方にもおすすめのサイトです。

4：LP幹事

LP幹事は、掲載LP数約2,500以上のLPまとめサイトです。LPアーカイブなどと同様に、業界や色、イメージなどからLPデザインを検索できます。

業界については選択項目が細かく分かれており、より詳細な条件で検索することが可能です。

また、サイト自体のデザインがシンプルで非常に使いやすいのも魅力のひとつです。

5：Pinterest

Pinterestは、Webサイト上の画像をブックマークできるWebサービスです。LP専用のまとめサイトではありませんが、LPなどの単語で検索することで数多くのLPデザインを見ることができます。

気に入ったデザインを保存でき、自分のプロフィールからいつでもリンクを出せるため非常に便利です。

6：SANKOU!

SANKOU!は、国内のWebサイトが約2,500以上掲載されているまとめサイトです。こちらも検索機能が充実している、使いやすいサイトとなっています。

業種や色などの他に、ページレイアウトやアニメーションの有無などによる検索も可能で、国内のクオリティが高いサイトを参考にしたい方におすすめです。

7：LANDINGPAGE BOOKMARK

LANDINGPAGE BOOKMARKは、健康食品や化粧品などのランディングページに特化したLPデザインまとめサイトです。

サイト右側のTaglistから、お好みのタグを検索できるのも便利な機能です。ダイエットサプリや健康食品、化粧品などの商品紹介を行う方はぜひ参考にしてみてください。

8：OnePageMania

OnePageManiaは、海外のWebデザインを見ることができるまとめサイトで、サイト自体も英語で構成されています。

ランキングトップ10のサイトを確認することができるため、流行のチェックをしたい方にはおすすめのサイトです。

9：Responsive Web Design JP

Responsive Web Design JPは、日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。キーワードなどの一般的な検索に加え、サイト制作技術による検索も行えます。

サイト制作技術による、デザインの違いなどを確認したい方におすすめのサイトです。

10：One Page Love

One Page Loveは、OnePageManiaと同様に海外のWebデザインを見ることができるまとめサイトです。

Webデザイン以外にもWeb制作に関する記事やノウハウなどが掲載されているため、デザインを参考にしながら勉強することが可能です。

ただし、海外のサイトのため、ある程度の英語読解スキルが必要です。

11：Web Design Clip

Web Design Clipは、国内外のWebデザインを見ることができるWebデザインまとめサイトです。

キーワードや色、カテゴリによる検索に加え、レイアウトによる検索も可能です。サイト自体の構成もシンプルで見やすくなっています。

12：ランディングページまとめサイト

ランディングページまとめサイトは、その名の通り、厳選されたランディングページが閲覧できるまとめサイトです。

LPデザインごとに投稿者による解説コメントが掲載されているため、非常に勉強になるでしょう。</mark></strong>初心者の方にもおすすめのサイトです。

13：AWWWARDS

AWWWARDSは、海外のWebデザインが閲覧できるまとめサイトです。

AWWWARDSには、「Site of the Day」というデザイン、ユーザビリティ、クリエイティビティ、コンテンツの項目で高評価を得たサイトが、日替わりで紹介される機能があります。その他にも、Webデザインに関する記事なども掲載されています。

14：CSSclip

CSSclipは、海外のランディングページを見ることができるサイトです。海外サイトですが、サイトデザインがシンプルで非常に使いやすく、英語がわからない方でも直感的に操作できます。

英語は苦手でも、海外のおしゃれなデザインを参考にしたいという方におすすめのサイトです。

15：Land-book

Land-bookは、海外のWebデザインを閲覧できるまとめサイトです。

CSSclipと同様、サイト構成がシンプルで使いやすいため、英語ができない人でも簡単に操作できます。ランディングページ以外にも、ブログやストアサイトのデザインなどが見られます。

16：S5-Style

S5-Styleは、約8,000を超えるWebデザインが掲載されているWebデザインギャラリーサイトです。

おしゃれでクオリティの高いWebサイトが、多く掲載されているのが特徴です。検索機能も充実しており、気に入ったサイトを保存する機能もあるため、非常に便利です。

17：MUUUUU.ORG

MUUUUU.ORGは、縦に長いレイアウトでデザイン性に優れたサイトが多く掲載されているWebデザインポータルサイトです。

日本国内のサイトだけでなく海外のサイトも掲載されているため、国内外問わず優れたデザインのサイトを参考にしたい方におすすめです。

18：bookma!

bookma!は、他のサイト同様に優れたデザインのWebサイトが多く掲載されているまとめサイトです。

bookma!では、PCで表示されるデザインとスマホに表示されるデザインを同時に見ることが可能です。

デバイスによる表示方法の違いを参考にしたい方におすすめしたいサイトです。

LPデザインの見せ方の6つの基本的なコツ

前項では、LPデザインの参考になるサイトを紹介しました。サイトによってデザインは異なりますが、LPデザインには見せ方のコツがあります。

ここからは、LPデザインの見せ方の基本的なコツについて見ていきましょう。

1：ファーストビューは画像とキャッチコピーで引きつける

「ファーストビュー」とは、LPに訪問したユーザーが初めに目にする部分です。ファーストビューによってユーザーはLPの内容や印象を判断するため、LPにおいて特に重要な部分になります。

ファーストビューでは目を引く画像やキャッチコピーを表示して、ユーザーの興味や関心を引きつける必要があります。

ファーストビューでユーザーを引きつけることができれば、ユーザーにLP全体を閲覧してもらえるでしょう。

2：フォントにメリハリをつけ目立たせたい情報を強調する

LP内が全てが同じフォントサイズ、色だとページにメリハリがなく退屈な印象になってしまいます。また、伝えたい情報をユーザーが見落としてしまうリスクもあります。

そのため、LP内の特にユーザーに伝えたい情報は、フォントサイズや太さ、色などを変えて強調するようにしましょう。

3：メインのイメージカラーをサブカラー・アクセントカラーで補強する

Webサイト制作においてイメージカラーを統一することは重要ですが、LPにも同じことが言えます。ただし、サイト内の全ての色が似たような色だと、フォント同様にメリハリがなくなってしまいます。

そのため、目立たせたい部分や、ユーザーにクリックしてほしいボタンなどの配色をサブカラーやアクセントカラーで補強し、自然とユーザーの目に留まるデザインにすることが重要です。

4：文章・画像の位置揃えと余白の活用により情報を見やすくする

文章や画像の位置がバラバラだったり、文章量が多く余白が少なかったりするページは見づらい印象になります。また、ページが見づらいとユーザーが途中で出て行ってしまう可能性が高くなるでしょう。

文章や画像の位置をきちんと揃え、適切な余白を設けて見やすいページレイアウトにすることが大切です。細かい部分までしっかりとこだわることで、成約率の高いLPに近づいていきます。

5：アニメーションや写真で最後まで読ませる

文章のみでなくアニメーションや写真を活用し、ユーザーの視覚にアプローチすることでLPを最後まで見てもらいやすくなります。写真やアニメーションは、多くの情報を文章よりも簡単に伝えられ、ページ構成をシンプルにすることも可能です。

前項で紹介したS5-Styleには、アニメーションを活用しているサイトも多く掲載されているため、とても参考になるでしょう。

6：ユーザーの声を掲載する

SNSなどの普及により、最近ではユーザーによる商品レビューをチェックする人が増えています。実際に使用した人の意見を参考にすることで、ユーザーは商品への信頼や安心感を得ていると言えるでしょう。

LPにおいても、売り手側のメッセージだけでなくユーザーの声を掲載し、新規ユーザーからの信頼を獲得することが非常に重要になります。

LPの効果が上がらないときの点検・見直しのポイント4つ

実際にLPを制作・公開・運用していく中で、期待した成果が得られないことがあります。効果が上がらない場合にはLPを改善する必要がありますが、具体的にどこを見直せばいいかわからない方も多いのではないでしょうか。

ここからは、LPの効果が上がらない原因を探る上で、特にチェックしたい4つのポイントを紹介していきます。LPの効果が上がらず、改善を検討している方は参考にしてください。

1：ユーザーが離脱しやすいポイントを調べる

LPを改善する際には、まず現状LPの弱点を探る必要があります。闇雲にLP改善を行っても期待した成果を得られる可能性は低く、さらに効果が低下してしまう場合もあります。

解析ツールを用いることで、LPへのアクセス数や直帰率、ユーザーエクスプローラーなど、ユーザーの行動を調べられます。これらを確認し、ユーザーがLPから離脱しやすいポイントを洗い出すことで、現状のLPに対する弱点が見えてきます。

例えば、ファーストビュー以降の閲覧率が低い場合、ファーストビューを改善することで以降の閲覧率が向上する可能性があります。

2：LP広告文がユーザーの心に響いているか

LPが期待した効果を発揮していない場合には、LP広告文がユーザーの心に響いていない可能性があります。記載されているキャッチコピーや使用画像が、商品やサービスの強み・メリットを表現できていないと、ユーザーの心には響かず成果は上がりません。

誰が見てもわかりやすく、重要な情報が伝わりやすい内容になっているか確認し、不適切な場合には修正しましょう。

3：LP閲覧者とターゲット層がマッチしているか

LP製作時に設定したターゲット層と、実際にLPを閲覧しているユーザーがマッチしているか確認することも重要です。設定したターゲット層に向けたデザインでも、実際の閲覧者がターゲット層とずれていれば、成果が上がらないでしょう。

解析ツールを用いてユーザー層を確認し、ターゲット層とずれている場合には、ターゲット層とユーザー層がマッチするように、サイトへの流入経路などを改善する必要があります。

4：アクセスの少なさはキーワードの選択の問題でないか

LPデザインが優れていても、アクセスが少なければ高い効果は得られません。LPへのアクセス数が足りていない場合には、SEO施策が必要になります。

SEOとはSearch Engine Optimizationの略で、「検索エンジン最適化」という意味です。簡単に言えば、インターネット検索で自身のサイトが上位に表示されやすくするための対策です。

LP内の文章に検索でヒットしやすいキーワードを選択し、検索結果の上位にサイトを表示させられれば、アクセス数の増加が見込めるでしょう。

LPのデザインは完成後も運用しながら改善していこう

本記事では、LPデザイン制作の流れや見せ方のコツ、LP改善の際のチェックポイントなどについて紹介してきました。LPは、完成後いきなり期待した成果が得られるものではありません。

完成・公開後の運用が非常に重要で、解析や改善を行うことでより良いLPになっていきます。この記事を参考にしながら、成約率の高いLPを制作していきましょう。

LPやWebデザインを効率的に検索するには、たくさんのサイトを検索して参考になるデザインを探すのは時間がかかって大変です。
そこでおすすめなのが、LeanGoの提供する「Dejam」です。

https://leango.co.jp/dejam/
「Dejam」は、豊富なデザインデータベースを無料で公開している、LP・Webデザインの参考事例サイトです。
業種や画面名などでデザインを検索することができます。
デザインを検索したい方は活用してみましょう。