デザインカンプ前に決めるWebデザインのルール｜ウィンドウ幅・コンテンツ幅・カラム設計

Webデザインのカンプは、ウィンドウ幅・コンテンツ幅・カラム構成・最小フォントサイズといった「デザインルール」を先に決めてから作り始めるべきです。これらを決めないままカンプを描き始めると、実装段階で「この幅だと崩れる」「文字が小さすぎて読めない」といった問題が噴出し、デザインの作り直し（手戻り）が発生します。逆に、着手前に数値の土台を固めておけば、カンプ・コーディング・レスポンシブ対応まで一貫した設計で進められます。

「とりあえずFigmaを開いて、なんとなく1440px幅でデザインを描き始める」——これ自体は悪くありませんが、コンテンツ幅やカラムの数値、スマホでの最小フォントサイズを決めずに進めると、後半で必ずつまずきます。実装者から「この余白いくつですか」「スマホのとき何カラムですか」と質問が飛び、その都度ルールを後付けするはめになるのです。

この記事では、デザインカンプに着手する前に決めておくべきルールを、具体的な数値（ウィンドウ幅・主要ブレイクポイント・1〜3カラムの汎用サイズ・最小フォントサイズ）とともに整理します。デザイナーとコーダーの間で認識がずれない「設計の土台」を、この記事のとおりに固めてからカンプを描き始めてください。

なぜカンプ前に「デザインルール」を決めるのか

デザインルールを決めずにカンプを作ると、問題は「実装フェーズ」で表面化します。カンプ上は美しく見えても、ブラウザ幅を変えたときの挙動やスマホでの見え方が定義されていないため、コーディングの段階で初めて破綻が見つかるのです。

ルール未決のまま進めると、典型的に次のような手戻りが起きます。

• コンテンツ幅が決まっておらず、大画面で間延びする／小画面で詰まる
• カラム幅やガターが場当たり的で、ページごとに余白がバラつく
• スマホで文字が小さすぎて読めない、フォーム入力時に勝手にズームする
• ブレイクポイントが未定義で、タブレット表示が崩れる

これらはすべて、着手前に数値を1枚の表にまとめておけば防げるものばかりです。デザインルールは「制約」ではなく、デザイナーとコーダーが同じ前提で動くための「共通言語」だと考えてください。

最初に決める3つの土台

カンプ着手前にまず固めるべきは、次の3つの土台です。これらが決まっていれば、残りのデザイン判断はこの上に積み上げるだけになります。

ポイントは、「ウィンドウ幅（外側）」と「コンテンツ幅（内側）」を分けて考えることです。この2つを混同すると、大画面でコンテンツが画面いっぱいに広がりすぎる、といった事故が起きます。次の章から1つずつ具体値を見ていきます。

ウィンドウサイズの決め方と主要ブレイクポイント

ウィンドウ幅とは、デザインを描くカンバスの幅と、表示が切り替わる境界（ブレイクポイント）のことです。PC向けのカンバスは1280pxまたは1440pxで描くのが一般的です。実際の端末シェアでは、スマホは幅375〜414px、タブレットは768〜1024pxが高い割合を占めます。

そのため、ブレイクポイントはスマホ375pxを基準に、タブレット768px、PC1024px以上で区切るのが定番です。多くの端末をこの3〜4区分でカバーできます。

ブレイクポイントの決め方には、特定端末の幅に合わせる「デバイスベース」と、レイアウトが崩れる幅で切り替える「コンテンツベース」の2つの考え方があります。実務では両者を併用し、主要端末（375／768／1024）をデバイスベースで押さえつつ、表が見切れる・カードが詰まるなど崩れが出た幅でコンテンツベースの調整を足すのが扱いやすい折衷案です。

ブレイクポイントは増やしすぎると管理が破綻します。基本は3〜4区分で十分で、サイトの特性に応じて大画面用（1440px以上）を1つ足す程度に留めるのが現実的です。CSSでは次のようにmin-widthでモバイルファーストに積み上げると見通しがよくなります。

/* モバイルファースト：スマホを基準に、上へ広げる */
/* ~767px: スマホ（指定なしのデフォルト） */

@media (min-width: 768px) {
  /* タブレット */
}

@media (min-width: 1024px) {
  /* PC */
}

コンテンツ幅とウィンドウ幅の違い

