Arganoの麻生です。
今回は、clamp() の第2引数（推奨値）のブレイクポイントに基づいた設定方法とそのメリットについて共有します。
clamp()とは
clamp()とは要素のサイズを3つの引数（最小値、推奨値※、最大値）で指定することでメディアクエリなしで画面幅に応じて自動的にサイズを変化させる機能です。
※推奨値には%やvwのような可変単位を使う必要があります。
推奨値（Preferred value）の役割
clamp(最小値, 推奨値, 最大値) において、推奨値は「通常時に参照される値」です。画面幅（vw）に連動させることで、ブラウザの画面幅に応じてシームレスにサイズを変化させることができます。
主な対象
現在は、テキストだけでなくレイアウトのほぼ全てにclampを使用しています。
- 文字サイズ: 見出しなどの大きな文字（目安1.5〜2em以上）
- 余白: セクション間や左右の padding や margin
- コンポーネント単位: 画面幅に応じて可変させたい要素の幅や高さ
感覚から計算へ
以前：2vw などの「適当な指定」
「画面を縮めた時に、なんとなく途中で最小値に切り替わればいいかな」という程度の認識でした。これでは、特定のデバイス（タブレットなど）で意図せず小さくなりすぎたり、逆に縮小が遅すぎたりといった問題がありました。
現在：文字サイズ / 画面幅 による「意図的な指定」
「どの画面幅のときに、そのサイズであってほしいか」という基準点から逆算します。
考え方: (ターゲットとする文字サイズ / 基準の画面幅) * 100
例: 1280pxの画面で 40px にしたい場合
- 計算：
(40 / 1280) * 100 = 3.125 - 指定：
clamp(24px, 3.125vw, 40px)
このように設定することで、狙ったタイミングで縮小を開始させ、デザインの崩れを防ぐことができます。
縮小開始の基準
計算の基準となるブレイクポイントは、デザインやコンテンツの重要度に応じて、以下の基準値を使い分けます。
| 基準幅 | 対象・シーン |
|---|---|
| 1920px | 大画面デスクトップ。ゆったりした配置の基準。 |
| 1200〜1400px | インナー（コンテナ）サイズ。コンテンツが詰まり始める起点。 |
| 1280px | ノートPCの標準。ここを起点に縮小を始めることが多い。 |
| 960px | 画面分割（1/2）時。タブレットへ移行する前の重要な境界。 |
| 768px | タブレット（iPad等）の縦持ち基準。 |
| 640px | 画面分割（1/3）時。スマホ表示への切り替え検討ライン。 |
| 480px | 画面分割（1/4）時。スマホ横持ちや、大型スマホの基準。 |
なぜ意図的にする必要があるのか
予測可能性の向上
どのデバイスで見ても「デザイナーの意図」に近い比率が保たれます。
再現性の担保
「もう少し早く小さくしたい」場合に、基準とする画面幅（分母）を調整するだけで論理的に修正が可能です。
チーム開発での共通言語
「なぜその数値なのか」を算術的に説明できるため、レビューや引き継ぎがスムーズになります。
メディアクエリより詳細な制御
推奨値の間は画面幅に応じて大きさが可変するため、メディアクエリで段階的に切り替えるよりも、滑らかで細かいサイズ調整が可能です。
※全体での統一が必要
一部の要素にだけ clamp() を適用すると、その要素だけがある画面幅から相対的に小さくなってしまい、全体のバランスが崩れる原因になります。デザインの一貫性を保つため、見出しや余白などは全体的に clamp() で制御するのが理想的です。
まとめ
clamp() は非常に便利な関数ですが、その肝は「推奨値」にあります。
感覚的な vw 指定を卒業し、プロジェクトごとのブレイクポイントに基づいた数値を算出することで、より意図的で美しいレスポンシブ実装を目指しましょう。