CSSネイティブランダム関数が変える、コンポーネントの「個性」とWebの表現力
CSSにランダム関数がやってきた——「あいまいさ」を標準化する時代
2026年4月、Webプラットフォームのアップデートにて、CSSにネイティブのランダム関数が新たに加わった。これは単なる便利機能ではない。デザインシステムに内在する「個性」や「ゆらぎ」を、JSの力に頼らずCSSだけで表現できる時代の幕開けだ。開発者はコンポーネントの無機質な均一性から解放され、「見た目にリズム」を持たせる新しい手段を手に入れた。
ランダム関数の正体：CSSで使える3つの乱数生成
今回のアップデートで導入されたのは、random()、random-binary()、random-integer()の3つ。いずれもcalc()やclamp()と同様に、プロパティ値の中で直接呼び出せる。
random(min, max)：指定範囲の浮動小数点乱数を返すrandom-binary()：0または1の整数を等確率で返すrandom-integer(min, max)：指定範囲の整数乱数を返す
これらの関数は、要素のレンダリング時に一度だけ評価され、その後は固定値として扱われる。つまり、ページ遷移やリサイズで値が変わらない「擬似ランダム」として機能する。
なぜ今ランダム関数が標準化されたのか
背景には、デザインシステムの進化と「個別化」への需要がある。従来のデザインシステムは「一貫性」を重視しすぎた結果、UIが「工場で量産されたような無個性」に陥っていた。特にダッシュボードやカードUIは、全く同じ形のコンポーネントが並び、ユーザーに冷たい印象を与える。
そこでランダム関数は、同じコンポーネントでも「微妙な個性」を持たせる手段を提供する。例えば、カードの背景色を微妙に変えたり、アイコンの配置にゆらぎを持たせたりできる。これはUXの観点では「有機的な印象」を与え、ユーザーの親しみやすさを向上させる効果がある。
実装例：カードコンポーネントに個性を与える
例えば、商品一覧のカードにランダムな背景色をつける場合、従来はJSで計算してCSS変数を書き換える必要があった。しかし今はこう書ける：
.card {
--hue: random(0, 360);
background: hsl(var(--hue), 70%, 85%);
}これだけで、読み込むたびに異なる色味のカードが生成される。ただし、注意点としてランダム性が強すぎるとアクセシビリティに悪影響を及ぼすケースがある。重要なのはあくまでデザインの「スパイス」として使うこと。例えば、色相だけを振るのではなく、彩度や明度の範囲を絞り、全体の調和を保つ必要がある。
開発者視点の落とし穴：再現性とテストの課題
ここで重要なのが「ランダム値の再現性」だ。テスト環境では、ランダム関数は毎回異なる値を返すため、スクリーンショットテストやE2Eテストが不安定になる。この問題に対し、Web標準ではまだ明確な解決策が提示されていない。
現実的なアプローチとしては、開発時のみJSのMath.random()で上書きできる仕組みを用意するか、CSS変数のフォールバックとして固定値を設定する方法だ。例えば：
.card {
--hue: random(0, 360);
background: hsl(var(--hue, 200), 70%, 85%); /* フォールバック */
}このように、ランダム関数はあくまで「拡張」として扱い、必須ではない設計にしておくのが実務的だ。
次にくるもの：CSSによる「個性の設計」が当たり前に
ランダム関数の導入は、CSSの設計思想の転換点を示している。従来の「決定論的」なルールから、「確率的」なデザインへの移行だ。近い将来、コンポーネントライブラリでは「ランダム性の度合い」をテーマパラメータとして定義するようになるかもしれない。
さらに、Baselineがこの機能を「推奨」ステータスに格上げすれば、主要ブラウザ間での互換性が一気に高まる。2026年夏までには、プロダクションでの利用が現実的な選択肢になるだろう。
まとめ：CSSランダム関数が開く表現の扉
CSSネイティブのランダム関数は、デザインシステムに「あいまいさ」と「個性」を取り戻す強力なツールだ。ただし、使い方を誤るとUIの統一感やテスト容易性を損なう。適切な範囲の制限とフォールバック戦略を持って、新しい表現に挑戦してほしい。
参照
この記事を書いた人
理人と理子
ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！