応用情報に合格したあと、どうしても作りたかった「過去問演習サイト」をHTML＋JavaScriptで自作した話
はじめに
2024年春、応用情報技術者試験に独学で合格しました。
そのときずっと思っていたのが、
「もっとサクッとスマホで過去問を解けるサイトがあったらよかったのに…」
ということ。
そこで合格後、「過去の自分がほしかったもの」を形にするべく、
資格試験の過去問演習サイトを自作しました。
👇 サイトはこちら
📎 https://ap-shiken-navi.jp/
サイトの概要
応用情報技術者試験ナビというサイト名で公開中です。
現在は午前試験の過去問を対象に、以下の年度の問題を掲載しています。
- 令和6年 春・秋（160問）
- 令和5年 春・秋（160問）
- 令和4年 秋（80問）
📱 レスポンシブ対応で、スマホ・タブレット・PCすべてに対応しています。
▼ トップページ画面イメージ
ナビ特訓モードとは？
「1問1答形式」の演習モードで、名前はちょっとポップに「ナビ特訓モード」と名付けました。
主な機能：
- 出題数・出題順・選択肢順をランダム設定可能
- 問題と解説をタブ切り替えで表示
- 回答後は正解数・不正解数・正解率を表示
▼ スマホでの演習画面
通勤時間などのスキマ時間でも「毎日10問だけ」サクッと解けるよう設計しています。
使用した技術
| 要素 | 技術内容 |
|---|---|
| フロント | HTML（静的構成）+ Bootstrap5 + jQuery |
| 表示構成 | タブ切替、ランダムシャッフル、レスポンシブUI |
| 分析まわり | GA4 + Search Consoleで動向分析中 |
| サーバー側 | PHP（セッション管理のみ）※DB未使用 |
制作中に意識したこと
- モバイルファーストのシンプルなUI
- 解説ページはHTML構成にこだわり、視認性・可読性を重視（ul・brを多用）
- 1日1問でもコツコツ進められる仕組み
今後追加予定の機能
- 午後問題への対応（ジャンル選択式で予定）
- Googleアカウント連携（解答履歴の保存）
- 間違えた問題だけを復習するモード
Zennでも公開中📘
開発の経緯や背景について、Zennにもう少しやさしい語り口で投稿しています👇
👉 https://zenn.dev/rabbit_works/articles/ced3a0505342c7
さいごに
このサイトは、過去の自分のように「応用情報の勉強をしている人」に向けて作りました。
孤独な学習の中で「毎日少しずつ続けられる体験」を提供したいと思っています。
技術的な質問・フィードバックなどもお気軽にどうぞ🐰
📎 サイトURL
👉 https://ap-shiken-navi.jp/
📢 2025/04/11 更新
令和4年 春 午前問題（80問）を追加しました！
これで令和4年〜6年の午前問題がフルカバーされています🎉
引き続き、学習支援のための機能追加や問題拡充を進めていきます🐰
📢 2025/04/14 更新
令和3年 秋 午前問題（80問）を追加しました！
現在掲載中の問題数は、令和3〜6年 春・秋 午前問題あわせて 560問！
ナビ特訓モードでは、
✔️ 出題数・順番のランダム設定
✔️ 解説と問題のタブ切替
✔️ 正解数・不正解率の表示 など
スキマ時間でも続けやすい設計になっています🐰
午後問題やGoogle連携による履歴保存機能も今後対応予定です！