必見!LP(ランディングページ)制作前に知っておきたい最適な横幅のサイズは?

header

この記事は約 3 分で読めます。


今社内では健康ブームです。
椅子の代わりにバランスボールを使ったり、個々でジムに通い始めたり、ウォーキングを始めたりしています。

新しい事をしようとすると、いろいろ疑問が生まれてきますよね?

「そうだ!ランディングページを作ろう。」

と思い立ったものの、何からどうしていけばいいかわからないあなたに、ランディングページ制作前に知っておきたい最適なサイズをご説明していきます。

1.サイズはモニターサイズに合わす

まず最初に「どのサイズで作り始めればいいのだろう?」と悩みますよね?
しかも近年では、PCよりスマホを利用している人が増えてきていますので、レスポンシブ対応で行きたいところですよね。
そんなあなたにそれぞれご説明していきます。

2.PCの最適なサイズ

img_lpsize01

PCのモニターサイズも上記のように様々です。
最近徐々に一般のユーザのPCのモニターも大きくなりつつあるかと思いますが、主要なモニターサイズである「1024×768」、「1280×800」に収めるのがいいでしょう。

2-1.有名サイトを参考にしてみよう!

img_lpsize02参考サイト:http://ultra.zone/website_width#ctgy=all

上記を見てみると分かりますが、横幅950px~1000pxが多いようですね。
このようなサイトが実際に採用しているサイズを参考にすると、ユーザビリティ的にも良いサイズと言えると思います。

2-2.実際に使っているモニターのサイズを調査

WEBサイトを見て頂けるユーザに取って使いやすいサイズとは?っと考えたときに思い浮かぶのは、本当に実際に使っているユーザの画面サイズはどの程度か?が分れば話は簡単です。

でもそれをどのようにして調査するのか、、、

これも簡単。
Googleアナリティクス(グーグルアナリティクス)などの無料のツールで、その実際のサイズを把握することが可能です。

Googleアナリティクスの場合「ユーザー > ユーザー環境 > ブラウザとOS」から確認可能です。

img_lpsize06

こちらの場合「1366 × 768」が最も主流でした。
最も大きなサイズでは「2560 x 1440」なんてものもありました。

この辺りの数値も考えた上で、横幅を決めると良いですね。
実際に見ている人が多いブラウザーサイズの全体の5%以上あるものは、確実に考慮した方が良いでしょう。

2-3.大事なのはファーストビュー!

img_lpsize03
ページはスクロールが多くなれば、多くなるほど読まれる可能性は下がるので、ファーストビューでいかに興味を引く事が出来るかがカギとなってきます。

上記のモニターサイズを考慮し、ファーストビューは縦幅500px~550pxにする事を推奨します。

3.スマホの最適なサイズ

img_lpsize04
スマホのディスプレイサイズは機種によって違ってきます。
横幅は縦で320px~640px、横向きで480px~960pxが主流です。

スマホでは基本横幅は320pxでデザインしましょう。

スマホでのファーストビューのサイズは、縦幅は460pxにする事を推奨します。

ちょっと待った!スマホ用の画像は高解像度データを用意

スマホは、小さい画面に高密度にピクセルが並んでいます。従来のディスプレイでの1ドットのスペースの中に、大きさが縦横半分のサイズのドットが2×2の4つ入りました。それを1pxとして扱うことにより、フォントや画像の輪郭をより鮮明に描写することが可能になりました。

img_lpsize05
今まで通りの解像度で作成すると、画像の輪郭がぼやけてしまうのです。
なのでスマホの画像を作成する場合は、2倍のサイズで作成します。

解像度も機種によって様々なので、320pxを基準に考えると画像の横幅640pxで作成するのが良いでしょう。

まとめ

ランディングページ(landing page)とは、ユーザーが最初に訪問するWebページになります。
制作する際は、ファーストビューを意識し、しっかり商品のアピールをしてユーザーの心をつかんでいきましょう!

LP制作についての関連記事

LP(ランディングページ)制作の教科書4ステップガイド

本書を読むとできるようになること
・LPの基礎知識と制作手順が分かります。
・ユーザーが求めるLPデザインの制作方法が分かります。
・LPのコンバージョン率UPさせるコツが分かります。

主な内容
1.LP(ランディングページ)とは?
・1-1.Web サイトとLP の目的の違い
・1-2.制作の流れ
2.戦略設計
・2-1.ターゲットユーザー像(ペルソナ)の設定
・2-2.競合調査
3.情報設計
・3-1.シナリオを考える
・3-2.レイアウトを考える
4.デザイン
・4-1デザインに入る前の3 ステップ
・4-2.デザインの5つのコツ
・4-3.訴求力の高いファーストビューの制作方法
・4-4.効果的なコンバージョンエリアの制作方法

ダウンロード

最新の記事情報が取得できます。