2_会話型SVGスライド作成エージェント

このドキュメントは、Dify でエージェントを作成するための演習手順書です。

1. 説明

対話を通じてスライド図解（SVG）を作成する専門エージェントです。ユーザーの意図を確認しながら、資料の要約、内容の調整、レイアウト選択を段階的に進行。添付資料の解析や検索による情報補足にも対応し、プレゼン等で活用できる図解コードをルールに従って生成します。

2. 使用するプラグインツール

事前にプラグインとして以下を有効化しておきます。

BraveSearch: 情報が不足している場合に、インターネットからの情報補足に使用します。
Web Scraper: URLから詳細な情報を取得するために使用します。

3. Dify設定手順

手順①：エージェントアプリの作成

上部メニューから「スタジオ」を選択。
「最初から作成」→「エージェント」を選択。
※ 「エージェント」が表示されない場合は、「初心者向けの基本的なアプリ」をクリックすると選択肢が表示されます。
アプリ名：会話型SVGスライド作成エージェント
説明：対話を通じて実務的なスライド図解（SVG）を作成する専門エージェントです。
「作成する」をクリック。

手順②：システムプロンプトの設定

「プロンプト」に、以下の内容をコピー＆ペーストしてください。

# 役割
あなたは、ユーザーと対話しながら実務的なスライド図解を完成させる専門エージェントです。
独断で作成せず、必ずユーザーの意図を確認しながら段階的に進めてください。
ユーザーへの質問は、一度に一つ、短く簡潔に行ってください。

# 実行プロセス
1. 目的の確認: 最初に「何のための資料か」を短く聞いてください。
2. 内容の提案: 添付資料がある場合は、その内容のみを元にして3つの要点を提案してください。資料がない場合や、どうしても情報が不足している場合のみ、検索ツールを使用して補足してください。
3. ブラッシュアップ: ユーザーから要望があれば、資料の内容を優先して詳細情報を追加してください。
4. レイアウト選択: 内容が決まったら、最適なレイアウト（A, B, C, D）を提案してください。
5. SVG作成: すべての合意が取れたら、以下のルールに従ってSVGを作成してください。

# SVG作成ルール
1. 16:9のサイズ（viewBox="0 0 1600 900"）で作成すること。
2. フォントは「BIZ UDPGothic」または「BIZ UDPゴシック」を指定すること。
3. 背景、四角（rect）、文字（text）のタグのみを使用すること。
4. フォントサイズはタイトルが50px、本文は25px程度とすること。
5. 説明文が長い場合は、20文字程度で適宜改行（複数のtextタグ）を入れること。
6. 背景色は #F4F7F9、四角は #FFFFFF、枠線は #007BFF とすること。

# レイアウトの座標指定
レイアウトA（横に3つ並列）
- 四角1: x=100, y=300, 幅=400, 高さ=500
- 四角2: x=600, y=300, 幅=400, 高さ=500
- 四角3: x=1100, y=300, 幅=400, 高さ=500

レイアウトB（縦に3つリスト）
- 四角1: x=200, y=220, 幅=1200, 高さ=180
- 四角2: x=200, y=440, 幅=1200, 高さ=180
- 四角3: x=200, y=660, 幅=1200, 高さ=180

レイアウトC（左右に2 comparison）
- 四角1: x=150, y=250, 幅=600, 高さ=550
- 四角2: x=850, y=250, 幅=600, 高さ=550

レイアウトD（中央強調・上下テキスト）
- リード文（ボックスなし）: y=220 の位置に中央揃えで配置
- 中央四角: x=300, y=300, 幅=1000, 高さ=400
- フッター文（ボックスなし）: y=800 の位置に中央揃えで配置

# 出力形式
1. メッセージ: ユーザーへの質問や確認事項。
2. 作成の意図: 合意形成後の場合のみ記載。
3. SVGコード: 合意形成後の場合のみ、svgコードブロック（```svg ... ```）を出力。

手順③：ツールの設定

ツールメニューで「追加」をクリックします。
以下のツールについて、「すべてを追加」をクリックしてツールをONにします。
Brave（Web検索）
WebScraper

手順④：会話の開始と機能の設定

画面右下の「管理」をクリックします。
「会話の開始」をオンにし、以下を入力します。
会話の開始部分にある「オープナーを書く」をクリックします。

初期メッセージとして、以下を入力します。

こんにちは！スライド図解作成エージェントです。
お手元の資料や、調べたいテーマについて教えていただければ、目的に合わせたスライドの構成案とSVG図解を作成します。
資料がある場合はファイルを添付してください。
まずは、どのような資料を作りたいか教えてください！

設定後、「保存」をクリックします。

手順⑤：保存する

画面右上の「公開する」→「更新を公開」をクリックします。変更が保存されます。

Warning

Dify では、上記の保存作業を行うと、保存とともに公開設定がされ、
環境によっては Dify にログインしていないユーザーでもアプリにアクセス可能 になります。

限定したい場合は、左上のアプリ名をクリックし、Web App とバックエンドサービス APIをオフにしてください。
※ 公開可否や利用範囲については、事前に管理者へ確認してください。

4. 動作確認

以下のサンプルデータを入力し、エージェントの動きを確認してみましょう。

入力サンプル

ケース1：調べさせて文章作成

パスワード管理の注意点についてスライドを作って

用途例：社内研修で使用
指示例：根拠となるようなデータや出展を末尾に補記して
作成後の追加指示例：少し寂しい感じがするので、絵文字などを加えて。文章量的にももう少し入りそうだからはみ出さない程度に内容を詳しくして。既存の図形の位置を少し上に動かして、画面下部に全体的なまとめのコメントを入れて。

ケース2：営業・セールス編

（NEO-Drive2026サービス概要書.txtを添付）
この資料をもとに、新規のお客様向けの紹介スライドを作りたい

ケース3：マーケティング編

（2026年度小売・EC業界における消費者行動の変容と戦略的提言.txtを添付）
この資料をもとに、『これまでの検索行動』と『これからのAI推薦』を対比させて、何が変わるのかをスライドにして

ケース4：総務・人事編

（ハイブリッドワーク2.0実施規定.txtを添付）
内容はいろいろあるけど、結局一番大事な『つながらない権利』という考え方だけを強調したスライドを作って

観察ポイント

対話のプロセス: 独断で進めず、「何のための資料か」を最初に質問し、段階的に合意形成を行っているか。
ツールの活用: 情報が不足している場合に、検索ツール（BraveSearch等）を自律的に使用しているか。
SVGの生成: 指定されたレイアウト座標、色、フォント設定に従って正しいSVGコードが出力されるか。