Webアプリを個人開発した話（情報処理技術者試験の過去問対策サイト「戦国IT」）

はじめに

• この度、Webアプリを個人開発しました
• 戦国IT（it-shiken.com）は、情報処理技術者試験の過去問を“探しやすく・解きやすく・理解しやすく”まとめたサイトです
• フロントは Next.js(React)、バックエンドはPythonで実装しています
• アーキテクチャは全てAWSのサービスで構築しています
  具体的には、Webアプリのデプロイは、Amplify、バックエンドはAWS Lambda/API Gateway/Aurora Serverlessなどを使っています
• サイトの概要や技術的な話についても記載します

サイトの概要（誰のため？）

• 対象：応用情報・高度区分などの過去問で体系的に学びたい受験者
• 目的：
  • 問題を年度・区分・分野からすばやく発見
  • 模範解答・解説で理解を深める
  • 午後問題も掲載
  • AI採点による記述・論述問題の対策も可能
  • スマホでも読みやすいUIでスキマ時間学習を支援

サイトはこちらです → https://it-shiken.com/

なぜ作ったのか

• 情報処理技術者試験は1つのサイトですべての試験区分が揃っている事はあまりない印象です。そのため1つのウェブサイトですべての試験を網羅できるような対策サイトが作れればいいなと思いました。

• また情報処理技術者試験を受験する人は1つの資格を取ったら、終わりではなく、どんどん新しい試験に挑戦していく意欲的な人が多い印象なので、このサイトを使って合格した人が、また次の試験を受けるときにもこのサイトを使って試験合格まで使ってくれるようなサイトにしたいなと思っています。

• そのモチベーションを保つための手段として、統計情報として、今まで解いた問題の数や継続日数、正答率の数により称号が表示されるような仕組みも遊び心として入れてみたりしています。

• また、情報処理技術者試験では、午後問題の記述式がや論述式の問題があるのですが、それらの対策を行えるサイトはまだ数が少なく、近年流行のAIを使って自動で採点を行うような機能があれば良いなと思い実装しました。
  情報処理技術者試験は2026年4月からCBTによる試験へと切り替わるので、パソコンを使った演習を通じて、本番と同じようなPC環境を想定して、演習が行えると言う点でも今後需要があるサイトではないかなと個人的には思っています。

このWebサイトの機能一覧

このWebアプリの機能一覧をご紹介します。

• 過去問クイズ機能：情報処理技術者試験の午前問題をクイズ形式で出題

  • 選択肢を選択後に、グラフィカルな正答判定が表示されます。
    
    

• 解説掲載：午前・午後問題両方の詳細解説を掲載

  • 世の中に存在する情報処理技術者試験対策サイトは、午前問題のみ解説を掲載している物が多いです。一方で、戦国ITは午前・午後全ての問題の解説を掲載しています。
    

• 統計情報ダッシュボード：学習記録の保存でモチベーションアップ

  • クイズ形式で回答した問題一覧は、統計情報ダッシュボードに保存されます。
  • 解いた問題数、正答率、継続日数などに応じて、称号が変わります。
  • 苦手な問題一覧も表示されるため、苦手分野に絞った対策が可能です。
    
    

• 午後問題のAI採点：記述と論述の両方に対応

  • 午後（記述）：応用情報技術者試験の午後のような記述式問題
    
    

  • 午後問題（論述）：システムアーキテクトのような論述問題

    • 本番と同様に、回答の採点をA〜Dで判定
    • 模範回答もリアルタイムで出力
      
      
      

現在の対応試験（順次拡充）

現在は以下の試験に対応していますが、今後試験は拡充予定です。
全ての情報処理技術者試験に対応していく方針です。

• 応用情報（AP）
• データベーススペシャリスト（DB）、システムアーキテクト（SA）、ITストラテジスト（ST）、情報処理安全確保支援士（SC）、ネットワークスペシャリスト（NW）
  ※ 他区分も準備中。要望はコメント歓迎です。

アーキテクチャ（要点版）

アーキテクチャは以下のような感じです。

