NotebookLMとGeminiで「令和7年度 税制改正 消費者向けクイズ」を作ってみた
どうでもいいキッカケ
娘のハンドボールを観るのと元ご近所さんの引越し祝いの予定しかないGW。
ハンドボールは先日、キャプテン負傷中という厳しい状況で、13年連続出場なるか？というプレッシャーの中関東大会進出をなんとか決めた。祝！！！
喜んでいるのも束の間、合同練習中に娘指骨折。
関東大会には間に合いそうだけれども、色々予定が狂って申し訳ない気持ち。
落ち込んでもいられないので、気を紛らわす暇つぶしとして、Webでミニコーナーでも作ろうと思い立つ。
私はHTMLはもちろん、CSSもJavaScriptも書けない。
でも、今はAIが居てくれる。
なんて素晴らしい時代。
さて、どんなミニコーナーを作ろうか？
ネタからAIに付き合ってもらう。
＊以前、おみくじアプリを作った一部始終はこちら
企画はファイナンシャルプランナー（FP）の立ち位置から
どうせ作るなら、ちょっとは役に立つコンテンツに仕立てようということで、税金クイズにしよう！と決めた。私が役に立つ知識なんぞは、どうでもいいバカ話かロックの話か酒の話かFPの話くらい。
FPの話が一般的だろうという判断。
税金の話で4択クイズ、企画はこれで決定。
ここまで5分くらい。
（実は、JGATARAで作ろうと思ったが、コンテンツ化が難しくただの紹介サイトになってしまった。3分で頓挫）
コンテンツ作りをNotebookLMに任せてみる！
ネタの大元は一次情報に当たるべし！
これはとっても大切なことなので、財務省が発表している「令和７年度税制改正の大綱」にアクセス。
これをNotebookLMに食わせる。
そして、
令和7年度の税制改革において、消費者目線からみる重要なトピックを10個まとめてください。
と書いてみると、ざっと出てくる。
この10のポイントを踏まえて、それぞれの4択クイズを作ってください。
これで消費者目線からみる重要な税金の話の4択クイズが10個できあがる。
コンテンツの完成。
ここまで5分もかからない。
実装のほぼ一部始終を公開
私はHTMLもCSSもJavaScriptも書けない。
よってAIに頼る。
NotebookLMでコンテンツ作ったのだから、なんとなくGeminiに相談してみる。
（Canvas を押して相談）
令和7年度 税制改正 消費者向けクイズ
というタイトルで、4択クイズのwebコーナーを作りたいです。
タイトル、問題、選択肢が表示されていて、選択肢をボタンで選べて、正解すると○不正解だと×が出るようにしたい。
サーバーの指定フォルダに入れると動くカタチでのhtml,cssもろもろ必要なファイルを作ってください。
デザインは、青を基調としたシンプルなデザイン。
レスポンシブル対応でお願いします。
と書いて、作ったコンテンツを羅列。
すると、コードが吐き出される。
1.上記のHTMLコードをコピーし、index.html という名前でテキストファイルとして保存します。
2.上記のCSSコードをコピーし、style.css という名前でテキストファイルとして保存します。
3.上記のJavaScriptコードをコピーし、script.js という名前でテキストファイルとして保存します。
これらの3つのファイルを同じフォルダに入れ、そのフォルダをWebサーバーにアップロードしてください。index.html にアクセスするとクイズが表示されます。このコードは、提供されたクイズデータを使用し、選択肢ボタンをクリックすると正誤判定が表示され、次の問題に進むシンプルなクイズ機能を実装しています。CSSで青を基調としたデザインと基本的なレスポンシブ対応を行っています。
なんて優秀なのだろう。
しかし、HTML、CSS、JavaScriptが続けて表示されている。
HTML、CSS、JavaScriptも書けない私には、それぞれの区切りがわからない。
よって、分けて貰うようにお願いする。
htmlとCSSとJavaScriptをそれぞれ分けて表示してください。
はい、承知いたしました。令和7年度 税制改正 消費者向けクイズのHTML、CSS、JavaScriptのコードをそれぞれ分けて表示します。
すぐに対応するGemini。
早速、3つのファイルをサーバーにアップしてみる。
押しても○、×が出ない。。。。。
コードを見ると、10問あるのに1問しか対応してないっぽい。
ボタンを押しても○×が出ないです。
また、1問だけでなく10問全て対応してください。
速攻対応。
○、×は出る。
が、○が出ようが× が出ようが、次の問題に進む。
それじゃーちょっと味気ない。
せめて正解しないと次の問題に進めないようになってないと。。。
問題に間違えた場合、正解するまで次の問題に進めないように修正してください。
で、とりあえず出来たミニコーナー。
最初から最後まで30分かからないくらいで完成。
（問題の正誤が合っているかは面倒なので未確認）
改良の余地は多分にあるにせよ、こういうクイズならすぐ作れますね。
暇つぶしにnoteを書いてみた連休最終日。