256 は最大値じゃなくて「個数」
基本情報技術者試験の科目Aサンプル問題（IPA公表 令和5年 第1問）。
8ビットで表現できる符号なし整数の最大値はどれか。
ア: 127 イ: 128 ウ: 255 エ: 256
エを選んだ人、気持ちはわかる。2⁸ = 256 だから。
でも 256 は「表せる値の個数」であって「最大値」ではない。0 から数え始めるので、最大値は 256 − 1 = 255。
じゃあ127（ア）はなぜ間違いか。128（イ）は何の数字か。——この「不正解の理由」が見える過去問サイトは意外と少ない。正解は表示されるけど、残り3つの選択肢がなぜダメなのかまで解説されていることはほとんどない。
そこで作ったのが Nazepass というWebアプリ。
Nazepass — 基本情報技術者試験 科目Aの学習アプリ
全選択肢に「なぜ正解か / なぜ不正解か」の解説がある のが最大の特徴。
- 無料・登録不要・ブラウザだけで使える
- IPA公開済み過去問72問（令和5年〜令和7年） + AI生成オリジナル48問、計120問収録（全問手動で正確性を検証済み）
- 解説を読んでもピンとこないときは、AIチャットで追加質問できる（無料・追加登録不要）
- ダークモード、キーボード操作（1〜4で選択/Enterで次へ）、ブックマーク、弱点カテゴリ検出
技術的には Nuxt 3 の SPA を Cloudflare Pages にデプロイしている。
解説のスタイル — 「おもしろ先生」
解説は Claude Sonnet で生成しているが、ただの教科書的な説明ではない。比喩とユーモアで「一度読んだら忘れない」解説を目指した。いくつか例を見せる。
例1：ドライブバイダウンロード攻撃
問題： ドライブバイダウンロード攻撃に該当するものはどれか。
選択肢アは「PCからHDDを物理的に盗み出し〜」。
これに対する解説：
ドライブバイの「ドライブ」は「車で通り過ぎる」という意味であり、ハードディスクドライブの略ではありません——引っかかった方、それは罠というより誤訳です。
「ドライブ」を HDD の Drive と読んだ人、手を挙げてほしい。私は最初そう読んだ。
例2：UDPのコネクションレス通信
問題： TCP/IPのトランスポート層で、コネクションレス型の通信プロトコルはどれか。
UDP の解説：
回覧板を廊下に置いて「あとは知らん」と立ち去る人——速いけど届く保証はなし。
HTTP を選んだ場合：
HTTP もアプリケーション層の住人で、トランスポート層には属しません。「HTTP 通信はコネクションレス的に見える」と思った方、惜しい——HTTP/1.1 はデフォルトで TCP 接続を維持します。層を一段間違えた探偵です。
「層を一段間違えた探偵」は、読んだら忘れない自信がある。
例3：丸め誤差と桁落ちの区別
問題： 浮動小数点形式で表現された数値の演算結果における丸め誤差の説明はどれか。
オーバーフローを選んだ場合：
これはオーバーフロー（桁あふれ誤差）の説明です。丸め誤差は「桁を超えた端数をどう処理するか」の話であって、最大値をぶち破る話ではありません。限界突破はまた別の事件です。
情報落ちを選んだ場合：
「乗除算において」と書いている時点でアウト——舞台を丸ごと間違えています。
丸め誤差・情報落ち・桁落ち・オーバーフローの4種類は毎回出題される定番テーマだが、区別できない人が多い。4つの不正解理由を並べて読むと「あ、そういう違いか」と腑に落ちる。
さらに「もっと詳しく」「覚え方のコツ」ボタンで切り口を変えた解説も出せる。
技術的にハマったこと
Claude Sonnet でないと精度が出ない
最初はコスト節約で Claude Haiku に解説を生成させた。結果、桁落ちと情報落ちの区別を間違えた。正解は当てるのに、不正解の「なぜ」の説明が逆になっていた。
Sonnet に切り替えたら正確になったが、それでも 全120問を手動で検算した。学習アプリで間違えた解説が頭に残ってしまうと本番で致命傷になる。ここだけは妥協できない。
Tailwind CSS のダークモードが動かない
@nuxtjs/tailwindcss v6 で dark: プレフィクスが効かない問題にハマった。darkMode: "class" を設定して resolved config にも反映されているのに、ビルド後の CSS に dark: つきのクラスが一切出力されない。原因は完全には特定できなかったが、Nuxt モジュール側の content scanning と JIT の噛み合わせが怪しい。
結局 CSS カスタムプロパティ (--np-*) で自前のダークモードを実装した。
@layer base {
:root {
/* === Surfaces — 生成 (Kinari) === */
--np-bg: #FAF8F5;
--np-card: #ffffff;
--np-text: #1a1a2e;
--np-muted: hsl(224, 12%, 46%);
/* === Primary — 群青 (Gunjou) === */
--np-accent: #5b4cd4;
--np-accent-hover: #4a3db8;
--np-accent-soft: rgba(91, 76, 212, 0.08);
}
html.dark {
/* === Surfaces — 深藍 (Fukaai / Shinkai night-sky) === */
--np-bg: #1A1A2E;
--np-card: #1E1E32;
--np-text: #E8F0FF;
--np-muted: hsl(224, 15%, 55%);
/* === Primary — 群青 dark === */
--np-accent: #9b8df5;
--np-accent-hover: #b8adf8;
--np-accent-soft: rgba(155, 141, 245, 0.10);
}
}
:root にライトモードの変数を定義して、html.dark で全部上書きする。Tailwind に依存しない分、むしろ安定している。新海誠の夜空をベースにしたダークモードの配色は個人的に気に入っている。
まとめ
現在120問。追加問題も同じく手動検証済みのものだけを公開していて、毎週10〜20問ペースで増やしている。応用情報（AP）やセキュリティマネジメント（SG）への展開も data/[examId]/questions.ts を1ファイル追加するだけの設計にしてある。
→ Nazepass — nazepass.pages.dev
無料・登録不要。スマホでもPCでも。
基本情報の科目Aで「なんとなく正解を覚える」勉強法に限界を感じている人に使ってほしい。不正解の理由を知ると、同じパターンの別の問題にも対応できるようになる。
基本情報で最初に引っかかった問題、覚えていますか？ コメントで教えてもらえると嬉しい。