AIでクイズアプリを作る方法

プロンプトを書く前に、作る価値のある最小構成を決めましょう。

多くのクイズアプリでは、最低限次の要素が必要です。

• クイズの説明があるホーム画面
• 回答 विकल्पを表示する質問画面
• スコアとフィードバックを表示する結果画面
• 再スタートボタン

そのうえで、いくつか基本を決めます。

• プラットフォーム: React + TailwindのWebサイト、またはExpoを使ったReact Nativeのモバイルアプリ
• 問題形式: 最初は複数選択式がもっとも簡単
• 採点方法: 正解1問につき1点、減点方式、重み付きスコアなど
• コンテンツの元: まずはハードコードしたサンプル問題、後でデータベースに保存
• ユーザーアカウント: 保存済みの進捗、履歴、ユーザー別結果が必要な場合のみ
• 支払い: クイズ、パック、プレミアム機能へのアクセスを有料にする場合のみ

Version 1は絞り込みましょう。アカウント、ランキング、決済、分析、AI生成問題を備えた制限時間付き試験アプリは、実際には複数のプロジェクトです。まずは最後まで完走できるクイズから始めてください。

Moremadeでは、アプリを自然な言葉で説明すると、AIエージェントがソースコードを書いてくれます。その後はライブプレビューが表示され、チャットでプロジェクトを変更し続けられます。

最初のプロンプトでは、次の内容を含めましょう。

• プラットフォーム
• 画面構成
• 問題形式
• 採点方法
• 見た目のスタイル
• サンプルデータを使うかどうか

よい最初のプロンプトは、AIの推測を減らせる程度に具体的でありながら、書くことに時間をかけすぎない程度に簡潔です。

一般知識の練習用に、React Native with Expoでモバイルクイズアプリを作ってください。ホーム画面、クイズ画面、結果画面を含めてください。4択問題を10問使い、1問ずつ表示してください。正解1問につき1点加算してスコアを管理してください。最後の問題の後に、合計スコア、正解内容、クイズを再スタートするボタンを表示してください。シンプルで清潔感のあるスタイル、大きめのタップ領域、アプリ内にハードコードしたサンプル問題データを使ってください。

Webサイトにしたい場合は、その旨をはっきり伝えてください。Moremadeは、WebサイトならReact + Tailwindコード、モバイルアプリならReact Native（Expo）として生成します。

最初のビルドが終わったら、ライブプレビューをただ眺めるのではなく、テスターのように確認しましょう。フルフローを実際に操作し、スタイルに時間をかける前にロジックが正しいかをチェックします。

次のような問題を探します。

• スコアが正しく更新されない
• 問題の切り替え時に回答状態がリセットされない
• モバイルでボタンが小さすぎる
• 進捗表示がない
• 結果画面がごちゃついている

その後は、小さく具体的な修正を依頼します。たとえば、次のような指示が有効です。

• 「クイズ画面の上部に、10問中何問目かを示す進捗表示を追加してください。」
• 「ユーザーが回答を選んだら、その選択肢を強調表示し、Nextを押すまで他の選択肢を無効にしてください。」
• 「結果画面に、各問題、ユーザーの回答、正解、正誤を表示するように更新してください。」

これは、プロンプト全体を書き直すよりもたいてい速く済みます。Moremadeにはビジュアルインスペクターもあるので、要素を指し示して変更できますし、コードビューで生成されたコードをより直接的に確認・編集することもできます。

AIが作り込みすぎた場合は、シンプルにしましょう。依頼していないアニメーション、カテゴリ、アカウント画面などの削除を頼んでください。

基本的なクイズアプリにバックエンドは不要です。最初の動作確認版なら、ハードコードしたサンプル問題で十分です。

次のような機能が必要な場合にだけSupabaseを追加しましょう。

• 問題セットをデータベースに保存する
• ユーザーサインインを追加する
• スコアやクイズ履歴を保存する
• アセットやファイルをアップロードする

