4択クイズとレーダーチャートを捨てて、電卓のテンキーにした

日用品や食料品、外食、公共サービスの値段をテンキーで入力して、自分の物価感覚が世間の中で「上位何%」なのかを即座に測定するWebサービス「bukka_now」を開発していたときの話です。

このサービスは、総務省が公表している「小売物価統計調査」のリアルな価格データを正解として用いています。しかし、開発初日に作った最初のプロトタイプは、今とは全く異なる姿をしていました。

画面には4択の選択肢ボタンが並び、微調整用のカスタムスライダーが付き、結果画面には0〜100点の総合スコアと「令和の相場マスター」「タイムスリップ型」「インフレ過敏型」「ドンブリ勘定型」といった4つの性格診断バッジ、そして5カテゴリ別のレーダーチャートが誇らしげに描かれていたのです。

見た目はとても「それっぽいWeb診断サービス」でした。しかし、実際に自分で通しプレイをしてみた瞬間、強烈な冷めと退屈さが押し寄せてきました。

「4択を見た瞬間に、大体の相場が推測できてしまって全然面白くない」 「スライダーを動かすために最小値と最大値が画面に書いてある時点で、すでに答えのヒントを与えている」 「レーダーチャートや性格診断のポエムを読みたいわけじゃない。知りたいのは『自分の感覚が世間とどれくらいズレているのか』というスリルだけだ」

この気づきから、私はわずか数時間の間に、初期版に盛り込んでいた4択、スライダー、レーダーチャート、性格診断、そして画面上の絵文字に至るまでを**すべて全廃（コードごと完全削除）**し、電卓のテンキー直打ちと分布ヒストグラムだけに削ぎ落としました。その「引き算の設計」の全貌を記録します。

4択とスライダーが「価格当てクイズ」の魂を殺していた

最初に作ったハイブリッド形式（4択、ニアピンスライダー、過去インフレ比較）は、ゲーム開発としてはよくある「ユーザーを飽きさせないためのバリエーション」のつもりでした。しかし、クイズの題材が「物価」である場合、この親切設計は致命的な毒になります。

「キャベツ1玉の今の値段」を当てる面白さは、「えーっと、先週スーパーで買ったときはいくらだったっけ？200円？いや、最近高騰してるから300円超えてるかも……」と、自分の生活の記憶を必死に手繰り寄せる瞬間にあります。

4択やスライダーは、その一番おいしい脳の汗を奪い去っていました。選択肢が画面に出ている時点で、それは「記憶の照合」ではなく「テストの消去法」になっていたのです。

削ぎ落とした結果：電卓のテンキー直打ち（D12）

そこで、すべての設問の回答形式を**「数字（円単位）のダイレクト入力」**へと強制統一しました。

キーボードのないスマートフォンでも片手で素早く打てるよう、画面下部に電卓ライクな**テンキーコンポーネント（NumberKeypad.tsx）**を配置しました。

• 0〜9 の大きな数字キー
• 「00」キー: 日本の円相場では「300円」「1,500円」のように下二桁がゼロの数字が極めて多いため、タップ数を減らすために必須
• バックスペース（BS）とクリア（C）
• OKボタン: 入力した瞬間に次の設問へ進む

これに合わせて、PCの物理キーボード（テンキーや数字キー、Backspace、Enter）にも完全対応させました。

選択肢もスライダーの目盛りも一切ない真っ白な入力欄の前に立たされたとき、プレイヤーは初めて「自分の頭の中にある値段」だけで勝負することを迫られます。10秒の制限時間カウントダウンが刻々と減る中で、テンキーを「3」「0」「0」「OK！」とリズミカルに叩き込む。このテンポの良さと適度なプレッシャーが生まれた瞬間、退屈だったクイズがアーケードゲームのようなスリリングな体験へと化けました。

レーダーチャートを捨て、「上位何%」のパーセンタイルへ

入力方式をテンキーに変えたあと、次に見直したのは「結果画面のスコアリング指標」でした。

初期版では、「総合スコア: 78点」といった100点満点の数字と、「令和の相場マスター」のようなタイプ分類、そして5軸（食料品・日用品・外食・インフラ・レジャー）のレーダーチャートを表示していました。

しかし、テストプレイをしてくれた知人の反応は淡々としたものでした。「78点って言われても、良いのか悪いのかピンとこない」「レーダーチャートを見ても『ふーん』で終わる」というのです。

