ルーレット抽選
選択肢を入力して、ルーレットを回す
ボックスの各行がスライスになります。回すボタンを押すとホイールが回転して 減速し、ポインターの下に止まったスライスが当たりです。
何もアップロードされません。項目はブラウザーのタブに存在し、タブを閉じると 消えます。
当選者はホイールが動く前に決まっている
これは見た目以上に重要なことです。
ホイールを作る一番わかりやすい方法は、ランダムな力で押して摩擦で減速させ、 最終的にポインターの下に来たものを結果として読み取ることです。しかしこの 方法では、結果が最終角度の丸め方や、お使いの端末が描画できたアニメーション フレーム数に左右されてしまいます——遅いスマートフォンと速いデスクトップ とで公平さが揃わなくなります。
このホイールは逆の方法を取ります。まずcrypto.getRandomValues()から当選者を
選び、そのスライスがポインターの下に来る正確な回転角度を計算してから
アニメーションします。回転は演出であり、抽選はすでに決まっていて、証明可能な
ほど一様です。
そのため、スライスがいくつあっても、ラベルがどれだけ長くても、どんな端末を 使っていても、どのスライスもまったく同じ確率です。
当選者を除外する、あるいはホイールをそのまま回し続ける
当選者を除外をオンにすると、回すたびに当選した項目がホイールから外れます。 繰り返し回せば、1位、2位、3位という順番が得られます。複数の賞品の抽選や、 その場で発表順を決めるのに向いています。
オフにすると、ホイールはそのまま残り、同じ選択肢が2回当たることもあります—— 「今夜どこで食べるか」のような用途にはこちらが向いています。
項目を繰り返してホイールに重みをつける
ホイールはどのスライスにも同じ確率を与えるため、ある選択肢を優遇する方法は スライスを増やすことです。同じ項目を2回リストすれば、その割合は2倍になります。
| 項目 | スライス数 | ピザの当選確率 |
|---|---|---|
| ピザ、寿司、タコス | 3 | 33% |
| ピザ、ピザ、寿司、タコス | 4 | 50% |
| ピザ ×3、寿司、タコス | 5 | 60% |
重複したラベルはホイール上に複数回表示されます。これは誠実な方法です—— 見ている人は誰でもスライスを数えて重み付けを確認できるので、あなたの言葉を 鵜呑みにする必要がありません。この可視性こそがホイールの意義であり、隠れた 重みではその意義が失われます。
スライスにきれいに収まらない細かい重みが必要な場合は、乱数ジェネレーターが
明示的な数値:重みのペアに対応しています。
スライス数と読みやすさの限界
項目が増えるほどスライスは小さくなり、ラベルは半径に沿って描かれるため、 技術的な上限よりもずっと手前に実用上の限界があります。
- 12個まで — 快適で、ラベルが一目で読める
- 12〜20個 — 読めるが、長い名前は詰まって見える
- 20〜30個 — 短いラベルのみ実用的
- 30個超 — ホイールは動作し抽選も公平なままですが、回転中は誰にも 読めなくなります
18文字を超えるラベルは省略記号で切り詰められ、スライス内に収まるように なっています。リストが長すぎてホイールが読めなくなる場合は、 名前選択ツールが同じ役割を演出抜きで果たします。
アクセシビリティとモーション
このホイールはprefers-reduced-motionを尊重します。お使いのシステムが
モーション低減を求めている場合、回転アニメーションは省略され、当選者が
即座に表示されます。抽選はもともとアニメーションに依存していないため、
結果はどちらの場合でも同一です。
当選者はライブリージョンでも通知されるため、スクリーンリーダーのユーザーが 探し回ることなく結果を聞き取れます。
ルーレットの使いどころ
- 意思決定 — ランチ、映画、どの家事をするか
- 配信や教室 — 回転そのものが見どころで、人々はそれを見守る
- プレゼント企画 — 数字がぽんと表示されるより、目に見える抽選のほうが 観客には公平に感じられる
- アイスブレイク — 次の質問に誰が答えるか