【jQuery】ランダムな背景色・背景画像を設定する完全ガイド｜Math.random・グラデーション・セッション固定・フェード切り替えまで

アクセスするたびに背景が変わるWebページはユーザーに新鮮な印象を与えます。jQueryと Math.random() を組み合わせると、完全ランダムな背景色・事前定義した色セットからの選択・グラデーション・背景画像のランダム表示などさまざまなパターンが実現できます。

ランダムな背景色を設定する

完全ランダムな16進数カラーコードを生成する

$(function () {
  // 0〜16777215（#000000〜#ffffff）のランダムな整数を生成
  var r = Math.floor(Math.random() * 16777216);
  // 16進数に変換し、6桁になるよう先頭を0埋め
  var hex = '#' + r.toString(16).padStart(6, '0');

  $('body').css('background-color', hex);
  console.log('背景色:', hex);
});

HSL形式で明度・彩度を制限したランダム色

$(function () {
  // 色相(H): 0〜360 全範囲
  // 彩度(S): 50〜80% （鮮やかさを保つ）
  // 明度(L): 60〜80% （明るすぎず暗すぎない）
  var h = Math.floor(Math.random() * 360);
  var s = Math.floor(Math.random() * 31) + 50;  // 50〜80
  var l = Math.floor(Math.random() * 21) + 60;  // 60〜80
  var hsl = 'hsl(' + h + ', ' + s + '%, ' + l + '%)';

  $('body').css('background-color', hsl);
});

事前定義した色テーマからランダムに選ぶ

デザインの統一感を保ちながらランダム性を出したい場合は、ブランドカラーやシーズンカラーなどの色セットを配列で定義して選択します。

$(function () {
  // テーマカラーを事前定義
  var themes = [
    { bg: '#dbeafe', text: '#1e40af', name: '青テーマ' },
    { bg: '#dcfce7', text: '#166534', name: '緑テーマ' },
    { bg: '#fce7f3', text: '#9d174d', name: 'ピンクテーマ' },
    { bg: '#fef3c7', text: '#92400e', name: '黄テーマ' },
    { bg: '#f3e8ff', text: '#6b21a8', name: '紫テーマ' }
  ];

  // ランダムに1つ選択
  var theme = themes[Math.floor(Math.random() * themes.length)];

  $('body').css({
    'background-color': theme.bg,
    'color':            theme.text
  });

  console.log('選択されたテーマ:', theme.name);
});

ランダムなグラデーション背景を生成する

2色のランダムなHSL色を組み合わせてグラデーション背景を生成します。隣接する色相を使うことで自然な配色になります。

$(function () {
  function randomGradient() {
    // ベースとなる色相をランダムに選ぶ
    var h1 = Math.floor(Math.random() * 360);
    // 60〜120度ずれた色相で配色（補色・類似色）
    var h2 = (h1 + Math.floor(Math.random() * 61) + 60) % 360;

    var color1 = 'hsl(' + h1 + ', 70%, 75%)';
    var color2 = 'hsl(' + h2 + ', 70%, 55%)';

    // グラデーション方向もランダムに（0〜360度）
    var angle = Math.floor(Math.random() * 361);

    return 'linear-gradient(' + angle + 'deg, ' + color1 + ', ' + color2 + ')';
  }

  $('body').css('background', randomGradient());
});

背景画像をランダムに設定する

事前に用意した画像リストからランダムに1枚を選んで背景に設定します。画像の事前読み込みを行うと切り替え時のちらつきを防げます。

$(function () {
  var images = [
    '/images/bg1.jpg',
    '/images/bg2.jpg',
    '/images/bg3.jpg',
    '/images/bg4.jpg'
  ];

  // ランダムに1枚選ぶ
  var chosen = images[Math.floor(Math.random() * images.length)];

  // 背景画像を設定（事前読み込みしてからフェードイン）
  var img = new Image();
  img.onload = function () {
    $('body').css({
      'background-image':    'url(' + chosen + ')',
      'background-size':     'cover',
      'background-position': 'center'
    });
  };
  img.src = chosen;  // 読み込み開始
});

sessionStorageでセッション内は同じ背景を保持する

毎回異なる背景では、ページ内リンクを移動するたびに背景が変わってしまいます。sessionStorage に選んだ値を保存することで、同じブラウザタブ（セッション）内では同じ背景を維持できます。

$(function () {
  var themes = ['#dbeafe', '#dcfce7', '#fce7f3', '#fef3c7', '#f3e8ff'];
  var KEY = 'bg_theme';

  // sessionStorageから取得、なければランダムに選んで保存
  var saved = sessionStorage.getItem(KEY);
  if (!saved) {
    saved = themes[Math.floor(Math.random() * themes.length)];
    sessionStorage.setItem(KEY, saved);
  }

  $('body').css('background-color', saved);
});

フェードアニメーション付きで切り替える

背景が瞬時に変わると視覚的に唐突な印象を与えます。フェードアニメーションを加えることで滑らかに切り替わります。

$(function () {
  var themes = [
    { bg: '#dbeafe', text: '#1e40af' },
    { bg: '#dcfce7', text: '#166534' },
    { bg: '#fce7f3', text: '#9d174d' },
    { bg: '#fef3c7', text: '#92400e' }
  ];

  var theme = themes[Math.floor(Math.random() * themes.length)];

  // フェードアウト → 背景色変更 → フェードイン
  $('body').fadeTo(0, 0, function () {         // 即座に透明に
    $(this).css('background-color', theme.bg)
           .css('color', theme.text)
           .fadeTo(600, 1);                    // 600msでフェードイン
  });
});

ボタンクリックで動的にランダム変更する

ページ読み込み時だけでなく、ボタンクリックで何度でもランダムに背景を変えるパターンです。クリエイティブなポートフォリオやゲームなどで活用できます。

<button id="randomize-btn">背景をランダムに変更</button>

$(function () {
  var themes = [
    '#dbeafe', '#dcfce7', '#fce7f3', '#fef3c7',
    '#f3e8ff', '#ffedd5', '#f0fdf4', '#eff6ff'
  ];
  var lastIndex = -1;  // 直前と同じ色が連続しないようにする

  function randomize() {
    var index;
    do {
      index = Math.floor(Math.random() * themes.length);
    } while (index === lastIndex && themes.length > 1);  // 直前と違う色を選ぶ
    lastIndex = index;

    $('body').animate({ opacity: 0 }, 200, function () {
      $(this).css('background-color', themes[index])
             .animate({ opacity: 1 }, 300);
    });
  }

  randomize();  // 初期実行
  $('#randomize-btn').on('click', randomize);
});

方法の比較と使い分け

まとめ

ランダムな背景設定には、デザインの制御度に応じて方法を選ぶのがポイントです。

• 完全ランダムな色は Math.random() + 16進数変換、またはHSL形式で明度範囲を制限する
• デザインの統一感を保つにはテーマカラー配列から選択する
• セッション内で同じ背景を維持するには sessionStorage で保存
• 視覚的な滑らかさのために fadeTo()/animate() でフェードを加える

関連記事: ランダムで要素を表示する完全ガイド / sessionStorage・localStorage・Cookieの比較 / アニメーション完全ガイド

よくある質問（FAQ）