ココをチェックすれば結果が出る!?ランディングページ(LP)制作時に注意したい15のポイント

ランディングページは、1ページという限られたスペースの中でユーザーのニーズを喚起し、アクションを起してもらう必要があります。
ただホームページを短くまとめただけ、という認識をもたれている方も多いと思いますが、決してそうではありません。少ない情報をどう取り入れるかが重要となるため、ただ何となく作っただけでは思うような成果は出ません。

そこで今回は、ランディングページを作成する際に必ず気をつけたい注意点をまとめてご紹介します。これから作りたいと思っている方はもちろん、成果が出ないと悩んでいる方も参考にしてみてください。

▼成果の出るLPデザインのポイントをまとめた資料はこちら

成果の出るLPデザインのポイント【チェックリスト付き】クリエイティブ例も紹介

ランディングページについてのおさらい
ランディングページ（landing page）とは、ユーザーが検索エンジンか広告などから最初にアクセスしたページのことを指します。「LP」とも呼ばれています。

一般的なWebページとの違いは、Webサイトに訪問したユーザーを購入や申込、問い合わせなどの成約に繋げるために特化しているところです。1ページ内において、ユーザーの興味を引き、購買意欲を高め、申込フォームから成約するという構成をしており、高いコンバージョンを獲得するために制作します。

ランディングページは、ユーザーがWebページから離脱するのを防ぎつつ、スクロールをしながら意欲的に読み進めてもらう必要があるため、デザインにメリハリがあり、インパンクトのあるイメージやグラフや表などの説得要素の強い具体的なデータを掲載するケースが多くあります。ランディングページは様々な業界で利用されていますが、通販業界では特に多用されています。

引用：
ランディングページ／ferretマーケティング用語辞典

ランディングページ作成の注意点15個

1.レイアウトに視線誘導を取り入れる

Webデザインを行うときの視線誘導がもたらす重要性とその考え方 – YATのBLOG

ランディングページに限らず、デザインにおいて、視線誘導は非常に重要なポイントです。
視線誘導とは、ユーザーが画面を眺める視線の動きをスムーズにするための技術のことでで、ユーザビリティ向上のために考慮する必要があります。

視線誘導には大きく「グーテンベルク・ダイアグラム」「F字」「Z字」の3パターンがあり、掲載するコンテンツに応じて適したものを選択します。

グーテンベルク・ダイアグラム・・・左上から右下に視線が移るという考え方で、媒体を4つの区画に分けてコンテンツを配置します

F型・・・視線が左上から始まり右に移動した後、再度左に戻って下に流れ、また右に移動するというパターンです

Z型・・・アルファベットのZのように視線が左上、右、左下、右に流れるという考えに則ったレイアウトです

レイアウトを検討したら、いくつかのテストを試し、ユーザーがストレスなくコンバージョンに進めるかをチェックします。
1からレイアウトを考えるのが難しい場合には、他社のランディングページのレイアウトパターンを参考にしてみましょう。

2.ファーストビューにユーザーを惹きつける要素を入れる

【完全保存版】必見！成果を上げるランディングページの作り方｜LISKUL

ランディングページを見てもらえるかどうかのカギを握っているのが、アクセスした時に一番に目につくファーストビューです。
せっかくページにアクセスしてもらえても、ファーストビューで「求めている情報が無さそうだ」と判断されると、ユーザーは読み進めることなく離脱してしまいます。

そこで、ファーストビューにターゲットのニーズを突く「キャッチコピー」、キャッチコピーとの整合性がある「メインビジュアル」を取り入れ、ターゲットの関心を引きます。
キャッチコピー文にユーザーが探し求めている情報を入れ、さらにメインビジュアルで気を引きましょう。
この時にチョイスするビジュアルは、画像よりも写真が効果的です。

また、権威付けとなる要素があると期待度を高めることができます。例えば「ランキングNo.1」「○○新聞掲載」のように具体的な数字が入ったもの、メディア情報が有効です。

3.1ページにまとめ、長過ぎないようにする

たった1時間で完成！売れるランディングページの作り方｜Wix公式ブログ

