【第90話】PDFから「図解マニュアル」を全自動生成するAIの作り方

前回はビジョン機能を使って汚れ判定アプリを作りましたね。

今回も新たなアプリを作ってみました。

PDFファイルをポンッと放り込むだけで、AIが中身を読み取り、中学生でも分かる「3ステップ」に要約し、さらに「分かりやすい図解（イラスト）」まで全自動で描いてくれる。そんな**「図解マニュアル全自動生成AI」**の作り方を大公開します。

ただ、今回はあえて私の**「リアルな失敗談（数々の真っ赤なエラー）」**も包み隠さずお見せします。

実はこのアプリを作る過程で、「最新のAIなのになぜかPDFを読んでくれない」「画像生成AIが謎のエラーを吐いてパニックになる」「せっかくの文章が消える」という、初心者が100%ハマる落とし穴にすべて落ちました（笑）。

でも、その失敗のおかげで「AIが裏側でどう動いているか」が痛いほど分かりました。プログラミング未経験の49歳が、清掃現場のしつこい汚れと戦うように、真っ赤なエラー画面と格闘の末に編み出した「絶対に失敗しない完全版」の作り方を、イチから丁寧に解説します！

---

結論：AIは「天才のバケツリレー」。渡し方を間違えると全員パニックになる

Difyのワークフローの正体は、複数のAIやツールを線で繋ぐ「分業作業」です。 今回、私が何度もエラーを出して学んだ最大の教訓は**「前の人の作業結果を、次の人に正しく手渡さないと、天才AIでも普通にパニックになる」**ということでした。

今回作るアプリは、以下の4人の作業員（ブロック）がバケツリレーをして完成します。

1. 受付係（ユーザー入力）： PDFを受け取る。
2. 文字抜き出し係（テキスト抽出）： PDFという金庫を開けて、中の文字だけを取り出す。（★私が最初サボって大失敗したポイント）
3. 脳みそ（LLM）： 文字を読んで「3ステップ要約」と「絵の指示書」を考える。（★AI同士の連携で大事故が起きたポイント）
4. 絵描き係（DALL-E 3）＆お客様対応（回答）： 指示書通りにイラストを描き、最後にお客様に「文章と絵」の両方を見せる。（★私が最後にやらかしたポイント）

私がハマった「罠」と解決策を交えながら、絶対に成功する手順を見ていきましょう！

失敗から学んだ！「図解マニュアル生成AI」の完全手順

今回はDifyの「チャットフロー」を使って、ブロックを左から右へ繋いでいきます。

STEP 1：受付係（開始ブロック）にPDFを持たせる

1. Difyのトップ画面から「アプリを作成する」＞「最初から作成」＞**「チャットフロー」**を選びます。
2. 左端の**「開始（START）」**ブロックをクリックし、入力フィールドの「＋」を押します。
3. フィールドタイプを**「単一ファイル」**にします。
4. 変数名に pdf_file、ラベル名に マニュアル(PDF)をアップロード と入力。
5. サポートされたファイルタイプで**「ドキュメント」**にチェックを入れて保存します。

STEP 2：【失敗談①】金庫破りの「テキスト抽出」を間に挟む

❌ 私の失敗： 最初は、STEP 1のPDFをそのまま直接「LLM（GPT-4o）」に繋ぎました。「最新のAIなんだからPDFくらい自力で読めるだろ」と思ったんです。 結果は惨敗。AIは「申し訳ありません、私は直接PDFを読めません…💦」と泣き言（エラー）を吐き出しました。PDFは「文字が固められた鍵付きの金庫」なので、AIは直接食べられなかったんです。

⭕ 解決策： 間に「金庫を開けて文字だけ抜き出す専用の作業員」を挟みます！

1. 開始ブロックの右側にある「＋」を押し、ツールの中から**「テキスト抽出（またはドキュメント抽出）」**を追加します。
2. 追加したブロックをクリックし、入力変数（Input）の欄で {x} を押し、STEP 1で作った pdf_file を選びます。

STEP 3：【失敗談②】AIの頭脳「LLM」に安全な指示書をセットする

❌ 私の失敗： STEP 2で無事にPDFが読めたものの、今度は次に繋いだ絵描きAI（DALL-E 3）が「コンテンツポリシー違反です！」と真っ赤なエラー画面を出してストップしました。 原因は、LLMが「PDFのここが読めません」とパニックになって出した謝罪文を、そのまま絵描きAIに「この絵を描いて！」と丸投げしてしまったため、絵描きAIが「こんな文章じゃ描けない！」とキレてしまったことでした。

