応用情報に合格したあと、どうしても作りたかった「過去問演習サイト」を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連携による履歴保存機能も今後対応予定です！
📢 2025/04/24 更新
サイト更新：「応用情報技術者試験ナビ」にお知らせ機能を追加＆広告導入のお知らせ
試験対策サイト「応用情報技術者試験ナビ」に、以下のアップデートを行いました。
🔔 お知らせ機能を追加しました！
- サイト上での更新情報（問題の追加・改善・仕様変更など）を確認できる「お知らせ」機能を実装。
- ユーザーが変化に気づきやすくなり、利便性向上につながります。
💡 Google広告を導入しました
- サイト運営の維持と、将来的な機能改善のため、広告（Google AdSense）を導入。
- 表示位置や量はできる限り控えめに調整しています。
引き続き、過去問はすべて無料でご利用いただけます。
今後ともご活用よろしくお願いします🐇
📢 2025/04/25 更新
「応用情報技術者試験ナビ」に令和3年春 午前問題（80問）を追加しました！
こんにちは、うさぎ開発室です🐇
応用情報技術者試験の受験者向けサイト「応用情報技術者試験ナビ」に、新たに 令和3年春 午前問題（80問） を追加しました。
🆕 追加内容
- 令和3年春 午前問題（80問）
- 全問に正答付き
- 「ナビ特訓モード」で1問ずつ演習可能！
🔎 試験直前対策にも！
スキマ時間で解ける設計にしており、スマホでも見やすく快適に学習できます。
今後も他年度の追加や、解説機能の強化を順次進めていく予定です。
📎 サイトはこちら
→ https://ap-shiken-navi.jp/
ご意見・感想はお気軽にTwitter（@rabbit_worksjp）まで🐇