初心者がもっとも混同しやすいのが、ウィンドウ幅（外側）とコンテンツ幅（内側）の違いです。ウィンドウ幅はブラウザの表示領域そのもの。コンテンツ幅は、その中で実際に中身を配置する最大幅です。背景色やフルワイドの帯はウィンドウいっぱいに広げつつ、テキストやカードはコンテンツ幅の中に収める——この二層構造が基本です。

コンテンツ幅は1200px前後に上限を設けるのが定番です。これより広げると、大画面で1行の文字数が増えすぎて読みにくくなります。とくに本文（長文テキスト）の1カラムは640〜760px程度に抑えると、1行あたりの文字数が適切になり可読性が保てます。CSSではmax-widthと左右margin: autoで中央寄せにするのが定石です。

なぜ640〜760pxなのかというと、1行あたりの文字数が可読性を左右するからです。日本語の本文は全角で1行35〜45字前後が読みやすいとされ、これを大きく超えると視線が次の行頭に戻りにくくなります。逆に狭すぎても改行が増えて読みのリズムが崩れます。フォントサイズ16pxで全角40字前後に収まる幅が、ちょうど640〜760pxのレンジに当たります。「幅は文字数から逆算する」と覚えておくと、本文カラムの幅で迷いません。

/* ウィンドウ幅いっぱいの背景の中で、コンテンツ幅を絞る */
.section {
  width: 100%;            /* 外側：ウィンドウ幅 */
  background: #f5f5f5;
}
.container {
  max-width: 1200px;      /* 内側：コンテンツ幅 */
  margin-inline: auto;    /* 中央寄せ */
  padding-inline: 24px;   /* 左右の余白 */
}

カンプの時点で「この背景はフルワイド」「この中身はコンテンツ幅1200px」と明記しておくと、実装者が迷いません。左右のpadding（スマホで16〜24px、PCで24〜40px）も合わせて決めておきましょう。

カラム設計の汎用サイズ：1・2・3カラム

コンテンツ幅が決まったら、その中をいくつのカラムに分けるかを決めます。ここではコンテナ幅1200pxを前提にした、1〜3カラムの汎用的なサイズをまとめます。あくまで目安ですが、迷ったらこの値から始めれば大きく外しません。

前提として、これらのカラム構成はPC表示でのものです。スマホでは画面幅が足りないため、2カラム・3カラムはいずれも縦積みの1カラムに「落とす」のが基本になります。つまりカンプは、PCの多カラムと、それがスマホで1カラムに再構成された状態の両方を用意しておく必要があります。どの順で縦に積むか（メインを先頭に、サイドを後ろに等）も、この段階で決めておきましょう。

1カラム：ランディングページ・読み物向け

中身を縦1列に並べる構成です。LPやブログ記事に向きます。コンテナは1200px前後でも、長文の本文だけは640〜760pxに絞ると1行が長くなりすぎず読みやすくなります。スマホでは全レイアウトがこの1カラムに収束するため、最初に整えておくべき基本形です。

1カラムは最もレスポンシブに強い構成でもあります。スマホでは結局すべてが1カラムに収束するため、最初から1カラム前提で設計しておくと、画面幅が変わっても破綻しにくくなります。背景色の帯やヒーローはウィンドウ幅いっぱいに広げつつ、中身だけをコンテンツ幅に収める「フルブリード」の手法と組み合わせると、シンプルでありながら奥行きのあるレイアウトになります。

2カラム：メイン＋サイドバー

本文（メイン）の横にサイドバーを置く、ブログやメディアの定番です。1200px幅ならメイン740〜800px＋サイド300px、ガター24〜32pxあたりが収まりよく、比率では8:4（約70:30）が扱いやすい目安です。サイドバーは広告・目次・関連リンクなどに使います。

2カラムで注意したいのは、スマホでの挙動です。画面幅が足りないスマホでは、サイドバーが本文の下（または上）に回り込みます。そのため、サイドバーに入れる情報は「無くても本文が成立する補助的なもの」に絞るのが安全です。グローバルナビゲーションのような重要な要素をサイドバー任せにすると、スマホで埋もれてしまいます。PCの2カラムをそのままスマホへ持ち込もうとせず、縦積み時の優先順位まで設計しておきましょう。

3カラム：サイド＋メイン＋サイド

