文化祭のクイズ大会を AI で作る。プロジェクターに映す形と、来た人のスマホで解く形

文化祭の出し物でクイズ大会をやる。教室の前にスクリーン、問題を大きく映して、お客さんが班を組んで答える。廊下には QR コードを貼って、通りがかった人がスマホで挑戦できるようにもしたい。準備に使えるのは放課後の 2 時間ほど。

問題と得点の画面は、ChatGPT や Claude、Gemini に頼めば、HTML ファイル 1 つで作れます。このページでは、文化祭でよく使う 4 つの形と、それぞれの頼み方、当日の置き方、公開して QR コードを作るまでを順に説明します。

文化祭クイズの 4 つの形

先に決めるのは、どの画面をだれが見て、だれが答えるかです。AI が作るページは 1 台ずつ別々に動き、端末どうしはつながりません。それを前提に、4 つの形をくらべます。

はじめての出し物なら、チーム対抗か、スマホで解く個人戦のどちらか 1 つにしぼると、当日の係の動きが少なくてすみます。

AI への頼み方

ChatGPT、Claude、Gemini のどれでも、次の文を貼り、【】の中を出し物に合わせて書きかえて送ります。

プロジェクターに映すチーム対抗

教室で授業に使うクラス対抗クイズと、ほとんど同じ作りです。Convika のテンプレート「クラス対抗クイズ」の指示文をもとに、文化祭向けに書きかえました。

文化祭の出し物で、プロジェクターに映して使うチーム対抗のクイズのページをつくってください。

- テーマ: 【わが校の七不思議と、この町の歴史】
- 問題: このテーマから【10】問つくる。1 問に正解 1 つと、まちがいの選択肢 3 つ。答えに自信のない問題は入れない
- チームは【4】チーム。チーム名は画面で変えられる
- 進め方: 問題を大きく表示 →「答えを見る」で正解を強調 → 正解したチームのボタンで 1 点（押しまちがいは取り消せる）→「次の問題」
- 画面の上に、チームごとの得点をいつも表示する。最後の問題のあとに、順位と得点の発表の画面
- 教室のいちばん後ろからも読めるように、問題は大きな文字。暗い部屋でも読める、はっきりした色
- 「全画面にする」ボタンをつける
- すべてのボタンは高さ 44px 以上（min-height: 44px）
- 再読み込みしても得点が消えないよう、ブラウザに保存する（ほかへは送らない）。「最初からやり直す」で消せる
- 名前やログインは使わない
- HTML ファイル 1 つで、CSS と JavaScript もその中に書く。画像ファイルは使わない

自分たちで作った問題を使うときは、「問題」の行を消して、「問題 / 正解 / ほかの選択肢」の形で 1 行に 1 問ずつ書き足します。

ChatGPT とのやり取りを省きたいなら、テンプレート「クラス対抗クイズ」のページで「クイズをつくる」を押して登録します。「どんなものにしたい？」にテーマを書けば、見本と同じ形のクイズのページを Convika の AI が作ります。1 ページに AI クレジットを 1 使い、新しいアカウントには 10 クレジット付いています。

来た人のスマホで解く個人戦

QR コードから開いて、ひとりで最後まで解く形です。

文化祭の出し物で、来た人が自分のスマホで解くクイズのページをつくってください。

- テーマ: 【わが校の七不思議と、この町の歴史】
- 問題はこのテーマから【8】問。1 問に 3 つの選択肢で、正解は 1 つ。答えに自信のない問題は入れない
- 1 問ずつ表示し、選んだらすぐに正解かどうかと、ひとことの解説を出す
- 最後に「8 問中 6 問正解」のように大きく出す。全問正解なら、遠くからでもわかる色で「全問正解」と出す
- 「もう一度」で最初から解き直せる
- 名前やメールアドレスは入れさせない。ログインもなし
- スマホの縦画面で、親指で押しやすい大きさ。すべてのボタンは高さ 44px 以上
- HTML ファイル 1 つで、CSS と JavaScript もその中に書く。入力された内容はどこにも送らず、画像ファイルは使わない

全問正解の人に景品を渡すなら、係はお客さんのスマホの最後の画面を見せてもらいます。クイズラリーにするなら、頼む文に次の 2 行を書き足します。

- URL の最後が #3 なら、3 番の地点の問題だけを出す
- 答えた地点の番号をブラウザ（localStorage）に保存し、「6 か所中 4 か所」のように何か所まわったかを出す。全部まわったら「ラリー達成」と大きく出す

