デザイン会社が発信するLP制作情報メディア

LPデザインで意識したい縦と横のサイズ

LPのデザインに関して
2022.8.16
LPデザインで意識したい縦と横のサイズ
LPとはランディングページの略で、検索サイトやリンクなどを経由してはじめにアクセスするページのことを言います。また、スマホやタブレットで閲覧する機会が増えたこともあり、LPとは1枚のページで完結するタイプのものも指します。ここでは後者のLPについて書いていきます。見やすさを考えると、LP制作において縦横のサイズは特に意識したい部分と言えるでしょう。そこで、サイズを決めるポイントやデザインの注意点について解説します。

目次

一般的なLPの構成

一般的なLPの構成
視覚的にも効果のあるLPをデザインするためには、まず一般的なLPの構成について知っておく必要があります。通常は「ファーストビュー」「本体」そして「クロージング」の3つに分けることができます。この3つの展開を軸に適切なサイズを決めること、そして視覚的に訴えることが重要です。一般的なLPの構成を説明しながら注意点なども合わせて解説していきます。

ファーストビュー(FV)

ファーストビュー(FV)
ファーストビューとはLPを訪れたユーザーが始めに目にする部分のことです。ここでどうアピールするかでユーザーが興味を持ってくれるかどうか決まります。そのため、ファーストビューの役割は非常に大きいと言えます。ファーストビューで大切なのは「何の商品か」または「どんなサービスか」を分かりやすくすることです。これは一般の紙媒体広告などすべてに言えることで、興味を引くようなインパクトがなければいけません。カラー選択を工夫すればインパクトを与えることはできます。しかし、内容がごちゃごちゃしてしまい、何のページか分かりにくいものは興味も薄れてしまう可能性が高くなります。インパクトを与えると同時に分かりやすい内容であることがポイントです。商品やサービスを連想させるようなデザインにするのも効果が期待できます。そして、次を見たいと思わせるような流れを作っておきましょう。

本体部分

本体部分
ファーストビューで興味を引いたら、次は本体部分でいよいよ詳しい内容に入ります。商品の紹介を始め、体験者のレビューなどユーザーが共感を持つような内容や、その商品またはサービスを利用することでユーザーが得られるメリットなどについて説明をしましょう。本体部分を見るユーザーはファーストビューですでに興味を持っていることが考えられます。それに対して商品やサービスの詳しい内容を説明すると同時に、自分にとって必要なものであると改めて認識してもらうことが大切です。本体の作り方次第では、ユーザーはますます商品やサービスに対して興味を深めてくれるでしょう。ここでは商品やサービスを説明するのが基本ですが、内容が具体的に伝わるようなものも含めるとより分かりやすくなります。そのひとつが体験者のレビューですが、商品が誕生した背景やどのような使い方があるかといった具体例などを盛り込むのもひとつの方法です。ユーザーがイメージしやすいものにしてあげると分かりやすくなります。

クロージング部分

クロージング部分
ファーストビューで興味を引き、本体で商品やサービスの詳細について説明したら、最後はクロージングで購入方法などをまとめましょう。本体で十分「利用したい」という意識が高まっていれば、発注方法や利用方法について知りたいと思うのは当然の流れです。ここでは誰もが使いやすい購入フォームや疑問点について問い合わせができるフォームを設けてあげましょう。フォームは見やすく分かりやすいものにしてください。クロージングには会社概要などももちろん必要です。免責事項や注意点などもここで説明するとスッキリとまとまります。文字サイズを工夫してメリハリをつけると見やすく、ユーザーにも親切です。商品の紹介以外の必要な要素をまとめる部分がクロージングの役割になります。

LPのサイズで重要なのがファーストビュー

LPサイズで重要なのがファーストビューのサイズをどれくらいで設定するかということです。どんな商品か、何のサービスなのかを伝え、そのまま続きを見たいと思わせる情報が一目で分かるものにしなければなりません。ファーストビューのサイズを決めるための基本的な考え方、そして適切なサイズについて解説します。

ファーストビューが重要な理由とは?

