みなさん、こんにちは!CLS開発部の寺谷です。
最近は暑くて夜に寝付けない日が続いていますね。もう少しで秋の気配も感じられるようになるかと思いますので、体調管理には気をつけたいところです。
さて、資格勉強の暗記や問題演習って、同じテキストを何度も回しているとどうしても飽きてきちゃいますよね。
そこで今回は、GoogleのAIサービス「Gemini」のGenerative UI(動的UI生成機能)を活用し、「JSTQB Foundation Level (FL)」の自分専用Web問題集を作ってみた話を共有します!
環境構築ゼロ、無料プランでサクッと動きますので、資格勉強中の方はぜひ試してみてください。
1. 背景

JSTQB FL の試験対策を考える際に、いろいろ考えることがありました。
- 何から手をつけていいかわからない
- 過去問や予想問題を解きたいが、アプリを通して解答したい
- 自分の苦手な単元(例:テスト設計技法や境界値分析)だけを集中的に演習したい
- 単一のテキスト回答ではなく、「ポチポチ押してその場で正誤判定されるアプリ」で勉強したい
そこで、「GeminiにJSTQBのシラバスを理解させた上で、 Generative UI を利用して、その場で出力させればいいのでは?」と思い立ち、試してみることにしました!
2. Geminiの「Generative UI」とは?
Generative UIは、Google ResearchおよびGeminiチームによって2025年11月18日に正式発表されていたようです(気づかなかった)。
参考: Google Research
単にテキストで文章を返すだけでなく、ユーザーの指示内容(プロンプト)に応じて画面上に直接操作できる動的なコンポーネント(UI画面)をその場で自動デザイン・生成する機能となっています!
主な特徴
- 環境構築が不要: Webブラウザ上で指示(プロンプト)を投げるだけで即座にUIが立ち上がる
- 無料プランで利用可能: 特別な有料オプションなしでだれでも利用可能
- アプリ性: 選択肢のクリック、パラメータ変更などが画面上でリアルタイムに動く
つまり、「アプリを作って」と頼むと、設計、開発〜デプロイのプロセスを踏むことなく、チャット画面内にミニWebアプリがそのまま出現するのです。
これを活用すれば、資格学習用の問題集や暗記ツールも簡単に作れます。
3. 実際に作ってみたもの
4択クイズ&即時解説アプリ
GeminiのGenerative UIを活用し、JSTQB FLのシラバスに基づいたオリジナルの問題集アプリを作成しました。
画面の機能・特徴
– リアルタイム判定: 選択肢をクリックすると、その場で「正解 / 不正解」を判定
– 丁寧な解説: なぜその答えになるのか、シラバスに準拠した解説を表示
– 自動スコア集計: 10問解き終わると、自動でスコアと弱点傾向のフィードバックを出力
Geminiへは、以下のような指示文(プロンプト)を入力するだけで完了します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
JSTQB Foundation Level (FL V4.0) 第4章「テスト分析と設計」の例題を出してください。 問題文、選択肢、解説、UI上のボタン(「次へ」等)を含め、出力されるテキストはすべて「日本語」で記述してください。英語の出力は一切禁止です。 【出力形式の指定】 コードブロック(```html や ```javascript)での出力は禁止です。 チャット上に直接操作できるカード型のUIコンポーネント(Generative UI)として即座にレンダリングしてください。 【仕様と機能】 - JSTQB FL シラバス V4.0 第4章(同値分割法、境界値分析、デシジョンテーブルテスト、状態遷移テスト等)から10問の4択クイズを日本語で作成すること。 - 画面上で選択肢をタップすると、正誤判定と日本語の解説がその場で表示されること。 - 進行度(例: 1/10問)と正解数を表示し、最後にスコアと日本語のアドバイスを出力すること。 |
プロンプトを送信すると、まずチャット上に「開く」ボタンが付いたカード形式のコンポーネントが生成されます。この「開く」を押すとアプリ画面が立ち上がり、そのままポチポチと問題演習を進めることができます。
実際に使ってみると下図のようになります

10問すべての回答が完了すると、全体のスコアとシラバスに基づいた詳細なフィードバックを出力してくれます。

4. 使ってみて感じたメリットと注意点
メリット
- カスタマイズが数秒で可能。
- モチベーションが維持しやすい
- ピンポイントな弱点克服ができる
スマホやPCで手軽にポチポチ解けるため、隙間時間の演習に最適です。
注意点
- シラバスのバージョン確認
JSTQBのシラバスはバージョン(V3.1やV4.0など)によって用語や定義が更新されてます。間違えた用語を覚えないようにプロンプトで「JSTQB FL シラバス V4.0に準拠して」と明示しておくとより精度を上げることができます。 -
公式資料でのダブルチェック
AIの精度は高いですが、100%正確ではない場合もあります。生成された問題や解説は、公式のシラバスや過去問と照らし合わせて確認することをおすすめします。
5. まとめ
GeminiのGenerative UIを活用することで、「自分の学習スタイルに最適化された専用Webアプリ」を、ノーコードで即座に手に入れることができました。
今回はJSTQB FLの試験対策を例に試してみましたが、AWSやGoogle Cloudなどの資格試験、基本情報技術者試験、さらには社内ナレッジの定着クイズなど、アイデア次第で幅広く応用可能です。
学習効率を高めたい方や、生成AIの新しいフロントエンド体験を試してみたい方は、ぜひ今回紹介したプロンプトを活用して「自分専用の学習ツール」を試してみてください!
エコモットでは、モノづくりに共感してくれる仲間を募集中です!弊社に少しでも興味がある方は、ぜひ下記の採用ページをご覧ください!

