はじめに
本書の目的
本ドキュメントは、Webサイト制作でよく迷う「サイズ」の基準を分かりやすく示すために作りました。PC・スマホ・タブレットの横幅やコンテンツ幅、画像サイズの最適値や推奨値を具体的に紹介します。実務で使える数字と理由を中心に解説します。
対象読者
デザイナー、コーダー、ディレクター、個人でサイトを作る方など、実際の制作に携わる方を想定しています。経験が浅い方でも分かるように、専門用語は最小限に抑えます。
本書で扱う内容
- ユーザーの画面解像度傾向とその影響
- デザインカンプのサイズ設定方法
- レスポンシブデザインのブレイクポイントの目安
- 画像やメインビジュアルの推奨サイズ
読み方と使い方
章ごとに具体的な推奨値とその根拠を示します。制作時にはまず本書の基準を参照し、必要に応じてプロジェクト要件に合わせて調整してください。実践で使えるチェックリストも随所に載せます。
第1章 Webサイトの「サイズ」とは何か？
概要
Webサイト制作で「サイズ」と言うと、主に次の3つを指します。ページ全体の幅（デザインカンプの横幅）、コンテンツ幅（本文や主要ブロックの読みやすい幅）、画像サイズ（メインビジュアルなど画像ファイルのピクセル幅）。これらは役割が異なり、制作側が決める要素です。
ページ全体の幅（デザインカンプ）
デザインカンプは見た目の基準です。たとえば横幅1200pxで作れば、レイアウトや余白のバランスを統一できます。モニターが広い場合でも、基準に合わせて調整します。
コンテンツ幅
コンテンツ幅は実際に読まれる部分の幅です。読みやすさを考え、一般に600〜1000px程度を目安にします。長い行は可読性を下げるので、行長を意識して決めます。
画像サイズ（ピクセル）
メインビジュアルや背景画像は、表示領域に合わせたピクセルサイズで用意します。例：フル幅ヘッダーなら横1920px程度、サムネイルは400px前後が目安です。
画面解像度との違い
画面解像度はユーザー側の環境を指します。制作者はデザイン幅とコンテンツ幅を決め、レスポンシブで各解像度に合わせて調整します。
第2章 PCサイトの最適な横幅・コンテンツ幅
はじめに
PCサイトの表示幅はユーザーの画面解像度に左右されます。多くは1920×1080（フルHD）や1536×864、1440×1024付近です。デザインでは画面いっぱいに広げず、見やすさを重視してコンテンツ幅を制限することが一般的です。
推奨横幅とその理由
- デザインカンプの横幅：1440px、1280px、1920pxあたりが多く用いられます。
- コンテンツ幅の目安：1000〜1200pxが無難です。文字中心のメディア系は1000〜1100px、ビジュアル重視サイトは1200〜1400pxまで広げる場合があります。
理由は読みやすさと余白のバランスです。行長が長すぎると読み疲れを招くため、適度な幅で中央に配置します。
コンテンツ幅の決め方（実務的な判断ポイント）
- 文字量と行長：目安は1行あたり約45〜75文字。長い記事が多ければ狭めにします。
- 画像・レイアウト：大きな写真やスライダーが主役なら1200px以上を検討します。
- グリッド：12カラムなどの標準グリッドを使うと調整が楽です。
デザインから実装への流れ（具体例）
- カンプは1440pxで作成し、コンテンツ領域を最大1200pxにする。ヘッダーや背景はフル幅にして視覚効果を出します。
- CSS例：.container{max-width:1200px;margin:0 auto;padding:0 20px;} として中央寄せにします。
実装時のポイント
- 余白（左右のパディング）を確保して窮屈さを避ける。
- レスポンシブ対応で768px以下や480px以下の崩れを確認する。
- 行間とフォントサイズで読みやすさを調整する（目安：本文14〜18px）。
これらを踏まえ、サイト目的に合わせて1000〜1200pxを基本に検討すると運用しやすくなります。
第3章 スマホサイトの最適な幅・基準サイズ
代表的な画面サイズ
スマホの代表例は次の通りです。実務では幅を意識してデザインします。
– 375×667px（iPhone 6/7/8系）
– 360×640px（多くのAndroid機種）
– 390〜414px（現行の主流幅）
– 414×896px（iPhone 11 Pro Maxなど）
国内では幅375pxがシェア約23％で最も多く、設計の目安になります。
基準にする幅（デザインと実装）
デザインカンプは幅375pxを基準にすることが一般的です。Retina対応では2倍（750px）で作ると画像が鮮明になります。3倍（1125px）を用意する場合もあります。
ブレイクポイントはおおむね375〜428pxを目安にし、ここを境にレイアウトを調整します。
実装時の具体的な対応
- コンテンツ幅は画面幅の90〜95％が読みやすいです。例：.container{width:90%;max-width:414px;margin:0 auto}
- または幅を100%にして内側にパディングを入れる方法も有効です。例：width:100%;max-width:414px;padding:0 5%;
- ビューポートの設定は必須です：
- 画像はsrcsetで2x/3xを用意して表示密度に対応します（例：image@1x.jpg 1x, image@2x.jpg 2x）。
ユーザビリティの注意点
- タップ領域は約44px以上を目安にします。ボタンやリンクを狭くしすぎないでください。
- 行長は30〜40文字程度が読みやすいです。
- 横向き（ランドスケープ）や小型端末でも確認して崩れがないか検証してください。
以上を基準にデザインカンプを作成し、実装では可変幅と最大幅を組み合わせることで多くの端末に対応できます。
第4章 タブレット表示時の幅の目安
はじめに
タブレットは画面サイズがスマホとPCの中間です。見た目や操作感が両者の影響を受けるため、幅の考え方を明確にしておくと制作が楽になります。
代表的な解像度
- iPad標準：768×1024px（縦×横）
- Android系：1280×800pxなど
多くの現場では横幅768px前後をタブレット用のブレイクポイントにします。
ブレイクポイントの目安
- スマホ→タブレット：min-width: 768px
- タブレット→PC：min-width: 1024px
この設定で縦向きのタブレットはタブレットレイアウト、横向きや大きめはデスクトップ寄りにできます。
コンテンツ幅と余白
タブレットのコンテンツ幅は画面幅の大きめ領域をとるよりも、左右に余白を残す方が読みやすいです。目安は：
– 縦向き（viewport 768px）: コンテンツ幅約720〜740px、左右パディング16〜24px
– 横向き（viewport 1024px相当）: コンテンツ幅を最大960〜1100px程度に制限
これにより行長が適度になり可読性が上がります。
画像と解像度
タブレットは高解像度表示もあるため、画像は1x/2xを用意して切り替えると良いです。HTMLのsrcsetやpictureを使うと自動で適切な画像を配信できます。
タッチ操作の配慮
ボタンやリンクは指で押しやすいサイズ（高さ40〜48px目安）にすると操作ミスが減ります。余白や行間も広めに取ると見やすくなります。
実務のヒント
- 多くの制作ではPC1920px、スマホ375px（画像は2倍）、タブレット768pxで運用します。実機やブラウザのデバイスエミュレーターで必ず確認してください。
第5章 メインビジュアル・ファーストビューのサイズ
推奨サイズと比率
メインビジュアルは表示と容量のバランスで横1920×縦1080px（16:9）が標準です。フルHDを基準に、より大きな画面向けには2560px以上の横幅を用意すると安心です。
高さと表示領域の目安
ファーストビューの高さは画面の40〜60vh（ビューポートの割合）が使いやすいです。固定ピクセルではデスクトップで600〜800pxを目安にすると、見栄えがよくなります。
画像の種類と圧縮
WebPを優先し、非対応ブラウザはJPEGで代替します。ファイルは適切に圧縮し、デスクトップで概ね150〜300KB、モバイルでは100KB前後を目指すと表示速度が確保できます。
レスポンシブ対応の実装例
複数サイズを用意してsrcset/sizesで配信します。用意する幅の例：480・768・1024・1280・1920・2560px。Retina対応は2倍の解像度を用意、またはsrcsetで倍率を指定します。
レイアウトと見せ方のコツ
重要な被写体は中央や安全領域（横幅の中央40%程度）に置き、背景はcover（背景全面表示）やimgのobject-fit:coverで切れを防ぎます。ファーストビューは遅延読み込みを避け、重要度が高ければpreloadで優先読み込みします。
アクセシビリティと運用
代替テキスト（alt）は必須です。CDNで配信しキャッシュを活用すると、繰り返し訪問時の表示が速くなります。
