AI で作った教材やクイズを、ロイロノートで生徒に配る方法

Gemini に作ってもらった計算ゲームを、ロイロノートで生徒に送りたい。手元にあるのは .html のファイルです。ところが、HTML ファイルはロイロノートのカードになりません。生徒に送るのはファイルではなく、ページの URL です。

このガイドは、HTML ファイルを URL にする手順と、その URL を iPad や Chromebook で Webカードにして送る方法、開けないときに確かめること、授業のあとでページを直す方法を説明します。ロイロノート・スクールのサポートページと Chrome ウェブストアは、2026 年 10 月 16 日に確かめました。

HTML ファイルのままではロイロノートのカードにならない

ロイロノート・スクールのヘルプ ファイルを取り込む によると、カードとして取り込めるのは写真・動画・音声・PDF のファイルです。画像は jpeg・png・gif、動画は mov・mp4・webm、音声は mp3・m4a・aac・wav と書かれていて、HTML はありません。

資料箱には、どんな形式のファイルでも保存できます。ただ、カードにできないファイルをノートに出そうとすると、「ノートに追加できない種類のファイルです」と表示されます。ヘルプ Word・Excel・PowerPointなどのデータを資料箱に保存して活用する方法 は、そうしたファイルを「元の素材をダウンロード」で端末にダウンロードして、ほかのアプリで開くよう案内しています。

iPad の「ファイル」アプリで .html ファイルを開くと、Safari ではなくクイックルックのプレビューになります。Convika が Apple の iPad シミュレーター（iPadOS 26.3）で試したところ、このプレビューは JavaScript を動かさず、ネット上の画像やフォントも読み込みませんでした。計算ゲームのボタンを押しても、何も起きません。ロイロノートからダウンロードしたファイルの開き方は、試していません。

生徒にページとして見てもらうなら、ファイルを配るのをやめて、ページを公開します。URL なら、Webカードにして送れます。

HTML ファイルを URL にする 4 つの手順

Webカードに入れる URL は、授業が終わったあとも開けるものにします。

ボックスで作るプレビューのリンクが開けるのは 3 分間 だけです。Webカードを作る前に、ページを Convika で公開します。

1. ファイルをボックスに入れて、見え方を確かめる

ページ冒頭のボックス に .html のファイルをドロップするか、「コードから」に切り替えてコードを貼り付け、「プレビューのリンクをつくる」を押します。アカウントもメールアドレスもいりません。

受け付けるのは、.html か .htm のファイル 1 つ（2 MB まで）か、そのコードです。CSS や画像を別のファイルに分けているなら、作った AI に「CSS をすべて中に入れて、画像は https:// から始まる URL にした、1 つの HTML ファイルにして」と頼んでください。

「プレビューができました」と出たら「プレビューを開く」を押し、文字や画像の並びを確かめます。このプレビューでは、ゲームやクイズのスクリプトはまだ動きません。

2. ページを受け取って、公開する

「このページを受け取る（無料・カード不要）」を押して登録すると、アップロードしたページがそのままアカウントに入り、スクリプトも動くようになります。プレビューの時間が過ぎても、同じ画面から受け取れます。

管理画面で「公開する」を押し、確認の画面でもう一度「公開する」を押すと、yourpage.convika.page のようなアドレスで公開されます。この URL は、あとで公開を止めて公開し直しても変わりません。

Free プランはクレジットカードの登録なしで使え、1 ページを公開できます。公開したページには、Free では下端に小さく Convika の帯が入ります（Pro で消せます）。

3. 生徒と同じ端末で開いて確かめる

公開したページを、生徒が使うのと同じ iPad や Chromebook で開き、ゲームやクイズが最後まで動くかを確かめます。

学校のフィルターが、初めて見るサイトを止めることがあります。授業の前に、生徒用の端末 1 台で開けるかを見ておきます。

ほかのサイトの API を呼ぶ処理（オンラインのランキングなど）は動きません。試した結果は、ガイド ChatGPT・Claude・Gemini で作ったゲームを、友だちがログインなしでスマホで遊べるように公開する で説明しています。