そもそも、物価感覚に「点数」をつけること自体が直感に反していました。学生のテストの点数のように「100点を目指して勉強するもの」ではないからです。人が知りたいのは、「世間一般の人々と比べて、自分の感覚はどれくらいズレているのか（あるいは、どれくらい正確なのか）」という相対的な立ち位置です。

そこで、分かりにくい点数やレーダーチャートを全廃し、統計学の**パーセンタイル（累積正規分布）に基づく「上位何%」**という単一の指標に一本化しました。

// 累積正規分布（平均65、標準偏差16）から上位パーセンタイルを算出
const z = (score - 65) / 16;
const percentile = (1 - normalCDF(z)) * 100;
// 画面の最前面に「あなたは上位 8.5% の物価感覚です」とヒーロー表示

「上位 8.5%」「上位 42.0%」というパーセンタイル表示にした途端、プレイヤーの目の色が変わりました。「上位5%以内に入りたい！」「友達とどっちが上位か競い合える！」と、SNSでシェアしたくなる明確な動機が生まれたのです。

集合知との答え合わせ：回答分布ヒストグラム

結果画面のもう1つの主役が、各設問ごとの**回答分布ヒストグラム（DistributionBarChart.tsx）**です。

単に「正解は320円でした」と出すだけでは、答え合わせとして半分しか面白くありません。本当に面白いのは、**「自分は250円だと思ったけれど、正解は320円だった。そして、みんなの回答を見ると400円と答えている人が一番多い！」**という、世間の予想とのギャップです。

各設問の結果カードには、Cloudflare D1 に蓄積された全ユーザーの回答ログからリアルタイムに生成した度数分布棒グラフを表示し、その中に以下の3つのインジケーターを統合しました。

1. あなたの回答（赤 #ff4d00）: 自分が直感で打ち込んだ金額
2. 正解（青 #2563eb）: 総務省統計調査による公式の相場価格
3. 世間の中央値（緑 #10b981）: これまでに解いた全プレイヤーの回答中央値

さらに、グラフの上下には全回答者の「最低値（MIN）」と「最高値（MAX）」、そしてその設問に答えた「累計回答者数」を配置しました。

「食パン1斤に1,200円と答えた大富豪がいる」「みんなも自分と同じように高めに見積もっていたんだ」といった集合知のドラマが、1つの棒グラフを見るだけで一瞬で伝わる構造になりました。

絵文字の完全排除と、10問〜100問の選択制

最後に断行したのが、サービス全体からの「絵文字（Emoji）」の完全追放でした。

初期版では、タイトルの横に「🛒」をつけたり、ボタンに「✨」、結果に「🎉」といった絵文字を散りばめていました。しかし、テンキーとヒストグラムで構成されたシャープな画面に絵文字が入ると、急に安っぽい子供向け知育アプリのような生活感が出てしまい、数字とグラフが持つストイックな緊張感が台無しになっていたのです。

ファビコン、アイコン、ボタン、SNSシェア文言に至るまで絵文字をすべてコードから除去し、生成り紙（#faf6ef）に2pxのソリッドな黒線インク（#1e1e1e）とオフセットシャドウを組み合わせた、クリーンで緊張感のあるフィンテック調のグラフィックデザインへと舵を切りました。

また、設問数も当初の固定7問から、トップ画面で「10問・20問・30問……最大100問」まで自由に選べるチップUIへと拡張しました。サクッと1分で自分の物価感覚を試したい人も、100問解いてじっくり自分の生活感覚を総点検したい人も、同じテンキーのリズムで没頭できるようになりました。

引き算こそが、プロダクトの個性を研ぎ澄ます

機能を足していくのは簡単です。4択も、スライダーも、レーダーチャートも、性格診断も、すべて「あったほうが親切かもしれない」「賑やかになるかもしれない」という善意で足したものでした。

しかし、親切心で足したそれらの装飾は、このプロダクトが本来持っていた**「自分の記憶だけを頼りにテンキーを叩き、世間の相場とのズレに一喜一憂する」という純粋なスリル**を覆い隠してしまっていました。

勇気を持ってそれらをすべて削ぎ落とし、電卓のテンキーと1本のヒストグラムだけを残したとき、bukka_now は初めて「一度触ったら忘れられない、テンポの良いゲーム」へと生まれ変わることができました。