はじめまして！文系大学出身、現在SESでシステムエンジニアをしています、Stと申します。
この度、AWSやGCP、Azure、LinuCなどのIT資格の過去問・模擬問題を6,000問以上収録した、完全無料のWebサービス**「CloudQuiz（クラウドクイズ）」**を個人開発し、リリースしました！
🔗 CloudQuiz - 図解で理解するIT資格の問題集
https://cloudquiz-st.com
この記事では、「なぜ作ろうと思ったのか」「どうやって6,000問ものデータを用意し、爆速のサイトを作ったのか」について、技術的な部分も交えながらお話ししたいと思います。
1. なぜ作ったのか？（開発の背景）
私は新卒で営業職を経験した後、IT未経験からエンジニアに転身し、現在は入社3年目です。
業務ではインフラ構築（AWS / ECS / Lambda等）からフロントエンド（React / Vue.js）まで幅広く触れる機会をいただいていますが、**「自分自身のプログラミングスキル（ゼロからコードを書き上げる力）をもっと高めたい」「自分一人の力で、世の中で実際に使われるWebアプリを作り上げたい」**という強い課題感を持っていました。
同時に、業務のためにAWSなどの資格勉強をしている中で、以下の不満がありました。
- 無料の問題集サイトは広告だらけで見づらい
- 文字だけの解説が多く、アーキテクチャのイメージが湧かない
- スマホでサクッと勉強できるモダンなUIのサイトがない
「それなら、自分の勉強も兼ねて、最高の資格学習プラットフォームを自分で作ってしまおう！」と思い立ったのがきっかけです。
2. CloudQuizの特徴
今回開発した「CloudQuiz」には、学習者がストレスなく勉強できる3つの特徴があります。
① 全ての問題に「AIによる図解解説」付き
文字だけの解説ではクラウドの構成は理解しにくいため、生成AI（Gemini API）を活用し、すべての解説を「構造化された図解（Mermaid図）」付きで出力するようにしました。視覚的にアーキテクチャを理解できます。
② 圧倒的なサクサク感（爆速レスポンス）
Next.jsのSSG（静的サイト生成）を活用し、6,000ページ以上の問題をあらかじめHTMLとして生成。それをAWSのCloudFront（CDN）で配信しているため、画面遷移がゼロ秒で終わります。電車の中でのスマホ学習に最適です。
③ ダークモード対応・モダンなUI
勉強中の目の疲れを軽減するため、OSの設定に合わせたダークモードに対応。余計な装飾を省いたシンプルなデザインに仕上げました。
3. システムアーキテクチャと技術スタック
フロントエンドからインフラまで、モダンな技術を使って一人で構築しました。
【技術スタック】
- フロントエンド: React, Next.js (App Router), TypeScript
- スタイリング: Vanilla CSS (Tailwindは使わず、モダンなデザインシステムを自作)
- バックエンド（データ生成）: Python, Gemini API
- インフラ: AWS (S3, CloudFront, Route 53, ACM)
- CI/CD: GitHub Actions
【アーキテクチャ図】
ユーザーからのリクエストは Route 53 で名前解決され、CloudFrontのエッジサーバーがキャッシュを返します。オリジンは S3 バケットです。サーバーを持たない（EC2やコンテナを稼働させない）完全な静的ホスティングのため、アクセスが急増しても絶対に落ちず、コストもほぼゼロに抑えられています。
4. 開発で苦労したポイント：6,000問のデータ処理
一番苦労したのは、「どうやって6,000問もの問題データを用意し、それを静的ページにするか」です。
当初はデータベース（DynamoDBなど）から都度取得することも考えましたが、速度とランニングコストを最優先し、**「すべての問題をビルド時に静的JSONとして抱え込み、Next.jsで6,000ページを事前生成（SSG）する」**という力技のアプローチを取りました。
問題データ自体は、Pythonスクリプトを書き、マークダウンや生のテキストデータ群をGemini APIに投げて「解説と図解」を自動付与させながらJSON形式に変換・整形するパイプラインを構築しました。これにより、今後新しい資格を追加する際も、スクリプトを回すだけで一瞬でサイトに反映できる仕組みになっています。
5. おわりに
まだまだ駆け出しのエンジニアですが、要件定義からAPI連携、Next.jsでのフロント開発、AWSへのデプロイから独自ドメイン設定まで、一通りのフルサイクルを自分の手でやり切ったことは大きな自信になりました。（実は本業でも、ReactとAWSを使ったSSO構築などに携わっており、その知見が大いに活きました！）
現在資格の勉強をされている方、これからクラウドを学ぼうとしている方、ぜひ使ってみていただけると嬉しいです！
🔗 CloudQuiz
https://cloudquiz-st.com
「こんな機能が欲しい」「ここが使いにくい」などのフィードバックがあれば、ぜひX（Twitter）などで教えてください！今後の機能追加（ログイン機能や学習履歴の保存など）も予定しています。
最後まで読んでいただき、ありがとうございました！
（よろしければ いいね / LGTM お願いします！）