プロンプト改善案：スライド風SVGインフォグラフィック作成

by

スライド生成プロンプトをより見やすく改善しました。

特に、レイアウトテンプレートを選ばせる手法が勉強になりました。

スライド生成プロンプトを改善したい

現在は以下のようなプロンプトを使って指示をしています。
しかし、1つのスライドの内容が網羅的になりすぎたり、文章が多くなったりして、視覚的にわかりやすいとは言いにくいものも出てくることがあります。
どのように指示を変更したらいいと思いますか？

プロンプトエンジニアとプレゼンテーション作成の専門家の見地から修正箇所を教えてください。

現在のプロンプトは非常に詳細で包括的ですが、視覚的にわかりやすいスライドを生成するには、いくつかの改善点があります。

現状の課題点 ① 内容の網羅性と視覚性のバランスが取れていない ・現在のプロンプトは技術的な設定に詳しいですが、「簡潔さ」「視覚的明快さ」 への具体的な指示が弱いです ② 文章量をコントロールする制約が不足している ・一スライドあたりの最大文字数や単語数の制限がありません ・情報過多になりがちで、視覚的な理解を妨げています ③ 情報階層の整理についての指示がやや不足 ・主題→副題→詳細という階層構造を強制する仕組みがありません ・情報の重要度を視覚的に表現するガイドラインが明確ではありません これらの課題を解決するための改善案を次のスライドから説明します 
# スライド風SVGインフォグラフィック変換プロンプト
## 目的
以下の内容を、スライド風SVGインフォグラフィックに変換してください。情報の概要をまとめて、全体像を視覚的に理解しやすく整理することを目指します。
いったん内容を要約し、文字情報は簡潔にまとめてからスライドを作成してください。

## デザイン仕様
### 基本設定
- 出力形式：SVG
- サイズ：640x360ピクセル（16:9）
- viewBox="0 0 640 360"を設定
- 可変サイズにするためsvgタグにwidthとheight属性は付けない
- XML宣言と適切な名前空間を含める

### カラースキーム
ただし、使う色は1つのスライドでメリハリが大事です。
デザイナーの視点でシンプルでみやすい配色を心がけて。
・70%（ベース：薄め）
・20~25%（メイン：黒テキスト）
・10~5%（アクセント：濃いめ）

#### 背景色グループ（背景・コンテナ用）
- 通常背景：#F1F0DF（情報・説明セクション用）
- 水色背景：#f3fafe （情報・説明セクション用）
- 黄色背景：#fff7cc （注意・ポイントセクション用）
- 赤色背景：#fdf2f2 （警告・重要セクション用）
- 緑色背景：#ebf8f4 （成功・推奨セクション用）

#### アクセントカラー（強調・アイコン・グラフ要素用）
- 赤系：#e60033, #e95295 （警告・否定的要素）
- 紫系：#884898, #55295b （高度・専門的な概念）
- 青系：#1e50a2, #0095d9, #2ca9e1 （情報・データ関連）
- 水色系：#00a3af （補足情報）
- 緑系：#007b43, #3eb370, #8bc34a （成功・肯定的要素）
- 黄緑系：#c3d825 （アクション・行動）
- 黄色系：#ffd900, #ffc107 （注意・重要ポイント）
- オレンジ系：#f39800, #ea5506 （警告・移行状態）
- 茶色系：#954e2a （歴史・伝統的要素）

