CSSのrandom()関数でつくる、不規則なデザイン表現

CSSのrandom()関数を使うと、CSSだけでランダムな値を扱えるようになります。random()関数は、Safari 26.2から利用できる新しい関数です。要素ごとのサイズや角度、アニメーションの開始タイミングなどに自然なばらつきを加えられます。

従来、同じような表現を実装するには、:nth-child()で値を個別に指定したり、sibling-index()関数で並び順から計算したり、JavaScriptのMath.random()で値を渡したりする必要がありました。random()関数を使えば、「角度は0〜1turn」「animation-delayは0〜600ms」のように、ばらつかせたい範囲をCSSへそのまま記述できます。

この記事では、random()関数を使ってどんな表現ができるのかを紹介します。

※注意：本記事のデモは、Safari 26.2以上でご覧ください。

random()関数の基本

random()関数は、指定した範囲からランダムな値を返します。CSSの値として記述するため、長さや角度、時間、割合など、プロパティに応じた単位をそのまま扱えます。

以下の例では、100pxから300pxまでの範囲から値が選ばれます。同じスタイルを複数の要素に適用した場合も、それぞれの要素で異なる値になります。

.box {
  width: random(100px, 300px);
}

第3引数には、値を選ぶ間隔を指定できます。

.box {
  width: random(100px, 300px, 50px);
}

この例では、選ばれる値は100px、150px、200px、250px、300pxのいずれかです。細かい連続値ではなく、一定の間隔でばらつかせたいときに便利です。

デモ1：いいねボタンをrandom()で作り直す

過去記事『UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ』で、ハートをクリックすると周囲へパーティクルが飛び出す「いいねボタン」の作り方を紹介しました。この表現をrandom()関数で作り直してみます。

パーティクルが毎回少し違う方向へ飛ぶようにすると、クリック時の演出に自然なばらつきが生まれます。今回のデモでは、粒子ごとに変えたい値をCSSのカスタムプロパティとして定義しています。

ランダムにしているのは、以下の値です。

飛ぶ方向
飛距離
アニメーションの再生時間
開始タイミング
色

.particle {
  /* 粒子の飛ぶ方向をランダムにする */
  --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);

    /* 色相・彩度・明度をランダムにして、毎回違う配色にする */
    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));
  }
}

random()で決まった値はその要素があるあいだ変わらないため、デモではJavaScriptで粒子の要素を作り直しています。

デモ1では、ばらつかせたい値をCSS上で分けて管理しています。「どの値をどの範囲でランダムにしているか」が読み取りやすくなりますね。

過去記事の実装コードと見比べてみてください。角度や移動先を計算していた部分をrandom()関数に置き換えることで、値の意図がCSSから読み取りやすくなりました。

デモ2：ホバーアニメーションのタイミングを文字ごとにランダムにする

ホバーしたときに、文字の色が文字ごとにずれたタイミングで変わる演出も、random()関数なら手軽に実装できます。文字ごとのanimation-delayをばらつかせることで、同じアニメーションでも自然なタイミングのずれを作れます。

デモ2では、ホバー時のanimation-delayにrandom()関数を指定しています。各文字に同じCSSを適用していても、文字ごとに異なる遅延時間が選ばれます。

.headline {
  &:hover {
    .char {
      /* 文字ごとに違う animation-delay を割り当てる */
      animation: flash 500ms ease random(0ms, 600ms);
    }
  }
}

@keyframes flash {
  50% {
    color: #7c71f6;
  }
}

デモ3：星空の位置・大きさ・またたきをランダムにする

星空のように、もともと不規則であるほうが自然に見える装飾では、random()関数がとくに効果的です。リロードするたびに、位置や大きさ、またたき方の違う星空を表示できます。

以下のコードでは、ひとつの.starクラスに対して、位置、大きさ、光の強さ、またたきの再生時間、開始タイミングを指定しています。

.sky {
  .star {
    position: absolute;
    /* 位置・大きさ・発光の強さを星ごとに変える */
    left: random(2%, 98%);
    top: random(3%, 96%);
    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;
    animation: twinkle random(600ms, 1.8s) ease-in-out
      random(-1.8s, 0s) infinite alternate;
  }
}

@keyframes twinkle {
  to {
    opacity: 1;
    transform: scale(2.1);
  }
}

`random()`関数はどんな場面で使うとよい？

random()関数は、情報そのものではなく、見た目の揺らぎを作る場面に向いています。たとえば、背景に散る紙吹雪や花びら、泡、粒子、動物の足跡など、同じ形が規則正しく並ぶと不自然に見える装飾です。

装飾や演出では、次のような値を少しずつ変えると自然な印象を作れます。

位置
角度
サイズ
透明度
移動距離
アニメーションの再生時間
アニメーションの開始タイミング

一方で、読む順番や操作のしやすさに関わる値へ使うと、ユーザーが内容を理解しにくくなる場合があります。たとえば、記事一覧の並び順が毎回変わると、目的の記事を探しにくくなります。本文やメイン画像のサイズが変わると、行の折り返しや余白が安定せず、読みづらさにつながります。購入、送信、削除のような重要な操作に関わるボタンの位置や色も、ランダムに変えるべきではありません。ユーザーが操作対象を見つけにくくなったり、誤操作につながったりするためです。