可変フォントサイズ（流体タイポグラフィ）って何？
一言で言うと、「画面幅に合わせて、文字サイズが自動でちょうどいい大きさに変化する」魔法のような実装方法です。
これまでのレスポンシブ対応は、
- スマホは14px
- タブレットは16px
- PCは20px
というように、カチカチと段階的に切り替えていました。
しかし、流体タイポグラフィ（clamp()）なら、「14pxから20pxの間を、画面幅に合わせて無段階に変化」させることができます。どのデバイスで見ても「文字がデカすぎる」「小さすぎる」という違和感がなくなります。
【コピペOK】これが魔法の1行！
計算式を考えるのは大変なので、まずはこのコードをCSSに貼り付けてみてください。
/* 360px〜1440pxの間で、16px〜24pxに可変させる場合 */
.fluid-text {
font-size: clamp(16px, calc(0.74vw + 13.33px), 24px);
}CodePenで動きを確認する
実際の挙動はこちらのデモで確認してください。右下の「0.5x」などを押したり、ブラウザの幅をグイグイ変えてみると、文字サイズが滑らかに変わるのがわかります！
See the Pen Untitled by あおき (@himlinfq-the-encoder) on CodePen.
なぜ「わざわざ計算」してこの数値にするのか？
「適当に font-size: 4vw; じゃダメなの？」と思うかもしれません。しかし、単純な vw 指定には大きな落とし穴があります。
理由①：最小値と最大値のガードがない
4vw だけだと、スマホで見ると豆粒のように小さくなり、超ワイドモニターで見ると巨大な文字になってしまいます。clamp() を使うことで、「どれだけ小さくても16px、大きくても24px」という絶対的な安心感が手に入ります。
理由②：デザインの意図を正確に再現するため
デザインデータ（Figmaなど）で「スマホ時は16px、PC時は24px」と決まっている場合、その2点をピッタリ結ぶ直線の方程式が必要です。
その「点と点を結ぶ計算」を自動化するために、今回私は Gem を作成しました。
- 傾き（α）: 画面が1px広がるときに、フォントを何px増やすか
- 切片（β）: 画面幅が0のときのベースサイズ
この2つを正しく計算することで、デザイナーの意図を100%再現したレスポンシブ実装が可能になります。
Geminiの「Gem」への指示（プロンプト）例
## Fmin、Fmaxを入力するので計算して出力
Wmin = 360px
Wmax = 1440px
Fmin = 〇〇px
Fmax = 〇〇px
α（vw）の計算（傾き）
α = (Fmax − Fmin) ÷ (Wmax − Wmin) × 100
β（px）の計算（切片）
β = Fmin − (Wmin × α ÷ 100)
font-size: clamp(Fmin, calc(αvw + βpx), Fmax);Gemの内部ロジック
このGemには、あらかじめ以下の計算式をインストラクション（指示文）として学習させています。そのため、数値を渡すだけで正確な「傾き」と「切片」を導き出せるようになっています。
使用方法
使い方はとても簡単です。
作成したGeminiの「Gem」に対して、「最小フォントサイズ」と「最大フォントサイズ」をカンマ区切りで送信するだけ。
すると、AIが即座に計算を行い、そのままコピペして使える clamp() 形式のCSSを出力してくれます。
実際のgeminiの画面
最小20px、最大30pxにしたい場合、AI（Gemini）に『20, 30』と伝えるだけです。
まとめ
今回は、CSSの clamp() 関数を用いた流体タイポグラフィの効率化についてご紹介しました。
一見すると複雑な一次関数の計算が必要な流体タイポグラフィですが、Geminiの「Gem」機能を活用して自分専用の計算ツールを作ることで、エンジニアの負担を劇的に減らすことができます。
AIチャットをツール化するメリット
正確さ： 面倒な傾き（α）や切片（β）の計算ミスがゼロになる。
柔軟性： 「やっぱりrem単位で出して」「メディアクエリ版も作って」といった要望にも即座に対応できる。
スピード： 数値を2つ投げるだけで、1秒後にはコピペ可能なCSSが手に入る。
フロントエンドの実装において、デザインを正確に再現することは非常に重要です。しかし、そのための「単純作業」に時間を奪われる必要はありません。
今回のようなAIの活用は、制作現場のデジタルトランスフォーメーション（DX）の第一歩でもあります。皆さんもぜひ、自分だけの「Gem」を作って、クリエイティブな実装に集中できる環境を整えてみてください！