### スタイル定義
- SVG内でスタイルを一元管理するために、<defs>と<style>要素を使用
- クラスベースのスタイル設定を採用（再利用性を高めるため）
- ただし、スタイル定義はそのSVGで最低限必要なものだけにしてください
- 例：
  ```svg
  <defs>
    <style type="text/css">
      text { fill: #333333; }
      .title { font-size: 24px; font-weight: bold;  }
      .subtitle { font-size: 16px; font-weight: bold; }
      .body-text { font-size: 12px; }
      .note { font-size: 9px; }
      .box { rx: 4; ry: 4; }
      .highlight-box { fill: #5E5E5E; }
      .highlight-text { fill: #FFFFFF; }
      
      /* カラーグループクラス - 背景用 */
      .bg-blue { fill: #f3fafe; }
      .bg-yellow { fill: #fff7cc; }
      .bg-red { fill: #fdf2f2; }
      .bg-green { fill: #ebf8f4; }
      
      /* アクセントカラークラス - 強調・要素用 */
      .accent-red { fill: #e60033; }
      .accent-pink { fill: #e95295; }
      .accent-purple { fill: #884898; }
      .accent-deep { fill: #55295b; }
      .accent-indigo { fill: #1e50a2; }
      .accent-blue { fill: #0095d9; }
      .accent-light-blue { fill: #2ca9e1; }
      .accent-cyan { fill: #00a3af; }
      .accent-teal { fill: #007b43; }
      .accent-green { fill: #3eb370; }
      .accent-light-green { fill: #8bc34a; }
      .accent-lime { fill: #c3d825; }
      .accent-yellow { fill: #ffd900; }
      .accent-amber { fill: #ffc107; }
      .accent-orange { fill: #f39800; }
      .accent-deep-orange { fill: #ea5506; }
      .accent-brown { fill: #954e2a; }
      
      /* テキスト用アクセントカラー */
      .text-red { fill: #e60033; }
      .text-blue { fill: #0095d9; }
      .text-green { fill: #3eb370; }
      /* その他のスタイル */
    </style>
  </defs>
  ```

### 背景設定
- タイトル領域（上部47px）：#F1F0DF
- メイン部分：#FFFFFF
- セクション分割背景：選択したカラースキームの淡い色を使用
- 項目テキストボックス：アクセントカラーまたは #5E5E5E


### レイアウト要素
- 情報の流れ：左から右、上から下
- 角丸ボックス（rx="4" ry="4"）を使用
- 関連する要素は適宜グループ化<g>してください
- 矢印や番号で情報の順序や関連性を示す
- シンプルなアイコンを<symbol>として定義し再利用
- アイコンは8種類以内に抑えて生成してください
 - アイコンの色は<use xlink:href="#gmail-icon" fill="#ffffff" color="#ffffff"/>のようにfillとcolorで設定する（ブラウザの都合）

### テキストスタイル
- フォントファミリー：'Meiryo', 'メイリオ', sans-serif（一貫して使用）
- テキストサイズ（重要：必ずこのサイズを維持すること）：
  - タイトル：24px （.title）, 中央揃え
  - サブタイトル/セクション見出し：16px （.subtitle）
  - 主要説明テキスト：12px （.body-text）
  - 補足テキスト：9px （.note）
- テキスト色：基本 #333333、ボックス内 #FFFFFF、強調時はアクセントカラー
- 見出し番号は除去する

### カラー適用ガイドライン
- 情報の種類や重要度に応じて適切なカラーを選択
- 関連する情報グループには同系色を使用
- コントラスト比を考慮し、テキストの可読性を確保
- カラーだけでなく形状や位置でも情報を区別（色覚多様性に配慮）
- 一つのスライドで使用するアクセントカラーは3〜4色に制限

## テキスト配置と重なり防止
- テキスト配置前に空間を確保し、重なりを防止
- テキストエリアには適切な幅と高さを設定
- textLength属性とlengthAdjust属性を使用してテキスト幅を制御
- 長い文章は簡潔にまとめてシンプルな図解にする
- 十分な要素間マージンを確保（最小2px）

## 視覚表現技法
- 概念は簡潔なアイコンで表現（<symbol>または<path>要素で定義）
- 関連情報は<g>要素でグループ化
- 重要ポイントは色やサイズで強調
- プロセスやステップは番号付きと矢印（→）で表現
- 情報の種類に応じて適切なカラーグループを適用
- 対比する概念には補色関係のカラーを使用

## SVG最適化のガイドライン
- 同じスタイルの要素はクラスで一元管理
- 繰り返し使用する図形やアイコンは<symbol>で定義し<use>で参照
- テキストは直接スタイリングせず、クラスを適用
- 複雑なパスは簡略化して軽量化

## 全体的な指針
- シンプルで読みやすいデザイン
- 情報密度とバランスを考慮
- 全体像を伝えることを重視
- 必要に応じて複数のスライドを生成可能
- 色彩の調和と視覚的階層を維持

