SCSSのランダム関数を用いてテーマカラーをランダムに生成したい

概要

SCSSにrandom()という関数があり、CSSにコンパイルした時にランダムな値が数値されます。
ランダム値の生成のタイミングは、ブラウザリロードではなくCSSコンパイル時です。
今回は、ランダム関数を使用しWEBページのテーマカラーをランダムに生成していきたい思います。

random関数の使い方（基本編）

第一引数が指定されていない場合は、0~1のランダムな少数を返します。

div {
  width: random() + px;
}

第一引数が指定されている場合は、1から指定した整数までのランダムな自然数を返します。

div {
  width: random(100) + px;
}

実際にコンパイルを何度か行うと、ランダムに値が設定されています。

random関数の使い方（応用編）

第一引数が指定していない場合に、0~1のランダムな値を0~100%に変換

div {
  width: percentage(random());
}

第一引数が指定されている場合は、1から指定した整数までの範囲しか指定できません。
「0を含めたい場合」「100～255までの範囲を指定したい場合」はいかのように指定できます。

// 0~10の範囲を指定する
div {
  width: random(11)-1 + px;
}

// 100~255の範囲を指定する
div {
  width: random(156)+99 + px;
}

テーマカラーをランダムに生成する

Webサイトのテーマカラーとなる背景色をランダム関数を使用し生成しました。

//テーマカラー
$ThemeBgColorR: random(256)-1;
$ThemeBgColorG: random(256)-1;
$ThemeBgColorB: random(256)-1;

//画面の要素
.header {
    background-color: rgb($ThemeBgColorR, $ThemeBgColorG, $ThemeBgColorB);
}
.footer {
    background-color: rgb($ThemeBgColorR, $ThemeBgColorG, $ThemeBgColorB);
}

色によっては文字がつぶれてしまったり、原色に近い色て見にくくなる問題が発生してしまいました。

調整する

問題点に対して、解決できるように調整を行いました。

• 文字がつぶれないように、背景色より薄い色を指定
• 原色に近くならないように、ランダム値の範囲の指定

//テーマカラー
//100~220の範囲を指定
$ThemeBgColorR: random(121)+99;
$ThemeBgColorG: random(121)+99;
$ThemeBgColorB: random(121)+99;

//テーマカラーより+100の範囲を指定。255を超えた場合は255になる。
$ThemeColorR: $ThemeColorR + 100;
$ThemeColorG: $ThemeColorG + 100;
$ThemeColorB: $ThemeColorB + 100;

//画面の要素
.header {
    background-color: rgb($ThemeBgColorR, $ThemeBgColorG, $ThemeBgColorB);
    color: rgb($ThemeColorR,$ThemeColorG,$ThemeColorB);
}
.footer {
    background-color: rgb($ThemeBgColorR, $ThemeBgColorG, $ThemeBgColorB);
}

以下のように、マテリアルデザインっぽくなり、だいぶ良くなりました。

問題点

テーマカラーをランダムに生成してしまうとUI/UXの観点で問題があります。
「緑色の技術系の記事掲載サイト」「黒色のソフトウェア開発のプラットフォーム」「水色のSNS」と表現しても伝わるように、色というのは印象に影響を与える重要な要素のひとつです。そのため、閲覧するたびに色が変わってしまうと、覚えて貰えられなかったり、別のサイトと勘違いされてしまうため注意が必要です。

まとめ

今回は、SCSSのランダム関数を用いてテーマカラーをランダムに生成することができました。
UI/UXにおいては問題はありますが、「行くたびに色が変わるWEBサイト」というポリシーのサイトだと、問題点もプラスに働く場合があると思います。

SCSSのランダム値が使えるのが色だけではないので、面白いアイディアや使い方がありましたら教えていただきたいです。

以上です。ここまで見て頂きありがとうございました。