ファーストビューが重要な理由とは?
ファーストビューはLPの中でも最初にユーザーが目にする部分です。ここでユーザーが「自分には不要な商品」という判断をしてしまったら、そこから下にスクロールすることは見込めないでしょう。興味を感じなければページから離れてしまうことになります。実際には、そのユーザーが求めている商品であったり有益なサービスであったりしても、ファーストビューでアプローチができていないと気づいてもらうことはできません。それを回避するには、ユーザーにどうメリットのある商品であり役立つサービスかということを、ファーストビューでどこまで伝えられるかがポイントになってきます。ファーストビューの重要性を知れば、適切なサイズを意識することがどれくらい大切か分かってくるでしょう。

ファーストビューの理想サイズとは?

ファーストビューに使う理想のサイズは、一般的に横サイズが1000px縦サイズは500px~550pxが最適だといわれています。「Stat Counter」によれば、日本国内のPCユーザーが設定している解像度で最も多いのは1920 px×1080 pxという結果が出ています。次いで多いのは1366 px×768 pxです。しかし、解像度が高い場合には処理速度の関係なども出てくるため、フルスクリーンでブラウザを見ている人は少ないという可能性は否定できません。そのような事情も考慮すると、1000 px×500 px〜550 pxであれば大概のPCブラウザはカバーできるのではないでしょうか。よって、PC版ならこのサイズでファーストビューを考えるのが良いと判断できます。

スマホ版LPのファーストビューのサイズ

スマホ版LPのファーストビューのサイズ
PC版と同じくらい重要なのがスマホ版LPです。適切なサイズで制作されているスマホ版LPはスムーズで自然に目に入りますし、見ていてストレスを感じません。ストレスを感じてしまうことも、ページからユーザーが離れてしまう原因になるので注意したい点です。特にスマホの場合はPCに比べて画面サイズが小さいことで、視認性や表示を重視する人は多いと考えたほうがいいでしょう。「Stat Counter」によるとスマホの解像度で最も多いのが357 px×667 pxです。次いで360 px×640 px、その次が320 px×568 pxと続いています。横幅は最も小さい320 pxを基準にして考えれば、多くの人が見やすいデザインにできるでしょう。

LPデザインはファーストビューのサイズを意識して

LPデザインを制作するには、まず適切なサイズを考える必要があります。LPデザインにはアピール効果の高いキャッチコピーや、商品のイメージに沿ったインパクトあるカラー選択ももちろん外せない要素です。しかし、表示されるサイズが適切なものでなければ、どんなにアピールできる内容でもユーザーの目にとまらないこともあります。LPデザインにとって、サイズ設定は基本中の基本と言っても過言ではありません。そしてLPデザインにとって最も重要な位置を占めるのがファーストビューです。そこからユーザーにどこまでアプローチできるかが決まってきます。つまり、LPデザインはファーストビューのサイズを意識することが最も重要と言えるでしょう。さらにもうひとつのポイントは縦サイズと横サイズではどちらを重視するかということです。縦サイズは情報量で左右されるため、商品やサービスの内容に応じて変化します。横サイズを意識して制作すれば見やすいLPデザインになります。LPデザインは視認性や表示を考え、ユーザーが見やすいサイズを意識することが、その効果を最大限に発揮してくれるポイントと言えます。

LPでのファーストビューでの失敗例をご紹介