QR コードを読み取るたびにページは開き直されるので、保存しておかないと前の地点の記録は消えます。地点ごとの QR コードは、公開した URL の最後に #1、#2 とつけた URL から作ります。Convika の「QR コードを表示する」で出るのは公開した URL そのままの QR コードなので、番号つきの URL は Chrome の「QR コードを作成」などのツールで QR コードにします。作り方は HTML ファイルを QR コードにする方法 にあります。

当日の前に、係で問題を確かめる

AI が作った問題には、まちがいがまざることがあります。学校や町についての問題は、とくに AI が知らない内容です。本番の前に、係のだれかが 1 問ずつ確かめます。

• 正解が本当に正しいか。ほかの選択肢に正解がまぎれていないか
• 校内の人しかわからない問題ばかりになっていないか（お客さんの多くは学校の外の人です）
• 最後まで進めて、得点や「全問正解」の画面が合っているか

当日の置き方

プロジェクターに映すとき

プロジェクターにつないだ PC のブラウザで、公開した URL を開きます。頼む文の「全画面にする」ボタンは、ブラウザの全画面の機能を使います。MDN によると、この機能は「最も広く使用されているブラウザーの一部で動作しません」（MDN の requestFullscreen()、2026 年 10 月 21 日に確認）。ボタンで全画面にならないときは、ブラウザのメニューから全画面にします。全画面は Esc キーで戻せます。

前の日に、本番の教室で一度映しておきます。後ろの席から問題が読めるか、照明を落としたときに色が見えるかを確かめます。

QR コードを貼るとき

QR コードは、受付の机や教室の入口、廊下のポスターに貼ります。お客さんは自分のスマホのカメラで読み取って、ブラウザで開きます。アプリのインストールも登録もいりません。

ポスターに URL も小さく書いておくと、QR コードを読めないスマホの人にも案内できます。QR コードの印刷で気をつけることは、HTML ファイルを QR コードにする方法 にあります。

スマホで遊ぶ人への案内

• 同じスマホで続けて遊ぶなら、最後の画面の「もう一度」を押してもらいます
• クイズは HTML ファイル 1 つなので、開いたあとは通信がなくても最後まで進みます。電波の弱い教室でも、開くときにつながれば遊べます

クイズを公開して QR コードを作る 4 つの手順

ChatGPT や Claude で作ったクイズを公開する手順です。Convika の AI で作ったときは、手順 3 から同じです。

1. HTML のファイルかコードを用意する

AI の答えのコードをすべてコピーするか、ダウンロードした .html ファイルを用意します。

2. ボックスに入れて、ページを受け取る

ページのボックス に .html か .htm のファイル（2 MB まで）を「ファイルから」で選ぶか、「コードから」に切り替えて貼り付け、「プレビューのリンクをつくる」を押します。ここまで登録はいりません。登録してページを持つのは、顧問や担任の先生のアカウントにしておくと、文化祭のあとも先生が直したり公開を止めたりできます。

このプレビューは見た目を確かめるためのもので、3 分間だけ開けます。安全のためスクリプトを止めているので、ボタンを押してもクイズは進みません。「このページを受け取る（無料・カード不要）」を押して登録すると、ページがアカウントに入ります。

3. 係のスマホで最後まで解いてみる

ページの画面の「プレビューを開く」から、クイズを最後まで進めます。係の何人かのスマホと、当日映す PC の両方で開いておくと安心です。

4. 公開して、QR コードを出す

「公開する」を押します。はじめて公開するときは「公開プランを選ぶ」の画面が出るので、料金をかけないなら「無料で公開する」を選びます。

確認の画面で無料のまま選べるのは「一般公開」です。URL を知っている人ならだれでも開け、検索結果や Convika のギャラリーに出ることがあります。文化祭のクイズは学校の外の人に開いてもらうものなので、名前が入っていなければ一般公開でかまいません。無料のままギャラリーに出したくないときは、公開したあとにページの「サイト設定」で「このページをギャラリーに載せない」をオンにします。検索にもギャラリーにも出したくないときは「限定公開」を選びます（Pro・1年パス）。

公開したら、ページの画面の「QR コードを表示する」で QR コードを出し、画像を保存して印刷します。あとで問題を直しても、「新しいバージョンのアップロード」で入れかえれば URL は変わらないので、印刷した QR コードはそのまま使えます。

得点と答えはどこに残るか

チーム対抗の頼む文と、ラリーの書き足しのとおりに作ったクイズは、得点や答えた地点をそのブラウザの localStorage に保存します。MDN の説明 では、localStorage のデータは「ブラウザーのセッションを跨いで保存されます」（2026 年 10 月 21 日に確認）。

