コラム コラム
コラム

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

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

自社のLP(ランディングページ)をもっと「ターゲットの目を惹くデザイン」に作り変えたいけれど、何から始めればよいかわからず困っている人はいませんか?

今回は、LPデザインの作り方から参考サイトまで詳しく解説します。

LPデザインをする上で知っておきたい基本構成と要素

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

LP(ランディングページ)とは、広告や検索結果から訪問者が最初にアクセスする「特定の目的に特化したウェブページ」です。商品購入、お問い合わせ、その他情報など、特定の行動(コンバージョン)を促すために制作・デザインされます。

以下ではLP(ランディングページ)デザインをするうえで、知っておきたい基本構成と要素についてご紹介します。

LPデザイン基本構成

LPデザインに含めなければならない基本構成は以下の3つです。

項目概要
ファーストビュー・ユーザーがLPにアクセスして最初に見る部分
・求める情報がなければ離脱してしまう
ボディ・LPのメインコンテンツ
・商品やサービスの詳細、実績、口コミなどを配置する
クロージング・ユーザーの課題や疑問を解決しコンバージョンに導く部分
・よくある質問、入力フォームなどを配置する

LPデザインでは、ユーザーをスムーズにコンバージョンまで導ける構成にするのが望ましいとわかります。

LPデザインに含まれる要素

LPデザインに含めなければならない要素と構成の中で配置する場所は以下の通りです。

項目概要構成内の配置場所
キャッチコピー・ユーザーの注意を惹くための印象的なフレーズ
・商品やサービスの購入で得られる楽しい未来=ベネフィットと提案を含める
ファーストビュー
アイキャッチ画像・ページのテーマを伝えるための画像
・ベネフィットがイメージできる画像にするのが望ましい
ファーストビュー
CTAボタン・「Call To Action」の頭文字を取った言葉でユーザーに行動を促すためのボタン
・色やサイズで目立つようにし、テキストは動詞にする
ファーストビュー、ボディ、クロージング
問題提起・共感・解決策・ユーザーへの問題提起、共感、解決策の順番で話を展開すると受け入れてもらいやすくなるボディ
商品やサービスの情報・商品やサービスのスペック(品質、性能、こだわり)、メリット(どう役に立つか)、ベネフィット(どう生活が変化するか)を組み合わせて発信するボディ
社会的証明・信頼できる第三者の意見や実績
・ユーザーの口コミ、総顧客数、導入実績、クライアントのロゴ、専門家の推薦、賞の受賞歴、創業年数などを含めるのが望ましい
ファーストビュー、ボディ、クロージング
フロー・商品の使い方、サービスの利用、契約などの流れクロージング
よくある質問・ユーザーの疑問や悩みを先回りして解決できる回答を記載するクロージング
入力フォーム・LP内に設置する埋め込み型とリンクを貼るページ遷移型があるが、ページを移る手間がかからない埋め込み型がおすすめクロージング

要素に不足があったり、適切な構成に配置されていなかったりするとユーザーは違和感を持ち離脱してしまうため注意しましょう。

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デザインを多数見てみることで、思わぬアイデアが得られるかもしれません。

LPデザインにお悩みの方はemo planningにご相談ください

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

自社でもユーザーに訴求できるLPデザインをしたいけれど、なかなか手をつけられずに困っているという方はemo planningにご相談ください。

emo planningでは今まで以下のようなLPを制作し、お客様の求める成果を挙げ続けてきました。

漠然とした内容からでも丁寧にニーズをお伺いし、LPに仕上げて参ります。

LPを活用して「商品の販売促進・売上アップ・集客・認知拡大・ブランディングなどのさまざまな要望を達成」し、制作後のサポートまで対応できる点が強みです。

興味のある方は次のページもごらんください。

群馬県のホームページ制作会社|作成から運用まで| 合同会社emo planning

まとめ

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

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

一覧に戻る

ホームページに関するお問い合わせ

合同会社emo planning
〒370-1112 群馬県佐波郡玉村町大字下之宮436-1

お問い合わせはこちら