「宝くじ爆買いしたい！」を体験できるサイトを作ってみた

Last updated at 2026-05-29Posted at 2026-05-29

宝くじの当選確率は数字を見ても実感しにくい。
それを体験できるWebアプリを作った。
本記事ではどれだけ当たらないかの数字と、アプリの機能・操作を整理する。

1. 宝くじが当たらない、その規模感

実在する高額宝くじの「1ユニット」は 20,000,000枚（2,000万枚）で構成される。
等級と本数の一例は以下のとおり。

1枚300円なので、1ユニットすべて買うと 6,000,000,000円（60億円）の投資。
一方、全本数×金額の合計払戻はおよそ 26億円。 還元率は約43% で、買えば買うほど期待値ベースでは負ける構造になっている。

体感として分かりやすい数字を並べる。

これを画面で示すのが本アプリ。

20列 × 20行 = 400エリアに分割し、各エリアに 250 × 200 = 50,000枚を配置する。合計 20,000,000枚。すべて Canvas で描画しており、DOM要素は生成しない。

最初に表示されるダイアログは「めくる／まとめ買い／1等を探す」の3アイコンと、開始ボタンだけのシンプル構成。

これで2,000万枚分の状態管理を軽量に行っている。

ズームインすると、各券は横長のチケット風（オレンジ＋ピンクの番号面＋赤帯）で描画される。めくった結果は等級ごとに色分けし、★を中央に置く。

ヘッダー右下ではなく、メイン領域の右上に常時表示する小型パネル。
各等級の図柄（凡例）と金額、現在の当選口数を一覧表示する。
0口の等級は薄く表示し、当選済みの行を引き立てる。

ヘッダーに「枚数 / 投資 / 払戻 / 損益」を常時表示する。
損益は色分け（赤＝損失、緑＝利益）し、買うたびに小さく拡大するbumpアニメで変化を示す。

手動タップの1枚だけ、横回転（scaleX で1→0→1）でめくる。
爆買い（1万枚）は瞬時で、フリップ演出をかけない（無駄な負荷を発生させない）。

券にマウスを乗せると、その券が当たり券だった場合のみ、等級と金額をツールチップで表示する。
ハズレや券の隙間では出ない。

ボタンを押すと、現在のカメラ位置から1等の座標へ滑らかにアニメーション移動（位置は ease-in-out、倍率は対数補間）。
たどり着くと金色の券と集中線が表示される。

ランダムな座標で1万枚を一括購入する。
3,000,000円分。実行後、フッターに「当たり口数」と「払戻金額」が一時表示される。

ズームアウト時はエリア単位の塗りつぶしのみ、ズームイン時のみ個別の券を描画する。
広域でも個々の券を全部描こうとすると数百万回の描画コマンドになるので、カメラ倍率に応じて切り替える。

ブロックの色が黒に近づくほど、そのエリア内のめくり済み枚数が多いことを示す。

タップ判定は世界座標から券のグリッドへ写像して行う。
ズームアウトしすぎてめくれない場合、警告を出すのではなく、タップ地点に向けて自動でズームインする（操作の空振りを発生させないため）。

初回起動時は中央付近の券にスケール1で寄ったまま開始し、指アイコンが点滅して目印になる。
約1秒間アクションがなければ、ゴーストが指を動かしながら3枚をめくって見せる。
自分でタップすれば指アイコンは消え、通常の操作に戻る。

ソース1ファイルでフレームワークなしなので、改造や移植もしやすい。

1ユニットの理論上の還元率はおよそ43%。
100万円使えば、平均で約43万円戻り、57万円が損失となる。これが、宝くじを「資産形成手段」とは呼べない理由。

ただし、1等7億円という「分散の大きい外れ値」に賭ける娯楽として割り切るなら、300円で7億円の宝を1日預けて夢を見る、というコストパフォーマンスは悪くない、という見方もできる。
本アプリは前者（数字の現実）を、視覚的に押し付けがましくなく確認するための道具。