授業の指名ルーレットや席替えの画面を AI で作り、名簿を残さずに教室で映す

「では、この問題を……」と言ってから、だれを当てるか迷う。席替えのたびに、くじを作って配って集める。授業の小さな手間ですが、毎日のことです。指名ルーレットや席替えの画面が教室のモニターにあれば、ボタン 1 つで決まり、だれが当たったかを全員が同じ画面で見られます。

アプリを入れなくても、こうした画面は ChatGPT、Claude、Gemini に HTML のファイル 1 つで作ってもらえます。このページでは、名簿を残さない形で頼む文と、教室のモニターで開くまでの手順を説明します。班ごとに点を競う復習クイズなら、ガイド クラス対抗のクイズを AI で作って、電子黒板やプロジェクターで使う が向いています。

授業で使う道具の例

AI に頼みやすく、教室で毎日使えるのは、次のような 1 画面の道具です。

• 指名ルーレット。 名簿か出席番号から 1 人を選び、大きな文字で出します。当たった人を次から外せば、同じ人ばかり当たりません。
• 席替え。 教室の座席の図に、名簿をばらばらに割り当てます。前の席にしたい人だけ先に決めておく、という使い方もできます。
• タイマー。 残り時間を大きく出して、終わったら音で知らせます。小テストやグループ活動の時間に使います。
• 班分け。 名簿を 4 人ずつのように、決まった人数の班に分けます。

どれも、教室の後ろの席から読める大きな文字で作ります。いくつかを 1 つのページにまとめるより、道具ごとに 1 ページにしたほうが、画面がすっきりして押しまちがいも減ります。

タイマーで気をつける 2 つのこと

• 画面が暗くならないように。 PC やタブレットは、しばらく触らないと画面を暗くします。MDN の説明 では、画面起動ロック API（Screen Wake Lock API）は「画面の消灯、輝度低下、およびロックを防止します」（2026 年 10 月 21 日に確認）。頼む文に「画面が暗くならないように Screen Wake Lock API を使う」と書きます。ただし MDN は「古い端末やブラウザーでは動作しないことがあります」とも書いています。授業の前に、映す端末で試してください。
• 終わりの音は、スタートを押してから。 ブラウザは、ページが勝手に音を出すのを止めることがあります。MDN の自動再生のガイド は、再生が許される条件の 1 つに「ユーザーがサイトを操作した（クリック、タップ、キーを押すなど）」を挙げています（2026 年 10 月 21 日に確認）。「スタート」のボタンを押して始めるタイマーなら、終わりの音が鳴ります。ページを開いただけで音を出す作りにはしないでください。

AI への頼み方（名簿は端末の中だけ、どこにも送らない）

ChatGPT、Claude、Gemini のどれでも、次の文を貼り、【】の中をクラスに合わせて書きかえて送ります。指名ルーレットの頼み方です。

授業で教室のモニターに映して使う、指名ルーレットのページをつくってください。

- 名簿: 画面の入力欄に、1 行に 1 人ずつ名前を貼り付けて使う。名前を入れずに「出席番号 1〜【35】番」で使うボタンも付ける
- 「回す」を押すと名前が切りかわりながら回り、2〜3 秒で止まって、当たった名前を画面いっぱいの大きな文字で出す
- 「当たった人は次から外す」をオン・オフできる。全員が当たったら知らせて、最初に戻せる
- 名簿は sessionStorage にだけ置き、タブを閉じたら消えるようにする。localStorage、Cookie、サーバーには保存しない
- 入力された名前はどこにも送らない。fetch やフォームの送信、外部のサービスは使わない
- 名前は、ボタンやリンクの文字にしない。押して人を選ぶところは、出席番号のボタンにする
- 「名簿を消す」ボタンで、その場で名簿を消せる
- 教室の後ろの席からも読める大きな文字。ボタンはすべて高さ 44px 以上
- HTML ファイル 1 つで、CSS と JavaScript もその中に書く。画像ファイルは使わない

ほかの道具にするときは、最初の行と、「回す」「当たった人」の 2 行を、次のように書きかえます。名簿と保存の行、名前をボタンにしない行は、そのまま残します。

• 席替え: 「席替えのページ」にして、「座席は【6】列で、1 列に【6】席。画面の上に教卓を描く。『並べかえる』で名簿をばらばらに席へ入れる。前の席に固定したい人を、出席番号のボタンで先に選べる。『印刷』ボタンで座席表を印刷できる」と書きます。男女を交互に並べるなら、「名簿を 2 つの入力欄に分けて貼り、交互に席へ入れる」と足します。
• タイマー: 「タイマーのページ」にして、「1 分・3 分・5 分のボタンと、分と秒を入れる欄。残り時間を画面いっぱいに出す。終わったら音で知らせる。画面が暗くならないように Screen Wake Lock API を使う」と書きます。タイマーは名簿を使わないので、名簿の行は消してかまいません。
• 班分け: 「班分けのページ」にして、「名簿を【4】人ずつの班にばらばらに分け、班ごとに枠で囲んで出す。人数が割り切れないときは、余った人をほかの班に 1 人ずつ足す」と書きます。

