技術ブログ

セキュリティを学習できるWebアプリを、ローカルLLMと組み合わせて開発してみた

情報処理安全確保支援士の新試験のシラバス案を参考に、ITセキュリティを学べる学習アプリ「ボルトと学ぶセキュリティ」を作成しました。解説への質問には、利用者のブラウザの中で動作するAI「ボルト」が回答します。質問内容はサーバーに送信されず、サーバー費用もかかりません。

目次

はじめに

情報処理安全確保支援士の新試験のシラバス案を参考に、ITセキュリティを学べる学習アプリ「ボルトと学ぶセキュリティ」を作成し、プレビュー版として公開しました。セキュリティに関心を持って学んでもらうことを目的にしています。四択問題90問と、事例を読んで答える問題41設問を収録しています。各問題には、身近な場面から順を追って説明する解説と、よくある疑問への回答を付けています。

解説を読んでも分からない点は、マスコットの「ボルト」に質問できます。ボルトの回答は、利用者のブラウザの中で動作するAI(言語モデル) が生成します。質問内容は外部に送信せず、端末の中だけで処理します。

主な特徴は次のとおりです。

項目 内容
AIの動作場所 利用者のブラウザの中(WebGPU)
質問・回答の送信 なし(端末の中だけで処理)
サーバー費用 なし(推論は利用者の端末で実行)
初回に必要なもの AIのデータのダウンロード(約3.0GB)
推奨環境 パソコン版の最新の Chrome または Edge(WebGPU に対応したもの)。GPU のメモリは8GB以上が目安。スマートフォンやタブレットは非推奨

スマートフォンやタブレットでは、メモリが足りずブラウザが落ちることがあるため、ボルトのAIのデータはダウンロードしないことをおすすめします。同じモデルはネイティブアプリなら動きますが、このアプリはインストール不要で使えることを優先して、ブラウザだけで作っています。

学習アプリ

下の枠の中で、そのまま利用できます。画面が狭いときは、全画面で開くと使いやすくなります。

全画面で開く全画面のページには「← 記事に戻る」があります

学習記録は、お使いのブラウザの中にだけ保存されます。アカウント登録は不要です。

仕組み

小さな言語モデルは、問題だけを渡すと、もっともらしい誤りを書くことがあります。たとえば、誤った選択肢を正解としたり、存在しない法律名を根拠に挙げたりします。そこでボルトには、問題ごとの解説を資料として渡し、その範囲で言い換えさせる 仕組みにしています。

モデルの読み込みと生成には、Google の LiteRT-LM(Web 版)を使っています。「AIの設定」で選べるもう一つのモデル(Gemma 4 E4B)では Transformers.js を使います。どちらも、画面が固まらないよう Web Worker の中で実行しています。

利用可能なモデル

モデル 動かす仕組み ダウンロードサイズ(目安) 利用規約
Gemma 4 E4B 軽量版(既定) LiteRT-LM 約3.0GB Apache License 2.0
Gemma 4 E4B Transformers.js(ONNX) 約4.9GB Apache License 2.0

軽量版は、同じ Gemma 4 E4B を、Google が Web 向けに用意した形式(文章だけを扱う版)で動かすものです。ダウンロードが小さく、回答も速くなるため、既定にしています。使うモデルは、画面右上の「AIの設定」で切り替えられます。

問題・解説とボルトの回答は、継続的に改善しています。AIの回答には誤りが含まれる場合があります。迷ったときは、解説を確認してください。

ボルトの回答の評価

ボルトに使うモデルは、このアプリのために独自に定めた基準(回答の品質と速度の目安)を満たすかどうかを、次の流れで評価して選びました。一般的な業界基準ではなく、このアプリの用途に合わせた内部の目安です。

