スマホ中心でランディングページ（LP）を作るとき、最初に迷いやすいのが「何pxでデザインすればいいの？」という問題。結論から言うと、基準幅は 375px を起点にしつつ、360 / 390 / 414px の許容差を頭に入れておくのが実務的に最も事故が少ないです。ここでは、モバイル前提でLPを作るときのpx設計の考え方を、実務視点でコンパクトにまとめます。
1) なぜ375pxが“起点”なのか
デザインと実装のズレが少ない：主要デバイスのCSS幅としてポピュラーなため、UI崩れのリスクを抑えやすい。
素材書き出し・検証が楽：1x（CSS px）基準で設計し、必要に応じて2x/3xで書き出せば高密度画面でも粗くなりにくい。
チーム共有が容易：「375基準」はデザイナー/エンジニアの共通言語になっているため、手戻りが減る。
補足：実機の解像度はもっと大きくても、ブラウザが“CSSピクセル”に正規化して表示します。デザイン時はCSSピクセルで考えるのが基本。
2) 許容差として意識したい横幅：360 / 390 / 414px
「375だけで作って終わり」だと、端末幅が微妙に違うときに行間や改行位置、ボタン折返しで見栄えが崩れることがあります。
360px：一部Androidで出会う「ちょい狭」な幅。文字が2行になりやすい。
390px：最近のiPhoneで増えている“やや広”な幅。見出しの折返しが減る。
414px：一昔前の“広め”幅。行長が伸びやすく、読みにくくならないよう注意。
実務のコツ：デザイン段階で、この3つの差分を「見出しの折返し」「CTAの改行」「カードの幅と余白」だけは軽く確認しておく。時間をかけるのはこの3点で十分。
3) 文字サイズと行間の目安
本文：14–16pxを標準。可読性を優先するなら16px推奨。
小さな補足：12–13px。可読性を落としすぎない。
見出し：20–28px目安。LPは訴求が命。見出しの“視認距離”を想像してサイズを決める。
行間（行高）：本文は1.4〜1.7倍が読みやすい。見出しは詰めすぎない（1.2〜1.4倍目安）。
行長：日本語は20〜35文字/行を目安に。1行が長すぎると読了率が落ちる。
4) 余白とレイアウトの基準化
左右パディング：16–24pxを標準。375px基準なら16pxが扱いやすい。
グリッド：モバイルLPは1カラムが基本。カードを並べる場合でも“2カラム化”は最小限に。
コンポーネント間マージン：8の倍数（8/16/24/32px）で揃えると全体が整う。
タップ領域：44–48px以上を確保。押しにくさは離脱の元。
5) 画像・ビジュアルの設計
**主役画像（ヒーロー）**は、横幅フルで見せ、重要情報は中央寄せに配置。左右がトリミングされても耐える構図に。
書き出し倍率：1x設計 → 2x/3xで書き出して高密度画面の粗さを回避。
テキストを画像化しない：差し替え・ABテストが困難になる。できる限りネイティブテキストへ。
アイコン/ロゴはSVGが理想。もしビットマップなら余白を含めないで書き出すと合わせやすい。
6) ファーストビュー（“ファーストスクリーン”）の考え方
「折りたたみ上（above the fold）」至上主義は危険：端末の縦高さはまちまち。要点は上部に寄せつつ、“続きが読みたくなる”導線を置く。
最上部の3点セット：
誰に・何を・なぜの訴求コピー
具体ベネフィット（数字/結果/比較）
CTAの予告（ボタンまたはアンカーの示唆）
スクロール誘導：視線を下へ流す矢印や、次セクションの“覗き見”で自然にスクロールさせる。
7) セーフエリアと端末依存の注意
ノッチ/ホームバーをまたぐ要素配置は避ける。最下部固定CTAは下余白を厚めに設計。
**縦横回転（ランドスケープ）**時は“壊れない程度”でOK。横向き前提のレイアウトにしない。
キーボード出現時にCTAや入力欄が隠れないか、要所だけ確認。
8) 速度と読み込み体験
画像は軽く：ヒーロー1枚で勝負するなら、逆に“物量で魅せに行かない勇気”も必要。
遅延読み込み（Lazy Load）前提の構図：ファーストビューの要件以外は後追いで読み込んでも破綻しない見せ方に。
フォント数を絞る：ウエイト乱立は遅さと画面の雑味に直結。
9) CTA（行動喚起）設計のpx感覚
ボタン高さ：48–56pxで“押しやすさ”優先。
ラベル文字：16–18pxで明瞭に。
余白：ボタン外側の上下余白は24–32pxを目安に。連打可能な間隔も確保。
固定配置CTAは視界を奪いがち。**表示条件（スクロール量/離脱兆候）**を設けると嫌われにくい。
10) 375px一本で始め、最後に“3幅だけ”差分確認
モバイル版だけで出すとしても、最初は375px一本で素早く組むのが正解。その後、360 / 390 / 414pxで
見出しの折返し
ボタンの2行化
カードの回り込み
この3点だけをチェックして、必要箇所を微調整する。すべてのデバイスに完璧対応しようとして速度を落とすより、訴求の強さと読みやすさを先に最大化する方が成果に繋がります。
まとめ
基準は375px。360 / 390 / 414pxは“差分確認”の相棒。
文字は16px前後、タップ領域は44–48pxを基本線に。
左右16–24pxのパディング、8px単位の余白運用で画面が整う。
ヒーローは中央に重要情報。画像は2x/3x書き出しを前提に。
ファーストビューに訴求・具体ベネフィット・CTA予告を揃える。
速度と可読性が最優先。375で作って3幅だけ差分確認、が現場の最短ルート。
モバイル中心のLPは、**“読みやすさ×押しやすさ×速さ”**の三本柱を、シンプルなpx設計で積み上げることが勝ち筋です。まずは375pxで作り切り、必要な差分だけに集中して仕上げる──この運用が、制作速度と成果の両方を高めてくれます。