中央のメインを左右のサイドバーで挟む構成です。ポータルやニュース系で使われます。1200px幅ならサイド200〜240px＋メイン600〜700px＋サイド200〜240px、ガター24pxが目安です。情報量は増やせますが、メインが狭くなりやすいので、メインに必要な幅を先に確保してから両サイドを割り振るのがコツです。なお、カラムをCSSで実装する具体的な手法はグリッドレイアウト完全ガイド｜設計の基礎からCSS Grid実装で詳しく解説しています。

最小フォントサイズの決め方｜PC・スマホ別の基準

フォントサイズも、カンプ着手前に下限を決めておくべきルールです。結論から言うと、本文はPC・スマホとも16px以上を基準にします。16pxはブラウザの初期フォントサイズであり、可読性・アクセシビリティの観点から本文の標準とされています。16pxを下回ると、弱視の方や高齢者だけでなく健常者でも目が疲れやすくなります。

フォントサイズは行間（line-height）とセットで考えると効果的です。本文を16pxにしても、行間が詰まっていると読みにくさは解消されません。日本語の本文では行間を1.5〜1.8倍程度に取ると、文字サイズが活きて読みやすくなります。カンプの段階で「本文16px・行間1.7」のように、サイズと行間をワンセットで決めておきましょう。

スマホのフォーム入力は16px必須

スマホで見落とされがちなのが、入力欄のフォントサイズです。iOS Safariは、inputやtextareaのフォントサイズが16px未満だと「文字が小さすぎる」と判断し、タップした瞬間に画面を自動でズームします（出典: CSS-Tricks「16px or Larger Text Prevents iOS Form Zoom」）。このズームはレイアウトを崩し、ユーザー体験を損ねます。

/* スマホの自動ズームを防ぐ：入力欄は16px以上 */
input,
textarea,
select {
  font-size: 16px;
}

maximum-scale=1やuser-scalable=noでズーム自体を禁止する方法もありますが、これはユーザーの拡大操作を奪うためアクセシビリティ上は非推奨です。素直に入力欄のフォントサイズを16px以上にするのが正解です。カンプの時点で「スマホの入力欄は16px」と明記しておきましょう。フォント選び全般のポイントはWebデザインのためのフォント選び完全ガイドも参考にしてください。

余白・グリッド・ガターの基準値

幅とフォントが決まったら、余白の基準も決めておきます。余白が場当たり的だと、ページごとに見た目の密度がバラつき、まとまりのない印象になります。おすすめは4pxまたは8pxの倍数で余白を統一する「スペーシングスケール」を決めることです。

• スペーシングの基本単位：8px（要素間8/16/24/32px、セクション間64〜80pxなど倍数で統一）
• カラムのガター：24px前後（PC）。スマホは16px程度に詰める
• 左右の余白（コンテナのpadding）：スマホ16〜24px／PC24〜40px
• グリッド：12分割を基準にすると、2・3・4・6カラムへ柔軟に割れる

余白は「埋めるもの」ではなく「設計するもの」です。意図的にとった余白がレイアウトの呼吸を作ります。余白の考え方をさらに深めたい場合はWebデザインにおけるホワイトスペースの重要性と活用方法が参考になります。

Figmaでデザインルールを設定する

決めたルールは、頭の中に置くだけでなくデザインツール側に設定として落とし込むと、カンプ作業中にブレなくなります。Figmaを例に、ここまでの数値をどう反映するかを整理します。

• フレーム幅：PC用フレームを1280または1440pxで作成。スマホ用に375pxのフレームも並べて用意する
• レイアウトグリッド：フレームに「12カラム」のレイアウトグリッドを設定し、最大幅をコンテンツ幅（1200px前後）、ガターを24pxにそろえる
• テキストスタイル：本文16pxを基準にスタイルを登録。見出しや注釈もスタイル化し、16px未満の本文を作れないようにする
• スペーシング：8pxの倍数をバリアブル（変数）として登録し、余白を手打ちしない運用にする

こうしてツール側に「ルールを守らせる仕組み」を作っておくと、複数人で作業しても数値がぶれません。ルールは決めて終わりではなく、守られる状態にして初めて機能すると考えてください。ツールの基本操作に不安があればFigmaとAdobe XDの違いとは？基本操作から実践チュートリアルまでも参考になります。

カンプ着手前チェックリスト

ここまでの内容を、カンプを描き始める前のチェックリストにまとめます。この順に数値を埋めてから、Figmaなどでデザインに着手してください。