4. 公開した URL をコピーする

サイトの画面の「公開URL」に、公開したページのアドレスが出ます。横の「コピー」を押すと、URL をコピーできます。

この URL を、次の節で Webカードにします。

URL を Webカードにする

ロイロノートのヘルプ Webカードを学ぶ によると、Webカードは、見ているページを引用して、画像とリンクの付いたカードにする機能です。

作り方は、iPad と、Chromebook・Windows で違います。

iPad で作る

ヘルプ Webカード によると、ノートで Webカードを作り、編集画面で「🔍」をタップすると、ブラウザが開きます。

ヘルプ 【Webカード】カードからWebサイトにアクセスする方法 は、iPad では URL を Webカードに貼り付けるよう案内しています。手順 4 でコピーした URL を貼り付けてページを開き、「完了」をタップすると、そのページが画像付きのカードになります。

手順 1〜4 をパソコンで済ませたときは、iPad で Convika の管理画面にログインし、「公開URL」の横の「コピー」を押してから貼り付けます。

Chromebook・Windows で作る

Chromebook と Windows では、ブラウザの拡張機能「ロイロ Webカード」でカードを作ります。Chromebook では Chrome 用を Chrome ウェブストアから、Windows では Microsoft Edge 用を Edge のアドオンから入れます。

手順の出典は、ヘルプ 【GoogleChrome】ロイロ Webカード拡張機能のインストール方法と使い方 と 【Windows】ロイロ Webカード拡張機能のインストール方法と使い方、Chrome ウェブストアの 掲載ページ（提供元 LoiLo Inc.）です。手順は次の 4 つです。

1. 拡張機能をインストールし、画面右上の拡張機能のボタンから、「ロイロ Webカード」をいつもツールバーに出しておきます。Chrome ではピン留めし、Edge では斜線を外します。学校の端末にまとめて入れるときは、Chromebook なら Google 管理コンソールから、Windows なら Microsoft Intune から一斉にインストールするよう、ヘルプは案内しています。
2. ロイロノートとは別のタブで、手順 4 でコピーした URL を開きます。
3. 画面右上の「ロイロ Webカード」のボタンを押します。ウェブストアの説明では「写真マーク」です。
4. 取り込み先のノートを選ぶと、ロイロノートの中に Webカードができます。

テキストカードに URL を書いても、リンクにならない

ヘルプによると、テキストカードに直接入力した URL は、リンクとして開けません。

文字で URL を送ると、受け取った生徒は URL をコピーして、iPad なら Webカードに、Chromebook と Windows ならブラウザの別のタブに貼り付けることになります。初めから Webカードで送れば、この手間はいりません。

同じヘルプによると、Webカードを子カードにすると、リンクのように使えます。ワークシートのカードの中に入れておけば、ワークシートからページへ進めます。

生徒に届ける：送る・資料箱・画面配信

• 送る。 ノートの左下にある「送る」アイコンに Webカードを入れて「全員」を選ぶと、クラス全員に届きます（ヘルプ カードを送る より）。時間を決めて送る予約もできます。授業を休んだ生徒も、あとから「送る」アイコンからカードを取り出せます。
• 資料箱。 カードを「資料箱」にドラッグ＆ドロップすると保存できます（ヘルプ 資料箱を活用する より）。先生も生徒も見られる「学内共有フォルダ」や、複数のクラスで使う「授業共有フォルダ」に入れておけば、資料箱から選んで「使う」で取り出せます。同じ教材をいくつものクラスで使うときに向いています。
• 画面配信。 先生が Webカードを「画面配信」しているときに「🔍」を押すと、生徒全員が同じページを開きます（ヘルプ 【Webカード】クラス全員を同じWebサイトにアクセスさせる方法 より）。Chromebook と Windows では確認の画面が出て、別のタブで開きます。

受け取った生徒は、Webカードを開いて「🔍」を押すか、カードをダブルタップ（Chromebook と Windows ではダブルクリック）してページを開きます。Chromebook と Windows では、ページは別の画面で開きます。

