Webデザインの最適なコンテンツ幅は？【サイズ決定方法】
Webデザイン初心者の方でこのような悩みはありませんか？
- コンテンツ幅の概念自体がよく分からない
- デザインを始める際に何から手をつければいいか迷っている
- 効率的にデザインを進める方法を知りたい
- 様々な画面サイズにどう対応すべきか悩んでいる
こうした悩みに答える記事を用意しました。
目次
そもそもコンテンツ幅とは？
コンテンツ幅とは、Webデザインで実際にコンテンツ（文章、画像、動画など）が表示される領域の横幅のことを指します。
言い換えれば、ユーザーがスクロールせずに一度に見ることができる情報の横幅です。
なおWebデザインをする前に必ずコンテンツ幅を決めておいた方がいいです。なぜなら決めた枠組みの中で作業を進めることができるからです。コンテンツ幅に基づいて適切な列数と余白を設定することで、たとえ画面が広がっても、重要な要素が見切れたり、縮小されたりを気にすることなく情報を見せることができます。
アートボード幅との違いは？
アートボード幅はfigmaやIllustratorなどデザインツール上での「作業領域」を表す外枠のこと。
実際のデバイス画面サイズを再現できるように使用されます。通常、コンテンツ幅はアートボード幅よりも狭く設定されます。
ブレークポイントって？
ブレークポイントとは、Webサイトのレイアウトが変化する画面幅のこと。言い換えれば、デバイスの画面サイズに応じて、デザインが「切り替わる」ポイントです。
画面サイズがブレイクポイントに達すると、CSSやメディアクエリを活用してレイアウトや要素の配置が調整されます。
例えば、コンテンツ幅を1200pxに設定した場合、この幅付近でデスクトップで最適化されたレイアウトから、タブレット用のレイアウトへ切り替えます。
PCの主なデバイスサイズ【2024年】
日本で使われているパソコンのモニターサイズのシェア率もおさえておいたほうがいいです。
2024年の最新データによると、日本のパソコンモニターで最も多く使用されている解像度は「1920×1080」です。その他、
具体的なシェア率は以下の通りです。
- 1920×1080 (フルHD): 26.17%
- 1536×864: 11.47%
- 1366×768 (Full Wide XGA): 8.34%
- 1280×720 (HD): 6.53%
- 1440×900 (WXGA+): 4.95%
なお最新のPCの主な画面サイズを知りたい人は下記を参考にしてみて。どの画面サイズが最も使われているかわかるからです。
主要なスマートフォン画面幅
2024年8月時点での日本国内におけるスマートフォンの主要な画面幅は以下の通り。下記の情報はスマートフォンを縦にしたときの横幅です。
最も一般的な幅: 375px〜390pxの範囲が最も多く使用されています
デバイスごとに最適なコンテンツ幅はこれ！！
デスクトップ編
PCでの最適なコンテンツ幅は1000px前後〜1280pxに設定するのが良いです。実際、多くの日本のサイトで採用されている範囲です。
タブレット編
PCからタブレット表示に切り替わるブレイクポイントは「768px〜960px」がおすすめ。
スマホ編
スマホのブレークポイントは「375px〜428px」に設定すると良いです。
おすすめ：Webデザインをする時に最初に設定するのは？
最も一般的な解像度が1920×1080（フルHD）であることを考慮すると、デザインをする時には、
・アートボードサイズは1920pxに設定
・コンテンツ幅コンテンツ幅1,000px前後
として設定ておきましょう。
ちなみに最近流行りのFigmaはデスクトップ用ワイヤーフレームとして1440pxや1280pxがよく使われ、STUDIOでも1280pxが推薦されています。
なお1点覚えておいてほしいポイントとしてコーディングしやすいように、ファーストビューも幅を想定しておいた方がいいです。ファーストビューのデザインでは、重要な情報が1200px幅の中に収まるようにしつつ、背景やビジュアル要素はアートボードサイズ1920px幅で作成していきます。
コンテンツ幅は固定じゃない方がいい
コンテンツ幅を固定値ではなく最大幅として設定し、柔軟に変化するレイアウトを採用した方がいいです。なぜなら固定幅のレイアウトでは、デバイス（デスクトップの大画面から中間サイズのデバイスまで）によって見え方が大きく変わる可能性があるから。柔軟なレイアウトでより一貫した外観を維持できるからです。
またユーザーはブラウザウィンドウを全画面表示せず、縮小した状態で閲覧することがあります。柔軟なレイアウトは、このような閲覧習慣にも対応します。
コンテンツ幅を固定値ではなく、最大幅として設定することで、中間的な画面サイズにも柔軟に対応できます。ユーザーがウィンドウを縮小した状態での閲覧も考慮し、コンテンツ幅が柔軟に変化するレイアウトを採用します。例えば、最大幅を1200pxとしつつ、それ以下の幅では比率でレイアウトが変化するデザインを採用します。
CSSで実装するときには、
.container { max-width: 1200px; width: 90%; margin: 0 auto; }
この設定により、コンテンツ幅の最大を1200pxの幅にしつつ、画面幅がそれより小さい場合は画面の90%の幅を占めるようになります。