ページが複数にわかれていたり、あまりにもページが長過ぎてしまうと、ユーザーは見るのを途中でやめてしまいます。
継続して集中してもらえるよう、コンテンツは1ページに集約し長くなり過ぎないようにします。

4.イラスト、画像を使用して直感的に伝える

ユーザーの心を掴め！LP制作に効果的な4つの構成とコツ｜ECpack*（※2020年3月5日時点でページが存在しないためリンクを削除しました）*

商品をPRしようと、つい文章を長々と書いてしまいがちです。
文章だけが続いてしまうと、ユーザーには「読むのが面倒」と思われて離脱されてしまうことも決して珍しくはありません。

そこで、読み飛ばされないようメリットを伝えるためには、文章は極力短くし、言いたいことはイラスト、画像で直感的に伝えることをオススメします。
ビジュアルを取り入れることで、パッと見ただけで何か言いたいか理解してもらうことができるからです。

5.申込ボタンは目につく場所に配置する

ランディングページ（LP）はファーストビューで決まる！直帰率を改善するポイントまとめ | 株式会社LIG

ランディングページ作成時、気をつけたいポイントの一つに、申込ボタンの設置場所があります。これは非常に重要です。
アクセスしてすぐに離脱してしまうターゲットも多いので、申込ボタンは必ずファーストビューの範囲に入れておきましょう。購入を考えているターゲットなら、ファーストビューの段階ですぐに購入してもらえることもあります。

しかし、せっかくファーストビューに配置しても気づいてもらえない可能性がありますので、その点はデザイン面で注意したいところです。メインカラーに溶け込み過ぎてしまわないように目立つ色を選び、クリックできることがわかるようにグラデーションや影で立体感を演出します。ページ全体のデザインの印象を壊さないように気をつけながら、できる限りボタンを目立たせます。

6.必要以上に画像、文字を配置しない

ベテランスタッフが伝授！効果的なランディングページ作成のコツ｜Wix公式ブログ*（※2020年3月5日時点でページが存在しないためリンクを削除しました）*

単調なLPではユーザーに飽きられてしまいますが、逆に必要以上に装飾を施すのも要注意です。

ターゲットにアクションを起してもらう確率を上げるためには、いかにスムーズに誘導できるかが重要です。
華やかに見せようと過剰に画像を入れたり、文字をたくさん入れてしまいたくなりますが、伝えたいことが伝わるよう必要のないグラフィック、文章は入れないようにしましょう。アクションに関わる必要最小限の要素だけ配置することを心がけてください。

また、画像の例のように線、矢印を効果的に使用すると、ターゲットを上手く誘導することが可能です。

7.メリハリをつけて拾い読みしてもらう

ユーザーを飽きさせない！LPデザインを制作する5つのコツ｜ECpack*（※2020年3月5日時点でページが存在しないためリンクを削除しました）*

メリハリのないランディングページは読み流されてしまい、アクションを起してもらうことは困難です。
拾い読みしてもらえるよう、適度にメリハリをつける必要があります。

メリハリをつけるには、重要部分だけフォントサイズを大きくしたり、サブカラーを取り入れたり、背景に写真を大きく配置するといった方法があります。
配置にしても淡々とレイアウトするより、ランダムに配置しておくと飽きずに見てもらえます。
全部を目立たせようとするのは効果的ではありませんので、本当に重要な部分はどこかを考え適時メリハリをつけるのがポイントです。

8.コンテンツをブロック化して分ける

キャンペーン系ページデザインのコツ！「流し読み」を意識して作ろう | SONICMOOV LAB

人間の一度に理解できる量には限界があります。
ランディングページ内にたくさんの情報を詰め込み過ぎてしまうと、まともに目を通してもらいづらくなります。
そこで、1ブロックに一つの情報、というようにコンテンツを小さくわけるようにして、リズムよく最後まで見てもらえるようにします。

9.写真撮影はユーザー目線を意識する

売れるランディングページの作り方（ワイヤーフレーム要素）｜Marke Style

写真のクオリティは高いほうがもちろん良いのですが、必ずしもプロカメラマンに頼まなければいけないわけではありません。
ユーザー目線を意識して撮影すれば、商品やサービスの良さをしっかりと訴えることができます。
例えば、「石けん」を販売するならパッケージだけの写真より、泡立てている様子を写したもの、というように、ユーザーが実際に使っている状況をイメージできるような写真を意識してみましょう。

