ルーレットの使い方

本ガイドは Spin and Wheel ランダム名前ピッカーで利用できる17のユーザー向け操作をすべて解説します。HTML5 Canvas 上にエントリごとに均等な弧を割り当てるブラウザ完結型のツールで、選択確率は 1/N です。3ステップのクイックスタートに加え、メインルーレットの各ボタン・トグル・キーボードショートカットの詳細リファレンスを掲載しています。

ルーレットを開く

クイックスタート

  1. エントリを追加

    エントリ欄に1行1項目でリストを入力または貼り付けます。名前、選択肢、タスク、賞品など、ランダムに選びたいものなら何でも。エントリ数の上限は基本的にブラウザの localStorage 容量(オリジンあたり約 5 MB)のみです。

  2. ルーレットを回す

    ルーレット下のボタン、またはルーレット本体をクリックします。回転時間は標準で3.5秒(「カスタマイズ」で2〜15秒)で、確率1/Nでランダムな項目に止まります。止まる位置はブラウザの暗号論的に安全な乱数生成器で決まるため、ルーレット上のどこにあってもすべての項目の確率は同じです。

  3. 結果を活用する

    当選者がモーダルに表示されます。再スピン、当選者をリストから削除、モーダルを閉じる、のいずれも可能です。当選者は「Winners」タブに自動的に記録されます。

利用できるすべての操作

エントリ編集

エントリ欄

エントリ欄はルーレットが選ぶ対象のリストです。1行1エントリで、空でない行数を示すライブカウンタ付き。各エントリはルーレットの 360°/N の弧を占めるため、文字数や位置に関係なく選択確率は厳密に 1/N となります。エントリ数の上限は基本的にブラウザの localStorage 容量(オリジンあたり約 5 MB)のみです。

ヒント:表計算ソフトの列を貼り付けると一括追加できます。

シャッフル

エントリ欄の項目をランダムに並べ替えます。スピンごとにルーレット上の隣接関係を変えたい時や、整列されたリストの並びを崩したい時に便利です。

シャッフルは確率を変えません。各エントリは1/N のままです。

並べ替え

エントリをアルファベット順(A–Z)に並べ替えます。長い貼り付けリストを整理したり、共有前に類似項目をまとめるのに便利です。

シャッフルと同様、表示順だけが変わり、公平性は変わりません。

クリア

エントリ欄のすべての項目を一度に削除します。ルーレットは空になり、新しいリストを始められます。

クリアしたリストは復元できません。残したい場合は先に「QRコードを共有」でリンクをコピーしてください。

スピンと結果

スピン(ルーレットを回す)

easeOutQuart の減速カーブで回転を開始します。標準は3,500ミリ秒で、「カスタマイズ」で2・3.5・6・10・15秒から選べ、回転数は時間に合わせて増えます。止まる角度はアニメーション開始前に crypto.getRandomValues で決まります。操作はルーレット下のボタンとルーレット本体のクリックの2つです。回転中はエントリ欄がロックされ、途中でリストは変わりません。

回転時間は演出だけです。結果はルーレットが動く前に決まるので、短くしても長くしても特定の項目が有利になることはありません。

Winners タブ

当選者は自動的に Winners タブに追加されます。タブを切り替えると履歴を確認でき、これまでに選ばれた当選者数のカウンタも表示されます。

Winners タブのクリアボタンで、エントリを触らずに履歴だけリセットできます。

当選者を削除 / エントリとして使用

当選モーダルの「削除」ボタンで、当選エントリをルーレットから外せます — 1名1回限定の抽選に最適。Winners タブの「エントリとして使用」ですべての当選者をスピン用リストに戻せます。

両方を組み合わせて勝ち抜き戦も可能:回す → 削除 → 繰り返す。

自動スピン

当選者表示後、モーダルから次のスピンを自動で開始できます。チェックボックスを有効にし、カウントダウン秒数を設定。新しい当選者が出るたびにカウンタはリセットされます。

デフォルトは30秒 — イベントの進行に合わせて変更してください。

再生と表示

音声コントロール(声で回す)

手を使わずに回せます。設定(「エントリを追加」の横の歯車)を開いて音声コントロールをオンにし、マイクへのアクセスを許可してから、スピンコマンド(デフォルトは「Wheel spin」)を声に出すと、画面に触れずに回せます。音声認識はブラウザの Web Speech API を使用し、ページの言語に従います。マイクのバッジは、言葉が一致すると緑、一致しないと赤に光ります。

設定で任意のフレーズをコマンドに設定でき、Chrome または Edge が最適です。音声認識に対応していないブラウザでは、このオプションは非表示になります。

当選者の音声読み上げ

有効にすると、当選者名がブラウザの Web Speech API(SpeechSynthesis インターフェース、W3C Community Group 仕様)で読み上げられます。表示中の言語に合わせて、音声と言語が自動選択されます。当選モーダル内のトグル状態は localStorage に voiceOver_ として保存されます。

音声品質と言語はOSにインストールされた音声に依存します。

スピン効果音

区切りが矢印を通過するたびにチック音が鳴り、ルーレットと一緒に遅くなります。「カスタマイズ」で回転音(チック・クリック・ソフト)、止まったときの当選サウンド(チャイム・ファンファーレ・なし)、音量を選べます。ヘッダーのスピーカーアイコンでルーレットの音をすべてミュートでき、設定は保存されます。音声読み上げがオンの場合は、当選サウンドが終わってから名前が読み上げられます。

