はじめに
この資料の目的
本資料は「webサイズ」に関する情報を整理し、Webサイト制作で迷わないための手引きです。特にデバイスごとの推奨サイズ、ホームページで使う画像サイズ、コンテンツ幅の決め方を分かりやすく解説します。
対象読者
Web制作をこれから始める方、デザインの調整で悩んでいる方、やさしい基準を知りたいディレクターや担当者向けです。専門知識がなくても読み進められるようにしています。
本資料で扱う項目（章立て）
- 第2章：Webデザイン時の基本的なサイズ感と決め方
- 第3章：ホームページで使う画像サイズの具体例と注意点
- 第4章：コンテンツ幅の最適化方法と実践テクニック
Webサイズとは？
ここでいう「webサイズ」は、画面幅や画像・要素の表示サイズを指します。たとえばスマホは一般に約360px〜425px、タブレットは約768px、PCは1024px以上という目安があります。これらを踏まえ、見やすく、読みやすい設計を目指します。
読み方のコツ
実例と数値を交えて説明します。まずは第2章で基本のサイズ感をつかんでください。
Webサイトのデザインをするときのサイズはどうする？
はじめに
Webサイトのデザインは、見るデバイスによって適したサイズが変わります。ここでは代表的な画面サイズと、デザイン作業での実用的な目安を分かりやすく説明します。
代表的な画面サイズ（目安）
- PC：1440×1024px、1920×1080pxが主流です。デスクトップは横幅が広いため、可変レイアウトを意識します。
- スマートフォン：375×667px（iPhone 6/7/8基準）、360×640px（一般的なAndroid）、414×896px（大画面iPhone）が代表的です。
- タブレット：768×1024px（iPad標準）、1280×800px（Androidタブレット）を想定します。
デザイン時の実務的な目安
- サイドスペース（余白）はページ幅の約10〜20％を目安にします。余白で視線を整え、読みやすさを確保します。
- デザインツールの制作幅は効率重視で決めます。よく使う設定例：PCは1920px、タブレットは768px、スマホは375pxで作ります。画像は高解像度対応のため2倍（@2x）で用意すると安全です。
実務ポイント
- ブレイクポイントはコンテンツ優先で決めます。一般的な幅で合わせつつ、テキストやボタンが崩れない箇所で切り替えます。
- 画像は表示サイズに合わせて圧縮し、ファイルを分けると読み込みが速くなります。
- 実機確認を必ず行い、想定外の崩れがないかチェックします。
ホームページで使う画像サイズを徹底解説！
概要
ホームページで重要なのはピクセル（px）サイズです。DPIは印刷用の単位で、ウェブ表示ではピクセル数が表示品質を決めます。一般的には横幅1920pxの画像を基準に用意すると、ほとんどのディスプレイで美しく見えます。
解像度とDPIの基本
- ウェブ表示は「ピクセル幅」が重要です。DPIは画面ではほとんど影響しません。
- 目安として72dpiと表現されることがありますが、実際は表示されるピクセル数が優先です。
推奨サイズ（用途別）
- メインビジュアル（フル幅）: 横1920px以上。4K対応なら3000〜4000pxを用意します。縦は比率に合わせて調整（例: 1920×1080）。
- コンテンツ内画像（記事など）: 横1200px程度で十分です。
- サムネイル: 横400〜800px。小さい一覧用は150〜300px。
- ロゴ・アイコン: 実際に表示するサイズで作成し、余分な拡大を避けます（100〜300pxが多い）。
高解像度ディスプレイ対応（Retina/4K）
- 見た目の大きさが600pxの画像は、2倍の1200pxを用意するとRetinaでも鮮明に表示できます。srcsetとsizes属性を使い、ブラウザに最適な解像度を選ばせます。
ファイル形式と圧縮のコツ
- 写真: JPEG（品質60〜80%）でファイルサイズを抑えます。
- 透過やロゴ: PNGまたはSVG。ベクターは拡大しても劣化しません。
- 可能ならWebPを使うとより軽くなります。
- 目安: メイン画像は300〜500KB以内、記事画像は100〜200KB以内、サムネイルは50KB以下を目指します。
実務ワークフロー（簡単に）
- デザイン幅（例: 1920px）で作成する。
- 1xと2x（必要なら3x）を出力する。
- ファイル名やフォルダで管理し、srcsetで指定する。
- 実機で表示を確認し、必要なら圧縮やリサイズを繰り返します。
注意点
- 小さい画像を無理に拡大するとぼやけます。表示サイズ以上のピクセルを用意してください。
- alt属性や遅延読み込み（lazy loading）で表示速度とアクセシビリティを改善します。
Webデザインの最適なコンテンツ幅は？【サイズ決定方法】
コンテンツ幅とは
コンテンツ幅は、ユーザーがスクロールせずに横に見られる情報の幅です。読みやすさや視線の移動量に影響します。見出しや本文、画像が入る領域を想定して決めます。
決めるときの基本方針
- 目的とユーザーを確認する：閲覧端末（PCかスマホか）や多く使われる画面幅を確認します。
- 行長を意識する：本文の理想行長は約45〜75文字。幅が広すぎると読みづらくなります。
- 最大幅を設定する：多くの日本サイトは1000px前後〜1280pxを採用しています。例：最大幅を1200pxにして中央寄せにする方法が使いやすいです。
ブレークポイントとレスポンシブ
代表的な幅：320px（小型スマホ）、480px（標準スマホ）、768px（タブレット）、1024px（小型PC）、1280px（デスクトップ）。CSSのメディアクエリでレイアウトを切り替えます。コンテナは流動的にして、必要に応じてmax-widthで上限を設けます。
実務での設定手順
- ユーザーの画面分布を確認
- デザインのグリッド（例：12カラム）を決める
- 最大幅（例：1100〜1200px）を指定し、左右に余白（padding）を取る
- 代表的なブレークポイントで表示を確認
画像やタイポグラフィの注意点
画像はレスポンシブ（srcsetやpicture）で用意し、テキストは行長に合わせてフォントサイズと行間を調整します。スクロールバーや安全領域も考慮してください。
テスト項目
- 各ブレークポイントで読みやすさを確認
- 行長が長過ぎないかチェック
- 画像やボタンがはみ出していないか確認
上の流れで決めれば、閲覧のしやすさとデザインの安定性が両立できます。