ボルトの回答の評価の流れ:評価セットを作る、ブラウザで回答を作る、自動チェック、AIで採点する、人が確かめる、基準と照らす1評価セットを作る問題ごとの解説から約470件の質問(資料にない質問も含む)2ブラウザで回答を作る本番と同じモデル・指示文・設定・自動チェックを使う3自動チェック正解との食い違い、資料にない語、禁止内容、書き写し、日本語以外4AIで採点するClaude が作り話、応答、分かりやすさ、口調などを採点5人が確かめる採点役の判定が人の判断と合うかを、一部で確認6基準と照らすこのアプリのために定めた基準を満たすかを確認し、使うモデルを決める
  • 評価セットは、問題ごとの解説から作成した約470件の質問です。よくある疑問、「もっと詳しく」、用語の質問、資料では答えられない質問、一般的なIT用語の質問の5種類で構成しています。
  • 回答は、本番と同じ指示文と設定を使い、ブラウザの中で生成します。
  • 採点は別の大規模なAI(Claude)が担当します。解説と照らし合わせて、作り話がないか、質問に答えているか、分かりやすいか、ボルトらしい話し方か、資料にない質問に「分からない」と答えられるかを確認します。
  • 採点結果が人の判断と一致しているかは、一部を人が確認しています。

候補モデルの比較

候補としたのは、Gemma 3 270M、Qwen3 0.6B、Gemma 4 E2B、Gemma 4 E4B の4つです。Gemma 3 270M と Qwen3 0.6B は、最初の10件を確認した時点で基準に届かない見込みとなったため、採点の前に評価を打ち切りました。

最初の10件のうち、使える回答だった割合(モデルごと)。Gemma 3 270M は測定不能(基準を満たす回答なし)、Qwen3 0.6B は一部、Gemma 4 E2B と E4B はおおむね使える回答Gemma 3 270M測定不能(基準を満たす回答なし)Qwen3 0.6BQwen3 0.6B:質問からずれる・誤りが目立った(打ち切り)Gemma 4 E2BGemma 4 E2B:おおむね使える回答だったGemma 4 E4BGemma 4 E4B:おおむね使える回答だった
最初の10件のうち、使える回答だった割合

Gemma 4 E2B と E4B は、評価セットの全件で回答を生成して採点しました。縦の線が基準で、線を越えると基準を満たしています。

基準に対する達成度(Gemma 4 E2B と E4B)。縦の線が基準で、線を越えると満たす。E4B は作り話の少なさを除いて基準を満たし、E2B より多くの項目で上回ったGemma 4 E2BGemma 4 E4B基準作り話の少なさGemma 4 E2B:作り話の少なさは基準に届かないGemma 4 E4B:作り話の少なさは基準に届かない質問に答えているGemma 4 E2B:質問に答えているは基準に届かないGemma 4 E4B:質問に答えているは基準を満たす分かりやすさGemma 4 E2B:分かりやすさは基準に届かないGemma 4 E4B:分かりやすさは基準を満たすボルトらしい口調Gemma 4 E2B:ボルトらしい口調は基準に届かないGemma 4 E4B:ボルトらしい口調は基準を満たす資料にない質問への対応Gemma 4 E2B:資料にない質問への対応は基準を満たすGemma 4 E4B:資料にない質問への対応は基準を満たす代わりの表示の少なさGemma 4 E2B:代わりの表示の少なさは基準を満たすGemma 4 E4B:代わりの表示の少なさは基準を満たす回答が始まるまでの速さGemma 4 E2B:回答が始まるまでの速さは基準を満たすGemma 4 E4B:回答が始まるまでの速さは基準を満たす生成の速さGemma 4 E2B:生成の速さは基準を満たすGemma 4 E4B:生成の速さは基準を満たす
基準に対する達成度。縦の線を越えていれば基準を満たしています(基準を大きく上回る項目は、右端で止めています)

Gemma 4 E4B は、作り話の少なさを除くすべての基準を満たし、E2B を上回りました。この結果から、ボルトには Gemma 4 E4B を採用しています。

