SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

ECzine Day(イーシージン・デイ)とは、ECzineが主催するカンファレンス型のイベントです。変化の激しいEC業界、この日にリアルな場にお越しいただくことで、トレンドやトピックスを効率的に短時間で網羅する機会としていただければ幸いです。

最新イベントはこちら!

ECzine Day 2024 Autumn

2024年8月27日(火)10:00~19:15

今さら聞けないEC知識

ランディングページの基本的な考え方とデザイン、作り方やコツをご紹介


 広告などからの着地点である「ランディングページ」は、一般的なウェブページとは全く異なる考え方で作られます。そのため、既存ウェブページと同じ作り方やデザインではうまく成果(コンバージョン)に結びつきません。そこで本記事では、成果を上げるためのランディングページの基本的な考え方やデザインについてご紹介します。

成果の最大化を目指すランディングページデザインの考えかた

 ランディングページは、購入やお試しセットの申し込みなど、ECにおいて重要な役割を果たすページです。見た目の美しさも重要ですが、その役割を果たし、成果(コンバージョン)につながるデザインが求められます。

 まずはランディングページとは何か、求められる役割は何かから見ていきましょう。

ランディングページとは

Website landing page development – sketch on math book

 ランディングページは、広告やSNS投稿などの告知先から、ユーザーが最初に着地(Landing)するページです。略して「LP(エルピー)」と呼ばれることも多いです。

 着地した後、商品の購入や資料請求・問い合わせなど、何かしらコンバージョンしてもらうことがランディングページの目的です。基礎化粧品や健康食品などの単品通販では、このページのみでインターネットショッピングが完結する仕組みのものもあります。

 このため、企業や学校・団体の紹介、ブランディングなどに使われる一般的なウェブサイト内のページとは、この点で大きく異なります。

 ランディングページと一般的なウェブページの特徴の違いは、次のようにまとめることができます。

ランディングページの特徴

  • 特定のサービスや商品の訴求のみに特化している
  • そのページ単体で完結することが多い
  • 商品の購入や問い合わせの窓口であり、結果としてコンバージョン率が最大化が求められる

一般的なウェブページの特徴

  • 企業の理念やイメージを伝える、ブランディングなど
  • 団体や組合の紹介となる、プロフィールページなど
  • ウェブサイト全体の中の1ページとして役割を果たしている

 コンバージョンしてもらえるかどうか、最後の判断がランディングページで行われるため、ウェブマーケティング施策において、重要な役割を担っています。

 SEOならぬ、LPO(Landing Page Optimization:ランディングページ最適化)との言葉もあるくらい、プロが日々、その技術に磨きをかけているページです。

 ランディングページそのものの制作はもちろん、そこに誘導するために広告などの有料施策が行われていることもあり、成果=コンバージョンを上げることが求められます。ランディングページを訪れた人のうち、何人が買ったかをコンバージョン率とし、その数値を上げることをKPIとすることも多いです。

 デザインを担当する人の中には、こういった数値目標を追うことを苦手とする人も少なくありません。しかし、デザインの良し悪しをコンバージョン率のような客観的な数字で測ることは、改善を行いやすかったり、評価の基準が明確になったりと良いこともあります。

ランディングページにおけるデザインの良し悪しとは

Smiley face and blurred sad face icon on wood cube

 コンバージョン率を最大化できるのが良いランディングページだとして、具体的にどのように制作すれば良いのでしょうか。次のポイントをおさえることが重要です。

  • 1ページ内に必要な情報が網羅されている
  • コンバージョンにつながりやすい順番で情報が配置されている
  • 画像や図を適宜利用し、インパクトと訴求力の高いページになっている
  • ユーザビリティに配慮している

 ランディングページにおいては、これらのポイントをきちんとおさえ、かつ、デザインが成立しているかが問われます。というのも、コンバージョンを追い求めすぎてブランドイメージを損なっては本末転倒だからです。数値目標に無頓着でもいけないし、一方でただ指示されたとおりにデザインするだけでもない、ビジネスパーソンとしてデザイナーの腕が問われるところです。

ランディングページの基本的な作り方

 ランディングページの目的や、作る上での重要なポイントをおさえたところで、実際の制作手順を順を追って見ていきます。

ターゲットを設定する

woman thinking with drawing question mark for decision and have a idea

 ランディングページを制作するにあたり、まずは訴求したい商品やサービスのターゲットをしっかり設定する必要があります。つまり、コンバージョンを得たい相手を明確にするということです。

 ターゲットを設定する際、年齢・性別・属性などを含めて名前をつけ、具体的なひとりの人間として考えると、どのように訴求すれば良いかがよりわかりやすくなるとされています。これを「ペルソナ」と言い、マーケティングにおいて最も重要な要素のひとつです。

情報を整理し、順番や配置を整える(構成)

Close up of young web designer drawing website responsive layout on white board

 ターゲット(ペルソナ)を設定したら、次はそのターゲットに対して最も効果的な訴求方法を考えます。すなわち、ターゲットが求めている情報、それを自社製品やサービスがどのように解決できるかを効果的に伝えるわけです。さらに情報を並べる順番や、画像や図を使った見せ方、CTA(購入ボタン)の配置などの構成を作ります。

  ゼロから作るとなると大変そうですが、ランディングページを作るときには「ワイヤーフレーム」と呼ばれる構成の型があります。画像検索してみると、かなりの数ヒットするのでやってみてください。

 上から順に次の3つの部分を作っていくことで、ある程度見やすくコンバージョンにつながりやすいランディングページを作ることができます。

  • ファーストビュー:キャッチコピー、アイキャッチ画像、監修・実績など
  • ボディ:ストーリーや共感、サービス訴求、メリットや口コミ、CTA
  • クロージング:購入/問い合わせフォーム、CTA

 ページに記載するテキストを中心とした内容は、営業に慣れたスタッフや商品・サービスへの理解が深いスタッフに執筆してもらったり、彼らにセールスポイントや「こう説明するとよく売れる」というセールストークのコツを聞いた上で作成すると良いでしょう。

