WebサイトのUIやアニメーションを制作する際、「自然なゆらぎ」や「規則性のないばらつき」を持たせたい場面は数多く存在します。例えば、クリック時に飛び散るパーティクル演出、星空の瞬き、文字が1文字ずつ時間差で光るホバーエフェクト、紙吹雪が舞う背景など、整然としすぎない不規則さこそが、ユーザーの目を引きつける心地よいリアリズムを生み出します。
しかし従来のWeb制作において、こうしたランダムな表現を実装するには、JavaScriptの Math.random() を使って動的にインラインスタイルを付与したり、CSSの :nth-child() 疑似クラスを何十行も泥臭く書き連ねたり、Sassなどのプリプロセッサで乱数を無理やりシミュレートしたりする必要がありました。
そんな長年の課題を劇的に解決する注目の新機能が、CSS標準のrandom() 関数です！
JavaScriptを一切介さず、CSSのプロパティ内に直接「最小値」と「最大値」を記述するだけで、要素ごとに異なるランダムな値を自動適用できる夢のような仕様。Safari 26.2から利用可能となり、フロントエンド業界で大きな話題を呼んでいます。
本記事では、CSSの random() 関数の基本的な文法・仕様から、実務で使える3つの実践UIデモ（いいねボタン・文字ホバー・星空背景）、効果的な活用シーンと避けるべき注意点、対応ブラウザ状況まで、フロントエンドエンジニア向けに余すところなく徹底解説します！
1. CSSのrandom()関数とは？基本文法と使い方
random() 関数は、指定した範囲の中からランダムな数値をブラウザが自動的に選択して返してくれる新しいCSS関数です。
最大の特徴は、「CSSのプロパティに応じた単位（px、rem、%、deg、turn、ms、sなど）をそのまま扱える」という点にあります。JavaScriptのように「乱数を生成してから文字列結合で単位を付ける」といった煩雑な処理は一切不要です。
基本構文：最小値と最大値の指定
最もシンプルな使い方は、第1引数に「最小値」、第2引数に「最大値」を指定する形式です。
.box {
/* 100px 〜 300px の範囲から要素ごとに異なる幅が選ばれる */
width: random(100px, 300px);
}同じクラス名を持つ要素がHTML内に複数存在する場合、それぞれの要素に対して個別にランダムな値が割り振られます。
ステップ（間隔）の指定：第3引数の活用
random() 関数は、第3引数として「値を選ぶ間隔（ステップ）」を指定することも可能です。
.box {
/* 100pxから300pxの間で、50px刻み（100px, 150px, 200px, 250px, 300px）の値から選ばれる */
width: random(100px, 300px, 50px);
}無段階の連続値ではなく、デザインシステムに沿ったキリの良い数値でばらつかせたい場合や、一定のリズムを持たせたい場合に極めて強力な機能です。
2. 実践デモで学ぶ！random()関数を活用した3つの表現
ここからは、実務のWeb制作やマイクロインタラクションに応用できる3つの具体的なUIデモを取り上げ、コードの解説とともに紹介します。
デモ1：いいねボタンの飛び散るパーティクル演出
SNSの「いいね」ボタンをクリックした際、ハートの周囲から無数の粒子（パーティクル）が弾ける演出。これを random() 関数を使って再構築します。粒子ごとに「飛ぶ方向」「飛距離」「アニメーション速度」「色」をランダムにばらつかせることで、極めて自然な破裂アニメーションが完成します。
.particle {
/* 粒子の飛ぶ角度を 0〜1turn（360度）の全方向へランダムにする */
--particle-angle: random(0turn, 1turn);
transform: rotate(var(--particle-angle));
circle {
--particle-distance: random(220px, 290px);
--particle-duration: random(1200ms, 1800ms);
--particle-delay: random(0ms, 160ms);
/* 色相（Hue）をランダムにして、粒子ごとに異なるポップな配色を実現 */
fill: hsl(
random(145deg, 335deg)
random(55%, 85%)
random(68%, 82%)
);
}
}
.is-playing .particle circle {
/* 再生時間と遅延時間を粒子ごとに割り当て */
animation: particle var(--particle-duration) ease-out var(--particle-delay) forwards;
}
@keyframes particle {
0%, 25% {
opacity: 0;
transform: translateX(130px);
}
30%, 85% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateX(var(--particle-distance));
}
}実装のポイント：
CSSカスタムプロパティ（変数）と random() を組み合わせることで、「どのプロパティをどの範囲で散らしているのか」が一目で理解できるメンテナンス性の高いコードになります。なお、random() で一度決定された値はその要素が存在する間は固定されるため、クリックごとに再抽選したい場合はJavaScript側で要素を再生成（または再マウント）するのが定石です。
デモ2：文字ごとにホバータイミングがずれるテキスト演出
見出しテキストにマウスホバーした際、全文字が一斉に光るのではなく、文字ごとにバラバラのタイミングでキラキラと輝くウェーブ演出です。animation-delay（遅延時間）に乱数を適用します。
.headline {
&:hover {
.char {
/* 文字ごとに 0ms〜600ms の異なる遅延時間をランダムに付与 */
animation: flash 500ms ease random(0ms, 600ms);
}
}
}
@keyframes flash {
50% {
color: #7c71f6;
}
}実装のポイント：
HTML側で1文字ずつ span.char などでラップしておく必要がありますが、CSS側では :nth-child(1) や :nth-child(2) といった膨大な個別指定が一切不要になります。たった数行の記述で、有機的でリッチなマイクロインタラクションが成立します。
デモ3：瞬く星空の背景（位置・サイズ・点滅のランダム化）
自然界の風景のように、そもそも「均一に並んでいると不自然に見える」装飾において、random() 関数は真価を発揮します。リロードするたびに星の配置やまたたき方が変わるダイナミックな星空背景の実装です。
.sky {
.star {
position: absolute;
/* 画面全体（X/Y軸）にランダムに散らす */
left: random(2%, 98%);
top: random(3%, 96%);
/* 星の大きさ・光彩（box-shadow）の強さをランダム化 */
width: random(2px, 7px);
aspect-ratio: 1;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 random(8px, 28px) rgb(184 176 255 / 95%);
opacity: 0.18;
/* またたきの周期（0.6s〜1.8s）と開始タイミング（マイナスディレイ）をバラバラにする */
animation: twinkle random(600ms, 1.8s) ease-in-out random(-1.8s, 0s) infinite alternate;
}
}
@keyframes twinkle {
to {
opacity: 1;
transform: scale(2.1);
}
}実装のポイント：
animation-delay に負の値（random(-1.8s, 0s)）を指定しているのがテクニカルなポイントです。これにより、「ページを読み込んだ瞬間に、すでに全員が途中までアニメーションを再生している状態」を作ることができ、開始のタイミングが揃ってしまう不自然さを完全に排除できます。
3. random()関数はどんな場面で使うべきか？
何でもかんでもランダムにすれば良いというわけではありません。UX（ユーザー体験）を損なわないための「使いどころ」を見極めることが肝要です。
| 活用すべき場面（推奨） | 避けるべき場面（非推奨） |
|---|---|
| 視覚的な装飾・ゆらぎ （背景の花びら、紙吹雪、気泡、パーティクル、星空など） |
情報構造・可読性に関わる部分 （記事一覧の並び順、本文の文字サイズ、コンテナの幅など） |
| マイクロインタラクションの遅延 （文字ホバーのキラキラ感、アイコンのアニメーション開始ズレ） |
重要なアクション要素・UIコントロール （購入ボタン、送信フォーム、削除リンクの位置や色） |
| 手書き風・アナログ感の演出 （微妙な回転角度のズレ、線の太さや透過度のわずかなばらつき） |
アクセシビリティを損なう配色 （コントラスト比がランダムに低下して文字が読めなくなる指定） |
原則として、**「情報の意味そのもの」ではなく「装飾のゆらぎ」に限定して適用する**ことが鉄則です。購入ボタンの位置や色が毎回ランダムに変わってしまえば、ユーザーは混乱し、重大な誤操作やコンバージョンの低下を引き起こしてしまいます。
4. 対応ブラウザと今後の展望
2026年秋現在、CSSの random() 関数は Safari 26.2以上 で先行してサポートされています。
現時点では「Limited availability（限定的な利用環境）」というステータスであり、Google Chrome（Chromium系）やFirefoxなどの主要ブラウザではまだ標準機能（Baseline）としては定着していません。したがって、プロダクション環境のクリティカルな商用サイトへ今すぐ全面投入するのは時期尚早と言えます。
実務での取り入れ方（プログレッシブ・エンハンスメント）
現段階で実務に取り入れる場合は、CSSの @supports ルールを活用し、「対応ブラウザではリッチなランダム表現を提供し、非対応ブラウザでは均一なデフォルトスタイルにフォールバックさせる」というプログレッシブ・エンハンスメントのアプローチが最適です。
.star {
/* 非対応ブラウザ用のフォールバック */
width: 4px;
animation-duration: 1.2s;
}
@supports (width: random(1px, 2px)) {
.star {
/* Safari 26.2+ などの対応環境でのみランダム化 */
width: random(2px, 7px);
animation-duration: random(600ms, 1.8s);
}
}ブラウザ各社による実装が進み、Baselineとして全ブラウザで利用可能になれば、Webデザインにおけるアニメーションや装飾のワークフローは劇的にシンプルかつ軽量なものへと刷新されるでしょう。
5. まとめ：CSSだけで表現できる世界の広がりを楽しもう
本記事では、CSSの新機能 random() 関数の仕様と実践的な活用法について解説しました。
random(最小値, 最大値, [ステップ])のシンプルな構文で、CSSネイティブな乱数を扱える。- 単位（px, deg, turn, msなど）をそのまま扱え、カスタムプロパティとの相性も抜群。
- パーティクル、文字アニメーション、星空背景など、自然なゆらぎを数行のコードで実現可能。
- UIの操作性や可読性を損なわないよう、装飾やマイクロインタラクションに限定して活用する。
- 現時点ではSafari 26.2+先行サポートのため、フォールバックを意識した実装が推奨される。
かつてはJavaScriptを駆使して重い計算を回していた表現が、ブラウザの進化によってCSSだけで驚くほどスマートに実装できるようになってきています。最新技術をいち早くキャッチアップし、次世代の軽快でリッチなWebデザイン制作に備えておきましょう！
OFFICETAKECでは、CSSの最新機能を駆使したモダンなフロントエンド実装、React/Next.js環境でのリッチなUIアニメーション構築、そして高速かつ安全なWordPressのサーバー移行や保守管理までトータルでサポートしております。Web制作やシステム改修でお困りの際はお気軽にお問い合わせください。
👉 Webサイト制作・システム改修のご相談はこちら（お問い合わせフォームへ）
