ランディングページの適正サイズとは？構成から解説！
「ランディングページはどのサイズで制作すれば良い？」
「ランディングページ制作で何を意識したら良い？」
このようにランディングページについてお悩みではないでしょうか？
結論から言うと、ランディングページの制作においてファーストビューが最も重要なポイントで、その最適なサイズは、PC版で「1000px前後×600px前後」、スマホ版で「320px前後×500px前後」です！
ここでは、ランディングページの構成と適切なサイズについて解説します。
この記事を読めば、ランディングページ制作のポイントがすぐ分かる！
１．ランディングページの構成
ランディングページは基本的に、「ファーストビュー」「本体」「クロージング」の3つから構成されています。
ランディングページのサイズを規定するのに重要なのは「ファーストビュー」です。
ファーストビューのサイズが決定したら、本体やクロージングの内容量に応じて全体のサイズを調整しましょう。
以下で3つの構成要素の役割や作成における注意点について解説します。
（１）ファーストビュー
ファーストビューとは、ランディングページを訪れたユーザーが最初に目にする部分です。
ユーザーがそのまま下にスクロールするか、ブラウザバックしてしまうかを決定する、非常に重要な役割を担っています。
ファーストビューで大切なのは、第一に「分かりやすさ」、次に「インパクト」です。
ユーザーの興味を引くインパクトのあるデザインは、場合によってはごちゃついた印象を与え、何を伝えたいのか分からないこともしばしばです。
何のページが分かりにくいものには興味が薄れてしまうため、ページから離脱する可能性を高めてしまいます。
したがってインパクトを与えると同時に、分かりやすい内容であることがポイントです。
「何の商品か」あるいは「どんなサービスか」を明確にした上で、視覚的に訴えるデザインを心がけましょう。
そして、次を見たいと思わせるような流れを作っておくことも重要です。
（２）本体部分
本体部分では、ファーストビューよりも詳しい内容を説明します。
商品またはサービスの紹介や、それらを利用することのメリット、体験者のレビューなどについて記載し、ユーザーのニーズに応え、共感を得られる内容を心がけましょう。
本体部分を見るユーザーはファーストビューですでに興味を持っているため、より詳細な説明によって、その商品あるいはサービスの必要性を改めて認識してもらうことが重要になります。
本体部分では基本的に商品やサービスの説明をしますが、商材に対するイメージをより明確にするために、体験者のレビューや誕生秘話などを盛り込むのも一つの方法です。
（３）クロージング
ファーストビューで興味を引き、本体で商品やサービスの詳細について説明したら、最後はクロージングで購入方法などをまとめましょう。
本体で十分に「利用したい」と思わせることができれば、ユーザーは購入方法や利用方法に興味を持ちます。
そのため、購入フォームや問い合わせフォームを設けて、誰でも簡単に操作できる工夫をしましょう。
またこうしたフォーム以外に、会社概要も必須です。
さらに免責事項や注意点などについても説明するとまとまりあるクロージングを作成できます。
このように、商品の紹介以外の必要な要素をまとめる部分がクロージングの役割です。
文字サイズを工夫してメリハリをつけ、ユーザーにとって見やすいデザインを心がけましょう。
２．LPのサイズで重要なのはファーストビュー
ランディングページでは、まずファーストビューのサイズを決定してから、本体部分とクロージングの量に応じて全体の縦サイズを調整します。
ファーストビューはユーザーに対して、最初に商品のアプローチをする部分ですので、その魅力を訴えるのに非常に重要です。
以下で、PCとスマホの解像度を確認した上で、どのサイズがファーストビューに最適かを解説します。
（１）ファーストビューが重要な理由
ファーストビューはランディングページの中でもユーザーが最初に目にする部分です。
ここでユーザーが「自分には不要な商品」と判断してしまったら、そこから下にスクロールしてもらえず、コンバージョンは期待できないでしょう。
興味を感じなければページから離脱されてしまう恐れがあります。
ユーザーが求めている商品であったり、ユーザーにとって有益なサービスであったとしても、ファーストビューで有効にアプローチできていなければ、そのことに気づいてもらうことすら不可能です。
それを回避するには、どういったメリットがありどう役立つかを、ファーストビューで余さず伝える必要があります。
商品の魅力を伝えるファーストビューをデザインするためには、まず最適なサイズを知っておかなければなりません。
（２）PC版ファーストビューの理想サイズ
ファーストビューの理想サイズを知る前に、PCのデスクトップの解像度を知る必要があります。
近年、PCのモニターサイズは大きくなる傾向にあり、フルHDと呼ばれる1920px×1080pxモニターが最多、次に1366px×768pxモニターが多くなっています。
しかし解像度が高い場合は、処理速度の関係からフルスクリーンでブラウザを閲覧していないという可能性もあります。
したがって1000px前後×500px前後がPC版ファーストビューの最適サイズと言えます。
（３）スマホ版ファーストビューの理想サイズ
PC版と同様、スマホ版でも解像度から見ていきましょう。
スマホの場合は375px×667pxが最も多く、次に414px×896pxの順で多く利用されていますが、大きいもので414px×896px、小さいもので320px×568pxと開きがあります。
このことから、小さいほうの水準に合わせた320px前後×500px前後のサイズが最適と言えます。
ただし、最も小さい320px×568pxのサイズは第1世代のiPhone SEサイズに当たり、シェアもあまり多くないため、考慮しないことも一つの手です。
その際は350px前後×600px前後で作成すると良いでしょう。
またスマホの場合は画面を回転し縦横のサイズを反転する機能や、ディスプレイの解像度が高いという懸念事項もあるため、その辺りも考慮した設計・デザインが重要になります。
まとめ
この記事では、ランディングページの構成とサイズについて解説しました。
ランディングページは「ファーストビュー」「本体」「クロージング」の3つの要素で構成されており、最も重要なのがユーザーが最初に目にする「ファーストビュー」です。
ランディングページの制作過程においても、まずファーストビューのサイズを決定してから本体部分やクロージング部分の量に応じて全体のサイズを調整します。
したがって、ファーストビューのサイズはその役割とランディングページの制作過程の2つの観点から重要であることが分かります。
ファーストビューのサイズを決定するサイズには、PCとスマホの両方のデバイスの解像度に注意しましょう。
基本的にはユーザーが利用しているモニターのうち、最も小さいサイズに水準を合わせると全てのデバイスで最適に表示されます。
具体的にはPC版で「1000px前後×600px前後」、スマホ版で「320px前後×500px前後」です。
サイズの設定はランディングページ制作の第一歩ですので、しっかり確認しておきましょう。
人気記事
新着記事
カテゴリー
-
コラム -
コラム -
コラム