⭕ 解決策： AI同士の連携ミスを防ぎ、LLMに「絶対に適切な指示書だけを書く」ようガチガチにルールを決め、さらに**「抜き出した文字」を正しく渡します！**

1. 「テキスト抽出」の右側に**「LLM」**ブロックを繋ぎます。モデルは「gpt-4o」を選びます。
2. 以下のプロンプトを「SYSTEM」にすべてコピペしてください。

▼ コピペ用：システムプロンプト（完全版）

Plaintext

あなたは「世界一分かりやすいマニュアル作成のプロ」です。
送付されたマニュアルの内容を正確に読み取り、以下の2つを作成してください。

1. 作業内容を、中学生でも分かるように「3つのステップ」に要約したテキスト。専門用語は分かりやすい言葉に置き換えてください。
2. その作業の様子を直感的に表現するための「イラスト生成用のプロンプト（英語）」。

【出力フォーマット（厳守）】
---
### 📝 作業の3ステップ要約
1. （ステップ1の解説）
2. （ステップ2の解説）
3. （ステップ3の解説）

### 🎨 画像生成プロンプト
（※ここに、画像生成AIに渡すための英語のプロンプトを1文章で記載してください。）
---

【画像生成プロンプトに関する厳重な注意点（絶対に守ること）】
* **【最重要】OpenAIの安全基準に完全に準拠したプロンプトを作成してください。**
* 不適切な表現を一切使用せず、中立的で、プロフェッショナルで、安全な作業風景を描写するように指示してください。

【読み込むPDFの内容】：

3. プロンプトの一番下（【読み込むPDFの内容】：のすぐ後）にカーソルを合わせ、{x}ボタンを押します。
4. リストの中から、最初のPDFではなく**「テキスト抽出」**ブロックの text を選んで挿入します。（これで金庫から出した文字が、確実に脳みそに届きます！）

STEP 4：「絵描き係（DALL-E 3）」を呼び出す

1. LLMブロックの右側の「＋」を押し、**「ツール」から画像生成AIの「DALL-E 3」**を追加します。
2. DALL-E 3ブロックをクリックし、「Prompt（描いてほしい内容）」の入力欄で {x} を押します。
3. 一つ前の**「LLM」**ブロックの text を選びます。

STEP 5：【失敗談③】回答ブロックで「文章」と「画像」を両方表示させる

❌ 私の失敗： よし、これで完璧！と実行ボタンを押すと……見事なイラストは出力されたのに、肝心の「3ステップの要約文章」がどこにも表示されませんでした。 原因は、最後の「お客様に見せる画面（回答ブロック）」の設定で、「絵描きAIの作った画像」しか指定していなかったからです。

⭕ 解決策： 回答ブロックに「LLMの要約」と「DALL-E 3の画像」の両方を持ってくるよう指示します！

1. DALL-E 3の右側に**「回答（Answer）」**ブロックを繋ぎます。
2. 応答（出力内容）の欄を一度空っぽにして、{x}を使って以下の2つを両方とも挿入します。
   • LLM ブロックの text （これが3ステップ要約）
   • DALL-E 3 ブロックの files （これがイラスト画像）

右上の「公開する」を押せば、ついに完全勝利です！

まとめ：真っ赤なエラーは、AIを使いこなすための「筋肉痛」だ

プレビュー画面で、清掃現場で使う「業務用スチームクリーナー」のような難解なマニュアルPDFをアップし、チャット欄に「マニュアルにして」と送信してみてください。

数秒後、**「分かりやすい3ステップの日本語解説」と、「笑顔で作業するスタッフの高画質なイラスト」**が同時にポーンと出力されます！

今回、私は何度もエラー画面を見て心が折れそうになりました。でも、一つ一つのブロックの意味を理解し、変数を正しく繋ぎ直すことで、思い通りの動きをしてくれた時の感動は、現場のしつこい汚れを一発で落とした時の爽快感に似ています。

プログラミング未経験の49歳でも、エラーと向き合えばこんな魔法のシステムが作れます。真っ赤なエラーは、私たちが成長している証拠（筋肉痛）です！同世代の皆さん、恐れずにどんどんAIをいじり倒しましょう！

次回もまだネタは考え中ですが、是非お楽しみに！