「今、何 px 幅でデザインを作ればいいのか？」―― 皆さんいつも気になりますよね！？
日々デザインをいただいてHTMLコーディングをしている私たちは、2018年から定点観測で解像度トレンドを追い続けています。37,000ページ超のレスポンシブページ制作を手掛けてきたその経験と Statcounter の月間約 50億 PVデータ（2025年 7月・日本） を突き合わせ、“このデザイン幅で作っておけば間違いなし！” になる幅をお伝えいたしいます。
参照URL：
Statcounter Global Stats – Screen Resolution Stats in Japan (2025-07)
まずは結論から。2025年9月現在の「推奨ブレイクポイントとファーストビュー早見表」をご覧ください。
※使ったデータは2025-07になります。。。。まとめるのに時間がかかりましたごめんなさい。
1. 推奨ブレイクポイント & 横幅・ファーストビュー早見表
| 対象 デバイス | 推奨幅 (px) | 端末例 | 推奨コンテンツ幅 | 推奨ファーストビュー高 | 根拠* |
|---|---|---|---|---|---|
| スマホ | ≦ 767 | iPhone 15／Pixel 8 | 390px | 600–650px | 390×844 17.0%、393×852 12.7% |
| タブレット | 768–1023 | iPad 10.9″縦 | 768px | 700px | — |
| PC（ラップトップ） | 1024–1439 | 13–15″ノート | 1024px（流動可） | 720px | 1536×864 8.4% |
| PC（デスクトップ） | 1440–1919 | MacBook Pro 14″ | 1200px | 730px | 2560×1440 6.5% |
| PC（4Kモニタ） | ≧ 1920 | 外付けFHD／4K | 1200px＋余白 | 750px | 1920×1080 25.7% |
ポイント
- デスクトップは フルHD (1920×1080) が 25％を占めます。PCはコンテンツ幅 1200px＋全画面背景で対応しましょう。
- モバイルは幅 390px 前後が約 3割。SPは 390px 基準への移行を推奨します。
- ブレイクポイントは 最大でも上表の 5区分で十分です。シェア 1% 未満の解像度も、対応するなら文章の折り返し確認程度で OKです。
- ただ５つもデザインつくるの！ってなると思いますので、実際には PC（ラップトップ）と スマホ でいいと思います！
- ちなみにファーストビュー（メインビジュアル）の高さは PC 750px / SP 600–650px を目安にして作成してください。（それより低いのは問題ないと思います）
2. 詳細ー実際どんな画面幅が使われているか
デスクトップ：FHD が 4台に 1台を占める
| 順位 | 解像度 | シェア | 主なユーザー像 |
|---|---|---|---|
| 1 | 1920 × 1080 | 24.68 % | 外付けモニタ／ゲーミング PC |
| 2 | 1536 × 864 | 8.17 % | ミッドレンジノート（15.6″） |
| 3 | 2560 × 1440 | 6.31 % | デザイナー・開発者の WQHD |
| 4 | 1366 × 768 | 5.14 % | 旧型ビジネスノート |
| 5 | 1280 × 720 など | 3.6 % 前後 | スティック PC・安価ノート |
理由（たぶんです。私の想像です）：
- 在宅ワークの固定化
在宅ワークですとだいたいノートPCが支給されると思うのですが、やっぱり大きい画面で見たい！ってなるとノート PC + 外付け 23–24″ モニタぐらいが標準になってきたんじゃないかと思います。結果、1920 × 1080 が 25.7% を占有しています（Statcounter 2025-07 Japan）。 - 旧世代ノートの自然減
またパソコン自体も新しくなります。2010年代の主流だった 1366 × 768 は 5.3% まで後退。同じ形でも新モデルは 1536 × 864 へリプレースされつつあります（↑同リンク参照のこと）。 - クリエイティブ層の WQHD シフト
弊社のようにWeb制作にかかわるWeb制作／開発現場では 2560 × 1440 が 6.5% まで急増。FHD ベースのカンプで（且つリキッドデザイン想定）にしておくと、この層にも自然にフィットします（↑同リンク参照のこと）。
モバイル：幅 390px 台がやっぱり多い
| 順位 | 解像度 | シェア | 主な端末 |
|---|---|---|---|
| 1 | 390 × 844 | 15.89 % | iPhone 15 / 14 Pro 系 |
| 2 | 393 × 852 | 11.55 % | Pixel 8・Galaxy S24 |
| 3 | 375 × 667 | 6.12 % | iPhone SE (第2/3世代) |
| 4 | 412 × 915 | 5.81 % | Xperia・OPPO ハイエンド |
| 5 | 375 × 812 | 5.77 % | iPhone 13 mini / 12 Pro |
理由：
- iPhone 14/15 Pro 系は、390 × 844 が 16.2%、393 × 852 が 12.1% と、合わせて約 3割を独占（Statcounter 2025-07 Japan）。
- Androidについては、Pixel・Galaxy の最新モデルも 390 – 393px 帯を採用。iOS/Android 共通設計がしやすく、390px を基準にすると余白・改行がズレにくい。
- ガラケー系解像度のフェードアウト
375 × 667（旧 iPhone SE）でも 6.1% に縮小。可読性・運用コストの観点から “375px 専用カンプ” は不要。
制作のポイント
| 考察結果 | 制作でのアクション |
|---|---|
| FHD が 25%＋ WQHD 6.5% | カンプは “コンテンツ幅 1200px＋全画面背景” を基本にする |
| 幅 390px 台が 28% 超 | スマホカンプは 390px 基準、375 & 430px は余白で調整 |
| 古い 1366 × 768 の低下 | 文章の折り返しチェックのみ、専用レイアウトは省略 |
主要デバイスは “FHD／390px” の二極化。まずはこの 2幅で完璧に表示されることが、ユーザーの満足度と保守コストのバランスが最も良いポイントだと思います。
3. 今後 1年の予測 & 制作への影響（あくまで想定）
今後の予測
| 要因 | 影響しそうな幅 | 背景ソース | 制作への影響 |
|---|---|---|---|
| iPhone 17（仮）登場 2025 秋予定 | 430px 前後 | モックアップ流出で筐体がわずかに大型化との報道 Applealmond 2025-03-17 アップルジン – iPhoneの使い方と便利な機能紹介 | 430px 帯が上位入りする可能性。スマホ用余白の上下限を 375–432px に拡張しておく |
| 4K ノートの普及 | 3840 × 2160 | 市場調査で「2025→2030年に年平均 +7%」と予測 360iResearch 2025-06 360iResearch | 画像は DPR=2 前提。上限 1920px → 2560px にリサイズし直し |
| リモートワークがもっと定着 | 1920px 帯の微増 | モニタ需要が法人・個人ともに多い | コンテンツ幅1200px＋全画面背景という現在の設計パターンは当面有効 |
来期までにやっておくべき 3つのこと
- コンテンツ幅は 1200px 固定＋最大幅 1440px を CSSで調整する
- スマホ用カンプを 390px 基準に刷新
375 / 393 / 430px は左右パディングで調整。可変フレックスで文字折り返し確認を。 - 画像アセットの再生成
srcsetを 390 / 780 / 1170 / 2560px の 4段階に。メインビジュアル画像は 2560px WebP → 50% 品質で 300KB 以内を目標に。
:root { --max-container: 1200px; }
.wrap { width: min(100%, var(--max-container)); margin-inline: auto; }
@media (min-width: 1440px){
.bg-wide { width: 100%; }
}これで FHD～WQHD～4K いずれでも違和感なく中央寄せが維持できます。
まとめ
- ブレイクポイントは 多くて5区分で十分：≦767 / 768–1023 / 1024–1439 / 1440–1919 / ≧20px
- ファーストビュー高の目安：PC 750px ／ SP 600–650px
- 半年後のチェックポイント：iPhone 17 の解像度確定と 4K ノート比率の再集計
常に最新に合わせるのは難しいですが、１～２年先でも表示に問題が内容なデザイン幅を心がけたいですね。定点観測、また更新したらこのブログでご案内します！次回もお楽しみに！
