1日で、生成AI解析付きの ITパスポート学習サイトを作った話
はじめに
「AIを使うと開発が速くなる」とよく言われますが、実際にどこまで速くなるのか。
今回、私は 1日で、生成AIによる解説機能を持つ ITパスポート練習サイト を構築してみました。
作成したのはこちらです。
PassNote
https://passnote.app/home
今回の記事では、単に「AIを使いました」という話ではなく、
どの工程で、どのAIやツールを使い、どうやって短時間で形にしたのか を、開発フローに沿って紹介します。
最初に：今回使った主なAI・開発ツール
今回の開発では、以下のツールを役割ごとに使い分けました。
- Claude Design：フロントエンドのデザイン設計
- Claude Code：実装支援、画面構築、機能開発
- Vercel：フロントエンドのデプロイ
- Supabase：バックエンド構築・データ管理・デプロイ
- Mistral OCR：ITパスポート問題集のテキスト整理・データ化
重要だったのは、AIを万能なものとして使うのではなく、
工程ごとに役割を分けて使ったこと です。
なぜこのテーマで作ったのか
今回は、ITパスポートの学習サイトを題材にしました。
理由はシンプルで、学習サービスは以下の要素がまとまっているからです。
- 問題データの整備
- 出題機能
- 解説表示
- UI/UX設計
- バックエンド管理
- デプロイ
つまり、小さく見えて、プロダクト開発の主要要素が一通り入っている テーマだったからです。
その中で今回は、特に 「生成AIによる解説機能」まで含めて、どこまで短時間で作れるか を試しました。
開発フロー 1：まずは「作るもの」を細かく分解した
最初にやったのは実装ではなく、
サイトに必要な要素を分解すること でした。
例えば、最低限必要なのは以下です。
- 問題を表示する画面
- 選択肢を選ぶ機能
- 正誤判定
- 解説表示
- AIによる追加解説
- 問題データを保存・管理する仕組み
- 公開できる状態までのデプロイ
この段階で、
「全部を人力で丁寧に作る」と考えるのではなく、
どこをAIに任せると最も時間短縮になるか を考えました。
開発フロー 2：デザインは Claude Design で素早く方向性を固めた
最初の壁は、実装そのものよりも、まず UIの方向性を素早く決めること でした。
学習サイトは情報量が多いため、見た目が整理されていないと、それだけで使いにくくなります。そこで、フロントエンドのデザイン設計には Claude Design を使いました。
特に便利だったのは、一度に複数のビジュアル案を出し分けられること です。シンプル寄り、プロダクト感の強い案、やわらかい印象の案などを並べて比較できるので、短時間でも方向性を決めやすくなりました。
また、そこで固めたデザインの方向性を、そのまま Claude Code に渡して実装につなげやすかったのも大きな利点でした。デザインと実装を分断せず、設計からフロントエンド実装までをスムーズに進められたのは、今回の開発フローにかなり合っていたと感じます。
開発フロー 3：実装は Claude Code を使って一気に進めた
実装フェーズでは Claude Code を主に使いました。
今回特に助かったのは、ゼロからコードを書く時間を大きく圧縮できたことです。
例えば、
- コンポーネントのたたき台作成
- 画面遷移や状態管理の実装補助
- UIの細かい修正
- バグ修正の補助
- バックエンド接続部分の整理
といった部分で、かなりスピードが出ました。
ただし、全部を丸投げしたわけではありません。
実際には、欲しい仕様を自分で言語化し、出てきたコードを判断して繋ぎ直す作業 が必要でした。
ここで強く感じたのは、
AIが開発者を完全に置き換えるというより、
開発者が意思決定を行い、AIが実装の速度を押し上げる という役割分担です。
開発フロー 4：問題集の整理には Mistral OCR を使った
ITパスポートを含むIPA系列の試験は、公式に過去問が公開されており、商用利用も可能です。学習サービスを作るうえでは非常に扱いやすい環境ですが、一方でデータ形式は主に PDF で提供されています。
つまり、実際の開発では「問題が公開されているか」よりも、その問題をどうやってアプリで扱える構造化データに変換するか が大きな課題になります。
今回必要だったのは、問題文・選択肢・設問番号などを切り出し、最終的に JSON形式の問題データ として扱える状態にすることでした。そこで、問題集の整理には Mistral OCR を使いました。
PDFや画像ベースの問題データをテキスト化し、さらに後続の整形処理につなげやすい形に変換できたことで、問題データ化の初速がかなり上がりました。
この工程は一見地味ですが、実際にはかなり重要です。どれだけ画面や解説機能を早く作れても、元となる問題データが構造化されていなければ、学習サービスとしては成立しません。
生成AI時代の開発では、「コードを書く」ことだけでなく、PDFをアプリで扱えるJSONへ変換するような前処理の工程こそ、AIの恩恵が大きい と感じました。
開発フロー 5：Vercel と Supabase で公開可能な形まで持っていった
フロントエンドは Vercel、バックエンドは Supabase を使いました。
この組み合わせは、個人開発においてかなり相性が良いと感じています。
理由の一つは、コスト面です。
どちらも無料枠がかなり充実しており、個人開発や試作段階であれば十分運用できます。
「まず作って試す」というフェーズにおいて、初期コストをほとんど気にせず進められるのは大きなメリットでした。
さらに大きかったのが、両方ともCLIツールが充実していることです。
ローカル環境で一度設定してしまえば、Claude Code からCLI経由で各種操作を実行できるため、
- デプロイ
- 環境設定
- データベース操作
- プロジェクト構成の調整
といった作業をかなり自動化できました。
特に今回は、「AIにコードを書いてもらう」だけでなく、
AIがCLIを通じて実際の開発作業まで進められる環境を作れたこと が大きかったです。
手動で管理画面を触る時間が減り、開発全体のテンポがかなり良くなりました。
もちろん、サービス自体の使いやすさも魅力でした。
- フロントは素早く公開できる
- バックエンドやデータ管理も比較的すぐ立ち上がる
- 試作段階でも運用イメージを持ちやすい
つまり、
「作る」だけでなく、「すぐ触れる状態にする」までの距離が短い のが強みでした。
1日開発では、完成度を細かく磨くより、
まず「動くものを外に出す」ことがとても重要です。
その意味でも、この構成はかなり合理的でした。
1日で作れた理由は「AIがすごい」だけではなかった
今回の経験を通じて感じたのは、
1日で作れた理由は、単にAIの性能が高いからではないということです。
大きかったのは、
- 工程を分けて考えたこと
- ツールごとに役割を分担したこと
- 最初から完璧を目指さなかったこと
- まず動く形を優先したこと
でした。
つまり、
AIを使ったから速かった というより、
AIを前提にした開発フローを組んだから速かった という感覚に近いです。
AIと人間の役割分担をどう考えたか
今回の開発で、AIと人間の役割分担はかなりはっきりしていました。
AIに任せたこと
- デザイン案の初期生成
- 実装のたたき台作成
- データ整理の高速化
- 細かいコード補助
自分が担ったこと
- 何を作るか決めること
- どの機能を優先するか判断すること
- 出てきた案やコードの取捨選択
- 学習体験として成立する形に整えること
AIはとても強力でした。
ただ、それ以上に重要だったのは、
どこでAIを使い、どこで自分が責任を持つかを切り分けること でした。
おわりに
今回、生成AIを活用することで、
1日で生成AI解析付きの ITパスポート練習サイトを形にする ことができました。
もちろん、まだ改善できる点は多くあります。
しかし、以前なら数日から数週間かかっていた初期構築が、
今ではかなり短時間で実現できるようになっています。
その一方で、最後に必要なのはやはり人間の判断でした。
何を作るのか、誰のために作るのか、どこまで作るのか。
その意思決定があるからこそ、AIが本当に力を発揮するのだと思います。
AI時代の開発は、
「人が作る / AIが補助する」から、
「人が方向を決め、AIが構築を加速する」 フェーズに入っているのかもしれません。
