流動サイズ

定義

流動サイズとは、画面幅が変わったときに文字サイズや余白などの値が、階段のように 段差で切り替わるのではなく、スロープのようになめらかにつながって変化する仕組みです。 ブレイクポイントが決まった地点でレイアウトをまるごと入れ替えるのに対して、流動サイズは その地点と地点のあいだの区間を、水が流れるように埋めてくれます。代表的な道具が CSSのclamp関数で、最小値と最大値のあいだで画面幅に比例した値を自動で計算します。 おかげで、一つの見出しが狭い画面ではほどよく小さく、広い画面では気持ちよく大きくなるように、 途中の段階をいちいち指定しなくても自然につなげられます。

なぜ重要か

ブレイクポイントだけを使うと、境界をまたいだ瞬間に文字や余白が急に大きくなったり 小さくなったりして、視線が揺さぶられます。とくに境界の直前・直後の中途半端な幅では 値が半端に残り、画面がすかすかに見えたり、逆に窮屈に見えたりしがちです。流動サイズは この中間の区間まで漏れなく面倒を見るので、どんな幅でも比率が崩れない画面をつくれます。 さらに幅に合わせて値が自動で調整されるため、境界ごとに別々の値を繰り返し書く手間が減り、 コードが短くなって保守もぐっと軽くなります。ユーザーから見れば、画面サイズに関係なく 見出しと本文、余白のバランスがいつも同じように保たれるので、どの端末で開いても ていねいに仕上げられた画面だという印象を受けます。このなめらかさは小さくても 積み重なり、サービス全体の完成度への信頼につながっていきます。

よくある間違い

• 最小値と最大値を決めずに、画面幅に完全に比例する値だけを使ってしまうことです。 上限がないと大きなモニターで見出しが巨大になりすぎ、下限がないと小さな画面で 文字が読めないほど縮んでしまいます。clampの両端の値は必ず指定してください。
• 本文の文字まで無理に流動にしてしまうことです。読みやすい本文サイズの幅は狭いので、 流動の幅を広く取ると、かえってある幅では小さくなりすぎて読みにくくなります。 見出しや余白のように変化の幅が大きい値から先に適用するほうが安全です。
• 中央の流動値を目分量だけで決めて、実際の画面で確認しないことです。計算上は それらしく見えても、特定の幅で値が最小値に張りついたままだったり、早く最大値に 届いてしまったりします。幅を広く狭く変えながら、変化を自分の目で確かめましょう。

実務のヒント

• clampの三つの値は最小・流動値・最大の順で入れ、まず最小値と最大値を決めて、 小さくなりすぎる範囲と大きくなりすぎる範囲をしっかり止めましょう。安全な上限と下限を 押さえておけば、真ん中の流動値が多少大胆でも画面は崩れません。
• 流動サイズとブレイクポイントは競合ではなく相棒です。レイアウトの大きな枠は ブレイクポイントで切り替え、その中の文字と余白を流動サイズで整えると、二つの 手法の長所が重なって、あらゆる幅でなめらかな画面になります。
• 流動値にビューポート単位だけを使うより、固定サイズと画面比例分を組み合わせて 足すと、変化がぐっと安定します。こうするとごく狭い画面でも値が急に崩れず、 幅に応じてゆるやかにつながる曲線が得られます。

関連概念