## 変換するコンテンツ
```Code language: HTML, XML (xml)
  1. 内容の網羅性と視覚性のバランスが取れていない
    • 現在のプロンプトは技術的な設定に詳しいですが、「簡潔さ」「視覚的明快さ」への具体的な指示が弱いです
  2. 文章量をコントロールする制約が不足している
    • 一スライドあたりの最大文字数や単語数の制限がありません
  3. 情報階層の整理についての指示がやや不足
    • 主題→副題→詳細という階層構造を強制する仕組みがありません

プロンプト構造の比較

修正前
1# スライド風SVGインフォグラフィック変換プロンプト
2## 目的
3以下の内容を、スライド風SVGインフォグラフィックに変換してください。情報の概要をまとめて、全体像を視覚的に理解しやすく整理することを目指します。
4いったん内容を要約し、文字情報は簡潔にまとめてからスライドを作成してください。
5
6## デザイン仕様
7### 基本設定
8– 出力形式：SVG
9– サイズ：640×360ピクセル（16:9）
10– viewBox=”0 0 640 360″を設定
11…
12（技術的詳細が続く）
13…
14
15## 変換するコンテンツ
修正後
1# スライド風SVGインフォグラフィック変換プロンプト
2
3## 重要な全体指示
4このプロンプトは全て読んでからSVG作成に取り組んでください。まず内容を要約・整理し、情報の階層構造を明確にしてから視覚化作業を始めてください。
5
6## 1. 内容制限ルール
7– 1スライドあたりの最大文字数：150文字以内
8– 1スライドあたりの箇条書き項目：最大5項目まで
9– 見出し：最大25文字
10– 本文テキストブロック：最大40文字/行
11– 図解要素とテキスト要素の比率：図解60%：テキスト40%
12– スライド内のセクション数：最大3つまで
13
14## 2. 情報階層ガイドライン
15– 主題（タイトル）→副題（セクション見出し）→詳細（箇条書き・説明文）の3階層構造を徹底

内容制限の明確化

この改善は「情報過多」の問題を解決するためのものです。

改善提案①：内容制限の明確化 テキスト量の制限 1スライドあたりの最大文字数： 150字 見出し：最大 25字 本文テキストブロック：最大 40字/行 箇条書き制限 1スライドあたりの箇条書き項目： 最大 5項目 図解とテキストの比率 理想的な比率 図解要素: 60% テキスト要素: 40% セクション数: 最大3つ → 視覚要素を優先し、テキスト量を抑えることで 　 一目で理解できるスライドに 明確な数値制限を設けることで、作成者は情報を厳選し、 本当に必要な内容だけを視覚的に効果的に伝えることができます 
## 内容制限ルール（新規追加）
- 1スライドあたりの最大文字数：150文字以内
- 1スライドあたりの箇条書き項目：最大5項目まで
- 見出し：最大25文字
- 本文テキストブロック：最大40文字/行
- 図解要素とテキスト要素の比率：図解60%：テキスト40%
- スライド内のセクション数：最大3つまでCode language: PHP (php)

明確な数値による制限を設けることで、作成者は情報を厳選し、「量」より「質」に集中できるようになります。多くのスライドがテキスト過多になり、視覚的理解を妨げている現状を改善します。

文字数制限は特に重要で、情報を凝縮して伝える力を強化します。図解とテキストの比率を定めることで、視覚的表現を優先し、「一目で理解できる」スライド作成を促進します。結果として、視聴者の理解度と記憶定着率が向上します。

情報階層の明確化とビジュアル優先ルールの追加

情報の階層構造を明確にすることで、聞き手は内容の重要度と関係性を直感的に把握できるようになります。また、すべての情報を視覚的要素と組み合わせるルールにより、抽象的な概念も具体的なイメージとして理解しやすくなります。

改善提案②：情報階層とビジュアル優先ルール 情報階層ガイドライン 主題 副題 詳細（視覚要素とペア） ・3階層構造を徹底 ・抽象概念は必ず具体例または図解で ・数値データは必ずグラフ化 ・比較情報は表またはチャートで表現 ビジュアル優先ルール 視覚要素とテキストをペアに ・複雑な概念は「Before/After」で視覚化 ・プロセスは必ず番号＋アイコン＋矢印 ・シンプルなアイコンセットを一貫使用（最大8種） ・視覚的メタファーを積極活用 　（例：天秤=比較、電球=アイデア） ・重要度が高い情報ほど大きく目立つ位置に クラウドストレージとは、インターネット上に データを保存するサービスです。いつでもどこ からでもアクセスでき、共有も容易です。 × テキストのみの説明 ☁ クラウドストレージ：どこからでもアクセス ○ 視覚要素と簡潔なテキストの組み合わせ

人間の脳は文字よりも視覚情報を処理するのが得意です。視覚的メタファー（天秤=比較、電球=アイデアなど）を活用することで、複雑な概念も直感的に伝えられるようになります。これにより、言語や文化の壁を越えた理解が促進され、記憶への定着率も高まります。

情報階層の明確化

## 情報階層ガイドライン（新規追加）
- 主題（タイトル）→副題（セクション見出し）→詳細（箇条書き・説明文）の3階層構造を徹底
- 詳細レベルの情報は必ず視覚要素（アイコン・図形・矢印など）と組み合わせる
- 抽象的な概念は必ず具体例または図解で説明する
- 数値データは可能な限りグラフ化する
- 比較情報は必ず表またはチャートで表現する
Code language: PHP (php)

ビジュアル優先ルールの追加

## ビジュアル優先ルール（新規追加）
- テキストだけの説明は避け、必ず視覚要素とペアにする
- 複雑な概念は「Before/After」で視覚化する
- プロセスは必ず番号とアイコンと矢印の組み合わせで表現する
- シンプルなアイコンセットを一貫して使用（最大8種類）
- 視覚的メタファー（例：天秤=比較、電球=アイデア）を積極的に活用する
- 重要度の高い情報ほど大きく、目立つ位置に配置する
Code language: PHP (php)

レイアウトテンプレートと文言簡略化

定型のレイアウトテンプレートを提供することで、情報の性質に合った最適な視覚表現を選びやすくなります。例えば、プロセスを説明する際はプロセスフロー型、概念比較には比較対照型というように、目的に応じた構造化が可能になります。

改善提案③：レイアウトテンプレートと文言簡略化 レイアウトテンプレート ①中央フォーカス型 ②プロセスフロー型 1 2 3 ③比較対照型 ④階層構造型 ⑤フォーカス＆コンテキスト型 文言簡略化ルール 【変更前】 クラウドコンピューティングはインターネットを 通じてコンピューティングリソースを提供する 技術であり、ユーザーはいつでもどこでもアクセス することができます。 【変更後】 クラウドコンピューティング • インターネット経由のコンピューター利用 • どこからでもアクセス可能 • 使った分だけ料金発生 簡略化のポイント：箇条書き化、接続詞削除、キーワード中心

文言簡略化ルールは、言葉の無駄を削ぎ落とし、核となる情報だけを残すためのガイドラインです。これによりスライド上のテキスト量が減少し、視覚的要素をより大きく配置できるようになります。また、キーワードを中心とした情報提示により、視聴者は短時間で重要ポイントを把握できるようになります。

レイアウトテンプレート指定の追加

## レイアウトテンプレート（新規追加）
以下のパターンから最適なものを選択して使用：

1. 中央フォーカス型
   - 中央に主要概念を大きく配置
   - 周囲に詳細情報を放射状に配置

2. プロセスフロー型
   - 左から右または上から下への流れを表現
   - 各ステップに番号とアイコンを付与

3. 比較対照型
   - 画面を分割して対比する概念を並べる
   - 共通点と相違点を視覚的に整理

4. 階層構造型
   - ツリー構造やピラミッド構造で関係性を表現
   - 上位概念から下位概念への繋がりを視覚化

5. フォーカス＆コンテキスト型
   - 中心に主要トピック
   - 周囲に関連する背景情報
Code language: PHP (php)

効果的な文言簡略化指示の追加

## 文言簡略化ルール（新規追加）
- 長文は必ず箇条書きに変換
- 接続詞を削除してキーワードのみ残す
- 動詞の命令形を優先使用（例：「説明します」→「説明」）
- 修飾語を最小限に抑える
- 「である・です・ます」などの丁寧語を削除可
- 数値は必ず強調表示する
- 専門用語には必ず簡潔な説明を（括弧）内に添える
Code language: PHP (php)

全体プロンプト構成の整理

現在のプロンプトは技術的詳細が多すぎるため、優先度を整理することも重要です：

プロンプト構成の最適化 優先順位の明確化 ①コンテンツルール ②ビジュアル表現 ③レイアウト ④技術的詳細 現在のプロンプトを再構成し、 優先度の高い要素から順番に記述します。 AIは先に読んだ指示を優先する傾向があるため、 効果的な配置が重要です。 新しいプロンプト構成 1. 冒頭指示（全体を読んでから作成すること） 2. 内容制限ルール（文字数・項目数制限） 3. 情報階層ガイドライン 4. ビジュアル優先ルール 5. レイアウトテンプレート 6. 文言簡略化ルール 7. 技術的詳細（SVG設定等） このように改善することで、AIはより視覚的に優れたスライドを作成できます。 重要なことは「何を伝えるか」と「どう伝えるか」の優先順位を明確にし、 特に「簡潔さ」と「視覚的明快さ」に重点を置いたプロンプト設計です。
  1. 最優先：コンテンツルール（情報量・階層・簡略化）
  2. 次点：ビジュアル表現テクニック
  3. その次：レイアウトテンプレート選択
  4. 最後：技術的詳細（SVG設定等）

このように優先順位を明確にして、AIが最も重要なルールから順に従うようにガイダンスすることで、より視覚的に洗練されたスライドが生成されるでしょう。

プロンプトの構成変更

修正前の構成
11. 目的
22. デザイン仕様
3 2.1. 基本設定
4 2.2. カラースキーム
5 2.3. スタイル定義
6 2.4. 背景設定
7 2.5. レイアウト要素
8 2.6. テキストスタイル
9 2.7. カラー適用ガイドライン
103. テキスト配置と重なり防止
114. 視覚表現技法
125. SVG最適化のガイドライン
136. 全体的な指針
147. 変換するコンテンツ
修正後の構成
11. 重要な全体指示
22. 内容制限ルール
33. 情報階層ガイドライン
44. ビジュアル優先ルール
55. レイアウトテンプレート
66. 文言簡略化ルール
77. 目的
88. デザイン仕様
9 8.1. 基本設定
10 8.2. カラースキーム
11 8.3. スタイル定義
12 8.4. 背景設定
13 8.5. テキストスタイル
14 8.6. レイアウト要素
15 8.7. カラー適用ガイドライン
169. テキスト配置と重なり防止
1710. SVG最適化のガイドライン
1811. 全体的な指針
1912. 変換するコンテンツ

完成したスライド風SVGインフォグラフィック変換プロンプト

# スライド風SVGインフォグラフィック変換プロンプト

## 重要な全体指示
このプロンプトは全て読んでからSVG作成に取り組んでください。まず内容を要約・整理し、情報の階層構造を明確にしてから視覚化作業を始めてください。

## 1. 内容制限ルール
- 1スライドあたりの最大文字数：150文字以内
- 1スライドあたりの箇条書き項目：最大5項目まで
- 見出し：最大25文字
- 本文テキストブロック：最大40文字/行
- 図解要素とテキスト要素の比率：図解60%：テキスト40%
- スライド内のセクション数：最大3つまで

## 2. 情報階層ガイドライン
- 主題（タイトル）→副題（セクション見出し）→詳細（箇条書き・説明文）の3階層構造を徹底
- 詳細レベルの情報は必ず視覚要素（アイコン・図形・矢印など）と組み合わせる
- 抽象的な概念は必ず具体例または図解で説明する
- 数値データは可能な限りグラフ化する
- 比較情報は必ず表またはチャートで表現する

## 3. ビジュアル優先ルール
- テキストだけの説明は避け、必ず視覚要素とペアにする
- 複雑な概念は「Before/After」で視覚化する
- プロセスは必ず番号とアイコンと矢印の組み合わせで表現する
- シンプルなアイコンセットを一貫して使用（最大8種類）
- 視覚的メタファー（例：天秤=比較、電球=アイデア）を積極的に活用する
- 重要度の高い情報ほど大きく、目立つ位置に配置する

## 4. レイアウトテンプレート
以下のパターンから最適なものを選択して使用：

1. 中央フォーカス型
   - 中央に主要概念を大きく配置
   - 周囲に詳細情報を放射状に配置

2. プロセスフロー型
   - 左から右または上から下への流れを表現
   - 各ステップに番号とアイコンを付与

3. 比較対照型
   - 画面を分割して対比する概念を並べる
   - 共通点と相違点を視覚的に整理

4. 階層構造型
   - ツリー構造やピラミッド構造で関係性を表現
   - 上位概念から下位概念への繋がりを視覚化

5. フォーカス＆コンテキスト型
   - 中心に主要トピック
   - 周囲に関連する背景情報

## 5. 文言簡略化ルール
- 長文は必ず箇条書きに変換
- 接続詞を削除してキーワードのみ残す
- 動詞の命令形を優先使用（例：「説明します」→「説明」）
- 修飾語を最小限に抑える
- 「である・です・ます」などの丁寧語を削除可
- 数値は必ず強調表示する
- 専門用語には必ず簡潔な説明を（括弧）内に添える

## 6. 目的
以下の内容を、スライド風SVGインフォグラフィックに変換してください。情報の概要をまとめて、全体像を視覚的に理解しやすく整理することを目指します。
いったん内容を要約し、文字情報は簡潔にまとめてからスライドを作成してください。

## 7. デザイン仕様
### 基本設定
- 出力形式：SVG
- サイズ：640x360ピクセル（16:9）
- viewBox="0 0 640 360"を設定
- 可変サイズにするためsvgタグにwidthとheight属性は付けない
- XML宣言と適切な名前空間を含める

### カラースキーム
ただし、使う色は1つのスライドでメリハリが大事です。
デザイナーの視点でシンプルでみやすい配色を心がけて。
・70%（ベース：薄め）
・20~25%（メイン：黒テキスト）
・10~5%（アクセント：濃いめ）

#### 背景色グループ（背景・コンテナ用）
- 通常背景：#F1F0DF（情報・説明セクション用）
- 水色背景：#f3fafe （情報・説明セクション用）
- 黄色背景：#fff7cc （注意・ポイントセクション用）
- 赤色背景：#fdf2f2 （警告・重要セクション用）
- 緑色背景：#ebf8f4 （成功・推奨セクション用）

#### アクセントカラー（強調・アイコン・グラフ要素用）
- 赤系：#e60033, #e95295 （警告・否定的要素）
- 紫系：#884898, #55295b （高度・専門的な概念）
- 青系：#1e50a2, #0095d9, #2ca9e1 （情報・データ関連）
- 水色系：#00a3af （補足情報）
- 緑系：#007b43, #3eb370, #8bc34a （成功・肯定的要素）
- 黄緑系：#c3d825 （アクション・行動）
- 黄色系：#ffd900, #ffc107 （注意・重要ポイント）
- オレンジ系：#f39800, #ea5506 （警告・移行状態）
- 茶色系：#954e2a （歴史・伝統的要素）

### スタイル定義
- SVG内でスタイルを一元管理するために、<defs>と<style>要素を使用
- クラスベースのスタイル設定を採用（再利用性を高めるため）
- ただし、スタイル定義はそのSVGで最低限必要なものだけにしてください
- 例：
  ```svg
  <defs>
    <style type="text/css">
      text { fill: #333333; }
      .title { font-size: 24px; font-weight: bold;  }
      .subtitle { font-size: 16px; font-weight: bold; }
      .body-text { font-size: 12px; }
      .note { font-size: 9px; }
      .box { rx: 4; ry: 4; }
      .highlight-box { fill: #5E5E5E; }
      .highlight-text { fill: #FFFFFF; }
      
      /* カラーグループクラス - 背景用 */
      .bg-blue { fill: #f3fafe; }
      .bg-yellow { fill: #fff7cc; }
      .bg-red { fill: #fdf2f2; }
      .bg-green { fill: #ebf8f4; }
      
      /* アクセントカラークラス - 強調・要素用 */
      .accent-red { fill: #e60033; }
      .accent-pink { fill: #e95295; }
      .accent-purple { fill: #884898; }
      .accent-deep { fill: #55295b; }
      .accent-indigo { fill: #1e50a2; }
      .accent-blue { fill: #0095d9; }
      .accent-light-blue { fill: #2ca9e1; }
      .accent-cyan { fill: #00a3af; }
      .accent-teal { fill: #007b43; }
      .accent-green { fill: #3eb370; }
      .accent-light-green { fill: #8bc34a; }
      .accent-lime { fill: #c3d825; }
      .accent-yellow { fill: #ffd900; }
      .accent-amber { fill: #ffc107; }
      .accent-orange { fill: #f39800; }
      .accent-deep-orange { fill: #ea5506; }
      .accent-brown { fill: #954e2a; }
      
      /* テキスト用アクセントカラー */
      .text-red { fill: #e60033; }
      .text-blue { fill: #0095d9; }
      .text-green { fill: #3eb370; }
      /* その他のスタイル */
    </style>
  </defs>
 
### 背景設定
- タイトル領域（上部47px）：#F1F0DF
- メイン部分：#FFFFFF
- セクション分割背景：選択したカラースキームの淡い色を使用
- 項目テキストボックス：アクセントカラーまたは #5E5E5E

### テキストスタイル
- フォントファミリー：'Meiryo', 'メイリオ', sans-serif（一貫して使用）
- テキストサイズ（重要：必ずこのサイズを維持すること）：
  - タイトル：24px （.title）, 中央揃え
  - サブタイトル/セクション見出し：16px （.subtitle）
  - 主要説明テキスト：12px （.body-text）
  - 補足テキスト：9px （.note）
- テキスト色：基本 #333333、ボックス内 #FFFFFF、強調時はアクセントカラー
- 見出し番号は除去する

### レイアウト要素
- 情報の流れ：左から右、上から下
- 角丸ボックス（rx="4" ry="4"）を使用
- 関連する要素は適宜グループ化<g>してください
- 矢印や番号で情報の順序や関連性を示す
- シンプルなアイコンを<symbol>として定義し再利用
- アイコンは8種類以内に抑えて生成してください
- アイコンの色は<use xlink:href="#gmail-icon" fill="#ffffff" color="#ffffff"/>のようにfillとcolorで設定する（ブラウザの都合）

### カラー適用ガイドライン
- 情報の種類や重要度に応じて適切なカラーを選択
- 関連する情報グループには同系色を使用
- コントラスト比を考慮し、テキストの可読性を確保
- カラーだけでなく形状や位置でも情報を区別（色覚多様性に配慮）
- 一つのスライドで使用するアクセントカラーは3〜4色に制限

## テキスト配置と重なり防止
- テキスト配置前に空間を確保し、重なりを防止
- テキストエリアには適切な幅と高さを設定
- textLength属性とlengthAdjust属性を使用してテキスト幅を制御
- 長い文章は簡潔にまとめてシンプルな図解にする
- 十分な要素間マージンを確保（最小2px）

## SVG最適化のガイドライン
- 同じスタイルの要素はクラスで一元管理
- 繰り返し使用する図形やアイコンは<symbol>で定義し<use>で参照
- テキストは直接スタイリングせず、クラスを適用
- 複雑なパスは簡略化して軽量化

## 全体的な指針
- シンプルで読みやすいデザイン
- 情報密度とバランスを考慮
- 全体像を伝えることを重視
- 必要に応じて複数のスライドを生成可能
- 色彩の調和と視覚的階層を維持

## 変換するコンテンツ
```
Code language: HTML, XML (xml)

最後に、プロンプトの冒頭に「このプロンプトは全て読んでからSVG作成に取り組むこと」といった指示を入れると、AIが最後まで全体を把握してから作業するよう促せます。