サイズを適切に設定した場合でも、ファーストビューで失敗してしまい、ユーザーに商品・サービスの良さを伝えられないこともあります。 ファーストビューで離脱されてしまえば、中身がどれほど良かったとしても意味がなくなってしまうので注意が必要です。 以下では、ファーストビューでの失敗例と対処法をご紹介します。 1つ目は、デザインでの商品イメージに失敗したケースです。 ファーストビューのデザインやキャッチコピーが、商品やサービスの内容とマッチしていない場合、ユーザーの興味を引くことは難しいでしょう。 例えば、オーガニックにこだわった食品を扱うサイトで、派手な配色を使ってお得感をアピールする文字を並べたデザインにした場合、健康的な食品を扱うサイトに見えない可能性が高いと言えるでしょう。 もし、期待していたものと違うと感じてしまえば、すぐにページから離脱してしまうことも容易に想像できます。 そのため、ファーストビューでは扱われている商品のイメージが、サイト上のデザインとマッチしていることが重要です。 2つ目は、ターゲットに刺さらない作りで失敗したケースです。 どのような商品・サービスであっても、どこをターゲットにするかで、作成すべきデザインは異なります。 そのため、想定していたターゲット層とのギャップがある場合、最後まで読み進めてくれる可能性は低くなってしまいます。 例えば、20代の若い女性に向けた可愛らしいメイク用品を扱っているサイトで、暗い配色でシンプルなデザインにまとめてしまうと、あまりウケが良くないことは想像できるでしょう。 上手にセグメントしたデザインでない場合には、購入まで至らないどころか、サイト自体もよく見てもらえない原因となります。 3つ目は、リンク元とテイストにギャップがあり失敗したケースです。 LPは、キャンペーンやそれぞれの商品をアピールするための、特設サイトとして作られる場合が多い傾向にあります。 メインのサイトから商品やサービスに興味を持ち、リンク先のLPを訪問するユーザーも存在します。 ここで重要とされるのは、「誘導してくれるサイトのテイストとマッチしているかどうか」です。 特にキャンペーンでは、派手なフォントも使ってデザインすることも多いでしょう。 もし、リンク元とのイメージにギャップがある場合は、それだけで不信感を持たれてしまい、商品を購入してもらえない可能性があるので注意が必要です。 4つ目は、テキストが少なくて失敗したケースです。 当然ですが、ファーストビューで何を伝えたいのかがわかない場合、ユーザーは離れていってしまいます。 あまり盛り込みすぎるのも良くないですが、何のサイトかがわかるだけの情報は盛り込む必要があります。 どのような商品を扱っているのか、情報提供だけをするページなのか、購入までできるのかどうか、などの部分を明確にし、適切な情報量を盛り込みましょう。

効果的なファーストビューをデザインするためには

以下では、ファーストビューをうまく作成するためのポイントを2つご紹介します。

検索ニーズに対応したキーワードを挿入する

ファーストビューを作成する際には、検索ニーズに対応したキーワードを盛り込むように意識しましょう。 検索ニーズに対応したキーワードがない場合、ユーザーは「求めている情報がないのではないか」と思い、早々に離脱する可能性が高くなります。 また、キーワードを適切に盛り込む以外にも、関連する画像を記載する方法も有効なので、ユーザーを惹きつけるために工夫しましょう。

ファーストビューに詰め込み過ぎない

ファーストビューにあまり情報を詰め込み過ぎないことも重要です。 情報が多すぎる場合、ユーザーは自分にあったコンテンツかどうかを判断するのに時間がかかるため、離脱につながりやすくなります。 そのため、適切なサイズにするのはもちろん、厳選した適切な量の情報を記載することが重要です。
この記事を書いたライター
LPの制作に特化したデザイン会社(LP制作実績)。累計では数千LPデザインを手掛けております。すべて内製化しており、構成からデザイン、コーディングまですべてご対応可能です。各種サーバーのご対応はもちろん、楽天市場、ヤフーショッピングなどのモール系などへの反映もご対応可能です。
この記事の画像を作成したデザイナー
所属:株式会社Ryuki Design / 部署:デザイン部
※デザイナー一覧

紙媒体のデザインからwebデザイン(LP制作・バナー制作)までオールマイティーにデザインが可能。
デザインだけではなく構成も得意なハイスペックデザイナー。毎回クオリティの高いデザインをクライアントに提供しています。

LP制作.jpへのお問い合わせはこちらから

お電話でも承ります
050-3541-5719

    ※アンケートモニター提供元:ゼネラルリサーチ 
    調査期間:2020年8月7日~12日
    調査方法:インターネット調査 
    調査概要:デザイン制作会社10社を対象にしたサイト比較イメージ調査
    調査対象:全国の20代~50代の男女 1052名

    LPアーカイブ
    LP制作.jp