<h1 id="%E5%BF%9C%E7%94%A8%E6%83%85%E5%A0%B1%E3%81%AB%E5%90%88%E6%A0%BC%E3%81%97%E3%81%9F%E3%81%82%E3%81%A8%E3%80%81%E3%81%A9%E3%81%86%E3%81%97%E3%81%A6%E3%82%82%E4%BD%9C%E3%82%8A%E3%81%9F%E3%81%8B%E3%81%A3%E3%81%9F%E3%80%8C%E9%81%8E%E5%8E%BB%E5%95%8F%E6%BC%94%E7%BF%92%E3%82%B5%E3%82%A4%E3%83%88%E3%80%8D%E3%81%AE%E8%A9%B1" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E5%BF%9C%E7%94%A8%E6%83%85%E5%A0%B1%E3%81%AB%E5%90%88%E6%A0%BC%E3%81%97%E3%81%9F%E3%81%82%E3%81%A8%E3%80%81%E3%81%A9%E3%81%86%E3%81%97%E3%81%A6%E3%82%82%E4%BD%9C%E3%82%8A%E3%81%9F%E3%81%8B%E3%81%A3%E3%81%9F%E3%80%8C%E9%81%8E%E5%8E%BB%E5%95%8F%E6%BC%94%E7%BF%92%E3%82%B5%E3%82%A4%E3%83%88%E3%80%8D%E3%81%AE%E8%A9%B1" aria-hidden="true"></a> 応用情報に合格したあと、どうしても作りたかった「過去問演習サイト」の話</h1>
<p data-line="2" class="code-line">2024年春、私は応用情報技術者試験に独学で合格しました。<br>
そのときずっと思っていたのが、</p>
<blockquote data-line="5" class="code-line">
<p data-line="5" class="code-line">「もっとサクッとスマホで過去問を解けるサイトがあったらよかったのに…」</p>
</blockquote>
<p data-line="7" class="code-line">ということ。</p>
<p data-line="9" class="code-line">そこで合格後、過去の自分が「欲しかったもの」を形にしようと思い立ち、<br>
<strong>自作の過去問演習サイト</strong>を作り始めました。</p>
<hr data-line="12" class="code-line">
<h2 id="%F0%9F%90%B0-%E5%BF%9C%E7%94%A8%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85%E8%A9%A6%E9%A8%93%E3%83%8A%E3%83%93%E3%81%A8%E3%81%AF%EF%BC%9F" data-line="14" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%90%B0-%E5%BF%9C%E7%94%A8%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85%E8%A9%A6%E9%A8%93%E3%83%8A%E3%83%93%E3%81%A8%E3%81%AF%EF%BC%9F" aria-hidden="true"></a> 🐰 応用情報技術者試験ナビとは？</h2>
<p data-line="16" class="code-line">私が運営している過去問演習サイトです。</p>
<p data-line="18" class="code-line">👉 <a href="https://ap-shiken-navi.jp/" target="_blank" rel="nofollow noopener noreferrer">https://ap-shiken-navi.jp/</a></p>
<p data-line="20" class="code-line">現在は以下の内容で公開中です：</p>
<ul data-line="22" class="code-line">
<li data-line="22" class="code-line">📚 <strong>掲載問題</strong>：令和6年 春・秋の午前問題（合計160問）</li>
<li data-line="23" class="code-line">🧠 <strong>午後問題は未対応（今後対応予定）</strong>
</li>
<li data-line="24" class="code-line">💻 <strong>PC・タブレット・スマホ対応のレスポンシブデザイン</strong>
</li>
</ul>
<p data-line="26" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/f43e354a01b9-20250327.png" alt="サイトトップ画面" loading="lazy" class="md-img"></p>
<hr data-line="28" class="code-line">
<h2 id="%F0%9F%8E%AF-%E3%83%8A%E3%83%93%E7%89%B9%E8%A8%93%E3%83%A2%E3%83%BC%E3%83%89%E3%81%AE%E7%89%B9%E5%BE%B4" data-line="30" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%8E%AF-%E3%83%8A%E3%83%93%E7%89%B9%E8%A8%93%E3%83%A2%E3%83%BC%E3%83%89%E3%81%AE%E7%89%B9%E5%BE%B4" aria-hidden="true"></a> 🎯 ナビ特訓モードの特徴</h2>
<p data-line="32" class="code-line">特に力を入れて作ったのが「1問1答形式」の演習機能です。<br>
名前はちょっとポップに、「ナビ特訓モード」と呼んでいます。</p>
<h3 id="%F0%9F%94%A7-%E6%A9%9F%E8%83%BD%E3%81%BE%E3%81%A8%E3%82%81%EF%BC%9A" data-line="35" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%94%A7-%E6%A9%9F%E8%83%BD%E3%81%BE%E3%81%A8%E3%82%81%EF%BC%9A" aria-hidden="true"></a> 🔧 機能まとめ：</h3>
<ul data-line="37" class="code-line">
<li data-line="37" class="code-line">⚙️ 出題数・出題順・選択肢順をランダム設定可能</li>
<li data-line="38" class="code-line">📄 問題と解説はタブ切り替えで表示</li>
<li data-line="39" class="code-line">📊 回答後は正解数・不正解数・正解率を表示</li>
</ul>
<p data-line="41" class="code-line">「毎日3問だけ」「ランダムで復習したい」など、<br>
スキマ時間で効率よく学習したい人向けに設計しました。</p>
<p data-line="44" class="code-line">スマホでの操作イメージはこちら👇</p>
<p data-line="46" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/d00a285fbdfd-20250327.png" alt="ナビ特訓モード スマホ画面" loading="lazy" class="md-img"></p>
<hr data-line="48" class="code-line">
<h2 id="%F0%9F%94%A7-%E3%82%B5%E3%82%A4%E3%83%88%E4%BD%9C%E3%82%8A%E3%81%A7%E6%84%8F%E8%AD%98%E3%81%97%E3%81%9F%E3%81%93%E3%81%A8" data-line="50" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%94%A7-%E3%82%B5%E3%82%A4%E3%83%88%E4%BD%9C%E3%82%8A%E3%81%A7%E6%84%8F%E8%AD%98%E3%81%97%E3%81%9F%E3%81%93%E3%81%A8" aria-hidden="true"></a> 🔧 サイト作りで意識したこと</h2>
<ul data-line="52" class="code-line">
<li data-line="52" class="code-line">スマホでも片手でサクサク操作できるUI</li>
<li data-line="53" class="code-line">解説はHTMLで視認性・可読性を重視して構成</li>
<li data-line="54" class="code-line">1日1問からでも続けやすい設計</li>
</ul>
<p data-line="56" class="code-line">今後は以下のような機能も追加予定です：</p>
<ul data-line="58" class="code-line">
<li data-line="58" class="code-line">Googleアカウント連携（解答履歴の保存）</li>
<li data-line="59" class="code-line">午後問題の追加掲載</li>
<li data-line="60" class="code-line">間違えた問題の復習機能 など</li>
</ul>
<hr data-line="62" class="code-line">
<h2 id="%F0%9F%90%87-%E3%81%95%E3%81%84%E3%81%94%E3%81%AB" data-line="64" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%90%87-%E3%81%95%E3%81%84%E3%81%94%E3%81%AB" aria-hidden="true"></a> 🐇 さいごに</h2>
<p data-line="66" class="code-line">このサイトは、合格者として「これから受ける人の力になれたら」という思いで作っています。<br>
資格勉強は地道で孤独になりがちですが、<br>
<strong>“1日1問”でもコツコツ続けることで、合格は近づきます。</strong></p>
<blockquote data-line="70" class="code-line">
<p data-line="70" class="code-line">よかったら、のぞいてみてください👇<br>
👉 <a href="https://ap-shiken-navi.jp/" target="_blank" rel="nofollow noopener noreferrer">https://ap-shiken-navi.jp/</a></p>
</blockquote>
<hr data-line="73" class="code-line">
<p data-line="75" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/cddd102690da-20250327.png" alt="応用情報技術者試験ナビ ロゴ" loading="lazy" class="md-img"></p>
<p data-line="78" class="code-line">📌 サイト運営名義：<strong>うさぎ開発室</strong>（<a href="https://zenn.dev/rabbit_works" target="_blank">@rabbit_works</a>）<br>
ご意見・ご要望もお気軽にどうぞ！</p>


応用情報に合格したあと、どうしても作りたかった「過去問演習サイト」の話

🐰 応用情報技術者試験ナビとは？

🔧 サイト作りで意識したこと

html

Discussion