LPデザインとは?作り方から参考サイトまで詳しくご紹介

自社のLP(ランディングページ)をもっと「ターゲットの目を惹くデザイン」に作り変えたいけれど、何から始めればよいかわからず困っている人はいませんか?
今回は、LPデザインの作り方から参考サイトまで詳しく解説します。
LPデザインをする上で知っておきたい基本構成と要素

LP(ランディングページ)とは、広告や検索結果から訪問者が最初にアクセスする「特定の目的に特化したウェブページ」です。商品購入、お問い合わせ、その他情報など、特定の行動(コンバージョン)を促すために制作・デザインされます。
以下ではLP(ランディングページ)デザインをするうえで、知っておきたい基本構成と要素についてご紹介します。
LPデザインの基本構成
LPデザインに含めなければならない基本構成は以下の3つです。
項目 | 概要 |
ファーストビュー | ・ユーザーがLPにアクセスして最初に見る部分 ・求める情報がなければ離脱してしまう |
ボディ | ・LPのメインコンテンツ ・商品やサービスの詳細、実績、口コミなどを配置する |
クロージング | ・ユーザーの課題や疑問を解決しコンバージョンに導く部分 ・よくある質問、入力フォームなどを配置する |
LPデザインでは、ユーザーをスムーズにコンバージョンまで導ける構成にするのが望ましいとわかります。
LPデザインに含まれる要素
LPデザインに含めなければならない要素と構成の中で配置する場所は以下の通りです。
項目 | 概要 | 構成内の配置場所 |
キャッチコピー | ・ユーザーの注意を惹くための印象的なフレーズ ・商品やサービスの購入で得られる楽しい未来=ベネフィットと提案を含める | ファーストビュー |
アイキャッチ画像 | ・ページのテーマを伝えるための画像 ・ベネフィットがイメージできる画像にするのが望ましい | ファーストビュー |
CTAボタン | ・「Call To Action」の頭文字を取った言葉でユーザーに行動を促すためのボタン ・色やサイズで目立つようにし、テキストは動詞にする | ファーストビュー、ボディ、クロージング |
問題提起・共感・解決策 | ・ユーザーへの問題提起、共感、解決策の順番で話を展開すると受け入れてもらいやすくなる | ボディ |
商品やサービスの情報 | ・商品やサービスのスペック(品質、性能、こだわり)、メリット(どう役に立つか)、ベネフィット(どう生活が変化するか)を組み合わせて発信する | ボディ |
社会的証明 | ・信頼できる第三者の意見や実績 ・ユーザーの口コミ、総顧客数、導入実績、クライアントのロゴ、専門家の推薦、賞の受賞歴、創業年数などを含めるのが望ましい | ファーストビュー、ボディ、クロージング |
フロー | ・商品の使い方、サービスの利用、契約などの流れ | クロージング |
よくある質問 | ・ユーザーの疑問や悩みを先回りして解決できる回答を記載する | クロージング |
入力フォーム | ・LP内に設置する埋め込み型とリンクを貼るページ遷移型があるが、ページを移る手間がかからない埋め込み型がおすすめ | クロージング |
要素に不足があったり、適切な構成に配置されていなかったりするとユーザーは違和感を持ち離脱してしまうため注意しましょう。
LPデザインの作り方

LPデザインの作り方を6Stepでご紹介します。
【Step1】LP制作の目的とペルソナを設定する
最初にLPを制作する目的を決めます。
目的は以下のような例があります。
- 商品やサービスの購入
- メルマガ登録
- 資料・ホワイトペーパーのダウンロード
- 問い合わせ獲得
また、どのようなターゲット層に訴求するかを決めるため、ペルソナ(自社の商品やサービスの、たった1人の理想的なターゲット顧客)を作成します。
ペルソナは架空の人物ですが非常にリアルな人物像のため、ターゲットの持つ悩みや課題が明確になります。
【Step2】ワイヤーフレームを作成する
LPの構成図であるワイヤーフレームを作成します。
ファーストビュー、ボディ、クロージングなどの各部分に、それぞれ「どのような情報・デザインを配置するのか」を具体的に決めることで、精度の高いLPに仕上がりやすいです。
【Step3】コンテンツを作成する
具体的なキャッチコピーやコンテンツを作成します。
ファーストビューの内容でユーザーへの印象や離脱するかどうかが決まるので、興味を惹いた後は課題を解決できそうだと思ってもらえる流れを作っていきましょう。
【Step4】デザインをする
ペルソナの好みに合わせて、LP全体の配色やレイアウト、文字のフォントやサイズを決めます。
ユーザーが操作しやすいデザイン(UIデザイン)、ユーザーが楽しめるデザイン(UXデザイン)を意識することで、望ましいデザインに仕上がります。
【Step5】コーディングをする
LPをWeb上に実装するための作業です。
HTML、CSS、JavaScriptなどのプログラミング言語の知識が必要ですが、プログラミングの知識やスキルがない場合は簡易的に制作できるLP作成ツールを利用しましょう。
【Step6】公開して効果を検証する
LPを公開した後は、Googleサーチコンソール、Googleアナリティクス、ヒートマップなどを用いてアクセス解析・改善などの作業を行いましょう。
LPは完成したら終わりではなく、解析の結果を基に改善を繰り返して運用します。
LPデザインの参考サイトとは?

LPデザインの参考サイトとは、ギャラリーサイトやまとめサイトのことを指します。
よく使われるサイトは以下の通りです。
同業他社のLPデザインを多数見てみることで、思わぬアイデアが得られるかもしれません。
LPデザインにお悩みの方はemo planningにご相談ください

自社でもユーザーに訴求できるLPデザインをしたいけれど、なかなか手をつけられずに困っているという方はemo planningにご相談ください。
emo planningでは今まで以下のようなLPを制作し、お客様の求める成果を挙げ続けてきました。
- さいたま静脈瘤クリニック様(医療脱毛LP) https://saitama-varix.com/datsumo/
- さいたま静脈瘤クリニック様(美容3ページ) https://saitama-varix.com/botox
- 株式会社ティーエス 様(とまと王LP)http://www.kkts.jp/tomatoou/
- ドローンLP:https://emo-planning.co.jp/drone/
漠然とした内容からでも丁寧にニーズをお伺いし、LPに仕上げて参ります。
LPを活用して「商品の販売促進・売上アップ・集客・認知拡大・ブランディングなどのさまざまな要望を達成」し、制作後のサポートまで対応できる点が強みです。
興味のある方は次のページもごらんください。
群馬県のホームページ制作会社|作成から運用まで| 合同会社emo planning
まとめ

成果の挙がるLPデザインをするためには、ファーストビュー、ボディ、クロージングの3つの構成の中に、必要な要素を適切に配置することが大切です。
この記事も参考にして、ぜひ自社の訴求した内容にあったLPをデザインしてみてください。