ChatGPTやClaude（Artifacts機能など）を使って、SVG図解、HTMLスライド、Mermaidフローチャートなどのグラフィックコードを生成させた際、「デザインや配色は完璧なのに、テキストの誤字を直したい」「英字の項目名を日本語に変更したい」という場面はよくあります。
しかし、AIに単に「テキストを直して」と指示すると、レイアウトやカラーコード、図形の形状まで新しく再生成されてしまい、元の美しいデザインが崩れてしまう問題が生じます。
本記事では、HTML/SVGなどのコード構造・装飾パス・CSSスタイルを1ミリも崩さず、「指定した文字（テキスト）だけを正確に差し替えさせるプロンプト」と改善版マスタープロンプトを全文公開します！
【基本版】グラフィックコード用テキスト修正プロンプト全文
以下のプロンプト（整形済みテキスト枠）の [ここに変更前のテキストを入力] と [ここに変更後のテキストを入力] を書き換えて、AIチャット欄に入力してください。
# 【部分修正用】画像生成のテキストのみを正確に変更するプロンプト
## 📝 修正内容（ここに入力）
以下の通りにテキストを差し替えてください。
- 変更前：[ここに変更前のテキストを入力]
- 変更後：[ここに変更後のテキストを入力]
- 変更前：[ここに変更前のテキストを入力]
- 変更後：[ここに変更後のテキストを入力]
---
## 🎯 目的・指示
先に生成した画像データ（SVG/HTMLなどのグラフィックコード）について、上で指定したテキスト部分のみを正確に修正してください。
テキストの変更に伴う、デザイン、レイアウト、配色、アイコン、図形などの変更は一切行わないでください。
## ⚠️ 厳守事項（絶対ルール）
1. 画像構造の完全維持: タグの階層、クラス名、ID、インラインスタイルなど、画像の基本構造を1文字たりとも変更しないこと。
2. デザインの完全維持: CSS（スタイル）、カラーコード、フォント設定を前回出力時から一切変更しないこと。
3. 装飾・図形の維持: 背景、アイコン、矢印、図形などの描画パス（<path d="...">等）を再生成・改変しないこと。
4. 対象箇所のみ置換: 「修正内容」で指定されたテキストのみを探し、正確に置き換えること。他のテキストを勝手に要約・変更しないこと。
※修正を反映した【全体のコード】を再度出力してください。その際、指定したテキスト以外の全コードは、前回出力したコードと「完全に一致」している必要があります。【さらに高品質】コード崩れを完璧に防ぐ改善版マスタープロンプト
基本版プロンプトに加え、「省略出力の防止（完全コード再出力）」「SVGタグ数値・描画パスの保持指定」「文字長変化時のfont-size微調整許可」のルールを追加した実務特化の改善版プロンプトです。
# 【高精度・コード非破壊】グラフィック・SVGテキストピンポイント置換マスタープロンプト
## 📝 置換対象テキスト指定
前回出力されたコード（SVG / HTML / Canvas / Mermaid）内のテキストを、以下の通り正確に置き換えてください。
【置換リスト】
- 変更前：「[古いテキスト1]」 ➔ 変更後：「[新しいテキスト1]」
- 変更前：「[古いテキスト2]」 ➔ 変更後：「[新しいテキスト2]」
---
## 🎯 目的と厳守ルール
直前に生成したコードの見た目・レイアウト・配色・座標を100%完全に維持したまま、指定されたテキスト文字列のみを差替えた【全体の修正コード】を出力してください。
## ⚠️ 4大絶対禁止事項
1. CSS・スタイル・描画パスの変更禁止: <path>, <rect>, <circle>, viewBox, width, height, color, fill, stroke 等の数値を1数値たりとも変更しないでください。
2. 構造・タグの改変禁止: DOM階層、class名、id名、インラインスタイルを改変せず、完全維持してください。
3. 指定外テキストの要約・改変禁止: 指示されていない周囲の解説文や見出し文字列を勝手にまとめたり変更したりしないでください。
4. 途中省略の禁止: 「以下省略」を使わず、完全に動作する全体のコードを完全出力してください。
※文字長の変化によってテキストがはみ出る可能性がある場合のみ、<text> タグの font-size または text-anchor="middle" を最小限微調整することを許可します。
📌 改善版プロンプトの4大進化ポイント
- 【非破壊の原則】の厳格指定： `
` などの複雑なベクトル描画パスやカラーコード、クラス名を絶対改変させないルールを強化 - 指定外テキストの自動要約・書き換え禁止： 修正指定していない周囲の説明文や見出しを勝手に変更させないガードルール
- 文字長変化への自動対応許可： 英字から日本語に変わって枠からはみ出る場合のみ、`
` タグの font-size や text-anchor の最小限調整を許可 - 「コードの途中省略」を完全防止： 「以下省略」とされず、コピー＆ペーストでそのまま動く完全なコード全体を出力させる指示
実践的な入力例（サンプル）
## 📝 修正内容
以下の通りにテキストを差し替えてください。
- 変更前：Phase 1: Research
- 変更後：フェーズ1：市場調査および顧客ヒアリング
- 変更前：Phase 2: Development
- 変更後：フェーズ2：システム設計およびアジャイル開発ご利用にあたっての注意事項（AIコード編集時の留意点）
⚠️ グラフィックコード修正時の注意点
- 文字数変化によるはみ出し： 短い英単語（例: “FAQ”）から長い日本語（例: “よくあるご質問と回答”）へ変更すると、SVGの枠線からはみ出ることがあります。その場合は「枠内に収まるようfont-sizeを調整して」と追加指示を出してください。
- 超長大コードのトークン制限： 数千行に及ぶ巨大なHTML/CSSコードの場合、AIの出力文字数上限に達して途中で切れることがあります。その場合は「該当する `
` タグのあるブロックのみ出力して」と指示するのが有効です。 - ブラウザ表示確認の推奨： 修正されたコードは必ずエディタ（VS Code等）やブラウザでレンダリング確認を行い、レイアウト崩れがないかをチェックしてください。
まとめ
AIが生成した美しいグラフィックコードやSVG図解は、本プロンプトを使うことで、デザインや配色を崩さずにテキストだけを安全に修正することができます。
ぜひ本プロンプトをテンプレートとして保存し、Web制作やスライド作成、図解コンテンツ制作にお役立てください！
