Webサイト制作で知っておきたい画面サイズの基本知識

2025 11/02

2025/11/02

はじめに

本記事へようこそ。本連載では、Webサイト制作で失敗しない「画面サイズの選定」と「レスポンシブ実装」について、具体例を交えてやさしく解説します。

この記事の目的

PC、スマートフォン、タブレットなど各デバイスに対して、どの画面幅を想定すれば良いかを分かりやすく伝えます。ファーストビューや画像の幅設定など、実務で役立つポイントも紹介します。

対象読者

デザイナー、フロントエンドエンジニア、サイト運営者、これから学ぶ方まで幅広く役立つ内容です。専門用語は必要最低限にし、具体例で補足します。

読み進め方の目安

各章は独立して読めます。まずは第2章で画面サイズの重要性を把握し、第4章でレスポンシブの実装方法に進むと効率的です。

以降の章で実践的な数値やコード例を示します。まずは全体像をつかんでください。

Webサイト設計における画面サイズの重要性

なぜ画面サイズが重要か

WebサイトはPC、スマホ、タブレットと多様な画面で見られます。画面サイズに合わない設計は読みづらさや操作ミスを招き、離脱率を上げます。表示領域や操作方法（マウスかタッチか）を考えて設計すると、使いやすさが大きく向上します。

ユーザー体験への主な影響

読みやすさ：文字サイズや行長が変わると読みやすさが変化します。
操作性：タッチ対象は十分なサイズが必要です（目安は44px前後）。
視認性：重要要素が画面外に隠れると気づかれにくくなります。
表示速度：画面サイズに合わせた画像やリソースで表示速度を保てます。

実務で押さえるポイント

モバイルファーストで考え、必要に応じて幅を拡張します。
レイアウトは相対単位（％やrem）で柔軟にします。
画像は複数サイズを用意し、画面幅に応じて切替えます。
タッチ領域やフォントサイズは実機で確認します。

テストのすすめ方

ブラウザのデベロッパーツールで各幅を確認します。
実機テストを必ず行い、操作感と表示をチェックします。
代表的な画面幅だけでなく、極端な幅も確認してください。

これらを意識すると、多様なデバイスで快適な体験を提供できます。

各デバイスの代表的な画面サイズ

この章ではPC・スマートフォン・タブレットそれぞれの代表的な画面サイズと、実務での目安を分かりやすく示します。

PC（デスクトップ）

代表的な横幅：1366〜1920px、縦：768〜1080px。多くのユーザーがこの範囲で閲覧します。
ファーストビューの推奨：横1000px×縦550px。ヘッダーやナビを除いた中心領域を想定すると、重要情報が見切れにくくなります。
ポイント：横幅が広い場合は左右に余白を作り、本文の可読幅を確保してください。

スマートフォン

よく見るビューポート例：375×667px、390×844pxなど。機種差はあります。
推奨デザイン幅：350〜365px、推奨高さ目安：600〜650px。重要なボタンや見出しをこの範囲内で確認します。
ポイント：タッチ操作を考え、ボタンは十分な大きさと間隔を取ってください。

タブレット

代表的な幅：800px。一般的な範囲は640〜1023pxです。
ポイント：縦横の向きで見え方が大きく変わるため、両方で確認してください。

実務のコツ：各幅でスクロールせずに見える範囲を想定し、余白や文字サイズを調整します。画像は幅に合わせて縮小できるように準備してください。

レスポンシブデザインの実装とブレイクポイント

概要

レスポンシブデザインは画面幅に応じてレイアウトや見た目を自動で整える手法です。基本はmeta viewportの設定とCSSでの切り替えになります。

meta viewportの設定

ここが無いとスマホで拡大・縮小された表示になります。例:

この一行で端末幅を基準に表示されます。

CSSメディアクエリの使い方

モバイルファーストで書くと管理しやすくなります。まず共通スタイルを書き、幅が広くなるときに上書きします。例:

/ 共通 /
.container { padding: 16px; }
@media (min-width: 768px) { / タブレット以上 / .container { padding: 24px; } }

または小さい幅向けにmax-widthで調整しても良いです。

ブレイクポイントの考え方

よく使われる目安はスマホ：375〜428px、タブレット：640・800・1024px、PC：1024px以上です。ただし画面幅を厳密に決めず、コンテンツが崩れるポイントで設定してください。例えばカードが横並びになる幅でブレイクを入れると自然です。

実装のチェックポイント

画像はmax-width:100%で可変にする
タッチ要素は高さ44px以上を目安にする
ナビは狭い幅でハンバーガーメニューにする
srcsetやpictureで解像度別画像を用意する

テスト方法

ブラウザのデベロッパーツールのエミュレーターと実機で確認してください。ランドスケープ／ポートレート両方を必ず試します。

ファーストビューの最適サイズとデザインポイント

ファーストビューとは

ファーストビューはページを開いたとき最初に見える領域で、ユーザーの興味を3秒で引くことが重要です。ここで目的やトーンを瞬時に伝えます。

推奨サイズの目安

PC: 横幅1000px × 高さ550pxを基準にします。広すぎず情報を整えやすい幅です。
スマートフォン: 横幅360px × 高さ600pxを目安にします。主要な機種で自然に見えるサイズです。

デザインのポイント

目的とターゲットを明確にする
何を最優先に見せるか決めます（商品、サービス、登録など）。ターゲットに合わせた言葉とビジュアルを選びます。
情報量を絞る
見出し、サブテキスト、主要CTAの3要素に絞ると理解が速くなります。余白を十分に取って視線を誘導します。
視覚の階層を作る
見出しは大きく、CTAは目立つ色と適切な余白で配置します。アイコンや短い箇条で補足します。
画像とテキストのバランス
ヒーロー画像は重すぎないよう最適化して使います。文字は画像上でも読みやすいコントラストを確保します。
レスポンシブ対応と安全領域
スマホではタップ領域を広めに、PCでは余白を活かしたレイアウトにします。重要要素は上下左右の端に寄せないでください。
読み込みとアクセシビリティ
画像は遅延読み込みや圧縮で表示を速めます。コントラストと代替テキストでアクセスしやすくします。

テスト方法

複数の実機やブラウザで3秒以内に要点が伝わるか確認します。A/Bテストで見出しやCTAの効果を比較することも有効です。

画像やコンテンツ幅など個別要素のサイズ設定

画像の準備と表示崩れの防止

高解像度の元画像を用意し、HTMLで必ずwidthとheightを指定します。例: 。width/heightを入れるとレイアウトのジャンプを防げます。さらにsrcsetとsizesで複数解像度を用意し、ブラウザに最適なサイズを選ばせます（例: srcset=”image-800.jpg 800w, image-1600.jpg 1600w” sizes=”(max-width:600px) 90vw, 1000px”）。

CSSでの調整（レスポンシブに保つ）

img{max-width:100%;height:auto;display:block;}を基本にします。縦横比を固定したい場合はaspect-ratioを使うか、paddingで比率ボックスを作ります。遅延読み込みはloading=”lazy”を検討してください。

コンテンツ幅の目安

PCではメインコンテンツのmax-widthを1000〜1400pxに設定すると読みやすいです（.container{max-width:1200px;margin:0 auto;padding:0 16px;}）。スマホでは幅を90%やmax-width:420pxで相対指定すると余白が保てます。