LPファーストビューのサイズと作り方｜スマホで文字・画像が切れない設計

こんにちは。バナナデスクです。

ファーストビューを640×360で作れば、スマホでもそのまま一画面に入るのでしょうか。画像の寸法としては扱いやすくても、その下に見出しやボタンがあれば、ページ全体の高さは別になります。

LPの最初の画面を作る時は、画像のサイズ、ブラウザ内での表示幅、見えている画面の高さを分けて考えます。「この寸法なら正解」という一つの数字だけでは決められません。

執筆：バナナデスク｜WEBビジネスの設計・集客・改善

画像ピクセル・CSS幅・表示領域は別の値

値	例	意味
元画像	640×360px	ファイルに含まれる画素数
画像のCSS表示幅	350 CSS px	レイアウトで画像が占める幅
画面の表示領域	幅390×高さ844 CSS px	検証用に指定するブラウザの領域。実端末の操作部等とは別に確認

スクロールバー等が本文の利用可能幅を減らさない仮定で、幅390pxから左右20pxずつの余白を引けば、本文幅は350pxです。16:9の画像を比率どおり表示した高さは、350×360÷640＝196.875pxになります。見出しが3行、説明が4行、ボタンが一つあれば、それらの高さと間隔も加わります。

MDNのレスポンシブデザインの解説にあるviewport設定は、端末幅を基準とした表示の土台です。元画像の解像度を変えるだけで、ページの折り返しや余白まで適切になるわけではありません。

640×360の画像が、幅390で左右20の余白を取った350×約197の表示になる関係を示した図 — スクロールバー等が利用可能幅を減らさない場合の計算例。実ブラウザでの観測値は本文の表を参照。

最初に見せるのは、対象と受け取れるもの

見本は架空の「サービス説明整理相談」です。同じ原稿を、次の2案へ配置します。文言や価格の違いで比べず、画像と文章の位置だけを主な比較対象にします。

サービスの内容が伝わる順番を、一枚に整理します。

既存サービスの説明を見直したい方へ。60分の相談で、対象・提供内容・申込条件を構成メモにまとめます。

33,000円（税込）／ページの実装・広告運用は含みません。

ボタン：相談の内容と条件を見る。

このボタンは、いきなり契約するものではなく、ページ下の条件へ移動します。画像にはサービスを表すイメージを使い、重要な文言はHTMLの文字で置きます。

2案の違いを、変えた箇所だけで説明する

案	PC	狭い画面	確認すること
A：イメージから入る	左に画像、右に見出しと条件	画像、見出し、説明、条件、ボタンの順	画像が先に出ても、対象や完成物をすぐ確認できるか
B：文章から入る	左に見出しと条件、右に画像	見出し、説明、条件、ボタン、画像の順	文字のまとまりが長くならず、ボタンの役割が分かるか

Bなら必ず反応が上がるという話ではありません。画像の役割、訪問前に読者が知っていること、サービスの複雑さで適した順序は変わります。最初は、対象と受け取るものを見失わずに読めるかを比較します。

高さを固定しすぎず、画像の切り方を選ぶ

文字量が増えても読めるよう、見本のセクションには内容に応じた高さを持たせます。画面高へ無理に合わせて、見出しを小さくしたりボタンを隠したりしません。

.hero-image { width: 100%; height: auto; }
.hero { display: grid; gap: 28px; align-items: center; }
@media (min-width: 800px) {
  .hero { grid-template-columns: 1fr 1fr; }
}

画像を一定の枠へ入れる場合、MDNのobject-fitの説明では、containは比率を維持して全体を収め、coverは枠を埋めるために画像の一部を切り取ると整理されています。ロゴや文字入り画像で端が重要なら、切れないことを優先してください。

余白が出るのを嫌ってfillで比率を崩すと、人物や商品が横へ伸びます。背景の装飾なら切ってもよいか、説明に必要な要素を含むかを先に決めます。

同じ原稿を、幅と高さの違う条件で見る

確認条件	見るところ
1280×900	左右の幅、見出しの改行、画像と文章の釣り合い
390×844	一列の順序、左右余白、最初の表示範囲
375×667	短い画面でどこまで見えるか、条件やボタンが切れて隠れないか
文字を拡大した状態	文字の重なり、固定高による欠落、リンクの操作