---
title: 勉強会_作問ツール特化_エンジニア向け_石黒友季子_20260524
tags: 
author: [smile_yukiko_it](https://www.docswell.com/user/smile_yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LJLM838RER.jpg?width=480
description: 勉強会_作問ツール特化_エンジニア向け_石黒友季子_20260524 by smile_yukiko_it
published: May 24, 26
canonical: https://www.docswell.com/s/smile_yukiko_it/ZN7VVQ-2026-05-24-095655
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LJLM838RER.jpg)

エンジニア勉強会 / 作問ツール特化
作問ツールのしくみと作り方
～ 良い問題の設計 × 1枚HTMLの実装（入力→プレビュー→出力）～
題材：うさうさ作問スタジオ（オフライン動作の単一HTMLツール）
面白きこともなき世を面白く
石黒友季子


# Page. 2

![Page Image](https://bcdn.docswell.com/page/47MY6D6P7W.jpg)

ORIENTATION
今日のゴールと進め方
ゴール
進め方（90分）
① 設計編：良い問題とは（25分）
• 「良い問題」の設計原則を説明できる
• 作問ツールの仕組み(入力/プレビュー/出力)が分か
② 実装編：ツールの仕組み（30分）
る
• 自分でも作問ツールを設計できる
③ 演習：作問する（25分）
④ 振り返り（10分）


# Page. 3

![Page Image](https://bcdn.docswell.com/page/P7R9P4PYE9.jpg)

WHY
なぜ「作問ツール」が要るのか
量産が大変
品質がブレる
再利用しにくい
研修・試験のたびに大量の問題が
必要
作る人・回ごとに難易度や形式が
揺れる
紙やバラバラの形式だと使い回せ
ない
ツール化＝「形式を固定」して、量産・品質・再利用をまとめて解決する。


# Page. 4

![Page Image](https://bcdn.docswell.com/page/PJXQ32347X.jpg)

設計①
良い問題は『測る力』を設計する
何を測りたいかでレベルを分ける（うさうさ式 Lv.1/3/5）
Lv.1 記憶
Lv.3 説明
用語・コマンドを思い出せるか
業務の文脈で説明できるか
Lv.5 応用
トラブルを切り分け・対処でき
るか


# Page. 5

![Page Image](https://bcdn.docswell.com/page/3JK9YMYPJD.jpg)

設計②
選択肢（ディストラクタ）を設計する
良いディストラクタ
ダメなディストラクタ
•
ありがちな誤解を反映している
•
明らかに違う（消去法で解ける）
•
正解と同じ粒度・長さ
•
長さや形式で正解がバレる
•
なぜ間違いか説明できる
•
ひっかけすぎ（実力で差がつかない）


# Page. 6

![Page Image](https://bcdn.docswell.com/page/LE3W9Y94E5.jpg)

実装
ツールの全体像：入力 → プレビュー → 出力
入力
プレビュー
出力
memo / TSV / auto
で素早く書く
その場で
出題画面を確認
HTML / CSV /
TSV / JSON
作問スタジオの実装も、この3段で構成されています（次から中身へ）。


# Page. 7

![Page Image](https://bcdn.docswell.com/page/8EDKG5G57G.jpg)

仕組み①
プレビューは iframe で“隔離”して描く
編集画面のCSS/JSと、出題画面の見た目を混ぜない
編集側（ツールUI）
入力フォーム・ボタン・
リスト表示など
プレビュー側（iframe）
受講生が見る
『出題画面そのもの』を
独立した文書で描画
→ 編集UIの装飾が出題画面に漏れない。出力HTMLと同じ見た目を即確認できる。


# Page. 8

![Page Image](https://bcdn.docswell.com/page/V7PK3G3DJ8.jpg)

仕組み②
データ構造：書きやすい入力を“構造化”する
入力（人が書きやすい形）→ パース → 内部データ（配列/オブジェクト）
memo形式 : 問題文→選択肢→正解 を行で区切って書く（parseMemo）
TSV形式
: 表計算からコピペ（parseTSV / splitTabOrCsv）
auto
: 入力を見て形式を推定（setFmt('auto')）
→ パース後は1問＝1オブジェクト（問題文・選択肢[]・正解・分類など）。
配列にして、出題・採点・出力すべてを同じデータから回す。


# Page. 9

![Page Image](https://bcdn.docswell.com/page/2JVV464GJQ.jpg)

仕組み③
1つのデータから 出題・採点・出力
出題
採点
出力
ランダム抽出・
分類で絞り込み（pick）
選択を集計して
正誤判定（scoreData）
HTML/CSV/TSV/JSON
で書き出し
分類バー（setClass）で範囲を絞り、必要な問題だけ出題・出力できる。


# Page. 10

![Page Image](https://bcdn.docswell.com/page/5EGL1NKDJL.jpg)

設計の勘所
エンジニアとして外せない3点
エスケープ
問題文にHTML記号が来ても壊れない（esc）
オフライン/保存
外部依存ゼロ・localStorageで作業を失わない
バリデーション
正解の欠落・選択肢不足を入力時に検知


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4JQYDQNX7P.jpg)

AI ACTIVATION
AIで“たたき台”、人で“精査”
人が確かめる
AIに任せる
•
問題案・選択肢の量産
•
正解が本当に1つか
•
ありがちな誤答(ディストラクタ)出し
•
測りたい力(Lv)に合っているか
•
memo/TSV形式での出力
•
事実誤認・古い情報がないか


# Page. 12

![Page Image](https://bcdn.docswell.com/page/K74WZNG2E1.jpg)

PITFALLS
作問の典型的な落とし穴
曖昧な問題文
正解が複数
ひっかけ過多
解釈が割れ、複数正解になる
『最も適切なものを』等で限定す
る
実力でなく注意力テストになる
プレビューで“受験者の目”で読み直すと、これらに気づける。


# Page. 13

![Page Image](https://bcdn.docswell.com/page/LJ1YR5DKEG.jpg)

演習1（15分）
1つのトピックを Lv.1/3/5 で作り分ける
好きな技術トピックを1つ選び、同じ題材で3段階の問題を作ってみよう。
Lv.1 記憶
✎
Lv.3 説明
✎
Lv.5 応用
✎


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GJWG15YP72.jpg)

演習2（10分）
ディストラクタ（誤答）を設計する
演習1のLv.1問題に、正解1つ＋『ありがちな誤解』の誤答3つを足す。
正解
✎
誤答①
✎
誤答②
✎
誤答③
✎


# Page. 15

![Page Image](https://bcdn.docswell.com/page/4EZLPNX673.jpg)

REFLECTION
振り返り
1
今日いちばんの学び
2
自分の現場で作問ツールを使う場面
3
次に検証したい設計


# Page. 16

![Page Image](https://bcdn.docswell.com/page/Y76WM84L7V.jpg)

今日の核
• 良い問題は『測る力』から設計する（Lv.1/3/5）
• ツールは 入力→プレビュー→出力。データは1本に保つ
• AIで量産、人で精査（正解の一意性・事実）
お疲れさまでした。面白きこともなき世を面白く