ルーレットの使い方

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

ルーレットを開く

クイックスタート

  1. エントリを追加

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

  2. ルーレットを回す

    ルーレット下のスピンボタンを押すか、ルーレットの canvas 自体をクリックします。回転は 3.5 秒間、easeOutQuart の減速カーブで動作し、各エントリが 1/N の確率で選ばれます。位置に関係なく、すべてのエントリが完全に等しい確率です。

  3. 結果を活用する

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

利用できるすべての操作

エントリ編集

エントリ欄

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

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

シャッフル

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

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

並べ替え

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

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

クリア

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

クリアしたリストは復元できません。残したい場合は先にURLを共有してください。

スピンと結果

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

回転アニメーションを開始します。3,500 ms 固定で easeOutQuart 減速カーブを採用し、一貫した操作感と結果の公平性を確保します。発動方法は2つ:ルーレット下のスピンボタンと、ルーレット canvas への直接クリック。回転中はエントリ欄が無効化され、確率計算を無効にしてしまうリスト変更を防ぎます。

アニメーション時間を固定にすることで、スピン長によって特定エントリが有利になることを防ぎます。

Winners タブ

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

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

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

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

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

自動スピン

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

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

再生と表示

当選者の音声読み上げ

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

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

スピン効果音

回転中に本物のルーレットのようなカチカチ音が鳴ります。ヘッダーのスピーカーアイコンでオン/オフを切替 — 設定はセッションをまたいで保持されます。

教室やオフィスなど周囲の音が気になる場面ではミュートを。

全画面モード

ヘッダーの全画面アイコンをクリックするとブラウザの 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 で、数万件のエントリに十分です。

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

リンクで共有

URL はキー入力ごとに History API(history.replaceState)で更新され、エントリリストを URL セーフなクエリパラメータとしてエンコードします。アドレスを共有すればサーバー往復なしでルーレットの状態を転送でき、受信者はリンクを開くだけで同じ構成を自分の端末で確認できます。リスト長はブラウザの URL 上限のみが制約となります(旧クライアントで約 2,000 文字、最新の Chromium で約 32,000 文字)。

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

QRコードで共有

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

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

言語切替

ルーレットは7言語に対応:英語・フランス語・スペイン語・日本語・ポルトガル語・ドイツ語・ポーランド語。フッターから言語を選ぶと、音声読み上げを含むUI全体が即座に切り替わります。

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

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

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

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

シーン上のホイール

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

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

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

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

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

すべてパソコン内で完結

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

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

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

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

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

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