AIに「30秒IQテスト」を作らせてみた｜UI付きで完成までの全手順を公開
PromptFan
AIに「IQテストを作らせる」と聞くと、難しそうに感じるかもしれません。
ですが実際にやってみると、やったことはかなりシンプルで、
ほぼ“指示を追加していっただけ”で完成しました。
今回は、
「テキスト回答 → UI化 → タイマー追加」
という流れで、ブラウザで動くIQテストを作成しています。
この記事では、完成物だけでなく、
実際にどんな流れで出来上がったのかをそのまま公開します。
今回作りたいもの（完成イメージ）
今回目指したのは以下のような内容です。
- ブラウザで動くIQテスト
- ボタンで回答できるUI
- 制限時間30秒のタイマー付き
- 最後にIQを表示
最初からこれを全部指示したわけではなく、
段階的に追加していった結果こうなりました。
AIへの最初の指示（プロンプト）
まずはシンプルに、これだけを入力しました。
IQ測定テストを作成してください。
結果
この段階では、以下のようなものが出てきました。
- 問題と回答がテキストで並んでいるだけ
- UIはなし
- クリック操作などもなし
つまり、「読むだけのIQテスト」です。
ただ、このままだと回答をメモる・自分で採点と手間がかかる状態でした。
そこでクリックで選択し自動採点してくれる形にしたいと思いました。
UI化のための追加指示
そこで次に、UIを作るための指示を追加します。
ブラウザで動作するUI付きでお願いします。
結果
すると、コードが生成されました。
ファイルは自分で作成になりますが、生成されたコードをコピペするだけでOKな簡単な手順です。
- ボタンで回答できるUIに変化
- ブラウザで動作するコードが生成される
- クリックで進む形式になる
この段階で、ようやく
「触れるテスト」になったという印象です。
とはいえ、まだゲーム性はそこまで強くありません。
タイマー追加（ここが一番重要）
さらにもう一段階、機能を追加します。
ここが少し面白いポイントで、
自分で細かく考えたわけではなく、AIがカスタマイズ案を提案をしてくれました。
AI側から「タイマーを追加」という流れが出てきたので、
その内容をそのままコピペして指示しました。
②タイマー追加(バス狙い)
制限時間30秒
今回は焦り演出は入れませんでした。
でも、提案してくれたってことは「できる」ってことですよね？
次の機会にいろんなカスタマイズを試してみたいと思います。
結果
この指示を追加したことで、一気に完成に近づきます。
修正されたコードを提示されるので最初と同じようにファイルに上書きします。
- カウントダウンタイマー表示
- 0秒で強制終了
- プレイ中の緊張感アップ
正直、この段階で
ほぼ“ゲームとして成立”しました。
実際にやってみて感じたこと
完成したIQテストを実際に触ってみると、印象はかなり変わります。
- 時間制限があるだけで難易度が上がる
- 簡単な問題でも焦ってミスする
- 「もう一回やりたい」と思う
特に感じたのは、
タイマーがあるだけで“別物のコンテンツになる”という点です。
最初のテキスト版とは、体験としてまったく違います。
今回のポイント（かなり重要）
今回の流れを振り返ると、やったことはかなりシンプルです。
① 最初はざっくり指示
→ テキストの問題が出てくる
② UIを追加
→ ボタン操作できるようになる
③ タイマーを追加
→ 一気にゲーム化
しかも重要なのは、
ほとんど自分で考えず、AIの提案をそのまま使っただけという点です。
AIでコンテンツを作るコツ
今回の検証から感じたのは以下の点です。
- 最初から完璧を狙わない
- 出てきたものに対して追加指示する
- 良さそうな提案はそのまま使う
この流れを意識するだけで、
AIのアウトプットの質はかなり上がります。
応用できるジャンル
この作り方は、IQテスト以外にも応用できます。
- クイズゲーム
- 診断コンテンツ
- ミニゲーム
また、資格や検定の模擬問題の作成も出来てしまうんです！
まとめ
今回の検証では、
「IQ測定テストを作成してください。」
という一文からスタートし、
- UI追加
- タイマー追加
という流れだけで、
ブラウザで遊べるコンテンツが完成しました。
ポイントは、
「最初から作り込まないこと」や
「アウトプット(テキストorUIで出力など)をしっかり提示すること」と
「AIの提案をうまく使うこと」です。
この方法を使えば、専門知識がなくても
誰でも簡単に“動くコンテンツ”を作れるようになります。
おまけ
今回は、追加指示でUI版を作成してもらいましたが、
一発でUI版に仕上げる魔法の言葉がこれです！
ブラウザで遊べる○○を作ってください。
この一文一発でコードを生成してくれます！
さらにおまけその2
このテスト最後にしっかりIQを測定してくれます。
まあ、問題数少なくて何度か試運転した後なのでチート級ですが(;^_^A
これも追加指示で問題数を増やしたり測定をもっと精密にすることができます。
ぜひ皆さんも試してみてください！！
もし今回のIQテストを見て、
- もっとこうしたら面白そう
- 別のゲームを作ってみたい
などあれば、ぜひコメントで教えてください。
「このAIでも試してほしい」といったリクエストも大歓迎です。
＼ 最新情報をチェック ／
