インビジョン株式会社

志 × 採用 × IT =
採用マーケティングチーム

その他

おダシ

【WEB初心者必見】WEB・ランディングページ(LP)ー縦横の基準幅ー

ネットで商品やサービスの売り上げを伸ばしたいときに効果的なものはリスティング広告やランディングページ(LP)の活用です。

このランディングページを作ろうとしたときに、悩むのはサイズではないでしょうか。
印刷物だったら、A4とかA1とかって紙の規定さえ決まれば縦横のサイズも決まっています。

しかしWEBの場合は、ユーザーの画面によって解像度が違うのでマッチしたサイズというものが分かりません。

そこで今回は、普段印刷物の制作をしているWEB初心者の私がランディングページのモックを作ったときに参考にしたサイトをご紹介しながら、WEB・ランディングページの最適な縦横幅のピクセルをご紹介します。

リスティング広告のノウハウを知りたい人はこちらの記事もチェックしてみてください。
【リスティングの運用】分厚いノウハウ本を3分で理解するコラム

ランディングページを見るかどうかは3秒で決まる!

サイズを考える前に、ランディングページで一番重要な部分を考えてみましょう!
ユーザーがLPに行き着くときは、何かしらのキーワードを検索したときです。

キーワード を検索してランディングページを見るため、ユーザーはそのページの内容に興味がありますよね。

かし、ランディングページを見るかどうかは3秒で判断され、読み進めるかどうかは5秒で決まるといわれています。

ユーザーが判断するポイントは3つ。

  1. 商品は何か
  2. どんな人に向けているのか
  3. メリットはあるか

ページ全体に商品の魅力をちりばめていても、パッと見で【何の商品・誰向け・魅力】が伝えられないと3秒で即離脱されてしまいます。

ファーストビューの縦横幅【PCとスマホ】

次に考えるのがファーストビューのサイズです。

冒頭でディスプレイによって解像度が違うと述べましたが、どの解像度を利用しているユーザーが多いかどうかは下記のサイトから確認できます。
(参考サイト:statcounter)

このサイトで、Screen Resolution Stataを選択すると、ディスプレイの解像度のシェア率が出てきます。

↓クリックすると

このような画面になり、デスクトップの解像度が1年で1番利用されているサイズが一目瞭然です。

さらに、この画面に上部には何%利用されているかハッキリ分かります。

  • 1920×1080px・・・19.51%
  • 1366× 768px・・・27.05%
  • 1440× 900px・・・6.67%

他の項目もありますが、縦幅500〜550pxであればほとんどのディスプレイで問題なく見ることが可能です。

縦幅が550pxだったら、横幅はどのくらいにすればいいのでしょう。
大手のサイトを見てみると720〜1600pxまで横幅はバラバラでした。

720pxだと小さい印象を受けるし1600pxだと結構な迫力です。
これはどう見せたいかによりますが、ディスプレイのシェア率を考えると横幅1000pxが丁度良いです。

ちなみにディスプレイの縦横比は16:9と16:10の2種類が多いので、ディスプレイの比率に合わせてサイズを決めるというのも手です。

16:9のディスプレイで縦幅550pxの場合、横幅は977pxになります。
これでは切りが悪いので、横幅は980pxが良いですね!
16:10のディスプレイで縦幅550pxの場合、横幅は880pxになります。

まとめると・・・

PC版ファーストビューの基準サイズ

  • 横1000px、縦550px
  • 横980px、縦550px
  • 横880px、縦550px

次にスマホ版を考えましょう!
日本のスマホのシェア率は約70%がiPhoneです。
iPhone6以降を基準に考えると・・・

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

横320px、縦568px

まとめ

上述しましたが、ユーザーの使っているディスプレイによって画面の解像度が違います。
LPのサイズは“絶対にこれでないといけない”という大きさはありません。

今回調べた私が調べた内容だと

  • PC版:横1000px、縦550px
  • スマホ版:横320px、縦568px

で作ればほとんどの環境で見れることが分かりました。

WEBやLPの制作で、私と同じように縦横幅に悩んでいる方はぜひ参考にしてみてください。
サイズが決まったら次はスマホ最適化しましょう。

The following two tabs change content below.

【インビジョン広報隊長】ちあき

最新記事 by 【インビジョン広報隊長】ちあき (全て見る)

Contactコンタクト

ざっくばらんにご相談(無料)ください。