指標 Gemma 4 E4B の結果 基準
作り話(解説にない誤った事実) 2.6% 2%未満
質問に答えている 97.5% 90%以上
分かりやすさ(5段階) 4.42 4.0以上
ボルトらしい口調(5段階) 3.89 3.5以上
資料にない質問に「分からない」と答えた 96.7% 80%以上
代わりの表示になった 1.3% 10%以下
回答が始まるまで(中央値) 1.8秒 3秒以内

速さは、GPU に NVIDIA GeForce RTX 4060(メモリ8GB)を搭載したパソコンで測った値です。

作り話の少なさは基準にわずかに届いていません。作り話の約半分は、AIへの指示文の中の例を、関係のない回答に持ち込んだものでした。指示文の改善と、自動チェック・注意書きで補いながら、改善を続けます。また、用語の説明で、似た用語の役割を取り違えた回答が1件ありました(正解との食い違いとして数えています)。

免責事項

  • このアプリはプレビュー版です。問題・解説とボルトの回答は、継続的に改善しています。
  • 問題と解説は、内容を確かめて作成していますが、誤りや古い情報が含まれる可能性があります。制度や数値は、公式の情報で確認してください。
  • ボルトの回答は、ブラウザの中で動く言語モデルが生成します。解説の範囲で答えるようにし、表示する前に自動チェックで確認していますが、すべての誤りを防げるわけではありません。言語モデルの性質上、次のことがあります。
    • 解説にない事実や、誤った説明が含まれることがあります。迷ったときは、解説を確認してください。
    • 質問に直接答えず、関連する説明にとどまることがあります。
    • 日本語以外(韓国語など)で回答することがあります。検出した回答は自動で破棄し、代わりの案内を表示します。
    • 自動チェックで確認できなかった文を省いたり、回答の長さの上限で回答が途中で終わったりすることがあります。
  • このアプリの内容によって事実を誤認し、損害を被った場合でも、作者は責任を負いません。

プライバシー

  • 質問、ボルトの回答、学習記録は、端末の外に送信しません。
  • 通信が発生するのは、次のものを受け取るときだけです。
    • AIのデータ:Hugging Face から受け取ります。Hugging Face は、AIのデータを公開・配布している、世界で広く使われているサイトです。Google(Gemma)なども、ここで自社のAIのデータを公開しています。同意画面でダウンロードを選ぶまでは受け取りません。
    • AIを動かすプログラム:jsDelivr から受け取ります。jsDelivr は、Webサイトで使うプログラムを無料で配信しているサービスで、多くのサイトがここからプログラムを読み込んでいます。こちらも、ダウンロードを選ぶまでは受け取りません。
    • 文字のフォント:Google Fonts から受け取ります。Google Fonts は、Google が無料で配信している Webサイト用のフォントのサービスです。アプリを開いたときに受け取ります。
  • これらを受け取る際、お使いのブラウザから配布元に次の情報が送られます。どのサイトからファイルを受け取る場合でも、同じように送られる情報です。
    • IPアドレス(インターネット上の住所にあたる番号):データの返送先として必要です。
    • 受け取るファイルの名前:どのAIのデータかが分かります。
    • ブラウザと OS の種類、言語の設定:相手に合った形式で返してもらうために、ブラウザが自動で付けます。
    • このサイトの名前(mtzk.me):どのサイトから読み込まれたかを示すために、ブラウザが自動で付けます。
  • 質問、回答、学習記録が配布元に送られることはありません。配布元は、運用や不正利用の防止のために、これらの情報を記録として残す場合があります(Hugging Face、jsDelivr、Google Fonts のプライバシーポリシー)。
  • AIのデータを配布元から直接受け取るのは、データが数GBと大きく、このサイトから配信するのが難しいためです。

おわりに

問題と解説は、このアプリのために独自に用意しました。過去問は使用していません。アプリの内容(問題、解説、図など)の著作権は、Matsuzaka Research に帰属します。内容の誤りにお気づきの際は、お知らせいただけると幸いです。