CreaTools LogoCreaTools
Tech Notes
Clamp Generator

clamp()の実務活用パターン集｜私が使う要素、使わない要素

2025-11-12

:::note ※clampの実務パターンを知りたい人向けの「実装ガイド」記事です :::

結論（私の判断基準）

clampを使う要素：見出し、セクション余白、カード間ギャップ

clampを使わない要素：本文、ボーダー、小さなアイコン、フォーム

「変化させる意味があるか」を考えてから使う。全部に使うと複雑になるだけ。

🚀 値を計算 → Clamp Generator

私がclampを使う要素

セクション余白（最もよく使う）

.section {
  padding-block: clamp(3rem, 8vw, 6rem);
}

スマホでは48px程度、PCでは96px程度。画面サイズに応じて自動調整。

セクション余白は画面サイズで変えた方がいい。これは間違いない。

見出し（h1, h2）

h1 {
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
}

見出しは大きい画面ではインパクトが欲しい。小さい画面ではコンパクトに。

カード間ギャップ

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}

カード間隔が16px〜32pxの間で変化。

ボタンのパディング（控えめに）

.button {
  padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1.5rem, 4vw, 2.5rem);
}

大きいCTAボタンには使う。通常のボタンは固定値。

私がclampを使わない要素

本文のフォントサイズ

/* ❌ 使わない */
p { font-size: clamp(14px, 1vw + 0.5rem, 18px); }

/* ✅ 固定値 */
p { font-size: 1rem; }

本文は可読性優先。16px固定で問題ない。変化させても読みやすくなるわけではない。

ボーダー幅

/* ❌ 意味がない */
border: clamp(1px, 0.1vw, 2px) solid;

/* ✅ 固定値 */
border: 1px solid;

1pxは1pxでいい。

小さなアイコン

/* ❌ 複雑になるだけ */
.icon { width: clamp(16px, 2vw, 24px); }

/* ✅ 固定値 */
.icon { width: 1rem; }

16pxのアイコンを20pxにしても、ユーザー体験は変わらない。

フォーム入力欄

/* ❌ 使いにくくなる */
input { height: clamp(2rem, 5vw, 3rem); }

/* ✅ 固定値 */
input { height: 2.5rem; }

フォームは使いやすさ優先。変化させると混乱する。

コンテナ幅は min() で十分

.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

狭い画面では左右1remの余白、広い画面では1200pxで止まる。

clampではなくmin()で十分なケースも多い。

変数化して再利用

:root {
  --text-lg: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --space-section: clamp(3rem, 8vw, 6rem);
  --space-card: clamp(1rem, 3vw, 2rem);
}

一度定義すればサイト全体で一貫したスケーリング。

私はこの3つだけ定義している。これ以上増やすと管理が面倒。

避けるべきパターン

傾斜が急すぎる

/* ❌ 差が大きすぎる */
font-size: clamp(12px, 5vw, 48px);

/* ✅ 適度な差 */
font-size: clamp(16px, 2vw + 0.5rem, 24px);

最小と最大の差が大きすぎると、中間サイズで急に変化して違和感が出る。

迷ったときの判断

迷い私の判断
clampを使うか変化させる意味があるなら使う
どの要素に使うか見出し、余白、ギャップ
本文に使うか使わない。固定値
傾斜をどうするか最小と最大の差は2倍程度まで

この記事で解決しない場合

clampは「便利だから全部に使う」ではない。「変化させる意味がある要素だけ」に使う。