この記事の対象: Webサイトのスマホ対応を進めたいデザイナー・ディレクター
読了時間: 約8分
スマホ向けデザインの基準幅は390px、対応すべき画面幅は360〜440px。2026年現在、この範囲をカバーすれば国内で使われている主要端末のほぼすべてに対応できます。
「具体的に何pxで作ればいいのか」「ブレイクポイントはどこに置くのか」——スマホ対応で迷いやすいポイントを、推奨値の早見表とコード例で整理しました。Soreiine!!ギャラリーの掲載サイトから、スマホ表示の好事例も取り上げます。
スマホデザインのサイズ推奨値一覧【2026年版】
【画像挿入: スマホデザインのサイズ推奨値を一覧にした早見表】
まず結論です。スマホ向けデザインで押さえるべき数値をまとめました。
| 項目 | 推奨値 |
|---|---|
| デザインカンプの基準幅 | 390px（375pxも可） |
| 対応すべきCSS幅の範囲 | 360px〜440px |
| ブレイクポイント | 768px / 1024px を基本 |
| タップ領域の最小サイズ | 44×44px |
| 本文フォントサイズ | 16px（行間1.6〜1.8） |
| 左右の余白（パディング） | 16px |
| 画像書き出し幅（全幅表示時） | 750px〜828px（2x対応） |
この表の数値で作っておけば、大半のデバイスで表示崩れは起きません。以下、それぞれの根拠と実装方法を順番に解説します。
主要スマホのCSS幅一覧
2026年現在、日本国内でシェアの大きいスマホのCSS幅です。
| デバイス | CSS幅（px） | DPR |
|---|---|---|
| iPhone 16 Pro Max | 440 | 3x |
| iPhone 15 Pro Max | 430 | 3x |
| iPhone 16 Pro | 402 | 3x |
| iPhone 16 / 15 / 14 Pro | 393 | 3x |
| iPhone SE（第3世代） | 375 | 2x |
| Google Pixel 8 | 412 | 2.625x |
| Galaxy S24 / Xperia 5 V / AQUOS sense8 | 360 | 2〜3x |
360px〜440pxの80px幅に大半の端末が収まります。この範囲さえカバーできれば、iPhoneでもAndroidでも問題ありません。
デザインカンプの基準幅は390pxがおすすめ
Figmaなどのデザインツールでカンプを作るとき、横幅の選択肢は2つです。
390px（推奨）
- iPhone 15以降のCSS幅393pxに最も近い
- 2026年の主流端末に合った設計ができる
- 360px確認で下位端末もカバー
375px
- iPhone SE〜13 miniまでカバー
- 古い端末への配慮が必要なケースに
- 390pxより若干余裕が少ない
新規案件なら390px、既存サイトの改修でiPhone SE世代のユーザーが多いなら375px。この判断で十分です。
390pxでカンプを作成したら、360px（Androidの下限付近）で表示崩れがないか必ず確認します。440pxクラスの大型端末はコンテンツ幅が広がるだけなので、崩れるリスクは低め。注意すべきは狭い側（360px）です。
PC向けも含めたコンテンツ幅の設計はWebデザインのコンテンツ幅｜2026年の推奨値と設定の考え方であわせて解説しています。
CSSピクセルとデバイスピクセルの違い【スマホサイズの基礎知識】
【画像挿入: CSSピクセルとデバイスピクセルの関係を示す概念図】
なぜ「論理ピクセル」で考えるのか
スマホの「画面サイズ」を扱うとき、混同しやすいのが「デバイスピクセル」と「CSSピクセル」です。
iPhone 15を例にすると、物理的な画面解像度は1179×2556px。しかしCSSが認識する論理サイズは393×852pxです。デバイスピクセル比（DPR）が3倍なので、物理ピクセルを3で割った値がCSSピクセルになります。
| 用語 | 意味 | 例（iPhone 15） |
|---|---|---|
| デバイスピクセル | 液晶の物理的なドット数 | 1179×2556 |
| CSSピクセル | ブラウザが認識する論理サイズ | 393×852 |
| DPR（デバイスピクセル比） | 物理÷論理の倍率 | 3x |
「画面解像度が1179pxだから幅1179pxでデザインすべきでは？」は初学者がよくやる誤解です。デザインツールではCSSピクセルの値（393px）を基準にしないと、文字が極端に小さくなったり、レイアウトが意図どおりになりません。
viewport設定は必須
スマホ向けサイズ設計はすべて、HTMLの<head>内に以下のメタタグがあることが前提です。
<meta name="viewport" content="width=device-width, initial-scale=1">
この設定がないと、スマホブラウザはデスクトップ向けの幅（通常980px）でページを描画しようとします。WordPressテーマやHTMLテンプレートには標準で含まれていますが、カスタムテンプレートでは必ず確認してください。
ブレイクポイント設計とモバイルファーストCSS【2026年版】
【画像挿入: 3段階のブレイクポイント構成を示す図】
3段階のブレイクポイントが基本
画面幅に応じてCSSを切り替えるブレイクポイントは、以下の3段階が実務で広く使われています。
| 区分 | ブレイクポイント | 主な対象 |
|---|---|---|
| スマホ | 〜767px | iPhone / Android各種 |
| タブレット | 768px〜1023px | iPad / Android タブレット |
| デスクトップ | 1024px〜 | PC全般 |
必要に応じて1280px以上をワイドデスクトップとして追加しますが、まずこの3段階で十分です。特定のデバイスに合わせるのではなく、レイアウトが自然に切り替わるポイントで設定するのが原則です。
モバイルファーストでCSSを書く
CSSは「スマホ向けのスタイルをベースに、min-widthで画面幅が広がるにつれてスタイルを追加する」モバイルファーストで書きます。
/* ベース：スマホ（〜767px） */
.container {
padding: 0 16px;
width: 100%;
}
/* タブレット（768px〜） */
@media (min-width: 768px) {
.container {
padding: 0 32px;
max-width: 720px;
margin: 0 auto;
}
}
/* デスクトップ（1024px〜） */
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
}
/* ワイドデスクトップ（1280px〜） */
@media (min-width: 1280px) {
.container {
max-width: 1200px;
}
}
モバイルファーストにする理由は明確です。
- スマホ向けCSSが最もシンプル（基本は1カラム）で、不要な上書きが減る
- CSSファイルサイズが小さくなり、転送量を抑えられる
- 表示速度が最も重要なスマホ端末で、余計なスタイル計算が走らない
スマホサイズで失敗しないデザインの実装ポイント
【画像挿入: スマホデザインの実装ポイントをまとめたビジュアル】
タップ領域は最低44×44px
AppleのHIGでは44×44pt、Googleのマテリアルデザインでは48×48dpがタッチターゲットの推奨値です。ボタンやリンクが小さいと「押したのに反応しない」ストレスが生まれ、離脱に直結します。
/* ボタンのタップ領域確保 */
.btn {
min-height: 44px;
padding: 12px 24px;
font-size: 16px;
}
/* テキストリンクのタップ領域 */
.nav-link {
display: block;
padding: 12px 16px;
}
ナビゲーションメニュー、フォームの入力欄、CTAボタンではとくに注意してください。
フォントサイズは16pxが基準
スマホの本文フォントサイズは16pxが基準です。14pxでは読みづらく、18px以上だと1行あたりの文字数が極端に少なくなり、テンポが悪くなります。
| 要素 | 推奨サイズ | 備考 |
|---|---|---|
| 本文 | 16px | 行間（line-height）は1.6〜1.8 |
| 小見出し（H3） | 18〜20px | 本文との差を明確にする |
| 大見出し（H2） | 22〜26px | font-weightも太めに |
| キャプション・注釈 | 12〜13px | 補助情報に限定して使う |
| ボタンテキスト | 15〜16px | 太字推奨 |
ChromeやSafariのデフォルトフォントサイズも16pxです。ここを基準にしておけば間違いありません。
左右の余白は16px
スマホ画面の左右に設ける余白は16pxが定番です。360pxの画面で左右16pxずつ取ると、コンテンツエリアは328px。日本語テキストで1行あたり約18〜20文字となり、可読性を保てるラインです。
- 12px: 窮屈な印象。データ密度の高い管理画面向き
- 16px: 汎用性が高く、大半のWebサイトで採用されている
- 20px: 余白感を大事にしたいブランドサイト向き
- 24px以上: コンテンツ幅が狭くなりすぎ、画像やボタンの配置が難しい
迷ったら16px。ブランドサイトなら20px。この2択で十分です。
画像のサイズ設計と書き出し
スマホで画像を全幅表示する場合、幅750px〜828px（DPR 2x対応）で書き出すのが目安です。DPR 3x対応で1200px前後まで用意するかは、ファイルサイズとの兼ね合いで判断します。
<!-- srcsetで端末に応じた画像を出し分ける -->
<img
src="hero-800.webp"
srcset="hero-400.webp 400w,
hero-800.webp 800w,
hero-1200.webp 1200w"
sizes="(max-width: 767px) 100vw, 800px"
alt="メインビジュアルの説明"
width="800"
height="600"
loading="lazy"
decoding="async"
>
srcsetとsizesを使えば、ブラウザが画面幅とDPRに応じて最適な画像を自動選択します。loading="lazy"で画面外の画像を遅延読み込みにすれば、初期表示速度も改善できます。
画像フォーマットの選び方や圧縮の考え方はWeb画像の最適化ガイド｜AVIF・WebP対応と軽量化テクニック【2026年版】が参考になります。
Soreiine!!掲載サイトに学ぶスマホデザインの好事例
【画像挿入: Soreiine!!ギャラリーからピックアップしたスマホデザイン好事例の概観】
実際にスマホで見やすいサイトはどんな設計をしているのか。Soreiine!!ギャラリーの掲載サイトから、設計パターンごとに特徴的な事例を紹介します。
余白と文字サイズのバランスが秀逸なコーポレートサイト
【画像挿入: コーポレートサイトのスマホ表示キャプチャ】
PC版の要素をそのまま押し込んだ「読めるけど窮屈」なスマホ表示は、コーポレートサイトでありがちな失敗です。ギャラリーに掲載されているコーポレートサイトの中には、以下のような工夫でスマホでの読みやすさを実現している事例があります。
- PC版ではH2を28pxで表示し、スマホ版では22pxに縮小しつつfont-weightを700に上げて視認性を確保
- セクション間の余白をPC版の80pxからスマホ版では48pxに詰め、スクロール量を抑制
- PC版の2カラム構成をスマホでは1カラムに組み替え、サイドバー要素はページ下部に移動
単なる縮小ではなく「スマホ用に再設計」しているかどうかが、品質差として表れやすいポイントです。コーポレートサイトのデザイン事例はコーポレートサイトの参考事例8選｜デザインと構成のポイント【2026年】でも紹介しています。
タップ動線が明快な飲食店サイト
【画像挿入: スマホ表示で予約ボタンが常時表示される飲食店サイトのキャプチャ】
飲食店サイトで重要なのは「予約」「メニュー」「アクセス」への導線です。ギャラリーで高く評価されているサイトには、以下のようなスマホ導線の設計が見られます。
- 画面下部にsticky CTAを配置し、高さ56px・角丸8pxの予約ボタンをスクロール位置に関係なく常時表示
- ハンバーガーメニュー内は「予約→メニュー→アクセス→その他」の優先順位で配置し、タップ数を最小化
- 地図エリアはiframeではなくスクリーンショット画像＋Googleマップへの外部リンクにして、ページ読み込み速度を確保
ボタンサイズも44px以上を確保しており、片手操作でも押し間違いが起きにくい設計です。飲食店サイトの事例は飲食店のホームページデザイン事例10選｜予約を増やすコツでさらに詳しく取り上げています。
レスポンシブで画像の見せ方を変えるECサイト
【画像挿入: PC版とスマホ版で商品グリッドのカラム数が異なるECサイトの比較】
ECサイトでは商品画像の見せ方がコンバージョンに直結します。ギャラリー掲載サイトで実際に見られる設計パターンは以下のとおりです。
- PC版の4カラムグリッドをスマホでは2カラムに切り替え、商品画像1枚あたりの幅を160px以上に確保
- 商品詳細ページのサムネイル一覧をスワイプ対応のカルーセルに変更し、
scroll-snap-type: x mandatoryで画像送りの操作感を向上 - 「カートに入れる」ボタンはsticky配置で高さ48px。商品情報をスクロールしても常にアクション可能
CSS Gridレイアウトの実践パターン集【コピペOK・2026年版】を参考にすれば、こうしたレスポンシブグリッドの切り替えはシンプルなCSSで実現できます。
よくある質問
スマホデザインのカンプは何pxで作ればいい？
横幅390pxが2026年の推奨値です。iPhone 15以降のCSS幅393pxに最も近く、現行端末の実情に合ったデザインができます。仕上げに360px幅でも表示崩れがないか確認しておくと安心です。
iPhoneとAndroidでデザインを分ける必要はある？
基本的に分ける必要はありません。レスポンシブデザインで幅360〜440pxに対応すれば、両OSの主要端末をカバーできます。OSごとに分けるのではなく、画面幅を基準にブレイクポイントで切り替える設計が効率的です。
スマホ向けの画像は何pxで書き出せばいい？
全幅表示なら横幅750〜828px程度が目安です（DPR 2x対応）。DPR 3x対応で1200px前後まで用意するかはファイルサイズとの兼ね合いで判断します。srcset属性で複数サイズを指定すれば、ブラウザが端末に応じて自動選択してくれます。
ブレイクポイントは何pxに設定すればいい？
768px（タブレット）と1024px（デスクトップ）の2つを基本にする構成が定番です。必要に応じて1280px（ワイドデスクトップ）を追加します。特定のデバイスに合わせるのではなく、レイアウトが自然に切り替わるポイントを基準にしてください。
フォントサイズ16pxは大きすぎない？
スマホ画面では16pxはむしろ標準的なサイズです。14px以下にすると文字が小さく読みづらくなり、ユーザーが拡大操作を強いられます。ChromeやSafariのデフォルトフォントサイズも16pxなので、これを基準にしておけば問題ありません。
まとめ
スマホデザインのサイズ設計で押さえるべき数値を改めて整理します。
| 項目 | 推奨値 |
|---|---|
| デザインカンプの基準幅 | 390px（375pxも可） |
| 対応すべきCSS幅の範囲 | 360px〜440px |
| ブレイクポイント | 768px / 1024px を基本 |
| タップ領域の最小サイズ | 44×44px |
| 本文フォントサイズ | 16px（行間1.6〜1.8） |
| 左右の余白 | 16px |
| 画像書き出し幅（全幅表示時） | 750px〜828px（2x対応） |
これらの数値はあくまで基準であり、サイトの目的やターゲットに応じた微調整は必要です。大切なのは「この数値で作っておけば大半のデバイスで崩れない」という確かな出発点を持つこと。デザインツール上だけで完結させず、手元のスマホで必ず実機確認をする習慣をつけてください。
