SVG（スケーラブルベクターグラフィックス）の独特な利点#
- 非破壊的スケーリング：拡大しても劣化せず、あらゆるサイズのデバイスに適している
- 編集可能性：生成後に各要素を再編集・修正可能
- ファイルサイズが小さい：コード形式で保存され、ビットマップよりも小さい
- アニメーションサポート：インタラクションやアニメーション効果を追加可能
SVG フォーマットファイルは、画像をベクターとして保存します。これは、数学的な公式に基づいて点、線、曲線、形状で構成されるグラフィックです。グラフィックは無限にスケーリング可能で、劣化しないため、UI 素材、ロゴアイコン、グラフィックイラスト、技術アーキテクチャ図、フローチャートなど、非破壊的なスケーリングが必要な画像の作成に非常に適しています。そのファイルは本質的に XML 形式のテキストコードであり、直接ウェブページに埋め込むことも、さまざまなデザインツールにインポートすることもできます。
SVG プロンプトの一般テンプレート#
タスク定義#
[テーマ / 目的] のために、プロフェッショナルな SVG 画像を作成してください。
画像仕様#
- サイズ：[幅 x 高さ、例：750x1334px]
- 背景：[背景色 / グラデーションの要件]
- 視覚スタイル：[例：モダンミニマル / アニメーション / フラットデザイン / 等距離図 / 水墨画など]
コンテンツ構造#
- [主要コンテンツ要素 1、例：タイトルエリア]
- [主要コンテンツ要素 2、例：コンテンツエリア]
- [主要コンテンツ要素 3、例：データ表示エリア]
...
デザインスタイル#
- 配色方案：[指定された主色 / 補助色 / 強調色]
- フォント要件：[フォントファミリー / サイズ / 太さなど]
- グラフィック要素：[含める必要のあるアイコン / 装飾 / 視覚要素]
- レイアウト配置：[要素の配置方法 / 余白 / 整列]
技術要件#
- アニメーション要件：[アニメーション / インタラクション効果が必要か]
- テキスト処理：[テキストのレイアウト要件 / 切り捨て処理]
- グラフィック品質：[線の太さ / 角の設定 / 影の効果]
- フォーマット出力：[SVG コードが完全で有効であることを確認]
特殊要件#
- [その他の特別な注意事項や要件]
参考資料#
[参考素材 / コンテンツを追加できます]
このテンプレートは、コンテンツ構造から技術的実装、リソースの配置から納品要件まで、SVG コンテンツ作成のすべての重要な側面をカバーしています。この包括性により、生成された SVG コンテンツに重大な欠落がなくなり、出力の確実性が保証されます✅
テンプレートがあれば、使い方は非常に簡単です：あなたの要件と必要な機能を、テンプレートと一緒に AI に渡すことで、AI が具体的なプロンプトを生成します。そして、そのプロンプトを使って SVG 画像を生成できます。
SVG 画像タイプガイド#
SVG 画像タイプの主な用途と適用シーン#
- フローチャート：ステップ、決定、作業フローを示す（ビジネスプロセスの説明、アルゴリズムの説明）
- 技術ロードマップ：技術の発展経路と学習ルートを示す（キャリアプラン、スキル体系の構築）
- 組織構造図：階層構造と報告関係を示す（会社の構造、チームの構造）
- マインドマップ：放射状に展開して概念関係を示す（ブレインストーミング、知識整理）
- インフォグラフィック：データと情報を視覚化して提示する（報告書の表示、市場分析）
- ガントチャート：タスクのタイムラインと進捗を示す（プロジェクト管理、進捗追跡）
- データビジュアライゼーションチャート：データのトレンドと比較関係を示す（データ分析、科学研究）
- ネットワークトポロジー図：システムコンポーネント間の接続関係を示す（ネットワークアーキテクチャ、システム設計）
デザインスタイルと配色方案#
| SVG 画像スタイル | スタイルの特徴 | 適用シーンの推奨 | 配色 |
|---|---|---|---|
| ミニマル / シンプル | 線がシンプルで、余白が多く、要素が少ない | ビジネスプレゼンテーション、テクノロジー製品 | 主に白黒灰、単色または二色 |
| フラットデザイン | グラデーションなし、影なし、色ブロックが明確 | インターフェースアイコン、インフォグラフィック | 鮮やかな純色、高コントラスト |
| 等距離 | 3D 感、固定角度 | データビジュアライゼーション、建築デザイン | グラデーションカラー、青紫系 |
| 手描き | 線が自由で流れるよう、色彩が豊か | 子供教育、アート展示 | 多彩、高明度 |
| メラード | 控えめで重厚感がある | 秋冬シーズンのブランドプロモーション、宣伝 | 主に茶色、濃淡がある |
| 水墨画 | 中国の水墨画の効果を模倣 | 東方スタイルのデザイン、文化芸術 | 白黒灰、淡い青、茶色 |
| カートゥーン | 誇張され生き生きとしている、輪郭が丸い | 子供教育、ソーシャルメディア | 明るく飽和した色、多彩なグラデーション |
このテンプレートの使用方法#
- 適切な画像タイプを選択：ニーズに応じて、フローチャート、マインドマップ、インフォグラフィックなどから選択
- デザインスタイルをカスタマイズ：コンテンツに適した視覚スタイルと配色方案を選択
- コンテンツ構造を明確にする：SVG に表示する必要のある主要コンテンツ要素を明確に列挙
- 参考資料を追加：AI に参照してほしいテキストコンテンツや画像を提供
- 反復的な最適化：生成後、必要に応じて AI に特定の部分を調整するよう依頼
実践ケース#
ケース：小紅書スタイルの知識カードプロンプト例#
タスク定義#
「SVG 画像のシーンアプリケーション」のために、小紅書プラットフォームに適した美しい SVG カードを作成してください。
画像仕様#
- サイズ：750x1334px（縦向き、携帯電話での閲覧に適している）
- 背景：柔らかいグラデーション背景、淡いピンクから淡い青
- 視覚スタイル：モダンミニマル、高い美的感覚、デザイン感
コンテンツ構造#
- タイトルエリア：テーマ名とサブタイトルを目立たせる
- 概要エリア：この技術を一言で説明
- コア特徴エリア：3-4 の重要な特徴をリストし、アイコンを添える
- 実用価値エリア：この技術がなぜ重要かを説明
- 下部情報エリア：オープンソースアドレスなどの追加情報を配置
デザインスタイル#
- 配色方案：紫系を主色調とし、白いコンテンツエリアと柔らかい色ブロックを組み合わせる
- フォント要件：モダンなサンセリフフォント、タイトルを太字にし、フォントサイズの階層を明確にする
- グラフィック要素：シンプルな幾何学的形状を装飾として使用し、円形または波状の点を散りばめる
- レイアウト配置：カード式レイアウト、コンテンツエリアには適度な角丸と柔らかい影を付ける
技術要件#
- テキスト処理：すべてのテキストが明確に読みやすく、タイトルが目立つようにする
- グラフィック品質：角丸の長方形を使用し、適度に柔らかい影を追加して層感を増す
- フォーマット出力：完全な SVG コードを提供し、エラーがないことを確認
特殊要件#
- 情報が明確で理解しやすく、小白ユーザーに適していることを確認
- 全体のデザインは「一目で驚く」視覚効果を持つこと
- 「小白」、「炸裂」などの極端な言葉を含めないこと
完全な SVG コード#
以下のコードを直接コピーし、.svgファイルとして保存できます。ブラウザで開くと最終的な効果が表示されます。
<svg width="750" height="1334" viewBox="0 0 750 1334" xmlns="http://www.w3.org/2000/svg" style="font-family: 'PingFang SC', 'Helvetica Neue', 'Arial', sans-serif;">
<!-- === 定義区：グラデーション、フィルターなどの再利用可能な要素 === -->
<defs>
<!-- 背景グラデーション：ピンクから青 -->
<linearGradient id="bg-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FFDDE1; stop-opacity:1" />
<stop offset="100%" style="stop-color:#C8E6FF; stop-opacity:1" />
</linearGradient>
<!-- タイトル文字グラデーション：濃紫から明紫 -->
<linearGradient id="title-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#6A11CB;" />
<stop offset="100%" style="stop-color:#2575FC;" />
</linearGradient>
<!-- 柔らかい影フィルター -->
<filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="4" stdDeviation="10" flood-color="#4A148C" flood-opacity="0.1" />
</filter>
</defs>
<!-- === 背景層 === -->
<rect width="750" height="1334" fill="url(#bg-gradient)" />
<!-- 装飾的なグラフィック -->
<circle cx="100" cy="200" r="80" fill="#ffffff" opacity="0.15" />
<circle cx="700" cy="550" r="120" fill="#A48BFF" opacity="0.1" />
<circle cx="150" cy="1100" r="100" fill="#ffffff" opacity="0.2" />
<!-- === コンテンツ層 === -->
<g id="content-group">
<!-- 1. タイトルエリア -->
<g id="title-area" text-anchor="middle">
<text x="375" y="160" font-size="64" font-weight="bold" fill="url(#title-gradient)">SVG 画像のシーンアプリケーション</text>
<text x="375" y="215" font-size="24" fill="#555768">ベクターグラフィックスの魔法の世界</text>
</g>
<!-- 2. 概要エリア -->
<g id="intro-area">
<rect x="50" y="270" width="650" height="90" rx="20" fill="#F8F4FF" filter="url(#soft-shadow)" />
<text x="375" y="325" text-anchor="middle" font-size="22" fill="#6A5ACD">
劣化しない画像フォーマットで、デザインがより柔軟に
</text>
</g>
<!-- 3. コア特徴エリア -->
<g id="features-area">
<!-- 特徴1: 無限スケーリング -->
<g>
<rect x="50" y="400" width="650" height="150" rx="20" fill="white" filter="url(#soft-shadow)" />
<!-- アイコン: スケーリング -->
<g transform="translate(90, 445)" stroke="#8A2BE2" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M 0 20 L 20 0 M 12 0 L 20 0 L 20 8" />
<path d="M 40 40 L 60 60 M 40 52 L 40 60 L 48 60" />
<circle cx="30" cy="30" r="12" />
</g>
<text x="180" y="465" font-size="26" font-weight="600" fill="#333">無限スケーリング</text>
<text x="180" y="505" font-size="20" fill="#777">任意に拡大してもぼやけず、鮮明さを保つ</text>
</g>
<!-- 特徴2: 軽量効率 -->
<g>
<rect x="50" y="580" width="650" height="150" rx="20" fill="white" filter="url(#soft-shadow)" />
<!-- アイコン: 羽 -->
<g transform="translate(90, 625)" stroke="#8A2BE2" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M30,0 Q60,30 30,60 Q0,30 30,0 Z" fill="#E6E6FA" />
<path d="M30,0 Q60,30 30,60" />
<path d="M20,15 L40,35" />
<path d="M20,30 L40,50" />
</g>
<text x="180" y="645" font-size="26" font-weight="600" fill="#333">軽量効率</text>
<text x="180" y="685" font-size="20" fill="#777">ファイルサイズが小さく、読み込み速度が速く、SEOに有利</text>
</g>
<!-- 特徴3: 動的インタラクション -->
<g>
<rect x="50" y="760" width="650" height="150" rx="20" fill="white" filter="url(#soft-shadow)" />
<!-- アイコン: 魔法の杖 -->
<g transform="translate(95, 805)" stroke="#8A2BE2" stroke-width="3" fill="#E6E6FA" stroke-linecap="round" stroke-linejoin="round">
<path d="M0,0 L30,30 M10,35 L5,40 M40,10 L35,5" />
<polygon points="30,30 45,15 60,30 45,45" />
</g>
<text x="180" y="825" font-size="26" font-weight="600" fill="#333">動的インタラクション</text>
<text x="180" y="865" font-size="20" fill="#777">コードで制御可能、クールなアニメーション効果を実現</text>
</g>
</g>
<!-- 4. 実用価値エリア -->
<g id="value-area">
<rect x="50" y="950" width="650" height="190" rx="20" fill="#EDE7F6" filter="url(#soft-shadow)" />
<text x="375" y="1000" text-anchor="middle" font-size="28" font-weight="bold" fill="#4A148C">なぜそれが重要なのか？</text>
<text x="80" y="1055" font-size="21" fill="#4A235A" line-height="1.6">
<tspan x="80" dy="0">動的なロゴ、データビジュアライゼーションチャートから個性的なアイコンまで、</tspan>
<tspan x="80" dy="1.4em">SVGは現代のWebデザインを再構築しており、</tspan>
<tspan x="80" dy="1.4em">ユーザー体験を全方位で向上させています。</tspan>
</text>
</g>
<!-- 5. 下部情報エリア -->
<g id="footer-area" text-anchor="middle" fill="#6c757d">
<!-- GitHubアイコン -->
<path fill="#6c757d" d="M346.5,1236.5c-3.3,0-6,2.7-6,6v15c0,3.3,2.7,6,6,6s6-2.7,6-6v-15C352.5,1239.2,349.8,1236.5,346.5,1236.5z M375,1225c-12.4,0-22.5,10.1-22.5,22.5c0,9.9,6.4,18.3,15.2,21.3c1.1,0.2,1.5-0.5,1.5-1.1c0-0.5,0-2,0-3.9c-6.2,1.3-7.5-3-7.5-3c-1-2.6-2.5-3.3-2.5-3.3c-2-1.4,0.2-1.3,0.2-1.3c2.2,0.2,3.4,2.3,3.4,2.3c2,3.4,5.2,2.4,6.4,1.8c0.2-1.4,0.8-2.4,1.4-3c-4.9-0.6-10.1-2.5-10.1-11c0-2.4,0.9-4.4,2.3-6c-0.2-0.6-1-2.8,0.2-5.9c0,0,1.9-0.6,6.1,2.3c1.8-0.5,3.7-0.7,5.6-0.7c1.9,0,3.8,0.2,5.6,0.7c4.2-2.9,6.1-2.3,6.1-2.3c1.2,3.1,0.4,5.4,0.2,5.9c1.4,1.6,2.3,3.5,2.3,6c0,8.5-5.2,10.4-10.1,11c0.8,0.7,1.5,2.1,1.5,4.2c0,3,0,5.5,0,6.2c0,0.6,0.4,1.3,1.5,1.1c8.8-3,15.2-11.4,15.2-21.3C397.5,1235.1,387.4,1225,375,1225z"/>
<text x="375" y="1285" font-size="18">
<tspan>もっと知る & オープンソースプロジェクトを探る</tspan>
</text>
</g>
</g>
</svg>
SVG 画像の後処理方法#
生成された SVG は、以下の方法で後処理できます：
-
オンライン SVG エディタ
SVG エディタ https://unpkg.com/[email protected]/dist/editor/index.html を使用して視覚的に編集できます。また、オンライン SVG 編集ツールを使用して二次編集も可能です。例えば、https://www.jyshare.com/more/svgeditor/。
生成された内容が画面に表示されるので、必要に応じて画像を修正できます。コンテンツを選択すると、図のような点線の枠が表示され、移動や修正が可能です。点線の枠を移動してコンテンツを移動し、テキストコンテンツをダブルクリックして修正します。Shift キーを押しながら複数のコンテンツを選択すると、一緒に移動できます。修正が完了したら、左上の「Export」を選択してエクスポートし、必要に応じてさまざまな画像や PDF 形式を選択します。保存を選択すると、新しい画面が表示され、右クリックして画像として保存できます。 -
PowerPoint 編集：SVG ファイルを挿入：PPT で「挿入」>「画像」>「ファイルからの画像」をクリックして、可編集な形状に変換します：SVG 画像を選択し、右クリックして「形状に変換」>「グループ解除」を選択します。
-
コード編集：AI プログラミングを使用して SVG コードを直接修正し、具体的なパラメータを調整します。
補足共有#
このプロンプトテンプレートとさまざまな実践ケースを通じて、この SVG プロンプトが非常に効果的であることがわかります。デザイン経験がほとんどない人でも、美的感覚があり、安定した SVG チャートを作成できるため、コンテンツ制作の効率と質が大幅に向上します。
もちろん、より具体的なシーンアプリケーションや、より精巧なチャートの要件については、この基盤の上で AI に多くのバージョンを生成し、磨きをかける必要があります。このソリューションがあなたの描画能力を向上させ、驚くべき視覚コンテンツを創造する手助けになることを願っています！
SVG は多くのシーンで直接使用できませんが、SVG ビューワー（https://www.svgviewer.dev/）を利用して PNG に変換してダウンロードすることができます。