前回の第5回「AIは『答えを持たない上司』を救えない」では、最新の推論AIに「1%の明確なゴールと意図」を与えることで、数千回の推論による絶大な複利効果が生まれること、そしてAI活用とは「最小部署のマネジメント」であることを解説しました。
しかし、AIがどれだけ素晴らしい提案や構成案を脳内で組み上げても、それを「人間が扱いやすい形」で現実世界に出力できなければ、結局コピペと微調整の地獄が待っています。
今回は、AIの1万回の推論を無駄にしないための「出力プロセスの構造化」と、私が現場でたどり着いた「脱パワポ・脱Mermaid」の生存戦略について解説します。
導入部：この記事の概要と前提環境
この記事では、AIが生成した高品質なテキストを、無駄なレイアウト作業なく最終的な資料（マニュアルや設計書）に落とし込むための「プロセス分割」と「Web技術の活用」について解説します。
- 対象読者: AIを使って業務資料、要件定義書、マニュアルなどを作成するすべてのエンジニア、PM
- 扱う技術スコープ: プロンプトの分割（チェーン）、Markdown、Notion、HTML/SVG/Tailwind CSS
- 前提知識: 基本的なHTMLの仕組みを知っていること。AIのCanvas（またはArtifacts）機能を使ったことがあること。
第1章：いきなり完成品を作らせるな。プロセスとトークンの分割
【起結】⏱ 10秒まとめ：本章の結論
AIにいきなり「完成されたレイアウトの資料」を作らせてはいけない。文章の推敲（推論）と、装飾（デザイン）のプロセスを完全に分割し、AIの脳のメモリ（トークン）を節約せよ。
【承】🌩 課題：こんなこと困るよね。難しいよね。
「この業務フローを元に、初心者向けの完璧なマニュアルをHTMLで作って！」
AIに仕事を頼む際、一番やりがちな「一発で終わらせようとする」プロンプトです。しかし、これに対するAIの出力は、往々にして「文章が薄っぺらい」「重要な説明が抜けている」といった結果になります。
なぜか？それはAIが「見出しのHTMLタグはどうしよう」「CSSのクラス名は何を当てよう」というレイアウトの計算に思考リソース（トークン）を奪われ、肝心の「文章を分かりやすくする推論」にパワーを使えなくなるからです。人間でも、デザインツールをいじりながら完璧な文章を考えるのは至難の業ですよね。
【転】💡 解決策：採用理由と他の選択肢
AIの思考リソースを最大化するための、出力プロセスの意思決定です。
-
選択肢A：プロンプトで「文章の質」と「デザインのルール」を両方詳細に指定する（見送り）
- 理由: 一度のプロンプトで指示する要件が多すぎると、AIのコンテキスト（文脈）が散らかり、どちらも中途半端なクオリティになるため。
-
採用案：「意図の共有・構成案（平文）」の作成と、「デザイン（装飾）」のプロセスを2段階に分割する
- 理由: 最初のステップでAIを「文章の中身（推論）」だけに集中させる。中身の合意が取れた後で、次のステップとして「単なる変換作業（デザイン）」をやらせることで、最高品質の成果物が最短で得られるため。
【結】💻 具体例・サンプルコード
一発で出させるのではなく、対話を通じてプロセスを分割する例です。
// ❌ 悪い例（AIのトークンをデザインに浪費させる）
「以下のメモから、イケてるデザインのHTMLマニュアルを一気に作成して。」
// ⭕ 良い例（Step1: まずは平文で中身だけに集中させる）
「ここまでの経緯や意図、対応をメンバーに共有したい。
まずは内容を詰めたいので、詳細かつ具体的に .md (Markdown) 形式で出力して！
出力先はCanvasに出力して！」
// ➡ Canvas（右画面）に出力されたMarkdownの平文を人間（上司）がレビュー・修正する。
// ➡ 内容が完璧になったらStep2へ進む（第3章へ続く）。
🔰 初心者向け解説：トークンと推論のトレードオフとは？
超一流のフレンチシェフ（AI）に「最高のフルコースを作って」と頼むのが平文での指示です。一方、「最高のフルコースを作りながら、ダイニングテーブルも木を削って自作して」と頼むのがいきなりHTMLを作らせる指示です。シェフに大工仕事（タグの計算）をさせたら、料理（文章）の味が落ちるのは当然ですよね。
第2章：最強の相棒「Notion」とMarkdownの活用
【起結】⏱ 10秒まとめ：本章の結論
AIと人間が「内容の合意」を取るための中間フォーマットとして、Markdown（平文）は最適である。そして、それを圧倒的に見やすく管理できるのがNotionというツールである。
【承】🌩 課題：こんなこと困るよね。難しいよね。
前章で「まずは平文（Markdown）で作らせる」と言いましたが、AIのチャット画面上に流れてくる長大なテキストは読みにくく、人間が「ここを少し直したい」と思ったときに手出しがしづらいという問題があります。
WordやGoogleドキュメントに貼り付けると、今度はMarkdownの記号（# や *）がそのまま表示されてしまい、見栄えを整えるためにまた手作業の「見出し設定」や「太字設定」が発生してしまいます。これでは本末転倒です。
【転】💡 解決策：採用理由と他の選択肢
人間がAIの出力結果（中間生成物）を素早くレビューし、修正するための環境選びです。
-
選択肢A：出力されたMarkdownを専用のエディタ（VS Codeなど）で管理する（見送り）
- 理由: エンジニアには良くても、非エンジニアのメンバー（PMやディレクター）には敷居が高く、チーム全体での共有や共同編集に向かないため。
-
採用案：AIにはCanvasに出力させ、レビュー後は「Notion」へコピペする
- 理由: 友人が使っていて便利だと教えてもらった「Notion」は、Markdownとの相性が異常に良いツールです。AIが出力したMarkdownをそのままコピペするだけで、一瞬で美しい見出しや表に変換されます。人間側での微修正も極めて簡単で、「AIとの協業」に最適なキャンバスになります。
【結】💻 具体例・サンプルコード
私が日常的に使っている、Notionを前提としたAIとの対話フローです。
// 1. AIへの指示（まずはMarkdownで骨組みと内容を固める）
「新システムの要件定義のドラフトを作ります。
詳細かつ具体的に.md形式で出力して！Canvasに出力して！」
// 2. AIがCanvasにMarkdownを出力
# 新システム要件定義
## 1. 背景
今回のリプレイスの目的は...（以下略）
// 3. 人間（自分）の作業
// Canvas上で内容がヨシ！と思ったら、全体をコピー。
// 自分のNotionページを開き「Ctrl+V（ペースト）」。
// ➡ これだけで美しいドキュメントが完成。ここで最終的な文言の推敲を行う。
🔰 初心者向け解説：MarkdownとNotionの関係とは？
Markdownは「レゴブロックの設計図」のようなものです（ここは見出し、ここはリスト、と文字の横に記号を書くだけ）。そしてNotionは、その設計図を流し込むと一瞬で「カラフルなレゴの城」を自動で組み立ててくれる魔法のテーブルです。
第3章：Web技術（HTML/SVG/Tailwind）の圧倒的優位性
【起結】⏱ 10秒まとめ：本章の結論
内容が固まった後の最終的な資料化において、パワポやMermaidは「不要な要件」や「互換性の罠」を生む。Webの力を借りた「HTML + Tailwind CSS + SVG」での出力が最も安定し、メンテナンス性が高い。
【承】🌩 課題：こんなこと困るよね。難しいよね。
Notionで内容が固まりました。「よし、これを顧客提出用（あるいは全社共有用）の綺麗な資料にしよう」となった時、多くの人が直面する地獄があります。
「パワポ（スライド）地獄」
A4やスライドの枠に綺麗に収めるために、文字サイズを0.5ptずつ削ったり、図形をミリ単位で動かす無駄な時間。
「Mermaid（図解生成）の罠」
AIに「フローチャートをMermaid形式で書いて」と頼むと便利ですが、いざプレビューアや他のツールに貼り付けると「バージョン違いでレンダリング（描画）エラーが起きて真っ白になった」という互換性のトラブルが頻発します。
【転】💡 解決策：採用理由と他の選択肢
内容が確定した後の「最終デザイン・フォーマット」の技術選定です。
-
選択肢A：PowerPointに出力させる（マクロ等）、またはMermaidを使う（見送り）
- 理由: パワポは「枠に収める」というAIが最も苦手な空間認識が必要であり、人間側の修正コストが高い。Mermaidは環境への依存度が高く、数年後に見られなくなるリスクがある。
-
採用案：最終出力は「HTMLファイル（Tailwind CSS + SVG）」一択とする
- 理由: Webに強いメンバーと話していて気づかされました。HTMLなら枠の制限がなく、どのOS・ブラウザでも安定して読め、文字の拡大縮小も自由自在です。さらにPDF化も簡単です。そして何より、Tailwind CSSとSVGの組み合わせであれば、AIは環境依存のない、グラフィカルで美しい図やレイアウトを極めて安定して書いてくれます。
【結】💻 具体例・サンプルコード
Notion（またはCanvas）で内容が確定したあとに、AIに投げる「仕上げのプロンプト」です。
// 内容（推論）の合意が取れた後、最後に投げるプロンプト
「内容はこちらで修正して完成しました。
この内容を、HTML形式の資料にして！
図やフローはSVGやTailwindow で書くこと。マーメイドは禁止。
スライドも禁止。
(詳しくないメンバがいる場合は追記する。)各コーナーに初心者向けの解説。
🔰 初心者向け解説：なぜHTMLとTailwindなのか？
パワポ資料が「氷の彫刻」だとすれば、HTMLは「水」です。氷は少しでも文字が増えると枠（グラス）からはみ出して削り直しが必要ですが、水（HTML）はスマホだろうが巨大モニターだろうが、器に合わせて自動で流動してくれます。Tailwindは、その水に一瞬で綺麗な色をつける魔法の入浴剤のようなものです。
おわりに：泥臭い「人間の足回り」が、AIの1万回の推論を制する
今回ご紹介したような「AIに指示を出すための短いプロンプト」の中には、実は無数の「アーキテクチャの選定理由」が詰まっています。
なぜMarkdownなのか？なぜNotionなのか？なぜMermaidを禁止し、Tailwind CSSを選ぶのか？
それは、私たちがこれまで直面してきた「AIの限界と裏側の構造」を知っているからです。
🔗 全6回の伏線回収：構造を知る者がAIを制する
思い返せば、これまでの連載で語ってきた泥臭い苦労は、すべて今のプロンプトや技術選定の根底に繋がっています。
-
第4回「Attention機構とトークンの制約」
AIがどう文脈を捉え、メモリ（トークン）を消費するかを知っているからこそ、デザインと推論のプロセスを分割する決断ができました。 - 第3回「なぜAI開発は地獄なのか？」-「終わりのないデータクレンジング」 AIの回答精度はRAGの「チャンク分割」で9割決まります。PDFのテキスト抽出など、泥臭い正規表現とパーサーのチューニングから逃げずに格闘した経験が、きれいな情報を渡す重要性を教えてくれました。
-
第3回「なぜAI開発は地獄なのか？」-「インフラコストの最適化」
すべてを高級な推論AIに丸投げするのではなく、安価なモデルやキャッシュを組み合わせる「AIに考えさせないアーキテクチャ」の設計思想は、今回の出力プロセスの最適化と全く同じです。
🚀 「1%の意図 × 1万回の推論」が導く次の次元
最新の推論モデルは、与えられた情報から何千、何万回と自問自答を繰り返し、ベストな答えを探し出します。しかし、そのスタート地点となる「1%の確かな情報」や「意図」は、AI自身には絶対に生み出せません。
現場の友人やWebメンバーとの会話から得た知見。
インフラ担当者から聞いた、絶対にシステムを止められないという泥臭い背景。
そして、データを綺麗にするためのエンジニアの執念。
それら「人間の足回り」で稼いだ情報と技術選定こそが、AIの1万回の推論と掛け合わさり、私たちの仕事を次の次元へと引き上げてくれるのです。
どれほどAIが進化し、便利になったとしても、最大限に効果を出すには「裏側の構造」を理解し、正しい情報を与える責任が伴います。最終チェックをし、世界に向けて成果物を提出する「最小部署の長」は、いつだって私たち人間なのですから。
全6回にわたり、AIの裏側と現場のリアルをお届けしてきました。この連載シリーズが、皆さんとAIとの新しい協業のヒントになれば幸いです。最後までお読みいただき、本当にありがとうございました！
単語一覧 (Glossary)
- トークン (Token): AIが一度に処理できる情報の単位。AIの「脳のメモリ・体力」のようなもので、レイアウト計算など余計なことに使わせると、文章を考えるための推論トークンが減ってしまう。
- Markdown (マークダウン): 見出しや箇条書きなどを、簡単な記号（# など）で表現するテキストの書き方。AIにとっても人間にとっても、最もノイズが少なく読み書きしやすい。
- Notion (ノーション): ドキュメント管理からタスク管理までこなす万能ツール。Markdownを貼り付けるだけで美しいドキュメントに変換されるため、AIとの相性が抜群。
- Tailwind CSS (テイルウィンド): HTMLのタグに直接「文字を大きく」「余白を空ける」といった指示（クラス）を書き込むだけで、モダンなデザインを作れるWeb技術。AIが得意とする。
- チャンク分割 (Chunking): 長い文章をAIが理解しやすい意味のまとまり（チャンク）に切り分けること。RAGにおいてこの精度がAIの賢さを左右する。