みなさん、こんにちは。日本語教師のHinakoです。さて、もう永遠の課題ですが、単語をおぼえさせる方法。Genki１という教科書を使って初級を教えてもう１０年以上になりますが、語彙を覚える作業は「覚える・暗記する」という地道な努力が求められます。新しい職場に移り単語を完璧に書けないと大きなテストなどの点数が取れないので学生がクラスでひーひーゆって覚えています。
でもなんか昔と学生のタイプが変わってきてて、何かを大量に覚えるという経験が少なくなってきてて、単語テストとなるとみんなどよーんとしています。ひーひーいいながらも学生はがんばってるんですが、とにかく、ゲーム感覚で学び、でも単語を覚えてかけるようにする。多分、クロスワードパズルは、書きと意味の両方を活用できる良い素材だ思いました。
PDFで紙で与えていましたが、AIのチャッピー（ChatGPT）に「クロスワードサイト作れますか？」と聞いたところ、まさかのスピード感でコードを生成してくれ、なんとそのまま使えるサイトが完成しました。ただしちょっと微妙ですが一応シェアします。
ちなみに、げんきLesson１から６のクロスワードパズル（答えつきのPDFはこちから）
これは印刷して学生さんに書かせています。ちょっとした活動ですぐに終わってしまうペアなどはこれをクラスで最初に配っておいて、早く練習がおわったらこれをしなさいと言ってさせたりしています。（間違えなどがあればすみません）
チャッピーに依頼したプロセス
プロンプトはこちら。
あなたは「HTML＋JavaScriptで教育用クロスワードパズルを作るプロのフロントエンドエンジニア兼日本語教師」です。 目的： – 教科書『げんき I』Lesson 1〜Lesson 6 の語彙を使ったオンライン・クロスワードサイトを作りたいです。 – 作成したページは Google サイトの「埋め込み（HTMLコード）」で貼り付けて使います。 参照ファイル： – 添付した「Genki のクロスワード」の PDF（例：ilovepdf_merged (9)_organized.pdf）を読み込み、 そこに出てくる Lesson 1〜6 のクロスワードと語彙・ヒントを参考にしてください。 やってほしいこと： 1. 語彙・ヒントの抽出 – PDF から、Genki I Lesson 1〜Lesson 6 に対応するクロスワードの – 日本語の答え（基本的にはひらがな、カタカナ） – 英語または日本語のヒント をレッスンごとに整理してください。 – 元のレイアウトとまったく同じでなくて構いませんが、できるだけ同じ単語を使ってください。 2. 7×7 のクロスワードに再構成 – Lesson 1〜Lesson 6 それぞれについて、**7マス×7マス**のクロスワードパズルを1つずつ作ってください（合計 6 個）。 – 1つのクロスワードの中でタテ・ヨコに単語を配置し、黒マスも適切に入れてください。 – もし、すべての単語が 7×7 に入り切らない場合は、 – 重要語・代表的な語を優先して 7×7 に配置 – 入りきらなかった単語は、そのレッスンの下に「Extra Words」としてリスト表示 という形にしてください。 3. インタラクティブな入力フォーム – 各 7×7 グリッドは HTML の
<table>と<input type="text">などを使って実装してください。 – 各マスは1文字を入力できるテキストボックスにしてください（日本語 IME でひらがなを入力する想定）。 – 黒マスは入力できないセル（背景色をグレーなど）にしてください。 – タテ・ヨコの番号とヒントリストを、パズルの下に – Across（ヨコ） – Down（タテ） として表示してください。 4. 答えチェック機能（簡易でよい） – 各レッスンごとに「答えをチェック」ボタンを1つ設置してください。 – ボタンを押すと、そのレッスンのクロスワードの入力が正解かどうかを判定し、 – すべて正解なら「Perfect!」などのメッセージ – 間違いがあれば「いくつか間違いがあります」などのメッセージ をパズルの下に表示してください。 – 判定はフロントエンド（JavaScript）のみで完結させてください（サーバー通信なし）。 5. Google サイトに埋め込める形 – 出力は **1枚の HTML ファイル** として完結するコードを出してください。 – 外部ライブラリや CDN は使わず、プレーンな HTML・CSS・JavaScript だけで書いてください。 –<html>〜</html>を含む完全な HTML ではなく、 Google サイトの「埋め込みコード」にそのまま貼れるように、 できれば<div id="genki-crossword-app">から始まる形で書いてください。 （もし難しければ、通常の<html>〜</html>でも構いません。） 6. レイアウトとスタイル – スタイルは<style>タグ内に記述してください（外部 CSS なし）。 – 見やすいように： – クロスワードのセルは正方形にする – セルの枠線を表示 – レッスンごとに「Lesson 1」「Lesson 2」…と見出しを付ける – コード内に最低限のコメント（// 〜）を入れて、どの部分がどの機能か分かるようにしてください。 7. コード出力の形式 – 説明よりも「完成したコード」を優先して出力してください。 – まず完成した HTML＋CSS＋JavaScript のコードを 1 つのコードブロックとして出力し、 そのあとに、簡単な使い方（例：Google サイトでの埋め込み方法）を短く説明してください。 以上の条件をすべて満たす、Genki I Lesson 1〜6 用 のクロスワードサイトのコードを作成してください。
するとチャッピーは、驚くほどスムーズにJavaScriptとHTMLで動くコードを生成してくれましたが、しかし、クロスワードなのに全然クロスしてない。独立しててもはやただの穴埋め化とし、何度もやりなおし、もうただの穴埋めのところもありますが。まあよしとしました
コード貼り付けは２ステップ！
ステップ１：サイト黄色の＜ ＞をクリックしします。
ステップ２：Embedのコードに貼り付けるだけです。
完成したサイトはこちら
以下のサイトで公開しています。
Genki Vocabulary Crosswords
https://sites.google.com/view/genkicrossword/home
教科書『げんき』のL1〜L6の語彙を中心に、英語のヒントを手がかりにひらがなで答える形式です。手書きプリントとはまた違った体験ができます。
主な特徴：
- 英語ヒント × 日本語のひらがなで入力
- レッスンごとに5問のクロスワード
- 回答チェック機能つき（ただし正しい答えはでません）
- 学習者の自主学習にも適した構造
- Google Sitesを使っているため公開が簡単
授業の復習、語彙定着、ちょっとした小テストにぴったりだと感じます。
最後に
このクロスワードサイトは、実際の授業で試しながら改善していく予定です。私は全くコードを書けないんですが、意外とチャッピーとグーグルサイトで簡単にできるものなんですね。でも本当に自分の思うようになるには何度もコードを書き換える必要があり時間がかかりましたが、あっという間にとりあえず形になるので楽しかったです。みなさんもぜひ作ってみてくださいね。
読んでいただきありがとうございました。