Moremadeでは、Supabaseでデータベース、サインイン、ファイルストレージを扱えます。実用的な次のステップとしては、たとえば次のようになります。

• quizzes テーブルを作成する
• クイズに紐づく questions テーブルを作成する
• ユーザーに紐づく results テーブルを作成する

そのうえで、変更を自然な言葉で依頼します。たとえば、「このアプリをSupabaseに接続してください。クイズと問題をデータベースに保存し、メールサインインを追加し、完了したスコアをresultsテーブルに保存してください。」のように伝えます。

Stripeは、プレミアムクイズパックや有料認定のように、実際にアクセス課金が必要な場合のみ追加してください。Moremadeには、設定した価格でチェックアウトできるStripeコネクタが含まれています。アプリが無料なら、支払いは後回しで構いません。初期版は、動く要素が少ないほど検証しやすくなります。

Webサイトを作っている場合でも、スマホサイズの画面でテストしてください。クイズ系のプロダクトはモバイルで使われることが多く、小さな操作の問題がすぐに表面化します。

次の点を確認しましょう。

• 文字が拡大なしで読める
• 回答ボタンが押しやすい
• 次の操作が明確
• 長い問題文でレイアウトが崩れない
• 結果画面が高得点・低得点の両方をきれいに扱える
• クイズの再スタートで状態が完全にリセットされる

また、次のような扱いにくい内容でもテストしてください。

• かなり短い問題文
• とても長い回答文
• すべて不正解
• すべて正解
• データベースを使う場合は空や欠損の問題データ

何か失敗したら、具体的な修正を依頼します。たとえば、「小さい画面では回答カードを横幅いっぱいにし、Nextボタンを安全な余白を確保して下部近くに固定してください。」のように伝えます。

ここではバージョン履歴が役立ちます。変更でアプリが悪化した場合、すべてをプロンプトで元に戻そうとする代わりに、前の状態へ戻せます。

コアの流れが動いたら、公開しましょう。Moremadeなら、無料の yourname.moremade.ai サブドメインへワンクリックで公開できます。社内レビュー、ユーザーテスト、プロトタイプ共有にはこれで十分です。

有料プランなら、独自ドメインを接続できます。ドメインはMoremade内で購入することも可能です。

公開前に、短いリリース確認を行いましょう。

• タイトルと導入文がクイズ内容と合っている
• 採点が正しい
• ボタンとリンクが動作する
• プレースホルダー文言が残っていない
• サインインや決済フローを含めた場合は、それらが動く

いつでも、完全なソースコードをZIPとしてエクスポートしたり、GitHubにpushしたりできます。後でプラットフォーム外で開発を続けたい、チームでコードを確認したい、別の開発者に引き継ぎたい場合に重要です。

いくつかのパターンは、無駄な手戻りを招きます。

• 機能を盛り込みすぎる。 アカウント、サブスクリプション、分析を足す前に、まず1つのクイズフローを動かしましょう。
• 曖昧に依頼する。 「クイズアプリを作って」は曖昧すぎます。画面、採点、プラットフォームを明示しましょう。
• 一度に全部変える。 小さな追記プロンプトのほうが制御しやすく、テストもしやすいです。
• データベースを早く入れすぎる。 Version 1では、静的なサンプル問題で十分なことが多いです。
• モバイルのレイアウトを無視する。 クイズUIは操作が多く、小さい画面では弱点がすぐ見えます。
• エッジケースを確認しない。 クイズ終了処理、再スタート時の挙動、長い回答文は最初に壊れやすいです。
• プレビューを完成品だと思う。 最初の生成は下書きです。数回の改善を前提にしましょう。

良いルールは、完結していてシンプルなループを目指すことです。クイズ開始、回答、スコア表示、再スタート、公開。これが動いたら、その後で必要に応じて永続化、サインイン、有料アクセスを追加してください。