ランディングページのページ滞在時間と密接な関係を持つページサイズについて解説

ユーザーの過半数がLPのファーストビュー以降を読み進めないからといって、ファーストビューに情報を詰め込みすぎると情報が煩雑になってしまい逆効果。メインで伝えたい魅力とテーマを簡潔に伝えましょう。



ユーザーはファーストビューの訴求内容で商品やサービスが自身にとって必要なものであるかどうかを判断するので、情報をたくさん載せたくなる気持ちはわかります。

しかし、ファーストビューという限られたスペースでその全てを伝えるのは困難なので、ユーザーの視点で捉え、どんな情報がページのイントロダクションで得られたらその先をスクロールして読み進めたくなるかという点にフォーカスし、情報を整理して魅力を訴えるべきです。

ファーストビューは大きく分けると3つの素材から成り立っており、それぞれの素材の役割が全て連動してこそ、ユーザーに商品やサービスの魅力をインパクトある形でアピールすることができます。



ファーストビューで大別される3つの素材は以下の通りです。



1. キャッチコピーやメインとなる訴求テキスト

2. 画像やイラスト、動画など

3. エントリーボタンなどアクション導線



まず、最も目に付くものがキャッチコピーやテーマといった訴求テキストです。過程を省き結論だけを述べるように終始し、装飾する形で実績などをアピールしてユーザーの信用を獲得しましょう。



画像やイラスト（動画を含む）はファーストビューのメインビジュアルにあたるコンテンツなので、商品やサービスの内容をダイレクトでイメージしやすいものを選定してください。



また、既に購買欲の高いユーザーがLPに訪れる可能性を考慮し、エントリーボタンなどのアクション導線はファーストビュー内に配置しましょう。



これら全ての素材が組み合わさって1つのファーストビューとなり、コンセプトが明確であるほどユーザーに与えるインパクトも大きく、強い訴求力を持ち、ユーザーの興味を惹きつけ「もっと知りたい」という欲求を芽生えさせる効果があります。

PCモニターの解像度はユーザーの設定によってさまざまですが、ファーストビューのサイズは「1000×500」に設定することでユーザビリティの概ねをカバーすることができます。



「StatCounter」（スタットカウンター）というモニター解像度のシェア率解析ツールによると、 日本で使われているPCモニターの解像度シェアは「1920×1080」がトップです。

次点で「1366×768」が多いという集計結果が出ていますが、高解像度だと処理速度に影響が出るという点を考慮すると、ブラウジングをフルスクリーンで行うユーザーは少数であると見込めます。そのため、PCのファーストビューサイズは「1000×500」であればどんなモニターでも問題なく見ることができるでしょう。

スマホのディスプレイサイズはiPhoneなのかAndroidなのかといった機種ごとの差によって異なりますが、スマホのファーストビューサイズは「320×460」に設定することをおすすめします。



先程と同じく、モニター解像度のシェア率解析ツールで見てみると、スマホの場合は「375×667」がトップ。次点で「360×640」、さらに続いて「320×568」という結果になっていました。



スマホにおけるモニター解像度の主なシェアをまとめると、以下の通りになります。



＊横幅…「320〜375」

＊縦幅…「568〜667」



もし、スマホ用ファーストビューの横幅が375に設定してあった場合「320×568」のスマホで閲覧した時に横幅がディスプレイに収まりません。そのため横幅は下限の320に設定し、縦幅は460あればスマホで見やすいサイズ感となります。

スマホ用のLPで画像を設置する際に注意しなくてはならないのが「デバイスピクセル比」です。スマホはディスプレイに無数のピクセルが細かく並んでおり、従来のディスプレイと比べて画像を鮮明に映し出すことができます。

例えばスマホのデバイスピクセル比が「2」だとしたら、1ピクセルの画像をスマホのディスプレイ上では2ピクセル分使って表示する、という形です。

そのため、デバイスピクセル比の数値が「2」だとすると画像も2倍サイズのものを用意しないと、画像を表示した際に輪郭がぼやけて不鮮明な印象となってしまうのです。



スマホ用LPでお肌のビフォー・アフターの画像を設置したい場合、従来の解像度で画像を設置してしまうとスマホで見た時にそれぞれの違いがわかりづらく、商品やサービスの効果が薄いと思われてしまうかもしれません。



スマホ用LPではこの特性を活かして高解像度な画像を設置し、ページの訴求力を高めましょう。