はじめに
QAエンジニアとして働きながら、JSTQB Advanced Level（テストマネージャー）の資格取得を目指して勉強しています。
市販の問題集がなく演習量が足りないと感じ、「自分専用の問題集サイトが欲しい」と思ったのがきっかけです。
とはいえ、私はプログラマではありません。HTML/CSS/JavaScriptを自分でゴリゴリ書けるタイプのエンジニアではなく、単なるQAエンジニアです。
そんな私でも、Gemini と Claude という2つのAIを乗り継ぎながら、実際に動く学習アプリを1本作り切ることができました。
この記事では、その制作プロセスと、途中で起きた「あるある」なつまずき、そしてQAエンジニアとしての普段のスキルがAIとのやり取りでそのまま活きたという話を共有します。
この記事で紹介すること
- Geminiのcanvas機能で最初のたたき台を作ってもらった話
- そこで発覚した「見た目はそれっぽいのに中身がスカスカ」という問題
- Claudeにバトンタッチしてゼロから作り直してもらった経緯
- 完成した問題集アプリの主な機能
- 不具合修正を依頼する際、QAエンジニアの「報告スキル」がそのまま活きた話
- 参考にしたJSTQBシラバスの出典・著作権について
第1章：Geminiのcanvas機能でとりあえず形にする
まずはGeminiのcanvas機能を使って、「JSTQB Advanced Level テストマネジメントの問題集サイトを作って」とお願いしました。
canvas機能はコードをその場でプレビューしながら生成してくれるので、非プログラマの自分でも「それっぽいUI」が一発で出てきたのは素直に感動しました。ダークテーマのクイズ画面、選択肢、正誤判定、ブックマーク、履歴画面……見た目のパーツは一通り揃っていました。また、良し悪しはるものの、こちらから提案していない仕様についても追加されていました。
第2章：動かしてみたら中身がスカスカだった
ところが実際にクイズを解き進めてみると、あることに気づきます。
あれ……問題番号は進んでいるのに、聞かれてることが全部同じじゃない？
見た目上は「問題数◯◯問」と表示されているのに、実際の問題文・選択肢の中身を見ると、章や項目のタイトルだけが差し替えられたテンプレート文がずっと繰り返されているだけでした。つまり 見かけ上のボリュームはあるのに、実質的には演習になっていない状態 だったのです。
事前に問題を作成してもらったのですが、問題数を増やす過程で参照されず、消失していました。
その他致命的な不具合を直してもらった物の、やりとりだけが増えていきます。
そこで大まかな仕様も決まった為、ここで、シラバスPDFとこの「不具合だらけの問題集HTML」の2つを持って、Claudeに相談することにしました。
第3章：Claudeにバトンタッチしてゼロから作り直す
Claudeに両方のファイルを渡し、「問題の中身が全部同じになってしまっている。全問題の内容が異なる、ちゃんとしたデータベースを持つ問題集サイトに作り直してほしい」といった旨のお願いしました。
Claudeはまずシラバス本体の構成（第1章〜第3章、節・項の階層）を読み込み、テンプレート使い回しが原因であることを特定した上で、問題データベースを一から設計・作成してくれました。最終的に、
- 練習問題：304問（K1〜K3レベル、全48項目それぞれに最低6問ずつ収録）
- 模擬試験：107問（K4レベルのシナリオ問題、章ごとの学習時間配分に比例して1回40問を自動抽選）
- 用語集：102語（ISTQB用語集をベースに、解答解説中の該当語にマウスを重ねると定義がポップアップ）
という、正真正銘中身の詰まったデータベースができあがりました。
※但し、人間の目で実際に問題や解答の正誤をチェックする必要があります。1日で作成した為、現状行えていません。問題の正しさは保証しかねます。
完成した主な機能
- 練習モード：出題範囲を章・節単位（例：1.1）で自由に選択、出題数も指定可能
- 模擬試験モード：範囲・問題数は変更不可の固定形式（本番相当のK4シナリオ問題）
- 学習履歴：セッションごとの記録に加え、章別・節別の累積理解度率を「％」と「正解数／累積問題数」の両方で表示
- ブックマーク：気になった問題を保存し、一覧からその場で解き直して○×判定を確認できる
- 誤答のみ再挑戦：結果画面から、間違えた問題だけを選択肢シャッフルし直して即復習できる
- 用語集ツールチップ：解答解説中の専門用語にカーソルを合わせると定義を表示
- ライト／ダークモード切り替え：好みに応じてワンタップで切り替え、設定は次回も記憶
- 誤操作防止：クイズ回答中はヘッダーのナビゲーションを非活性化し、うっかりタップで問題が中断されるのを防止
- 単一HTMLファイルで完結しており、ダウンロードしてブラウザで開くだけで動作
QAエンジニアの「報告スキル」がそのまま活きた話
個人的に一番の発見だったのが、Claudeに不具合を直してもらう過程が、普段の不具合報告業務とほぼ同じだったということです。
例えば、ファイルを共有してもらった直後、見た目が崩れて問題データも0件になるという不具合に遭遇したときは、次のような形で報告しました。
前提条件：共有されたHTMLファイルを開いた
実際の結果：CSSが一切適用されておらず、装飾のない素のHTMLが表示される。「練習問題プール0問」など、データも読み込まれていない
添付：実際の画面のスクリーンショット
確認したいこと：ファイル構成は本来すべて同じフォルダに置く前提なのか？
これに対してClaudeは、CSSやJavaScriptがサブフォルダ参照になっており、個別ファイル共有時にフォルダ階層が失われたことが原因だと特定し、以降は依存フォルダが要らない単一HTMLファイルに作り直してくれました。(今思えば当然最初に指定すべきでした。)
その後も、
- 「練習モードで選択肢を選ばなくても『次の問題へ』が押せてしまう」
- 「クイズ回答中に誤ってヘッダーのボタンを押すと問題が中断されてしまう」
- 「章のチェックボックスが、配下の節を選んでも連動してチェックされない」
といった形で、事象・再現手順・期待結果と実際の結果の差分を意識して伝えるようにしたところ、毎回スムーズに一発で意図通りの修正が返ってきました。振り返ってみると、これは普段Redmine やBTS（バグ管理システム）に起票しているバグチケットの書き方そのものです。曖昧に「なんか動きが変です」と伝えるより、QAらしく事実ベースで淡々と書いたほうが、AIに対しても圧倒的に手戻りが少ないと実感しました。
短期での作成の為、現状もスマホ画面での見切れ等不具合は多々ありますが...
さいごに
プログラミング経験がなくても、
- まずAIに作りたいものの完成形イメージを伝えて形にしてもらう
- 実際に動かして「テスト」する（ここはQAの本領発揮です）
- 見つかった不具合や要望を、事実ベースで具体的に伝える
というサイクルを回すだけで、自分専用の学習ツールが形になりました。今回は「Gemini→Claude」という2段構成でしたが(トークンの消費を抑えるためにも)、大事だったのはツールの選び方以上に、普段の仕事で培った「事象を正確に切り分けて伝える力」 だったように思います。
同じように「資格の勉強用に自分専用の問題集アプリが欲しい」という方や、非エンジニアだけどAIと一緒に何か作ってみたいという方の参考になれば嬉しいです。
作成したサイト
参考・出典
本アプリの問題は、以下のJSTQB Advanced Level テストマネジメントシラバスの内容を参考に、個人の学習目的で作成した非公式の問題集です。JSTQB®／ISTQB®が提供・監修する公式教材ではありません。シラバス本文の著作権はISTQB®（International Software Testing Qualifications Board）およびJSTQB（Japan Software Testing Qualifications Board）に帰属します。
- JSTQB公式サイト：https://jstqb.jp/
- JSTQB Advanced Level シラバス テストマネジメント Version 3.0.J04（PDF）：https://www.jstqb.jp/wordpress/wp-content/uploads/2026/06/JSTQB-Syllabus.Advanced_TM_VersionV3.0.J04.pdf
正式な試験範囲・最新のシラバスは、必ず上記の公式サイトでご確認ください。