ヒリゾ浜_資格試験教材_開発記録

最初に用意したのは、安全統括管理者・運航管理者の試験申込ガイド。実際の予約操作を追いながら、プロメトリックIDの登録から、試験科目の選択、会場検索、支払い、2科目目の予約までを画像付きで並べた。

受験会場の予約枠は、同じ日でも科目によって空き状況が違う。みんなで一度に申し込めば同じ時間になる、というわけでもなかった。実際にやってみて分かった注意点だからこそ、マニュアルにも残した。

次は問題集。元の資料は紙だった。スキャナーを使い、300dpiのカラーで読み込み、高画質のJPEGにしてZIPでまとめた。ファイル名と印刷ページの順番が一致していなくても、ページ番号と問題番号を手掛かりに並べ直せる。

運航管理者20問、安全統括管理者20問。最初は画像をそのまま表示し、4つの選択肢を押す方式で試作した。これだけでも、PDFを眺めるよりずっと練習しやすい。

けれど、すぐに欲が出た。「画像ではなく、文字で表示した方がもっと読みやすい」。そこで問題文と選択肢をテキストデータに整理し、天気図など画像が必要な箇所だけ原稿を残す設計に切り替えた。

{
  "stem": "問題文をここに格納",
  "choices": ["選択肢1", "選択肢2", "選択肢3", "選択肢4"],
  "answer": 2,
  "explanation": "解説・学習ポイントを格納",
  "image": "assets/questions/op_01.jpg"
}

問題文・正答・画像を分けて持たせれば、見た目を変えても問題データはそのまま使える。法令改正に合わせた更新にも対応しやすい。もっとも、重要な表現や詳しい解説については原稿・法令との照合を継続している。

実際に4択を試してみたとき、「2番を選ぶつもりが1番を押してしまった」ということがあった。小さな操作ミスだが、スマホで使う人にとっては大事な問題だ。

そこで、選択肢全体を大きなボタンにし、選んだ瞬間には採点しないことにした。「この答えで決定する」を押すまでは、何度でも選び直せる。回答後は正誤と正解番号を表示し、最後には点数と間違えた問題の復習へ進める。

const correct = selected === question.answer;

// 選んだ時点では採点しない
// 「この答えで決定する」の操作で正誤を確定する
if (correct) {
  // 正解を表示
} else {
  // 不正解と正しい番号を表示
}

ところが、WordPressに組み込んだ最初のテキスト版では、選択肢の文字が一文字ずつ縦に並んでしまった。「船」「長」「気」「象」……見た瞬間、これは使えないと分かる。

原因は表示用CSS。番号の丸印と選択肢の本文を並べる部分で、文字の幅が正しく確保されていなかった。データそのものではなくレイアウトの不具合だったので、40問をスキャンし直す必要はなかった。

.hirizo-quiz .hq-choice {
  display: flex;
  align-items: center;
  gap: 13px;
}
.hirizo-quiz .hq-number {
  flex: 0 0 34px; /* 番号の幅を固定 */
}
.hirizo-quiz .hq-choice-text {
  flex: 1 1 auto;
  min-width: 0;    /* 文章の幅を確保 */
}

表示が直ると、4択の文章はすっきり横に並んだ。CSSを少し直すだけで、使い勝手は大きく変わる。画面を見てすぐに修正できるのは、AIと一緒に作る開発の面白いところでもある。

サイトはもともとWordPressのSTORK19で運営している。今回の問題集は、テーマのファイルを直接書き換えず、独立した小さなプラグインとして組み込んだ。これならテーマ更新の影響を受けにくく、画面の修正も管理しやすい。

add_shortcode('hirizo_quiz', 'hirizo_quiz_display');

練習問題を読み込んでいます…

プラグインはPHPで学習画面の入口を出し、JavaScriptで問題の切り替え・回答・採点を担当する。見た目は専用CSS、問題の内容はJSON。役割を分けた構成にした。

hirizo-quiz/
├─ hirizo-quiz.php
└─ assets/
   ├─ quiz.js
   ├─ quiz.css
   ├─ questions.json
   └─ questions/（原稿画像）

申込ガイドと問題集を作ったあと、2つを相互にリンクさせた。ページを行き来できれば、「申し込む」「勉強する」がひと続きになる。メニューにも入口を置き、URLを知っていれば誰でも開ける形にした。

アプリのインストールも、会員登録もいらない。スマホのブラウザだけで使える。いずれQRコードを紙に印刷すれば、同業者に手渡すこともできるだろう。

とはいえ、最初から全国に広めようと思って作ったわけではない。まずは自分たちが試験に合格すること。それが第一。その過程で間違いを見つけ、使い勝手を直し、教材を育てていく。

現時点の教材は、公式の2025年2月公表問題例をもとにした練習用。正答表との照合を進めている一方、問題文の文字起こしの細部、解説の法令上の根拠、公開資料の再利用条件については、引き続き確認が必要だ。

安全に関わる資格だから、見た目の完成度よりも内容の正確さが大切。便利な仕組みができたことと、教材の内容が完全に検証されたことは分けて考えている。受験結果や現場の声を踏まえながら、更新していきたい。