この記事はシリーズ構成となっており▶️マークが現在の記事となります
プロローグ
AIは「新人」であり「Web開発」である - 成果を最大化する生成AIとの付き合い方
第1部 僕がAIを最高の相棒にするまで：ブログ運営改善プロジェクト全記録
第2部 PMP資格の学習教材を、AIを相棒にしてゼロから作り上げる
【第1回】AIは優秀な壁打ち相手になるか？自作教材の構成レビューと改善提案
▶️【第2回】AIとの開発で品質を担保する！20章超の教材デザインを統一したHTMLテンプレート設計秘話
【第3回】ただのテキスト変換じゃない！AIに複雑な概念を「図解」させるプロンプト術
【第4回】AIは完璧じゃない！生成コードのエラーと向き合い、修正・改善した実践録
【第5回】総仕上げはAIと！試験対策用の「チートシート」を高密度レイアウトで作り上げた方法
【第6回】AIとのプロジェクト完遂！一連の体験から学んだAI時代のプロジェクトマネジメント術
第3部 AIを相棒にしたシステム開発プロジェクト全記録
テーマ: 大規模開発の仕組み作り
前回の記事はこちら:https://axis.migalo.co.jp/column/k018
① はじめに
こんにちは。AIを相棒にPMPのオリジナル教材を作成するプロジェクト、その開発記録をお届けする連載の第2回です。
前回は、プロジェクトの「キックオフ～分析」フェーズで、AIに教材ドラフトのレビューを依頼し、的確な改善案を得るまでのお話をしました。強固な土台ができた今、いよいよ本格的な開発、つまりMarkdown形式のテキストを 視覚的に分かりやすいインフォグラフィック（HTML） に変換していく工程に入ります。
今回は、その 「基盤設計」フェーズ がテーマです。全24章という膨大なコンテンツの品質をいかにして担保するか？その答えが「共通テンプレートの設計」でした。この記事を読めば、AIを活用して、大規模なドキュメントやWebサイトの品質とデザインを均一に保ち、開発効率を劇的に向上させる「仕組み作り」のヒントが得られます。
② 課題・目的
第1章のインフォグラフィック化をAIに依頼したところ、素晴らしい出来栄えのHTMLが完成しました。しかし、ここで一つの大きな課題が持ち上がります。
「このクオリティを、残り23章分、どうやって維持するんだ？」
もし、各章を作成するたびにAIに「いい感じのデザインにして」とお願いしていたら、アウトプットに微妙なバラつきが生まれることは確実です。見出しの大きさが違ったり、強調ボックスの色が章ごとに異なったり…それでは、教材全体としての一貫性が損なわれ、読者を混乱させてしまいます。
手作業でスタイルを統一するのは非効率的で、ミスも起こりやすい。何より、今後の開発スピードが著しく低下してしまいます。
目的： 全章で共通して利用できる、再利用可能なHTMLとCSSのテンプレートを作成すること。これにより、アウトプットの品質を平準化し、今後の開発を効率化する。
③ AIへの具体的な指示（プロンプト）
この課題を解決するため、私はAI（Gemini）に次の指示を出しました。単に「テンプレートを作って」とお願いするのではなく、その 「目的」と「背景」 を明確に伝えることを意識しました。
今回アウトプットしていただいた「000_第0章」のインフォグラフィックとフォルダ全体を確認して、インフォグラフィックのテンプレートを作成してください。
目的 今後のインフォグラフィック化の際に今回作成いただくテンプレートを踏襲することで、アウトプットの品質やデザインの均一化を図りたいです。
この指示のポイントは、すでにある成功事例（第0章のHTML）をベースにさせることで、私がどのようなデザインを求めているかを具体的に伝えた点です。ゼロから考えさせるのではなく、良い見本を提示することで、AIとの認識齟齬を最小限に抑えました。
④ AIの応答と結果
私の意図を正確に汲み取ったGeminiは、第0章のデザインを基盤としながら、今後の章で登場するであろう様々な要素（用語の定義、重要ポイントの強調、PMBOK第6版のITTOなど）を予測し、それらを表現するための汎用的なCSSクラスを組み込んだ、非常に完成度の高いHTMLテンプレートを提案してくれました。
提案されたテンプレートの主要な要素：
.card: 複数の要点を並列に見せるためのカード型レイアウト
.definition-box: 重要なキーワードを解説するための定義ボックス
.key-point-box: 特に伝えたいことを強調するためのまとめボックス
.itto-container: PMBOK第6版のITTO（インプット、ツールと技法、アウトプット）を色分けして表示するための専用レイアウト
.custom-table: 比較表などで使用する、デザインが統一されたテーブル
このテンプレートの完成により、以降の章の作成プロセスは劇的に変わりました。私は各章のMarkdownテキストを準備し、「このテキストを、あのテンプレートを使ってHTML化して」と指示するだけ。AIは、テキストの内容を解釈し、適切なコンポーネント（カードや定義ボックスなど）を使い分けながら、デザインが完全に統一されたHTMLを生成してくれるようになりました。
手作業でHTMLの構造やCSSを考える必要がなくなり、私はコンテンツの中身そのものに集中できるようになったのです。
（実際にAIが生成したテンプレートの実物がこちらです。以降の章は、すべてこの設計図を基に作成していくことになります。）
⑤ 考察・ポイント
AIと一緒に「仕組み」を設計した今回の経験から、以下の重要なポイントが見えてきました。
・最初に「スケーラビリティ」を考える 目先のタスクを一つこなすだけでなく、プロジェクト全体の作業量を見越して、「どうすれば楽に、かつ品質を保って拡張（スケール）できるか？」を考えることが重要です。初期段階でのテンプレート設計という「投資」が、後の膨大な「コスト（時間と労力）」を削減します。
・AIを「システムアーキテクト」として活用する AIは、言われたコードを書くだけのプログラマーではありません。プロジェクトの全体像と目的を伝えれば、それを実現するための最適な構造（今回の場合はテンプレートというシステム）を設計する「アーキテクト」の役割も担ってくれます。
・成功事例を「共通言語」にする 「こんな感じ」という曖昧な指示ではなく、「このアウトプット（第0章のHTML）のように」と具体的な成功事例を提示することで、AIとのコミュニケーションは格段にスムーズになります。良いアウトプットは、次のタスクの品質を保証する「共通言語」となるのです。
あなたのプロジェクトで試すには
あなたのチームで繰り返し作成されているドキュメント（報告書、設計書など）はありませんか？ その中の一つの完成品をAIに見せ、「このドキュメントの品質とフォーマットを統一するためのテンプレート案を作成して」と依頼してみましょう。属人化を防ぎ、チーム全体の生産性を向上させる第一歩になります。
⑥ まとめと次回予告
全24章という長丁場のプロジェクトにおいて、最初にAIと協力して共通テンプレートを設計したことは、品質、効率、そして私自身のモチベーションを維持する上で決定的な一手となりました。これは、AI開発に限らず、あらゆるプロジェクトにおける「標準化」の重要性を示唆しています。
さて、強力な武器となるテンプレートを手に入れたことで、開発のレールは敷かれました。しかし、PMPの難解な概念は、綺麗なテキストだけでは伝わりません。「タックマンモデル」や「鉄の三角形」のような、図で見て初めて理解できるフレームワークをどう表現するのか？
次回は、このテンプレートという制約の上で、AIを「デザイナー」として覚醒させ、複雑な概念をカスタム図解させるプロンプト術を深掘りします。