実際に制作する

Mobile responsive website development, wireframe design preview on smartphone screen

 構成が出来上がったら、実際に制作に入ります。自社内でもウェブデザイナーに依頼する場合でも、構成を作った人が自分でデザインするのでもない限り、何も工夫せず、最初からイメージどおりのものが出来上がってくることはそうありません。

 デザインを担当してくれる他の人にイメージを共有する際に、伝えたいポイントを3つご紹介します。

  • ユーザーに伝えたい内容の優先順位をつける
  • カラートーン、派手さのレベル
  • 似たイメージのサンプルサイトを例示し、参考にする箇所をピックアップする

ランディングページのデザインを外注する場合の料金相場

Coins falling to white piggy saving , Financial and money deposit concept

 ランディングページのデザインを外注する場合、10〜40万円程度が相場です。一般的にはホームページ制作会社に依頼することが多いでしょうが、フリーランスなど個人に依頼する場合は費用を抑えやすい傾向があります。

 これまで説明してきたターゲットの設定や構成、ワイヤーフレームの作成のほか、コピーライティングや写真・動画撮影、イラスト制作なども依頼して質を高めたいという場合は100万円以上になることもあります。

 予算と求めるクオリティのバランスを考慮して、依頼先を選びましょう。

ランディングページをデザインするコツ

 最後に、ランディングページをデザインする際のコツをご紹介します。これさえ押さえておけば、自社でランディングページを作成する場合でも一定のクオリティを保ちやすくなるでしょう。

ユーザー目線のファーストビュー

Designers drawing website ux app development

 ファーストビューとは、文字どおりユーザーが最初にランディングページを見るとき、見る部分のことを指します。ファーストビューによってユーザーの第一印象が決まるため、ランディングページの第一印象は非常に重要です。

 ファーストビューで大切なのは、「続きを読んでみよう」と思ってもらうことです。文字の大きさや画像・図の配置、色などを含め、ターゲットに不快感や不信感を抱かせないような、安心感があって見やすく興味を持ってもらえるようなファーストビューにしなくてはなりません。

 また、近年ではスマートフォンだけで情報を集め、購入や申し込みまで完結する人が多くいます。むしろ、仕事でない場合は、パソコンからアクセスする人は決して多くありません。

 ひとつのページを制作すると、自動で見ている人の端末サイズに合わせて表示してくれる「レスポンシブデザイン」という仕組みがあります。ECのカートサービスを利用していて、そのサービスの仕組みでランディングページを制作する場合には、この仕組みを使って最適化されるでしょう。

 仕事ではパソコンを使うことが多いため、スマートフォンでのチェックを忘れがちです。狭いスマートフォンの画面は、ファーストビューが勝負です。ぜひスマートフォンを前提にデザインすることを心がけてください。

メリハリのある配色、フォント

Website designer Creative planning application developer development draft sketch drawing template layout prototype framework wireframe design studio

 デザインにメリハリをつけることで、グッとページが見やすくなります。情報にインパクトを与えることは大切ですが、あれもこれも目立たせてしまうと情報過多となり、ユーザーは迷ってしまいます。そこで、情報に優先順位をつけ、アピールしたい部分だけを訴求することが重要です。

 メリハリをつけるためには、情報の配置はもちろんですが、フォントの大きさや配色で調整する方法もあります。アピールしたい部分は大きいフォントで、それ以外の部分は小さいフォントで作成するだけでも、目に留めたい部分が明確になるでしょう。

視認性を高める

discuss web design

 視認性を高めるためには、画像や図を使ってわかりやすく情報をまとめることも重要です。商品の写真や、サービスを実際に使っている動画を組み込むのも視認性を高め、情報をユーザーによりわかりやすく伝えられるでしょう。

 視認性を高めるポイントとして、「写真や動画を使いすぎないこと」「余白を適宜入れること」も重要です。写真や動画は理解を深めるために良いツールですが、使いすぎると情報過多になります。写真や動画はどうしても伝えたいポイントだけに使い、文章と余白で見やすいランディングページにしましょう。

コツをふまえ、デザイン性の高いランディングページを作ろう

positive girl smm promoter hold computer search black friday bargain promotion agree recommend show thumb up

 ランディングページの目的は、ユーザーに消費やサービスについて理解・納得してもらい、購入や申し込みなどコンバージョンしてもらうことです。コンバージョンしてもらいやすい、つまりコンバージョン率の高いランディングページが成功していると言え、成功しているランディングページはデザインも良いということになります。

 今回ご紹介した考えかた、作り方、おさえておきたいポイントを踏まえ、デザイン性の高いランディングページを作りましょう。

この記事は参考になりましたか?

  • Facebook
  • X
  • Pocket
  • note
今さら聞けないEC知識連載記事一覧

もっと読む

この記事の著者

EC研究所(イーシーケンキュウジョ)

ECについての情報を調べ、まとめてお届けします。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事をシェア

ECzine(イーシージン)
https://eczine.jp/article/detail/9797 2023/06/14 17:34

Special Contents

AD

おすすめ

アクセスランキング

アクセスランキング

イベント

ECzine Day(イーシージン・デイ)とは、ECzineが主催するカンファレンス型のイベントです。変化の激しいEC業界、この日にリアルな場にお越しいただくことで、トレンドやトピックスを効率的に短時間で網羅する機会としていただければ幸いです。

2024年8月27日(火)10:00~19:15

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング