はじめに
スマホで見やすいWebサイトを作るには、画面サイズを意識した設計が欠かせません。本書では、スマホ向けの横幅・高さ・アートボードの設定を実務的に解説します。代表的な解像度やファーストビューの目安、コンテンツ幅の考え方、レスポンシブ設計の基本まで、わかりやすくまとめています。
目的
読者が実際のデザイン作業で迷わないように、基準となるサイズと設定手順を示します。デザインツールでの具体的な数値や実践的なチェックポイントも扱います。
想定読者
- WebデザイナーやUIデザイナー
- コーダーやフロントエンド開発者
- サイト運営者や制作ディレクター
初心者でも取り組めるように、専門用語は最小限にし、具体例を交えて説明します。
この記事の読み方
各章は順に読んで実践できます。まず対象デバイスを決め、基準幅で試作してください。例として、片手操作を想定してボタンを下寄せにするなど、使い勝手を優先する視点を持つと設計が楽になります。
なぜ「スマホサイズ」を意識したWebデザインが重要なのか
導入
スマホからの閲覧が主流になり、画面の小ささを前提に作られていないサイトは読みにくくなります。使いにくい表示は離脱につながるため、画面サイズを基準にした設計が必要です。
スマホで起きやすい離脱の理由
- 文字が小さく読みにくい：フォントサイズが小さいとスクロールや拡大が必要になります。
- 画像やボタンが押しづらい：タップ領域が狭いと誤操作やストレスになります。
- ファーストビューで何のサイトかわからない：最初の一画面で目的が伝わらないと戻る操作が増えます。
どこを意識すれば良いか（具体例）
- レイアウト：重要な情報を上部にまとめ、縦スクロールで読み進められる構成にします。
- フォント：本文は見やすい大きさに設定します。例）小見出しは16–18px、本文は14–16px程度を目安に調整します。
- 画像：幅可変の画像を使い、端末幅に合わせて縮小・切り替えを行います。重い画像は遅延読み込みを検討します。
- ボタン：タップ領域を広くし、周囲に余白を取ります。指で押しやすいサイズを確保します。
対応パターンと推奨
スマホ対応は大きく分けて2パターンあります。レスポンシブデザインは同じHTMLで画面幅に合わせて見た目を変える方法で、管理が楽で推奨されます。専用ページは別URLを用意する方法で、用途に応じて選べます。
実践チェックリスト（短く）
- ファーストビューで目的が伝わるか確認します。
- 指で押しやすいボタン幅と余白を確保します。
- 文章は読みやすいサイズと行間にします。
- 画像とスクリプトを軽くして表示を速くします。
スマホ利用者にとってストレスの少ない表示は、滞在時間とコンバージョンを向上させます。画面サイズを前提にした設計を優先して進めてください。
2025年時点で主流のスマホ画面サイズと基準幅
代表的な画面サイズ
- 375×667px：iPhone 6/7/8 系列の基準幅。多くのデザインツールでの標準サイズです。
- 360×640px：多くのAndroid機で一般的な横幅。グローバル対応で無視できません。
- 390×844px、414×896px：大画面のiPhone（近年のモデル）に該当し、横幅が広い端末です。
シェアと実務上の目安
横幅375〜414pxのレンジが約60%のシェアを占めます。このため、この範囲を中心にデザインすると実用性が高くなります。グローバル向けや低解像度端末を意識する場合は360pxも考慮します。
デザイン実務での基準幅
- 基準（推奨）：375pxのアートボードで作成することが多いです。多くの画面で自然に見えます。
- 最低ライン：360pxを想定して、レイアウトが崩れないか確認します。
- 大画面対応：414px以上でも見栄えが良いか確認します。レスポンシブやフレックス設計で幅に柔軟性を持たせます。
実作業のチェックポイント
- 375pxで主要画面を作り、360pxと414pxで崩れがないか確認します。
- テキスト行長やボタン幅を固定し過ぎず、相対指定（%やflex）を使います。
- 重要な情報は横幅360pxでも視認できるよう優先順位を付けます。
これらを守ると、多くのスマホ端末で快適に見せられます。
スマホのファーストビュー（1画面目）の最適サイズ
ファーストビューとは
ファーストビューは、スクロールせずに最初に表示される範囲です。スマホではここで興味を引けるかが重要になります。重要な見出しや行動ボタンはこの範囲に収めます。
推奨サイズ
- 想定レンジ：横幅375〜414pxが多いため、この幅を想定します。
- デザイン幅（推奨）：幅350〜365px、高さ600〜650px。
- 幅は左右に余白を残すため実効コンテンツ幅として設定します。
- 高さは端末ごとに差が大きいため、やや低めに設定して余裕を持たせます。
理由と実践ポイント
- 代表的なサイズ375×667pxが多く、60％近くが375〜414pxに収まります。したがってこのレンジを基準に作れば多くの端末で崩れにくいです。
- ファーストビューには必ず重要情報（見出し、主要画像、CTA）を配置します。視線の上部に注目要素を置くと効果的です。
画像と表示速度
- 画像は表示解像度に合わせて最適化し、データサイズを小さくします。軽い画像は表示速度を上げ、ユーザーの離脱を防ぎます。
高さの扱い
- ステータスバーやブラウザUIで表示領域が変わるため、高さは保守的に設定します。スクロールせずに見せたい要素は高さ600px前後に収めると安全です。
チェックリスト（簡易）
- 幅350〜365pxで確認する
- 重要要素が1画面に収まるか確認する
- 画像を最適化する
- 実機で高さの違いを確認する
スマホ用Webデザインの「コンテンツ幅」の考え方
背景
スマホの画面幅は機種ごとにばらつきます。固定のpxで横幅を決めると特定端末で崩れやすく、手間が増えます。柔軟に対応する設計が大切です。
基本方針（目安）
デザインでは画面幅の約90％をコンテンツ幅にする方法が実用的です。一般にスマホ幅は320〜480pxとされますが、最近はこれを超える端末もあります。90％にすれば多くの端末でバランス良く見えます。
デザインツールでの設定例
アートボード幅：375px（代表的な基準）
コンテンツ幅：375px×0.9＝約337〜340px
この幅ならテキスト行長や余白が読みやすく、多くの端末で自然に収まります。
実装例（シンプルなCSS）
.container { width: 90%; max-width: 375px; margin: 0 auto; box-sizing: border-box; }
この設計なら360px端末でも余白を保ちながら収まります。
実務的なポイント
- パディングや左右のガターを考慮し、読みやすい行長を目安にする。\n- ボタンやリンクはタップしやすいように十分なサイズと余白を確保する。\n- 画像やカードはmax-width:100%を指定して崩れを防ぐ。\n
こうした柔軟な幅設計で、多様なスマホ画面に対応しやすくなります。
スマホサイズでWebサイトをデザインする手順
準備：PCサイズから始める
まずデスクトップ版（例：1920×1080または1366×768）で基本レイアウトを作ります。コンテンツ幅は950〜1200pxを目安に設計してください。ブレイクポイント例：1200px以上＝PCワイド、768〜1199px＝タブレット、767px以下＝スマホ。
ステップ1：ブレイクポイントを決める
どの幅でレイアウトを切り替えるかを明確にします。優先する閲覧環境に合わせて微調整してください。
ステップ2：スマホ用アートボードを作る
デザインツールで幅375pxのアートボードを用意します。これは多くのスマホで標準的な見え方を再現します。
ステップ3：縦並びレイアウトにする
コンテンツを縦に積み、重要順に上へ置きます。スクロールに優先順位を付けると使いやすくなります。
ステップ4：文字・ボタンをタップしやすく調整
本文は16px前後、ボタンは幅や高さを44〜48px程度にします。視認性と操作性を両立させます。
ステップ5：画像と解像度の扱い
アートボード幅375pxに対し、画像は表示幅の2倍（750px）で作成しておきます。Retinaなど高解像度でも粗く見えません。
ステップ6：実機で確認して微調整
実機やブラウザのデバイスモードで表示やタップ感を確認し、必要に応じて間隔やサイズを調整します。