• プロジェクターの PC で入れた得点は、その PC の中だけ。 係のスマホで同じ URL を開いても、得点は出てきません。
• 来た人のスマホの結果は、そのスマホの中だけ。 スマホで解く個人戦の頼む文は保存しない作りなので、結果は最後の画面に出るだけです。ラリーで答えた地点を保存したときも、そのスマホのブラウザに残るだけです。係からは見えないので、景品を渡すときは画面を見せてもらいます。
• プライベートブラウズでは消える。 MDN によると、プライベートブラウズのページの localStorage は、最後のプライベートタブを閉じたときに消えます。

頼む文に「入力された内容はどこにも送らず」と書いてあるので、ページのスクリプトが答えや点数を送ることはありません。AI が書いたコードに fetch や new Image、<form があれば、送らないように直してもらいます。ただし、Convika で公開したページでは、押されたボタンとリンクの文字が、押した端末の種類や国といっしょに Convika にクリックとして記録されます。選択肢をボタンにしたクイズなら、押された選択肢の文字が、回数の多いものから上位 10 件まで管理画面の「CTAランキング」に並びます。同じ文字の選択肢は、どの問題のものでもまとめて数えます。だれが押したか、だれが何問正解したかはわかりません。

学校のルールと個人情報

• 名前を入れない。 問題にも、チーム名にも、生徒や先生の名前、顔写真を入れません。公開した URL は、知っている人ならだれでも開けます。押されたボタンの文字は Convika に記録されるので、名前の入ったボタンを押せば、その名前も残ります。
• 出し物の内容は、学校の決まりに従う。 文化祭の出し物でページを外に出してよいか、実行委員や担当の先生に先に聞いておきます。
• 校内の Wi-Fi で開けないときは、先生に相談する。 学校のネットワークには、開けるサイトを決めているところがあります。来た人は自分のスマホの回線で開くので、校内の Wi-Fi が使えなくても遊べます。プロジェクターの PC で開けないときは、ページのアドレスを担当の先生に見せて相談します。

Convika でできないこと

• 早押しの判定。 だれが先に押したかを、スマホどうしでくらべる作りは動きません。Convika で公開したページでは、ページのスクリプトが fetch などで通信できる先が、そのページ自身のアドレスに限られます（Pro と 1年パスでは、アクセス解析ツールと、持ち主が登録した広告の送信先が加わります）。スマホどうしをつなぐ先がありません。
• ランキングの機能。 この頼み方で作ったクイズの得点は、それぞれの端末に残るだけで、1 か所には集まりません。Claude のアーティファクトと同じ window.storage の共有の保存を使うページなら、Convika がページごとに得点を保存し、開いた全員が同じ一覧を見ます。
• 遊ぶ人のアカウント。 遊ぶ人は登録せずに開けます。その代わり、だれが遊んだかはわかりません。

よくある質問

文化祭のクイズは何問がいい？

1 組が遊ぶ時間から決めます。1 問に 30 秒かけるなら、10 問で 5 分です。お客さんが並ぶ出し物なら 5〜8 問、教室で座って遊ぶチーム対抗なら 10〜15 問を目安にして、本番の前に係で通して時間を計ります。

スマホで答えるクイズを無料で作れる？

作れます。ChatGPT や Claude、Gemini に頼む文を送ってクイズの HTML を作り、Convika の Free プランで公開します。Free プランはカード登録なしで 1 ページを公開でき、すべてのページの合計で月 10,000 ページビューまで含まれます。プランごとの扱いは 料金ページ にあります。

ログインなしで遊べる？

遊べます。来た人は QR コードを読み取るか URL を開くだけで、登録もアプリもいりません。名前を入れる欄もない作りにしておけば、来た人がだれかわかる情報は集まりません。Convika に残るのは、開かれた回数や押されたボタンの文字といった、だれのものかわからない記録です。

校内の Wi-Fi で開けないときは？

まず、自分のスマホの回線で開けるかを試します。開けるなら、ページは公開できています。校内の Wi-Fi だけで開けないなら、学校のネットワークのフィルタリングが考えられるので、担当の先生にページのアドレスを見せて相談してください。

点数を集計するには？

チーム対抗なら、プロジェクターに映した 1 台で係が点を入れれば、その画面に全チームの得点が出ます。スマホで解く個人戦では、点数はそれぞれのスマホの最後の画面に出るだけなので、その画面を係に見せてもらいます。全員の点数を 1 か所に集める作りは、Convika のページではできません。

出典

• Window: localStorage プロパティ（MDN） (2026 年 10 月 21 日に確認)
• Element: requestFullscreen() メソッド（MDN） (2026 年 10 月 21 日に確認)