ChatGPTやGeminiで単語帳・フラッシュカードを作ってスマホやLINEに送る方法
要約
ChatGPTやGeminiに頼むと、タップでめくれる単語カードを1つのHTMLファイルで作ってもらえます。それを公開してURLにすれば、アプリを入れなくてもスマホのブラウザやLINEの中で開けて、友だちやクラスの生徒にそのまま送れます。読み上げやシャッフル、覚えた印の記録もつけられて、受け取る人にアカウント登録はいりません。
カード登録不要・公開1ページまで無料(月10,000ビューまで)
目次
英検や TOEIC、韓国語の勉強用に自分の単語帳を作りたいときや、クラスの生徒に単語カードを配りたいとき、ChatGPT や Gemini に頼むと、タップでめくれる単語カードを 1 つの HTML ファイルで作ってくれます。読み上げやシャッフル、「覚えた/まだ」の印をつける機能も頼めます。実際に Convika で公開された旅行英会話フレーズ 10 個の単語カード(タップでめくれて音声つき)では、公開した日(2026 年 10 月 12 日)の訪問者 5 人のうち 4 人が日本のスマホからで、3 人は LINE の中のブラウザで開いていました。アプリの登録をしなくても、作ったカードをスマホで使ったり、友だちや生徒に送ったりできます。
このページでは、AI への頼み方(プロンプトの例)と自分の単語の入れ方から、スマホのホーム画面に置く方法、URL で送る 4 つの手順、単語を足しても同じ URL のままにする方法、そして Quizlet や Anki との違いまでを順番に説明します。ブラウザの音声合成機能(Web Speech API の speechSynthesis)を使った読み上げの注意点や、「覚えた」印の記録(localStorage)がそれぞれの端末のブラウザにだけ残る仕組みもあわせて紹介します。
ChatGPT・Geminiでスマホ対応のフラッシュカードを作るプロンプト
ChatGPT や Gemini(Claude でも同じです)に頼むと、タップでめくれる単語カードを 1 つの HTML ファイルとして作ってくれます。下の文章をコピーして、覚えたい単語を入れ替えて AI に送ってみてください。実際に Convika で公開された「旅行英会話フレーズ 10 個の音声つき単語カード」では、公開当日(2026年10月12日)の訪問者 5 人のうち 4 人が日本のスマホからで、3 人は LINE のトーク画面内ブラウザでそのまま開いて使っていました。
スマホの画面で使いやすい、タップでめくれる単語カード(フラッシュカード)を作ってください。
【入れたい機能】
・カードをタップすると表(単語)と裏(意味・例文)がめくれる
・🔊ボタンを押すと単語を発音してくれる(iPhoneのSafariやLINE内ブラウザでも鳴るようにする)
・「覚えた」「まだ」の印をつけられて、進み具合がわかる
・覚えた記録はブラウザ(localStorage)に保存して、次に開いたときも残るようにする
・カードの順番をシャッフルできる
【作り方のお願い】
・そのまま公開できるように、HTML・CSS・JavaScriptをすべて1つのHTMLファイルにまとめてください。
・もし画像を使う場合は https:// から始まるアドレスにしてください。
【入れる単語リスト(ここを自分の単語に書き換えてください)】
1. 表:available / 裏:利用できる、手が空いている(Is this seat available?)
2. 表:confirm / 裏:確認する(I'd like to confirm my reservation.)
3. 表:delay / 裏:遅れ、遅延(The train was delayed due to heavy rain.)
プロンプトの中で「1つのHTMLファイルにまとめる」「CSSとJavaScriptも中に入れる」と指定しておくのがコツです。こうすると、AI が作ったファイルをそのまま公開したり配ったりできます。また、「覚えた」のチェック記録をブラウザ(localStorage)に保存する作りにしておけば、記録はそのスマホのそのブラウザの中にだけ残ります。友だちやクラスの生徒に同じ URL を配っても、自分の記録がほかの人に見えることはありません。
できあがりの例として、アプリの登録なしで旅行の英単語10枚のカードをめくり、🔊ボタンで英語と日本語の音声も聞ける読み上げつき単語帳のサンプルをそのままブラウザで試してみてください。
自分の単語リストを単語帳に入れる方法
教科書の単語リストや表計算ソフトで作った一覧、英検の級ごとの単語など、手元のデータからそのまま自分だけの単語帳を作れます。「単語,意味」の形で1行ずつ並べたテキスト(CSV)や、スプレッドシートからコピーした表を ChatGPT や Gemini に貼り付けて、「この単語リストで単語帳の HTML を作って」と頼むだけです。
- 表計算の貼り付け:「単語,意味」の並びや表からコピーした一覧をそのまま AI に貼って作成できる
- 単語の追加・修正:HTML 内の単語を直接書き換えるか、AI に追加を頼んで作り直せる
- 級や単元ごとの分割:単語が多いときはページを分けて整理できる(Free プランは公開 1 ページまで)
後から単語を少し足したいときは、出来上がった HTML ファイルの中の単語リストを直接書き換えてもよいですし、AI に「この単語を足して」と伝えて作り直してもらうこともできます。なお、教科書や市販の単語帳の例文などをそのまま載せるときは著作権に気をつけてください。授業やクラス内で配る場合の考え方は HTML を限定公開する方法 にまとめています。
iPhoneのホーム画面に置いてアプリのように使う
公開した単語帳は、iPhoneのホーム画面にアイコンとして置いておくと、専用アプリのようにワンタップで開けます。ストアからのインストールや会員登録もいらないため、通学中のスキマ時間にもすぐ復習できます。友だちや先生からLINEで送ってもらったURLはそのまま開くとLINE内のブラウザで表示されるので、ホーム画面に置くときは一度Safariで開き直してください。
- iPhoneのSafariで、公開した単語帳のURLを開きます(LINEで受け取った場合はSafariで開き直します)。
- 画面の「共有」ボタンをタップし、出てきたリストを下にスクロールします。
- 「ホーム画面に追加」をタップします(出てこないときは一番下の「アクションを編集」から追加します)。
- 名前を確認して「ウェブアプリとして開く」をオンにし、右上の「追加」をタップします。
メニューの中に「ホーム画面に追加」が見当たらないときは、リストの一番下にある「アクションを編集」から追加できます。なお、ホーム画面のアイコンは操作したスマホにだけ作られるため、生徒や友だちにもアプリのように使ってもらいたい場合は、それぞれの端末でこの手順を行ってもらってください。
単語帳を URL にして友だちやクラスに送る 4 つの手順
受け取った友だちや生徒は、アプリのダウンロードもアカウント登録もいりません。スマホのブラウザや LINE の中でそのまま単語カードをめくれます。
1. 単語帳のファイルかコードをボックスに入れる
ページ冒頭のボックスに、ChatGPT や Gemini で作った単語帳を入れます。.html か .htm のファイル(2 MB まで)なら「ファイルから」で選び、コードをコピーしたなら「コードから」に切り替えて貼りつけ、「プレビューのリンクをつくる」を押します。ここでは登録もメールアドレスもいりません。
2. ページを受け取ってカードがめくれるか確かめる
登録なしのプレビュー(3 分間だけ開けます)ではスクリプトが止まるため、カードをめくる・音声を読み上げるといった動きはまだ動きません。「このページを受け取る(無料・カード不要)」を押してアカウントを作ると、アップロードしたページがそのままアカウントに入り、スクリプトが動いてめくれるようになります。
3. 公開する
ページの画面で「公開する」を押すと、公開のしかたを選べます。無料の「一般公開」なら、リンクを知っている人はパスワードやアカウントなしで開けますが、検索結果や Convika のギャラリーに出ることがあります。検索にもギャラリーにも出したくないときは、公開するときの確認画面で「限定公開」を選びます(Pro・1年パス)。クラス外の人に見られたくないときは、Pro(月 ¥1,800)の「パスワードを知っている人だけ」も選べます。
4. URL や QR コードで友だちやクラスに送る
公開すると yourpage.convika.page のようなアドレスができます。「公開URL」の横の「コピー」を押して LINE やメールに貼るか、「QR コードを表示する」で出した QR コードを教室のスクリーンに映したり PNG 画像で保存して配ったりできます。あとから単語を足したときは、ページの画面の「新しいバージョンのアップロード」に新しいファイルを入れて「新しいバージョンとしてアップロードする」を押し、「プレビューを開く」で確かめてから「同じリンクで v2 を公開する」を押せば、同じ URL・同じ QR コードのまま中身だけ新しくなります。
単語を足しても、同じURLとQRコードのまま差し替えられる
テスト範囲が増えたり新しい単語を書き足したりしたときも、友だちや生徒にURLを送り直す必要はありません。Convikaのページの画面にある「新しいバージョンのアップロード」に更新したHTMLファイルを入れて、「新しいバージョンとしてアップロードする」を押します。「プレビューを開く」で表示を確かめてから「同じリンクで v2 を公開する」を押せば、これまでと同じURLのまま中身だけが新しい単語帳に切り替わります。
公開のボタンを押すまでは、開いた人には前の版が表示されたままなので、授業中や移動中でも落ち着いて確認できます。LINEで送ったアドレスはもちろん、プリントに載せたQRコードもそのまま新しい版につながるため、配り直す手間がかかりません。
Quizlet・Ankiと自作のHTML単語帳の違い
単語カードを作ってスマホで学んだり、友だちや生徒に配ったりする方法には、定番のQuizletやAnkiのほか、ChatGPTやGeminiにHTMLの単語帳を作ってもらうやり方もあります。App Storeの説明(2026年10月18日確認)によると、Quizletは無料で単語カードのセットを作成して友だちやクラスの仲間と共有したり、ほかの先生や生徒が作ったセットで学習したりでき、広告の非表示やオフラインでの利用などは有料のQuizlet Plusで対応しています。Ankiは公式サイト(apps.ankiweb.net、2026年10月18日確認)にあるとおり、復習のタイミングを自動で決める仕組みや音声・画像・動画を入れたカード作成に対応しており、パソコン版・AnkiWebの同期・AndroidのAnkiDroidは無料で、iOSの公式アプリであるAnkiMobileは開発資金をまかなうための有料アプリとなっています。一方、AIに作ってもらう自作のHTML単語帳は、見た目や動きを自由に決められ、Convikaで公開すれば受け取った人がアプリもアカウントもなしでブラウザからそのまま開けますが、復習タイミングの自動調整や学習記録の共有はAIに頼んで作り込まない限りなく、記録は端末ごとに残ります。
| Quizlet | Anki | 自作の HTML 単語帳(Convika で公開) | |
|---|---|---|---|
| 料金 | 無料・アプリ内購入(Quizlet Plus は有料) | パソコン版と AnkiDroid(Android)は無料、iOS の AnkiMobile は購入 | Free プランで公開 1 ページまで無料 |
| 人に渡す方法 | 友達やクラスの仲間と単語カードを共有できる | デッキを共有できる | URL か QR コードを送る |
| 受け取った人に必要なもの | Quizlet のアプリかサイト | Anki のアプリ | ブラウザだけ(アプリもアカウントもいらない) |
| 復習のタイミング | 間隔を開けた繰り返しの機能がある | 次に復習する日を自動で決める | AI に作り込みを頼まない限りない |
| 見た目と動き | アプリの学習モード | カードのレイアウトを変えられる | AI に頼んで自由に決める |
それぞれに特徴があるため、使う人や配る相手に合わせて選ぶのが合っています。ほかの人が作った学習セットも活用しながらクラスや友だちと共有したいときはQuizlet、音声や画像も使いながら自動の復習スケジュールでじっくり覚えたいときはAnkiが向いています。受け取る生徒や友だちにアプリのインストールやアカウント登録をしてもらわずにURLだけで単語帳を配りたいときや、自分の勉強スタイルに合わせて画面の見た目や動きをAIで自由に作りたいときは、自作のHTML単語帳が適しています。
よくある質問
ChatGPT でフラッシュカードは作れますか?
はい、ChatGPT に覚えたい単語と意味を渡して「タップでめくれる単語カードを 1 つの HTML ファイルで作って」と頼めば作れます。シャッフルや音声の読み上げ、「覚えた/まだ」の印をつける仕組みもあわせて頼めます。できたコードをページ冒頭のボックスの「コードから」に貼り、無料のアカウント登録をして公開すると、スマホでそのまま使えるリンクになります。
Gemini でフラッシュカードを作るには?
Gemini に単語の一覧を渡して、「スマホでタップしてめくれる単語帳を 1 つの HTML ファイルで作って」と頼みます。出てきたコードをページ冒頭のボックスの「コードから」に貼って「プレビューのリンクをつくる」を押し、「このページを受け取る(無料・カード不要)」から公開すると、めくる動きや読み上げが使えるようになります。公開された yourpage.convika.page のような URL をコピーして、自分のスマホや LINE に送って開けます。
単語帳を共有できるアプリはありますか?
Quizlet や Anki などのアプリでも共有できますが、相手にアプリのインストールや登録をしてもらわずに配るなら、HTML で作った単語カードを Convika でリンクにする方法があります。公開した URL を LINE で送るか、画面の「QR コードを表示する」から出した QR コードを教室のスクリーンに映すだけで、友だちや生徒はスマホのブラウザや LINE の中でそのまま開けます。実際に旅行英会話 10 フレーズの単語カードを公開した例でも、その日の訪問者 5 人のうち 4 人がスマホから、3 人は LINE の中のブラウザで開いています。
単語帳アプリは無料で自作できますか?
はい、ChatGPT や Gemini と Convika の Free プランを使えば、カード登録もなしで無料で自作できます。Free プランでは公開 1 ページまで、月 10,000 ビューまで「一般公開」で公開できます。検索結果に出さない「限定公開」は Pro・1年パスの機能です。あとから単語を足したくなったときも、「新しいバージョンのアップロード」から同じ URL と QR コードのまま中身だけを更新できます。
ChatGPT で単語テストは作れますか?
はい、ChatGPT に「タップで答えが見えて、覚えた/まだの印をつけられる単語カードを 1 つの HTML ファイルで作って」と頼めば、スマホで使える小テストのようなページが作れます。記録をブラウザに保存する(localStorage)作りにしておけば、どの単語を覚えたかの印はその人のスマホのブラウザにだけ残り、生徒や友だち同士で記録が見えることはありません。Convika にアップロードして無料登録し公開するとスクリプトが動くようになり、受け取った人は登録なしでテストに取り組めます。
音声つきの単語帳を自作できますか?
はい、ChatGPT や Gemini に「🔊 ボタンで単語を読み上げる機能をつけて、1 つの HTML ファイルで作って」と頼めば、音声つきの単語帳を自作できます。Convika で無料登録をして公開すると読み上げのスクリプトが動くようになり、iPhone の Safari でも LINE の中のブラウザでもそのまま音が出ます(登録前のプレビューではスクリプトが止まるため、まだ音は出ません)。実際に Convika で公開された旅行英会話 10 フレーズの単語カードも、タップでめくれて音声が聞ける形でスマホから使われています。
出典
- Quizlet:単語カードで学びましょう(App Store) (2026 年 10 月 18 日に確認)
- Anki - powerful, intelligent flashcards (2026 年 10 月 18 日に確認)
- iPhoneのSafariでウェブサイトをブックマークに登録する(Apple サポート) (2026 年 10 月 18 日に確認)
- SpeechSynthesis(MDN Web Docs) (2026 年 10 月 18 日に確認)
次のステップ
HTML ページにパスワードをかけて、知っている人だけに見せる方法
JavaScript で作った画面は、ソースを開けばパスワードが読めてしまいます。ChatGPT や Claude で作った HTML をアップロードし、自分のドメインのままサーバー側で確かめるパスワード付きのページにする方法を説明します。
関連記事
- 生成 AI で作った小テストを、URL で生徒全員に配るChatGPT や Gemini、Claude で作る 4 択クイズの HTML ファイルを URL にして、生徒が Chromebook や iPad からアカウントなしで解けるようにする手順です。答えるとすぐ正誤と解説が出る小テストを授業で配れます。
- AI で英語の並べ替え問題を作って、生徒のスマホで解けるリンクにする日本語の文と答えの英文を ChatGPT や Gemini、Claude に渡すと、単語をタップして並べ、答え合わせができるページを作ってもらえます。頼む文、公開して URL や QR コードで配る手順、答えがページに入っている限界まで。
- 九九ゲームを AI で作る。子どものスマホやタブレットでそのまま遊べるリンクにまちがえた九九を最後にもう一度出す九九ゲームを、ChatGPT や Claude、Gemini で HTML ファイル 1 つにして、子どものタブレットやスマホで開けるリンクにする方法です。そのまま使える頼む文、画面の大きさ、保存されることとされないことまで。
- HTML ファイルを LINE で送って、相手のスマホでページとして見てもらう方法LINE で HTML ファイルを送ると相手のスマホしだいで開けないため、ファイルではなく URL を送ります。ChatGPT や Claude で作った HTML を URL に変えて、トークに貼るだけで見てもらう手順を説明します。
- ChatGPT・Claude・Gemini で作ったゲームを、友だちがログインなしでスマホで遊べるように公開するChatGPT・Claude・Gemini で作ったゲームを、友だちがログインなしでスマホで遊べるように公開する方法。itch.io、GitHub Pages、Netlify Drop、CodePen、Convika の無料サービス 5 つの比較と手順です。
- HTML ファイルを、スマホで読み取れる QR コードにする方法QR コードに入れるのは HTML ファイルではなくページの URL です。HTML ファイルを公開して管理画面で QR コードを出す手順と、チラシや授業で配る前に確かめることを説明します。