LPの幅・画像サイズの決め方｜レスポンシブ対応と表示確認

LPの幅や画像サイズに、すべての端末へ使える一つの正解はありません。まずブラウザで使える表示幅と、画像ファイルのピクセル数を分けて考えます。内容が読めて、画像の主題が伝わり、フォームを操作できる可変レイアウトを設計し、必要な画像候補と表示確認を制作側へ依頼しましょう。

LPのサイズはviewport・CSSピクセル・画像寸法を分ける

viewportは、ブラウザ内でページを表示する領域です。レイアウトで使うCSSピクセルは、端末の物理ピクセル数と同じものではありません。ブラウザの幅やズーム、画面の密度が違えば、同じ画像ファイルでも表示のされ方は変わります。

MDNのレスポンシブデザインの説明を参考に、画面サイズを固定して描くのではなく、利用可能な幅へ内容を適応させます。「スマホは375px」「PCの背景は1920pxなら安心」と決めるだけでは、別の幅やズームへの対応を確認できません。

固定幅ではなく読みやすい可変レイアウトを設計する

最初に、見出し、本文、画像、CTA、フォームが狭い幅でも順序よく読める構成を作ります。幅が広がったときは、そのまま文章を横へ伸ばすのではなく、読みやすい本文幅と余白を設けます。最大幅の数値は、文字の大きさや文章量、画像との関係を見て決める設計値です。

レイアウトを切り替える位置も内容から考えます。二つの欄が狭くなって読みにくい、フォームのラベルが隠れる、CTAの文字が欠けるといった状態を見つけ、必要に応じて一列に組み替えます。「この端末名ならこの幅」という固定分類だけに頼らず、中間の幅も確認しましょう。

• 本文を読む順番と、次にしてほしい操作を先に決める。
• 固定幅の画像や表が親の領域を押し広げないか調べる。
• 重要な条件を画像だけへ埋め込まず、読める本文でも示す。
• 長い見出し・入力・エラー文を使ってレイアウトを試す。

表示幅と画像密度から画像候補を計算する

次は架空の一列レイアウトでの計算例です。viewport幅を390 CSS px、左右の余白を各16 CSS pxとすると、画像のCSS表示幅は390−16×2=358 CSS pxです。同じ表示幅でも、密度に応じて候補となるファイルのピクセル幅は変わります。

これは候補を考える算数であり、必ずこの3枚を用意して全員へ最大画像を送る規則ではありません。実際の表示幅の範囲、制作上の上限、画質、転送量を踏まえて候補寸法を調整します。2倍で書き出せば常に鮮明・最適になるとも限りません。

MDNのレスポンシブ画像の説明にあるsrcsetやsizesは、画像候補や想定表示幅をブラウザへ伝えるための仕組みです。ブラウザが実際に何を選択したかも確認します。また、狭い画面で主題を見せるために別の切り抜きを使う場合は、単なる高解像度版の追加と区別して制作を依頼します。

切り抜き・画像形式・転送量を決める制作依頼表

制作依頼には「横幅何px」だけでなく、用途と切り抜き、配信候補、読み込み時の配置を書き込みます。以下は説明用の架空記入例です。数値をそのまま全LPへ当てはめず、実際のデザインで使える幅に置き換えてください。

MDNの画像・動画の性能に関する資料を参考に、形式と圧縮を比較します。新しい形式の名前だけで最軽量と決めず、同じ素材と許容できる画質で実際の転送量を見ます。細部や文字が必要な画像は、縮小や切り抜きで情報が失われていないかも確認します。

主要画像の読み込みとレイアウトを確認する

大きな画像がページの表示を遅らせる場合は、ファイルの重さだけでなく、画像を発見して読み込み始めるまでの時間も調べます。LCPは主要コンテンツが表示されるまでを捉える指標で、対象が画像かテキストかは実際のページで確認する必要があります。

web.devのLCP最適化ガイドでは、LCP画像の発見・読み込みを遅らせないことを説明しています。最初に見える主要画像がLCPの対象なら、一律にlazy-loadへするのは避けます。一方、下の方にある画像まで同じ優先度で読み込ませると、必要な資源が競合する可能性があるため、位置と役割を分けて判断します。

画像の領域は読み込み前から確保し、後で本文やボタンが大きく動かないかを確認します。幅と高さ、または縦横比を用意する場合も、狭い表示幅で収まる設計と組み合わせます。計測では通信・端末・キャッシュの条件を記録し、LCPの原因を画像寸法だけに限定しないことが大切です。

幅・ズーム・フォームの表示テストと受入条件

表示確認は制作前に合格条件を共有します。下表の320・390・768・1,280 CSS pxは検査点の例であり、端末の市場比率や最適幅のランキングではありません。実際の利用環境と、レイアウトが切り替わる前後の幅も追加します。

W3Cのリフローの解説は、縦に読む通常の内容で320 CSS px相当の幅への対応を説明しています。1,280 CSS px幅での400%ズームは、その確認方法の一例です。二方向の配置が意味に必要な表などは例外の目的と扱いを個別に確認し、通常の本文まで横にはみ出す理由にしないようにします。

1. 拡大時の本文、CTA、必須項目、長い入力、エラー文を試す。
2. キーボードで操作し、現在のフォーカスが分かるか確認する。
3. 画像の主題と、文字で伝える条件が失われていないかを見る。
4. 同じ条件の転送量とLCP等を記録し、問題と担当者を残す。

この確認票だけでアクセシビリティ全体への適合を認定するものではありません。表示幅、画像候補、操作の合格条件を依頼票でそろえ、実際のページで確かめることが、LPサイズを決める実務の基本です。

次の実務に進むための関連記事です。

• LPとは？目的・構成・成果の測り方と制作の進め方
• 離脱率とは？直帰率との違いとGA4の離脱数・探索の見方
• Web解析ツール・サービスの選び方｜用途別比較と導入前の確認項目