1. デザインカンバス幅を決めた（PC 1280または1440px）
2. ブレイクポイントを決めた（スマホ375／タブレット768／PC1024を基準に3〜4区分）
3. コンテンツ幅を決めた（1200px前後、本文は640〜760px）
4. カラム構成とガターを決めた（1／2／3カラムの幅・ガター）
5. 最小フォントサイズを決めた（本文16px以上、スマホ入力欄16px必須）
6. スペーシングスケールを決めた（8pxの倍数で統一）
7. 左右の余白を決めた（スマホ16〜24px／PC24〜40px）

ルール未決で起きるやりがちな失敗

最後に、ルールを決めずに進めたときに頻発する失敗を挙げておきます。心当たりがあれば、着手前のルール決めに立ち返ってください。

• カンバス幅だけ決めて満足する：1440pxで描いたが、コンテンツ幅やスマホ表示を決めておらず、実装で破綻する
• コンテンツ幅を青天井にする：大画面で本文が横いっぱいに広がり、1行が長すぎて読めない
• スマホの入力欄を14pxで作る：iOSでフォーカス時に自動ズームし、フォームの見た目が崩れる
• 余白をピクセル単位で都度調整する：13px・19pxなど中途半端な値が混在し、統一感が失われる
• ガターを決めずにカラムを並べる：カラム間の間隔がページごとに違い、グリッドが揃わない

デザインから実装、レスポンシブ対応までを一括で任せたい場合は、設計ルールの策定から対応してくれる制作チームに相談するのも手です。RINIAでは、デザインカンプから実装・レスポンシブ対応までまとめて依頼できます。

よくある質問

Q. デザインカンプの幅は何pxで作るべきですか？

PC向けは1280pxまたは1440pxで描くのが一般的です。そのうえで、中身を配置するコンテンツ幅を1200px前後に絞ります。スマホ用のカンプは375pxを基準にすると、多くの端末をカバーできます。

Q. コンテンツ幅とウィンドウ幅は何が違いますか？

ウィンドウ幅はブラウザの表示領域そのもの、コンテンツ幅はその中で中身を配置する最大幅です。背景や帯はウィンドウいっぱいに広げ、テキストやカードはコンテンツ幅（1200px前後）の中に収める二層構造が基本になります。

Q. 本文の最小フォントサイズはなぜ16pxなのですか？

16pxはブラウザの初期フォントサイズであり、可読性・アクセシビリティの観点から本文の標準とされているためです。16px未満は弱視の方や高齢者に読みにくく、健常者でも目が疲れやすくなります。本文はPC・スマホとも16px以上を基準にしましょう。

Q. スマホで入力欄をタップすると画面が拡大するのはなぜですか？

iOS Safariが、入力欄のフォントサイズが16px未満だと「小さすぎる」と判断し、フォーカス時に自動でズームするためです。入力欄（input・textarea・select）のフォントサイズを16px以上にすれば防げます。ズーム自体を禁止する方法はアクセシビリティ上、避けてください。

Q. 3カラムでメインとサイドの幅はどう決めればいいですか？

1200px幅なら、サイド200〜240px＋メイン600〜700px＋サイド200〜240px、ガター24pxが目安です。メインが狭くなりやすいので、先にメインに必要な幅を確保し、残りを両サイドへ割り振ると破綻しにくくなります。

Q. ブレイクポイントはいくつ用意すればいいですか？

基本は3〜4区分で十分です。スマホ（767px以下）・タブレット（768〜1023px）・PC（1024px以上）を基準に、必要なら大画面用（1440px以上）を1つ足す程度に留めると、管理が破綻しません。増やしすぎは保守の負担になります。

まとめ

デザインカンプは、ウィンドウ幅・コンテンツ幅・カラム構成・最小フォントサイズを先に決めてから着手することで、実装段階での手戻りを大きく減らせます。とくに、ウィンドウ幅（外側）とコンテンツ幅（内側）を分けること、1〜3カラムの汎用サイズを持っておくこと、そして本文・スマホ入力欄ともに16pxを下限にすることが要点です。

これらの数値は「正解が1つ」ではなく、サイトの性格に応じて調整するものです。ただし、調整する前提として、最初に基準値を決めておくことが何より重要です。本記事のチェックリストを土台に、自分の定番ルールを育てていってください。

関連記事

• グリッドレイアウト完全ガイド｜設計の基礎からCSS Grid実装
• Webデザインにおけるホワイトスペースの重要性と活用方法
• 色彩設計の基本｜Webデザインに役立つ配色理論とカラーパレット実装例
• Webデザインのためのフォント選び完全ガイド