TL;DR
- 運転免許試験の「理不尽な○×問題」をネタにしたクイズアプリ「それ、×です。」を作った
- 仕様は ChatGPT、デザインは Claude Design、実装は Claude Code on the web という分担
- 技術スタックは TanStack Start（React 19）+ TypeScript で、Vercel にデプロイ
- 自分でコードをほとんど書かず・読まずに、動くアプリが完成した
- アイデア勝負の小さなアプリなら、誰でも形にできる時代になったと実感した
はじめに
「それ、×です。」という、運転免許試験の理不尽さをネタにした○×クイズアプリを作りました。
このアプリ、自分でコードを全く書いていません。仕様は ChatGPT、デザインは Claude Design、実装は Claude Code on the web という分担で、AI に任せながら形にしました。この記事では、どんなアプリなのか、なぜ・どうやって作ったのか、そして作ってみての感想をまとめます。
どんなアプリか
「それ、×です。」は、運転免許の学科試験をパロディにした、理不尽な○×クイズアプリです。それ、×です。 から実際に遊べます。
遊び方はシンプルで、全10問の○×問題に答えていくだけです。常識的に考えれば「○」としか思えない問題に、理不尽な理由で「×」がついている、というのが基本的な仕掛けになっています。とはいえ全問が引っかけというわけではなく、10問のうち数問は素直に「○」が正解になるよう混ぜてあるので、最後まで気が抜けません。
たとえば、こんな問題が出ます。
「消しゴムは字を消す。」——もちろん○、と答えたくなります。でも正解は ×。解説いわく「ボールペンで書いた字は、いくらこすっても消えません。むきになるほど、紙が薄くなるだけです」。ぐうの音も出ません。
いっぽうで、素直に「○」が正解の問題もちゃんと混ざっています。
「夜に道路を走るときは、ライトをつける。」は、免許試験らしい真面目な問題で、答えは ○。この「ほとんど×、でもたまに○」の緩急が、最後まで気を抜かせないポイントです。
解答するとその場で解説が表示され、10問終えると結果画面に移ります。結果画面では正解数や連続正解数（ストリーク）に加えて、スコアに応じた「称号」とひとことコメントがランダムで表示されます。同じ点数でも毎回違う称号が出るようにしてあるので、何度か遊びたくなる作りです。最後に結果をシェア用の画像としてダウンロードする機能も付けました。
なぜ作ったのか
きっかけは、運転免許試験の問題には「明らかにおかしいだろう」とツッコミたくなる問題があるよな、とふと思い出したことでした。
言葉尻を捉えたような引っかけや、現実離れした前提で「×」にされる問題に、試験勉強中もやもやした記憶のある人は多いと思います。その理不尽さを全面に押し出したらクイズとして面白いんじゃないか、と考えたのが出発点です。
どうやって作ったのか
1. ChatGPT で仕様を詰める
まずは ChatGPT と壁打ちしながら、アプリの仕様を固めていきました。
「理不尽な○×クイズ」というふわっとしたアイデアを、何問出題するのか、引っかけ問題と素直な問題の比率はどうするか、結果画面で何を見せるか、といった具体的な仕様に落とし込んでいきます。問題文の案も大量に出してもらい、ネタの方向性を調整しました。
2. Claude Design でデザインを作る
仕様が固まったら、Claude Design で UI のデザインを作成しました。
○と×を主役にした赤と青のカラーリングや、スタンプを押したような演出など、クイズアプリらしい遊び心のある見た目に仕上げてもらいました。このデザインの原案が、そのまま実装の指針になっています。
3. Claude Code on the web で実装する
最後に、Claude Code on the web で実装を進めました。
仕様とデザインを渡して、ブラウザ上で動かす Claude Code に実装を任せます。問題データの管理、ゲームの進行ロジック、結果画面、シェア画像の生成まで、ほぼおまかせで形になっていきました。
技術スタック
でき上がったアプリの技術スタックは次のとおりです。フレームワークまわりは、自分が前から気になっていた技術を中心に選びました。
| 領域 | 採用技術 |
|---|---|
| フレームワーク | TanStack Start（React 19） |
| 言語 | TypeScript |
| ルーティング | TanStack Router（ファイルベース） |
| スタイル | CSS Modules |
| ビルド | Vite + Nitro |
| Linter / Formatter | Oxlint / Oxfmt |
| テスト | Vitest |
| ホスティング | Vercel |
クイズの問題はサーバーを持たず、静的なデータとしてアプリに同梱しています。
おもしろかったのは、こちらが細かく指示していない部分まで Claude が気を利かせてくれたことです。たとえば効果音は、頼んでもいないのに Web Audio API で実装されていました。ゲームの進行ロジックも UI から切り離した形で組まれていて、できあがったものを後から眺めて「そういう作りなのか」と理解する場面がありました。
おわりに
AI で時代が変わったと改めて実感しました。3年前だったら「画面構成はどうしよう」「デザインはどうしよう」「アニメーションを実装するの大変そうだな」「Web Audio API ってどうやって使うんだろう」「問題と回答を考えるの大変すぎ」と確実に挫折していたと思います。
このように仕様がシンプルなアプリであれば、Claude Code の使い方さえ分かれば1時間もかからずにリリースできてしまいます。
実際にこのアプリは、朝ベッドでゴロゴロしている時に思いついたアイデアを、そのままゴロゴロしながら iPhone で ChatGPT と一緒に仕様を考えました。起き上がって Mac を開き、その仕様を Claude Design に依頼して微調整。リポジトリを作って、デザインと仕様書と使いたい技術だけを push し、Claude Code on the web に実装をお願いしました。シャワーを浴びて朝ご飯を食べていたら出来上がっていて、Vercel の連携だけやってリリースされました。
その後、外出の予定があったので、最寄り駅に向かう間に触ってみて、問題数を増やしたくなったので、 Claude Code on the web で問題作成用の Agent Skills を作り、それでたくさんの問題を作ってもらいました。
「SaaS is dead」という言葉は、まだそのまま信じられていません。仕事で SaaS を開発している身としては、解決すべきドメインが複雑で広すぎて、現時点の AI では今回のアプリほど簡単にはいきません。それでも、アイデア勝負の小さなアプリなら、思いついたその日に形にして世に出せる。一発当てるのも、まったくの夢物語ではないのかもしれません。 このアプリ以外にも色々作ってるので、また別の記事で共有できたらと思っています。
今回は「それ、×です。」という理不尽なクイズアプリの紹介ブログでした。 笑ってもらえたら、それで十分なので。よかったら遊んでみてください。