ロイロノートを通さずに、教室のスクリーンから開いてもらうこともできます。サイトの画面で、「公開URL」の横の「QR コードを表示する」を押すと、その URL の QR コードが大きく出て、生徒はタブレットのカメラで読み取れます。「PNG 画像を保存する」を押せば、画像にしてスライドに貼れます。くわしくはガイド HTML ファイルを QR コードにする方法 で説明しています。

Webカードでページが開けないとき

• プレビューのリンクを入れていないか。 ボックスのプレビューのリンクが開けるのは 3 分間 だけで、そのあとは「このプレビューは終了しました」と表示されます。Webカードは、公開した URL で作り直してください。
• テキストカードに URL を書いていないか。 上の節のとおり、テキストカードに入力した URL はリンクとして開けません。
• 拡張機能が入っているか。 Chromebook と Windows では、「ロイロ Webカード」拡張機能を入れて使うよう、ヘルプは案内しています。
• 学校のフィルターで止められていないか。「ロイロWebフィルタ」を使っている学校では、フィルターが有効なとき、URL の右側に盾のアイコンが出ます。ヘルプ 【ロイロWebフィルタ】授業での使い方 によると、緑は「全員閲覧可能」、赤は「生徒は閲覧禁止」で、先生が盾のアイコンを押すと、見ている URL のフィルターの条件を変えられます。登録したサイトだけを見られるようにしている 学校 でも、先生が赤い盾のアイコンを押して生徒の閲覧を「許可」にすると、緑の盾に変わり、生徒も開けるようになります。ほかのフィルターを使っている学校では、学校や自治体の管理者に確かめてください。
• iPad で、直す前のページが出ていないか。 ヘルプ 【iPad・iPhone】Webカードのキャッシュを削除する方法 によると、iPad の Webカードに残ったキャッシュは、一度ログアウトしてログインし直すと消えます。
• 公開を止めていないか。「公開停止」を押したページは開けません。もう一度「公開する」を押せば、同じ URL でまた開けます。

授業のあとで直すときも、URL はそのまま

誤字を直したい、問題を増やしたい、というときも、Webカードを送り直す必要はありません。直した HTML ファイルを、同じページの新しいバージョンとしてアップロードします。

サイトの画面の「新しいバージョンのアップロード」で、「ファイルを選ぶ」から直したファイルを選ぶか、「コードから」に切り替えてコードを貼り付け、「新しいバージョンとしてアップロードする」を押します。「プレビュー v2 ができました」のように出たら、「プレビューを開く」で確かめて、「同じリンクで v2 を公開する」を押し、確認の画面で「公開する」を押します。公開するまで、生徒には前の版が表示されます。アップロードに AI クレジットは使いません。

AI に直してもらうなら、サイトの画面の「AIで改善」に直したい点を書きます。標準のモデルなら 1 回 1 クレジットで、Free プランには最初に 10 クレジットが付きます。Claude・Codex など、お使いの MCP クライアントから直したコードを保存して公開しても、URL は変わりません。

生徒が Webカードの「🔍」から開くのは同じ URL なので、公開した新しい版が開きます。印刷した QR コードも同じです。Webカードの画像は、カードを作ったときに見ていたページを写したものなので、画像も新しくしたいときは Webカードを作り直します。iPad で前の版が出るときは、上の節のとおり、ログインし直すと Webカードのキャッシュが消えます。

授業で使う前に知っておくこと

