SVG（スケーラブルベクターグラフィックス）の独特な利点#
- 非破壊的スケーリング：拡大しても劣化せず、あらゆるサイズのデバイスに適している
- 編集可能性：生成後に各要素を再編集・修正できる
- ファイルサイズが小さい：コード形式で保存され、ビットマップよりも小さい
- アニメーションサポート：インタラクションやアニメーション効果を追加できる
SVG 形式のファイルは、画像をベクターとして保存します。これは、数学的な公式に基づいて点、線、曲線、形状で構成されたグラフィックです。グラフィックは無限にスケーリングでき、劣化しないため、UI 素材、ロゴアイコン、グラフィックイラスト、技術アーキテクチャ図、フローチャートなど、非破壊的なスケーリングが必要な画像の作成に非常に適しています。そのファイルは本質的に XML 形式のテキストコードであり、ウェブページに直接埋め込むことも、さまざまなデザインツールにインポートすることもできます。
SVG プロンプト共通テンプレート#
タスク定義#
[テーマ / 目的] のためにプロフェッショナルな SVG 画像を作成してください。
画像仕様#
- サイズ：[幅 x 高さ、例：750x1334px]
- 背景：[背景色 / グラデーションの要件]
- ビジュアルスタイル：[例：モダンミニマル / カートゥーン / フラットデザイン / 等角図 / 水墨画など]
コンテンツ構造#
- [主要コンテンツ要素 1、例：タイトルエリア]
- [主要コンテンツ要素 2、例：コンテンツエリア]
- [主要コンテンツ要素 3、例：データ表示エリア]
...
デザインスタイル#
- 配色スキーム：[指定された主色 / 補助色 / 強調色]
- フォント要件：[フォントファミリー / サイズ / 太さなど]
- グラフィック要素：[含める必要のあるアイコン / 装飾 / ビジュアル要素]
- レイアウト配置：[要素の配置方法 / 余白 / 整列]
技術要件#
- アニメーション要件：[アニメーション / インタラクション効果が必要か]
- テキスト処理：[テキストのレイアウト要件 / 切り捨て処理]
- グラフィック品質：[線の太さ / 角丸設定 / 影の効果]
- フォーマット出力：[SVG コードが完全で有効であることを確認]
特殊要件#
- [その他の特別な注意事項や要件]
参考資料#
[参考素材 / コンテンツを追加できます]
このテンプレートは、コンテンツ構造から技術的実装、リソース配置から納品要件まで、SVG コンテンツ作成のすべての重要な側面をカバーしています。この包括性により、生成された SVG コンテンツに重大な欠落がなくなり、出力の確実性が保証されます✅
テンプレートがあれば、使い方は非常に簡単です：あなたの要件と必要な機能をテンプレートと一緒に 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 に変換してダウンロードすることができます。