この記事はシリーズ構成となっており▶️マークが現在の記事となります
プロローグ
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/k019
① はじめに
こんにちは。AIと一緒にPMPのオリジナル教材を作るプロジェクト、その開発記録をお届けする連載の第3回です。
前回は、全24章に及ぶ教材の品質とデザインを統一するため、AIと協力して「共通HTMLテンプレート」を設計したお話をしました。これにより、開発の効率と一貫性を担保する強力な基盤が整いました。
しかし、優れたインフォグラフィック教材は、ただ綺麗なテキストが並んでいるだけではありません。複雑な概念やフレームワークを、いかに直感的に「見て」理解できるようにするかが鍵となります。
今回は、プロジェクトの核心である 「開発〜視覚化」フェーズに焦点を当てます。この記事を読めば、AIを単なるテキスト整形ツールとしてではなく、抽象的な概念を具体的な図に描き出す「デザイナー」として活用するための、一歩進んだプロンプト術が分かります。
② 課題・目的
共通テンプレートは、文章や箇条書き、用語解説といった定型的な情報を整理するには非常に強力でした。しかし、プロジェクトマネジメントには、文章だけでは伝えきれない概念が数多く存在します。
例えば、
・チームが成長していく5つの段階を示した 「タックマンモデル」
・ステークホルダーを権力と関心度で分類する 「パワー・インタレスト・グリッド」
・スコープ・コスト・時間のトレードオフを示す 「トリプル制約（鉄の三角形）」
これらの概念は、テキストで説明するよりも、図で示した方が遥かに理解が早いのです。テンプレートにあるカードやボックスだけでは、これらの関係性やプロセスを表現することはできません。
目的： AIへの指示を工夫することで、テンプレートにないカスタムな図解をHTMLとCSSだけで生成させ、複雑な概念の視覚的な理解を促進すること。
③ AIへの具体的な指示（プロンプト）
この課題を解決するためには、AIに「何をしたいか」だけでなく 「どのように表現してほしいか」 を伝える必要がありました。ここでは例として、「タックマンモデル」の図解を依頼した際のプロセスをご紹介します。
もし、私が単純にこう指示していたらどうでしょう。
（悪い例）
タックマンモデルを図解してください。
これでは、AIは単純な箇条書きや、意図しないグラフを生成するかもしれません。そこで私は、頭の中にある完成イメージを分解し、AIが理解できる「設計図」に翻訳して伝えました。
（良い例）
「タックマンモデル」の5つのステージ（形成期、混乱期、統一期、機能期、散会期）を、左から右へのプロセスフロー図として表現してください。
【要件】
・各ステージは、角丸の四角いボックスで表現します。
・ボックス間は、右向きの矢印（→）で繋ぎ、時間の流れを示してください。
・フロー図の下には、チームのパフォーマンスの変化を示すシンプルな折れ線グラフを追加してください。
・グラフは、「混乱期」で一度パフォーマンスが下がり、その後「機能期」に向けて大きく上昇する形にしてください。
・全体は、テンプレートの.sectionクラスの中に配置してください。
このプロンプトのポイントは、AIをデザイナーとして扱い、具体的な指示を出す「アートディレクター」になりきることです。「プロセスフロー図」「角丸ボックス」「右向きの矢印」「パフォーマンスが一度下がる折れ線グラフ」といったように、ビジュアルの構成要素を言語化して伝えることで、AIは迷いなくコーディング作業に入ることができるのです。
④ AIの応答と結果
この詳細な指示に対し、Geminiは私の意図を完璧に汲み取ったHTMLとCSSのコードを生成しました。生成されたコードは、私が設計図として伝えた通りの構造を持ち、視覚的にも非常に分かりやすいものでした。
（この指示によって、実際にAIが生成した図解がこちらです。）
この成功体験を元に、「パワー・インタレスト・グリッド」では2x2のマス目（グリッドレイアウト）を、「トリプル制約」ではCSSのborderプロパティを駆使した三角形を、それぞれAIに指示して作成させることに成功しました。
これらのカスタム図解は、教材の質を格段に引き上げました。学習者は、難解な概念を文章で追いかけるだけでなく、図を見ることで瞬時にその本質を掴むことができるようになったのです。
⑤ 考察・ポイント
AIに複雑な図解をさせる経験から、以下の3つの重要なコツが見えてきました。
頭の中のイメージを「言語化」する癖をつける AIへの指示は、プログラミングにおける「要件定義」と同じです。自分が何を作りたいのか、その完成形はどんな見た目なのかを、細部まで言葉で説明する能力が求められます。普段から「この図は、2つの円が重なっていて…」のように、物事を構造的に言語化するトレーニングが有効です。
HTML/CSSの基本的な構成要素で考える AIは魔法の杖ではありません。最終的なアウトぷっとはHTMLとCSSです。そのため、「この図はdivをflexboxで横に並べて…」「この線はborderで表現できそうだ」というように、実現可能なWeb技術の構成要素に思考を翻訳して指示を出すと、AIの精度は格段に上がります。
一度で完璧を求めず、対話で改善する 最初の指示で完璧なものが出来上がることは稀です。生成された図を見て、「矢印をもう少し太くして」「このボックスの色を薄くして」といったように、対話を通じて少しずつ完成度に近づけていくことが重要です。AIとの共同作業は、一度きりの指示ではなく、継続的なコミュニケーションなのです。
あなたのプロジェクトで試すには
あなたのプロジェクトで使われている、言葉だけでは説明しにくい業務フローやシステム構成図はありませんか？ その構造を言葉でAIに説明し、「この内容を表現するHTMLの図解を作成して」と依頼してみましょう。「AとBは矢印で繋がり、CはDを包含する」といった簡単な指示からで大丈夫です。
⑥ まとめと次回予告
共通テンプレートという「静的」な基盤の上に、プロンプトの工夫次第で「動的」かつ「創造的」なカスタム図解を追加できることが分かりました。これにより、AIは単なる作業者から、私たちの意図を汲んで表現してくれる優秀なデザイナー兼フロントエンドエンジニアへと昇華しました。
さて、テンプレートと図解のテクニックを駆使し、開発は順調に進んでいるように見えました。しかし、AIは常に完璧なコードを生成してくれるわけではありません。ある日、スマホで教材を確認した私は、致命的な表示崩れを発見します。
次回は、そんなAIの「不完全さ」とどう向き合ったか、「AIは完璧じゃない！生成コードのエラーと向き合い、修正・改善した実践録」と題して、デバッグとコード修正のリアルなプロセスをお届けします。
(シリーズ第２部第１回の記事はこちら：https://axis.migalo.co.jp/column/k018)