• 検索に出さないなら限定公開に。個人情報や点数は書かない 無料の一般公開で公開すると、URL を知っている人ならだれでも開け、Google などの検索結果や Convika のギャラリーに出ることがあります。検索に出したくないときは、公開するときの確認画面で「限定公開」を選びます（Pro・1年パス）。限定公開でも、生徒はロイロノートで受け取った URL をパスワードやアカウントなしで開けます。ただし、URL がクラスの外に転送されると開けてしまうため、生徒の名前や点数のように外に出したくないことはページに書かないでください。クラス全員に共通のパスワードをかけたいときは、確認画面で「パスワードを知っている人だけ」を選べます（Pro プラン・月 ¥1,800 の機能）。設定手順や生徒側の画面は、HTML ページにパスワードをかけて、知っている人だけに見せる方法とHTML のページを限定公開するをご覧ください。
• 一人ひとりの点数を集めるなら、テストカードを使う。 HTML のクイズは、練習や答え合わせに向いています。生徒ごとの点数を集めて見たいときは、ロイロノートのテストカードを使います。ヘルプ テストカード／アンケートカードとは によると、テストカードは児童生徒の解答をその場で採点・集約して、グラフや一覧で確認できます。練習用の 4 択クイズを AI に作ってもらう頼み方は、ガイド 生成 AI で作った小テストを、URL で生徒全員に配る にあります。

QR コードは株式会社デンソーウェーブの登録商標です。

よくある質問

ロイロノートで URL を送るには？

URL を Webカードにして送ります。

iPad では Webカードの「🔍」で開いたブラウザに URL を貼り付け、Chromebook と Windows では「ロイロ Webカード」拡張機能でカードを作ります。できたカードを、ノートの左下の「送る」アイコンに入れて「全員」を選ぶと、クラス全員に届きます。テキストカードに書いた URL は、リンクとして開けません。手元にあるのが HTML ファイルなら、先にページを公開して URL にします。

Webカードの作り方は？

iPad ではノート内で作成し、Chromebook と Windows では拡張機能を使って作ります。

iPad では、ノートで Webカードを作り、編集画面で「🔍」をタップして開いたブラウザでページを表示し、「完了」をタップします。Chromebook では Chrome に、Windows では Microsoft Edge に「ロイロ Webカード」拡張機能を入れ、ロイロノートとは別のタブでページを開いて、右上の拡張機能のボタンを押し、取り込み先のノートを選びます。できたカードには、ページの画像とリンクが付きます。

HTML ファイルはロイロノートで開ける？

カードとしては開けません。

ロイロノートのヘルプにある、カードとして取り込めるファイルは写真・動画・音声・PDF で、HTML は入っていません。資料箱には保存できますが、カードにできないファイルは「元の素材をダウンロード」で端末にダウンロードして、ほかのアプリで開きます。iPad の「ファイル」アプリで .html ファイルを開くとクイックルックのプレビューになり、Apple のシミュレーターで試したところ、JavaScript は動きませんでした。

生徒に配るなら、ページを公開して、URL を Webカードで送ります。先生が受け取ったファイルを自分の端末で見るだけなら、心当たりのない HTML ファイルは開かずに、送った人に確かめます。心当たりのあるファイルは、ブラウザで無料の HTML ビューアー を開き、「HTML ファイルを選ぶ」から選ぶと、スクリプトも動く状態で表示できます。ファイルはアップロードされません。少しでも気になるファイルは、選ぶ前に「スクリプトを動かす」のチェックを外します。外すと、ページのスクリプトは動かず、フォームも送信されません。

Webカードが開けないときは？

確かめることは 4 つあります。

入れた URL がボックスのプレビューのリンクなら、開けるのは 3 分間 だけなので、公開した URL で作り直します。Chromebook と Windows では、「ロイロ Webカード」拡張機能が入っているかを見ます。学校のフィルターで止められているなら、「ロイロWebフィルタ」の学校では先生が盾のアイコンから許可でき、ほかのフィルターなら管理者に確かめます。iPad で直す前のページが出るなら、一度ログアウトしてログインし直すと、Webカードのキャッシュが消えます。

生徒のアカウントなしで Webカードは開ける？

Convika のアカウントはいりません。

公開したページは、URL を開くだけで見られます。Webカードを受け取るロイロノートには、ふだんどおり学校のアカウントでログインします。ページは、iPad では Webカードの中で、Chromebook と Windows ではブラウザの別のタブで開きます。パスワードをかけたページは、パスワードを入れると開きます。