教室やオフィスではヘッダーのスピーカーでミュートできます。音の設定は次回も保存されたままです。

カスタマイズ(色・回転時間・音・紙吹雪)

設定の歯車ボタンの隣にあるパレットボタンで「カスタマイズ」が開きます。8つのカラーテーマ(クラシック、パステル、オーシャン、サンセット、ネオン、フォレスト、モノクロ、レインボー。文字は読みやすいよう黒か白に自動で切り替わります)、回転時間、回転音と当選サウンドと音量、当選時の紙吹雪(初期設定はオフ。端末で視差効果を減らす設定がある場合は表示しません)を選べます。設定はこのブラウザに保存され、「QRコードを共有」のリンクにも引き継がれ、OBSではドックから配信画面のルーレットに送られます。

どの設定も確率は変わりません。「初期設定に戻す」でクラシックの見た目に戻ります。

全画面モード

ヘッダーの全画面アイコンをクリックするとブラウザの Fullscreen API(Element.requestFullscreen())が呼び出され、ルーレットの canvas がビューポート全体に拡大されます。すべての evergreen ブラウザ(Chrome、Edge、Firefox、Safari 16.4 以降)に対応 — プレゼン、プロジェクター、ビデオ通話の画面共有に最適です。

Esc キーでいつでも全画面を解除できます。

保存と言語

リスト自動保存

エントリはブラウザの localStorage(Web Storage API、W3C 勧告)に自動保存され、言語ごとに mainInput_en、mainInput_fr のようなキーで分離管理されます。サイトデータをクリアするまで、タブを閉じてもブラウザを再起動してもPCを再起動しても保持されます。オリジンあたりの容量は通常 5 MB で、数万件のエントリに十分です。

言語ごとに保存:英語に切り替えると別の英語リストが表示されます。

リンクで共有

入力中にアドレスバーは変わりません。共有するには、エントリ入力フォーム上部の「QRコードを共有」を押します。エントリを ?entries= パラメータに、「カスタマイズ」で変更した設定を ?cfg= に入れたリンクが作られ、QRコードと「リンクをコピー」ボタンで表示されます。リンクを開いた人は、サーバーとの通信なしで同じリストと見た目を自分の端末で確認できます。共有リストを開いても相手が保存しているリストは置き換えられず、そのリンク上での編集は保存されません。共有された見た目はその訪問中だけ適用され、設定を変更した時点で保存されます。リスト長はブラウザの URL 上限のみが制約となります(旧クライアントで約 2,000 文字、最新の Chromium で約 32,000 文字)。

アカウントもサーバーも不要 — リストはURL自体に含まれています。

QRコードで共有

エントリ入力フォーム上部の「QRコードを共有」ボタンをクリックすると、スキャン可能なQRコードがモーダルで表示されます。コードには現在のページURL(追加したエントリを含む)が埋め込まれているので、相手がスマートフォンのカメラで読み取るだけで同じ内容のホイールが開きます。モーダルには完全なリンクと「リンクをコピー」ボタンも表示されるので、チャット、メール、スライドに貼り付けたい場合にも便利です。

教室やイベントに最適 — 画面のQRコードを生徒や参加者が読み取るだけで、各自の端末でホイールを開けます。

言語切替

ルーレットは12言語に対応:英語・フランス語・スペイン語・日本語・ポルトガル語・ドイツ語・ポーランド語・韓国語・ヒンディー語・インドネシア語・ウクライナ語・ヘブライ語(右から左に表示)。フッターから言語を選ぶと、音声読み上げを含むUI全体が即座に切り替わります。

言語ごとに別の保存リストを保持し、互いに上書きしません。

OBS Studioでホイールをライブオーバーレイとして使う方法

OBS Studioでは、ホイールを2つのパーツに分けて配信にライブ表示できます。シーンの上に重ねるホイールと、OBS内に格納して名前の編集やスピンを行う小さなコントロールパネルです。追加のソフトのインストールもアカウントも不要で、両方とも同じパソコンのOBS内で動作します。

2つのパーツで構成するOBSレイアウト

シーン上のホイール

ディスプレイリンクを使ってホイールをシーンに追加します。透明な背景で表示されるため、ウェブカメラやゲーム画面の上にホイールだけが枠なしで重なります。800 × 800などの正方形サイズが最適です。

シーン上で自由に移動・リサイズできます。ホイールの周りの部分は、他のソースの上でも透明なままです。

OBS内のコントロールパネル

ドックリンクをOBS内のパネルとして追加すれば、OBSを離れたりブラウザのタブに切り替えたりせずに、名前の編集・スピン・当選者の確認ができます。

パネルが消えた場合は、OBS上部のDocksメニューから再表示してください。

すべてパソコン内で完結

コントロールパネルと画面上のホイールはOBS内で連動しているため、スピンが即座に配信に表示されます。サーバーには何も送信されず、両方とも1台のパソコンの同じOBSで動作させるだけです。

パネルで「ホイールを回す」を押すと画面のホイールがすぐに回転し、当選者はパネルの当選者リストに追加されます。

音声、読み上げ、自動再スピン

ホイールを追加するときに「OBSで音声を制御」をオンにすると、視聴者にカチカチ音が届きます。パネルからは当選者を読み上げさせたり、次のスピンを自動で始めたりすることもできます。

OBSの音声ミキサーからいつでもホイールをミュートできます。

OBSセットアップの完全ガイドを開く
ルーレットを試す