名簿は「番号だけ」か「その場で貼る」

いちばん安心なのは、名前を使わず、出席番号だけで動かすことです。「12 番」と出れば、教室ではだれのことかわかります。

名前を出したいときは、授業の前に、表計算ソフトの名簿などから名前の列をコピーして、ページの入力欄に貼ります。頼む文のとおりに作ったページなら、名簿はそのタブの中にだけ置かれ、タブを閉じれば消えます。次の授業では、もう一度貼ります。

名簿と個人情報の扱い

名簿を残さないために、守ることは 4 つです。

• 名簿をページのファイルに書きこまない。 HTML の中に名前を書くと、公開した URL を開いた人はだれでも、ページのソースから名前を読めます。名前は、毎回その場で入力欄に貼ります。
• 名前をボタンやリンクの文字にしない。 公開したページで押されたボタンとリンクは、その文字が、押した端末の種類や国といっしょに Convika にクリックとして記録され、ページの分析画面の「CTAランキング」に並びます。だれが押したかは記録されませんが、名前の書かれたボタンを押せば、その名前が残ります。人を選ぶボタンには、出席番号を書きます。
• AI への頼む文に名簿を書かない。 頼む文に書いたことは、ChatGPT などのサービスに送られます。「35 人の名簿を入れる欄」と人数だけ伝えれば、AI は名前を知らなくても作れます。
• 学校や自治体の決まりを確かめる。 児童生徒の名前を、どの端末やサービスで扱ってよいかは、学校ごとに決まっています。迷ったら、情報担当の先生に聞くか、出席番号だけで使います。

決まった席替えの結果を、名前入りの座席表として生徒の端末で見せたいときもあります。学校の決まりで許されていても、URL だけで開けるページには名前を載せないでください。載せるなら、ページにパスワードをかけます。パスワードは Pro（月 ¥1,800）と 1年パスの機能で、手順はガイド HTML ページにパスワードをかけて、知っている人だけに見せる方法 にあります。

sessionStorage に置いた名簿は、いつ消えるか

頼む文で指定した sessionStorage は、ブラウザがタブごとに持つ一時的な置き場です。MDN の説明 では、「タブ/ウィンドウを閉じられた場合、セッションは終わり、 sessionStorage 内のオブジェクトは消去されます」（2026 年 10 月 21 日に確認）。

• 再読み込みでは消えない。 MDN によると、ページのセッションは「ページの再読み込みや復元があっても残ります」。授業の途中で画面を更新しても、名簿を貼り直さずにすみます。
• 復元されることがある。 前に開いていたタブを開き直す設定のブラウザでは、名簿が戻ってくることがあります。共用の PC で使ったら、授業の終わりに「名簿を消す」を押してからタブを閉じてください。
• ほかのタブや端末には出ない。 新しいタブに URL を入れて開くと、名簿は空から始まります（「タブを複製」で開いたタブには、名簿が写ります）。ほかの先生の端末にも、生徒のタブレットにも出ません。

Convika に記録されるもの

Convika で公開したページでは、ページのスクリプトが fetch などで通信できる先が、そのページ自身のアドレスに限られます（Pro と 1年パスでは、アクセス解析ツールと、持ち主が登録した広告の送信先が加わります）。Convika がページについて記録するのは、開かれた回数、どこまでスクロールされたか、押されたボタンとリンクの文字といった訪問の様子です。入力欄に貼った名簿は記録しません。ただ、名前の書かれたボタンやリンクを押すと、その名前がクリックとして記録されます。頼む文に「名前は、ボタンやリンクの文字にしない」の行があるのは、そのためです。

公開する前に、AI のコードに fetch や <form> が入っていないか、名前がボタンの文字になっていないかを見ておきます。どちらかがあれば、AI に「名簿をどこにも送らず、名前をボタンの文字にしないように直して」と頼みます。

授業の道具を教室のモニターで開く 4 つの手順

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

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

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

ページのボックス に、.html か .htm のファイル（2 MB まで）を「ファイルから」で選ぶか、「コードから」に切り替えて貼り付け、「プレビューのリンクをつくる」を押します。登録はいりません。

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

3. 授業の前に、映す端末で試す

ページの画面の「プレビューを開く」から、実際に動かしてみます。できれば、授業で使う教室の PC かタブレットで開きます。後ろの席から結果が読めるか、再読み込みしても名簿が残るか、タブを閉じて開き直すと名簿が消えているかを見ます。タイマーなら、最後まで待って音が鳴るかも確かめます。

4. 公開して、教室のモニターで開く

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