• フロント：Next.js（SSG主体、必要時SSR）+ Chakra UI
• 配信：S3 + Amplify（キャッシュ/圧縮/プリロード）
• API：API Gateway + Lambda（Python）
• DB：Aurora PostgreSQL
• 運用：ログ/メトリクス監視

全てAWS内で完結させることで、各サービスの親和性が高く、構築の手間が省けたり、セキュリティ設定も簡易になるといったメリットがあります。
例えば、AmplifyからはWAFを画面上で簡単に設定できる。ACMから発行したドメインを簡単に紐づけることができるといった点が便利だなと思いました。あとはコストもAWSのコンソール画面から一元的に管理できるので、何のサービスにどのくらいのお金がかかっているのかも一目でわかるのが良い点だなと思います。

開発でハマった/工夫した点（抜粋）

• AWSのフルマネージドサービスによる運用不可の低減
  • AmplifyとLambdaとAurora Serverlessを使ってフルマネージドで自身で運用が不要な設計としています。またドメインの設定はRoute53、証明書の取得はACM、そのほか環境変数の管理には機密かつローテーションが必要なものはSecrets Manager、パラメータについてはSystemsManager Parmeter Storeを使うことで、全てAWS内で完結するようにしています。
  • Lambda、Aurora AuroraServerlessは自動でスケーリングしてくれるので、管理の手間が省けるのが良いです。
• コスト最適化＋セキュリティ面の強化
  • ベストプラクティスに従い、DBはVPC内のPrivateサブネット内に配置しています。一方で、LambdaはVPC外に配置しています。LambdaからはOpenAIのAPIに接続する必要があるため、ネットワーク接続のルートが必須です。PrivateサブネットにLambdaを配置して、NAT Gateway経由でインターネットに接続するという手段もありましたが、NAT Gatewayはコストが割に高いのです。そのため、VPC外にLambdaを配置しつつ、Privateサブネット内のDBにも接続できるように、RDS Data APIを採用しました。RDS Data APIは、HTTPリクエストでDBに接続できるというものです( https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/AuroraUserGuide/data-api.html )。 これにより、VPC外から安全なアクセスが可能になります。
  • 通常のTCP接続に比べると数ミリ単位のレイテンシが発生する可能性もあるらしいですが、数ミリ単位の遅延は許容できるWebサイトなのでそこは許容しました。
• CSRとSSGの組み合わせによりSEO対策とユーザビリティの両立を実現
  • クイズ機能ではCSRを採用し、動的なサイトとしての挙動を実現
  • 静的ページにはSSGを採用し、Googleの検索エンジンのクローリング対象に含める
  • なおSSRを採用しなかった理由は、AmplifyではSSRにデプロイできるアーティファクトにサイズ上限があったためです。Webサイトには6千以上の静的Webサイトをデプロイしており、デプロイサイズの上限を超過するため、このような構成としました。
• Next.jsにて、（カッコ）を使ってディレクトリをグループ化し、URLパスに影響を与えずにレイアウトを分ける機能(ルートグループ)を使い、ログインが必須の画面とログイン不必要なページでの挙動を分けています。SSGのページではログインボタンの表示は非表示なので、表示しない＆ログイン情報を取得しないようにすることで、ページの表示速度の向上を実現しています( https://nextjs.org/docs/app/api-reference/file-conventions/route-groups )。

ロードマップ

今後は以下のような改善をしていきたいと思っています。

• UI/UXの改善
• AI活用箇所の拡充
  • 問題に対しての不明点を、ユーザ自身がLLMを用いてチャット形式で質問できるような機能を実装したいと思っています。
• 追加区分の拡充：要望順に対応予定

情報処理技術者試験は2026年の4月試験よりCBT化するため、PCを使った試験問題の演習は需要が高くなるかなと思っています。それに合わせてより良いサービスにして、一人でも多くの人が使ってくれるようになればと思っています。

最後に

最後まで読んでいただきありがとうございます。受験者の「解けた！」を増やすために、毎週改善を続けています。

まずは触ってみていただけると嬉しいです。
• サイトTOP：https://it-shiken.com

バグ報告・要望等のコメントも大歓迎です！
よろしければブックマーク＆シェアお願いします！