px → vw → rem の設計思想とは？

レスポンシブ時代の“スケールするデザイン”の基礎

1. なぜ「px」は限界を迎えたのか？

かつて Web サイトは「幅 960px の世界」で成立していました。
しかし現在は 最小幅 360px、最大 2000px 以上まで広がっています。

px には次の弱点があります。

• 画面幅に合わせて自動で縮まらない
• 基準が“固定”のため、コンポーネントが巨大化または極小化しやすい
• デザイナーとコーダーで数値の誤差が生じやすい

これを解決するのが 相対単位（vw / rem）です。

2. vw を使う理由

画面に比例して伸び縮みする“流体デザイン”

vw（viewport width）は「画面幅 100% を 100vw とする相対単位」です。

たとえば
画面幅 1000px → 1vw = 10px
画面幅 390px → 1vw = 3.9px

つまり
vw を使えば、画面サイズに“比例”するブロックが簡単に作れる。

vwの使用に適した領域

• ヒーローエリアのタイトル
• セクションの余白（padding / margin）
• 大型アイキャッチ画像の高さ
• フル幅の背景レイアウト
• キャッチコピーや見出しなど、スケールしてほしい文字

特に近年のWeb デザイン（余白を大きく取り、可変させるスタイル）はvwを使うことで デザインの再現度が圧倒的に上がります。

3. rem を使う理由

“ユーザー設定”に安全に対応するための文字サイズ

remはhtml の font-size を基準にスケールする単位です。

一般的に
html { font-size: 62.5%; }
→ 1rem = 10px

とするケースが多いですが、最近はユーザーアクセシビリティの観点からhtmlには％を指定しないという潮流もあります。

rem が向いている領域

• 本文テキスト
• パーツ内の小さめの文字
• ボタンの文字サイズ
• 行間（line-height）
• モジュールの微細調整

つまり、vw（大きく動く）／rem（細かく調整）の住み分けが肝です。

4. px → vw → rem の三層構造が生むメリット

① レイアウト全体は vw で“伸縮する”

• デバイスに合わせて美しくスケール
• SP / PC コーディングの二重管理が大幅に軽減される

② コンポーネント内部は rem で“読みやすさを担保”

• ユーザーがブラウザ側で文字サイズを変更しても破綻しない
• JIS X 8341-3ではremが推奨される

③ 最後の微調整だけpxを使って OK

• 1px ボーダー
• 細線アイコンの位置調整
• ピクセル単位の微調整
  （px は“最後の手段に限定”するのが美しい設計）

5. 実際のプロジェクトでの設計例（SMILEWORKS式）

実務的な設計パターンを示します。

htmlの基準

html {
  font-size: 16px; /* 1rem = 16px 基準 */
}

アクセシビリティを重視。

大見出し（vw）

h1 {
  font-size: clamp(2rem, 6vw, 5rem);
}

• 小画面では最小値2rem、大画面では最大5rem
• 中間領域は自動スケール（6vw）

本文（rem）

p {
  font-size: 1rem;
  line-height: 1.8;
}

セクション余白（vw）

.section {
  padding: 10vw 0;
}

パーツ内部（rem）

.button {
  font-size: 0.875rem;
  padding: 0.6rem 1.2rem;
}

6. pxを使用禁止にする必要はない

px は「絶妙な固定」を作るための道具です。

• 1px ボーダーを必ず細線で描きたい
• アイコンサイズは24px固定にしたい
• マージンの細かいズレを2pxだけ調整したい

こういうケースではpxを使ったほうが調整がしやすいなど手段としてのpx使用に全く問題はありません。

結論：デザインは「伸縮の設計」が本質

px → vw → rem は、

• 可変（Fluid）
• アクセスしやすい（Accessible）
• 再利用しやすい（Reusable）
• メンテしやすい（Maintainable）

という、現代 Webに求められる4条件をすべて満たした設計です。
固定幅の概念に縛られず、“デザインがそのままスケールする” Webを作るなら、この三層設計は避けて通れません。