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版ならこのサイズでファーストビューを考えるのが良いと判断できます。

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

スマホの壁紙サイズが多様であるように、ファーストビューのサイズも一様ではありません。
この多様性は、ユーザーがどのようなデバイスでアクセスするかを考える上で非常に重要です。
たとえば、Androidスマホの一般的な壁紙サイズが2160×1920pixであるならば、このサイズを基準にファーストビューを設計することがおすすめです。


さらに、壁紙サイズは機種によっても異なるため、主要な機種の壁紙サイズに合わせてファーストビューを設計することも有効です。

壁紙の世界ではアスペクト比が大きな役割を果たします。
同様に、ファーストビューにおいてもアスペクト比は無視できない要素です。
アスペクト比を考慮しないと、画面の一部が見切れたり、デザインが崩れたりする可能性があります。
16：9や18：9などの一般的なアスペクト比を基準にすることで、多くのユーザーに適したデザインが可能となります。


また、アスペクト比はスマホの機種によって異なるため、複数のアスペクト比に対応したデザインを考えることも重要です。

壁紙においては、ホーム画面のページ数によって必要なサイズが変わる場合があります。
この考え方は、ファーストビューにも応用できます。


たとえば、スワイプ操作で複数のページを表示するLPでは、それぞれのページで最適なファーストビューのサイズが異なる可能性があります。
このような場合には、ユーザーがどのページを最初に見るかを考え、それぞれに適したサイズを設定することが求められます。
さらに、ページ数が多い場合は、ユーザーがスワイプ操作でページを移動するたびにサイズが変わるような設計も考えると良いでしょう。

壁紙サイズが大きくなる問題に対しては、専用のアプリを使用する方法があります。
この手法は、ファーストビューのサイズ調整にも有用です。
サイズが固定されていない動的なコンテンツを扱う場合、アプリを活用することで柔軟にサイズ調整ができるようになります。


ただし、アプリを導入する際にはその操作性やユーザビリティも考慮しなければなりません。
また、アプリを使用することで生じるデータ通信量やバッテリー消費もユーザー体験に影響を与える可能性があるため、その点も考慮に入れるべきです。
このように、スマホの壁紙サイズとアスペクト比、ページ数といった要素は、スマホ版LPのファーストビューのサイズ設定においても重要なポイントです。
壁紙とは異なる用途であっても、これらの要素を理解し適用することで、より多くのユーザーに適した効果的なファーストビューを設計することができるでしょう。
さらに、これらの要素を総合的に考慮することで、ユーザーが快適に情報を得られるようなファーストビューの設計が可能となります。
最終的には、これらの要点を押さえた上でユーザーの行動や反応をしっかりと分析し、それに基づいて最適化を行うことが最も重要です。

Android端末の壁紙サイズ一覧を見ると、Xperia、OPPO、AQUOS、Galaxyなど、様々な機種でサイズが異なることがわかります。
このような機種ごとの違いは、ファーストビューの設計においても無視できない要素です。
特に、高解像度の端末を使用するユーザーと低解像度の端末を使用するユーザーがいる場合、その差を埋めるような設計が求められます。

Androidスマホで壁紙のサイズが大きくなる場合の解決法として、専用のアプリを使用する方法があります。
この方法は、ファーストビューのサイズ調整にも有用です。
先ほども述べた通り、サイズが固定されていない動的なコンテンツを扱う場合はアプリを活用することで柔軟にサイズ調整が可能となります。


しかし、アプリを導入する際には、その操作性やユーザビリティ、さらにはデータ通信量やバッテリー消費も考慮する必要があります。
このように、ページ数や機種ごとのサイズの違い、さらにはサイズ調整のテクニックまで、多角的に考慮することで、多様なユーザーに対応したファーストビューに設計できます。
壁紙のサイズやアスペクト比がこのように多様であることを理解し、それをファーストビューの設計に生かすことで、ユーザーがストレスなく情報を得られるような設計が可能となります。


最終的には、これらの要点を押さえた上で、ユーザーの行動や反応をしっかりと分析し、それに基づいて最適化を行うことが最も重要です。
このような総合的なアプローチによって、ユーザーが快適にサイトを利用できるようなファーストビューを設計できるでしょう。