10.不必要な余白を入れない

ランディングページデザインにおける「余白」の使い方 | ランディングページ（LP）の制作、運用支援 コンバージョンラボ

余白は、上手く取り入れるとコンテンツを区切ることができたり、情報にまとまり感を出すことができる非常に重要な要素です。

しかし、ランディングページの場合、スクロールを継続してもらうため、無駄に余白を入れる必要はありません。ランディングページで余白を入れると元々長いページがますます長くなり、ユーザーがスクロールする負担が増えてしまいます。それに、不必要な余白は離脱率を高める可能性もあります。

余白を上手く活用したい場合は、極力コンパクトに情報をまとめ、余白を入れすぎないようにバランスを考えることが重要となります。

11.適切な色使いを心がける

ユーザを惹き付けるランディングページをデザインする6つのポイント | Ptengine Blog*（※2020年3月5日時点でページが存在しないためリンクを削除しました）*

色は、人の心理に大きく影響を与えるものなので、色が持つイメージやランディングページへの活かし方を正しく理解する必要があります。
色を選ぶ際は、欲張り過ぎず、メインカラーは一色に決め、補助色に無彩色を選ぶとバランスが良く、うるさいイメージになりません。

12.内容とデザインのバランスを考える

デザインや動的な表現が立ちすぎているとコンバージョンが出づらい？？ | ランディングページ（LP）の制作、運用支援 コンバージョンラボ

デザインを真剣に考え作り込むことは重要ですが、あまりにも凝りすぎてしまうとデザインだけが目立ってしまい、伝えたい内容が埋もれてしまいかねません。
そこで重要なのが、内容[テキスト）とデザインのバランスを考慮することです。高品質なビジュアル、インパクトのある動きは魅力的に見えますが、デザインが立ちすぎないように注意しましょう。重要なのは、デザインを見せるのではなく、ユーザーが必要としている情報を的確に訴求すること、というのを第一に考える必要があります。

13.デザイン4原則を守る

デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則｜Web Design RESIPES*（※2020年3月5日時点でページが存在しないためリンクを削除しました）*

デザインには「近接」「整列」「コントラスト」「反復」4つの原則があり、これらを守ることはどのようなデザインにおいても重要です。原則を守っていないランディングページのデザインは、大変見づらいので、しっかりと守ってデザインする必要があります。

「近接」・・・関連性の高いものを近く、あまり関係のないものは遠くに配置するというテクニックです
「整列」・・・要素は見えない線を意識しきちんと整列して配置するということです
「コントラスト」・・・要素がいくつかあるときにはっきりと違いをつけることです
「反復」・・・レイアウト・色・形などデザインに含まれる何らかの特徴を繰り返すことです

これら4原則を上手くデザインに活かしましょう。

14.テーマに合ったテキストスタイルを選ぶ

テキストスタイルで効果倍増！バナー制作LP制作のコツ | 福岡・東京のWEBデザインスタジオAIMERS CREATE（エイマーズクリエイト）（※2020年3月5日時点でページが存在しないためリンクを削除しました）

配色やスタイルが違うだけでも印象が大幅に違ってきますので、テーマ、商材のイメージにあったデザインを心がけましょう。
ノンデザイナーの方でも身の回りのアイテムのデザインを参考にすることで、スキルを習得することができます。雑誌、看板、商品パッケージなどを普段からよく見るようにすればデザインの引き出しが増やせます。
そのほか、テレビのテロップを見るのも非常に役立ちますので、テキストスタイル選びの参考にしてみてください。

15.適切な横幅サイズを把握しておく

必見！LP(ランディングページ)制作前に知っておきたい最適な横幅のサイズは？｜ECpack*（※2020年3月5日時点でページが存在しないためリンクを削除しました）*

ランディングページを作ろうと思った時につまづいてしまいがちなのが横幅サイズです。
最近ではPC、スマホどちらも利用者が多くスマホからアクセスする人も増えているので、レスポンシブ対応にしておきたいものです。PC、スマホ両方の表示サイズを把握し、見やすいサイズを心がけましょう。