確認の画面で無料のまま選べるのは「一般公開」です。URL を知っている人ならだれでも開け、検索結果や Convika のギャラリーに出ることがあります。名前を書きこんでいないルーレットやタイマーなら、一般公開でかまいません。検索にもギャラリーにも出したくないときは、「限定公開」を選びます（Pro・1年パス）。Free プランのままなら、HTML の <head> に <meta name="robots" content="noindex"> の 1 行を入れて公開し、ページの「サイト設定」で「このページをギャラリーに載せない」をオンにします。この設定はどのプランでも無料です。

公開するとページの URL ができます。教室の PC のブラウザでその URL を開き、全画面にして使います。毎回打たなくてすむように、ブックマークしておきます。先生のタブレットで開くなら、ページの画面の「QR コードを表示する」で出した QR コードを読み取るのが早道です。手順は HTML ファイルを QR コードにする方法 にあります。

作ったあとで変えるとき

「当たったときの効果音がほしい」「座席を 7 列にしたい」と思ったら、手もとの HTML ファイルを AI に渡して、変えたいところだけ頼みます。

1. AI に HTML を貼り、「この指名ルーレットに、当たったときの短い効果音を足して。ほかは変えないで」のように頼みます。
2. 直ったファイルを、ページの画面の「新しいバージョンのアップロード」から入れて公開します。

新しいバージョンを公開しても、URL は変わりません。教室の PC のブックマークも QR コードも、そのまま使えます。直すたびに、名簿と保存の行が消えていないか、コードに fetch が増えていないか、名前がボタンの文字になっていないかを見てください。

道具が増えてきたら、ルーレット、席替え、タイマーを別々のページにして、教室の PC のブラウザで 1 つのブックマークのフォルダにまとめておくと、授業中にすぐ出せます。Free プランでは 1 ページを公開できます。

既製のアプリと、AI で作るページの違い

すぐに使いたいなら、既製のサイトが早道です。名簿の置き場所を自分で決めたい、クラスに合わせて座席の形を変えたいときは、AI で作るページが向いています。

Convika でできないこと

• 名簿を端末をまたいで共有すること。 名簿は、それぞれのブラウザのタブの中だけに置かれます。同じ学年の先生と使うときは、URL を共有して、それぞれが自分の名簿を貼ります。
• 生徒のタブレットとモニターをつなぐこと。 生徒が自分の端末で押したボタンを教室のモニターに出す作りは、Convika のページでは動きません。ページが通信できるのは、自分のアドレスだけだからです。
• だれがいつ当たったかを記録すること。 当たった人の記録は、タブを閉じれば消えます。残したいときは、画面を写真に撮るか、席替えなら座席表を印刷します。

よくある質問

席替えアプリを無料で作れる？

作れます。ChatGPT や Claude、Gemini に席替えのページを HTML のファイル 1 つで頼み、Convika の Free プランのまま公開できます。Free プランはカード登録なしで公開 1 ページまで、月 10,000 ビューまで含まれ、ページの下に Convika の案内のバーが出ます。AI の料金は、使うサービスのプランによります。

生徒の名前は保存される？

頼む文のとおりに作れば、保存されません。名簿はそのタブの sessionStorage にだけ置かれ、タブを閉じると消えます。入力欄に貼った名簿は、Convika にも送られません。ただし、公開したページで押されたボタンとリンクの文字は Convika に記録されるので、名前をボタンやリンクの文字にしないでください。名簿を HTML のファイルや AI への頼む文に書きこまないこと、共用の PC では授業の終わりに「名簿を消す」を押すことも守ってください。

ルーレットを学級で共有するには

公開した URL を共有します。同じ学年の先生は、それぞれの教室の PC で同じ URL を開き、自分のクラスの名簿を貼って使います。名簿はページに入っていないので、URL を渡しても名前は伝わりません。生徒のタブレットで開かせるなら、QR コードか Google Classroom で URL を配ります。Classroom での配り方は、ガイド AI で作った HTML の教材を、Classroom で生徒に配る にあります。

スマホなしで使える？

使えます。教室の PC のブラウザで URL を開けば、それだけで動きます。スマホやタブレットは、QR コードを読み取って手もとで開きたいときに使うだけです。毎日使うなら、教室の PC のブラウザでブックマークしておきます。

学校のパソコンで動く？

ブラウザで開くページなので、ソフトを入れなくても動きます。Chromebook でも開けます。開けないときは、まず先生のスマホで開けるかを見ます。スマホで開けて学校の端末で開けないなら、学校のネットワークのフィルタリングが考えられるので、情報担当の先生や ICT 支援員にページのアドレスを伝えて相談してください。古いブラウザでは、画面を暗くさせない機能が動かないことがあります。

出典

• 画面起動ロック API（MDN） (2026 年 10 月 21 日に確認)
• メディアおよびウェブオーディオ API の自動再生ガイド（MDN） (2026 年 10 月 21 日に確認)
• Window: sessionStorage プロパティ（MDN） (2026 年 10 月 21 日に確認)