【AI図解生成】『部分修正プロンプト』で図解生成を時短効率化！

みなさん、こんにちは！

今日は、Claudeのアーティファクト機能を使った図解生成をもっと効率的にする方法についてお話ししたいと思います。特に

「部分修正プロンプト」

というテクニックを使うと、図解の修正作業が格段に楽になるんですよ。
長いコードになればなるほど、この技は真価を発揮します。

本当はもっと早くお知らせしたかったのですが、話すのを忘れてましたw

【関連動画】

00:00 部分修正プロンプトの概要説明 01:10 Claudeの図生成基本手順 02:16 SVGとReactコンポーネントの説明 03:21 様々な図形式の紹介(SVG・Mermaid・React・HTML) 04:26 部分修正の実例紹介 05:33 SVGのみでの図生成実験 06:38 部分修正プロンプトの実演 07:47 ReactSVGでの部分修正比較 08:57 図形の部分修正実験 10:01 アニメーション追加実験 11:06 動的図形の表示と検証 12:10 プロンプトエンジニアリングによる高速化 13:18 最適化された部分修正の実演 14:22 効率的な部分修正のまとめ

いいね・チャンネル登録、よろしくお願いします🍀

部分修正プロンプトってなに？

みなさんは図解を作るとき、一発で完璧な図ができることってあまりないですよね。文字が重なってしまったり、色のバランスが悪かったり…。実は生成AIによる図解も同じで、一度に完璧なものを作るより、段階的に修正を加えていく方が高品質な成果物ができるんです。

「部分修正プロンプト」とは、前回生成したコードを再利用して、変更したい部分だけを効率よく修正する方法です。これを使うと、毎回ゼロから図を生成する必要がなくなり、時間の節約になります。

Claudeで図を生成する基本的な流れはとてもシンプルです。まず「アーティファクトを使用して」とプロンプトを出し、次に形式を指定します。例えば「SVGで」とか「reactSVGで」といった感じです。そして最後に「図を生成」という指示を加えれば、Claudeが図を作ってくれます。

図ができた後、何か修正したい箇所があれば、具体的な変更内容を伝えた後に「部分修正のみ」というプロンプトを追加します。これがポイントです！この一言を入れないと、Claudeは図を最初から全部作り直してしまうので、時間がかかってしまいます。部分修正プロンプトを使えば、前回のチャットで生成したコードを再利用できるので、修正が素早く反映されるようになります。

SVGだけ？それともreactSVGがいい？

Claudeの図解生成では主に2つの形式を使うことができます。SVGとreactSVGです。それぞれにメリットがあるので、用途に応じて使い分けるといいでしょう。

SVG形式の魅力

SVGは画像を作成する形式で、図形やテキストを自由に配置できます。比較的シンプルな構造なので、基本的な図解を作るのに向いています。一度だけ図を生成する場合や、あまり複雑でない図解ならSVG形式で十分でしょう。

reactコンポーネントの便利さ

一方、reactコンポーネントは繰り返し使う部品をまとめて作れる便利な仕組みです。Webサイト制作でよく使われる技術ですが、図解作成にも応用できます。特に複雑な図や、後から頻繁に修正が必要になりそうな図を作る場合に力を発揮します。

reactSVGの優位性

「reactSVGで」というプロンプトを使うと、SVGとreactコンポーネントの良いとこ取りができます。特に以下のような場合にreactSVGがおすすめです：

1. 頻繁に修正が必要な場合

2. 図の一部スタイルを使い回したい場合

3. 複雑な図解を作る場合

4. アニメーションなどの動きを追加したい場合

一発で完成させる図や単純な図ならSVG単独でも問題ありませんが、何度も手を加えるつもりなら最初からreactSVGを選んでおくと便利です。

実際に比較してみよう：SVGのみ vs reactSVG

どちらが効率的か、実際に比較してみましょう。同じような図を、SVGだけの場合とreactSVGの場合で作って、修正してみます。

まずはSVGのみの場合です。「アーティファクトを使用して」「SVGのみで」と指示し、図を生成します。その後、「色を赤にして」「部分修正のみ」というプロンプトで修正を試みると、確かに修正は行われますが、要素が一つずつ変化していくため、時間がかかります。

次にreactSVGの場合です。「アーティファクトを使用して」「reactSVGで」と指示し、同じ図を生成します。同様に「色を赤にして」「部分修正のみ」と修正指示を出すと、修正がまとまって行われ、比較的早く変更が反映されることがわかります。

さらにreactSVGの場合は、「アニメーションを加えて」「部分修正のみ」というプロンプトで動きを追加することもできます。静的な図からインタラクティブな図解に発展させられるのは大きな魅力です。例えば、プレゼンテーション用の資料を作る場合や、概念の変化を表現したい場合などに便利でしょう。

部分修正をさらに効率化するコツ

部分修正プロンプトは便利ですが、さらに効率化するためのコツがあります。それが「プロンプトエンジニアリング」です。

複雑な図解を作る際、部分修正をもっと素早く行いたい場合は、専用のプロンプトを設計しておくと良いでしょう。

【動画のピンポイント視聴】
12:10 プロンプトエンジニアリングによる高速化

この後、修正時には単に「ノードを紫にして」や「矢印を赤にして」といったシンプルな指示だけで、素早く変更が反映されるようになります。最初にしっかりとしたプロンプトエンジニアリングをしておくことで、修正の速度が大幅に向上します。

また、よく使うプロンプトのパターンはClaudeのプロジェクト機能に保存しておくと便利です。これにより、毎回同じ設定を入力する手間が省け、作業効率がさらに上がります。

実践的な使い分けのポイント

ここまでのお話をまとめると、図解作成の効率化には以下のポイントがあります：

まず、作る図の複雑さや修正頻度を考えて形式を選びます。一回限りの単純な図ならSVGでも十分ですが、複雑な図や何度も修正する可能性がある場合はreactSVGが効率的です。

次に、図を生成した後の修正では必ず「部分修正のみ」というプロンプトを追加します。これを忘れると全体の再生成が行われてしまい、時間のロスになります。

さらに、頻繁に図解を作成する場合は、プロンプトエンジニアリングを活用して専用の指示パターンを作っておくと良いでしょう。これにより、より素早く修正が反映されるようになります。

実は「アーティファクトを使用して」という部分は省略してもうまく動作することが多いので、短縮したいときは試してみてください。ただし、確実に動作させたい場合は明示的に書いておいた方が安心です。

おわりに

Claudeのアーティファクト機能を使った図解生成は、すでに多くの人に活用されていますが、部分修正プロンプトを使いこなすことで、さらに効率的な作業が可能になります。一度作った図を何度も修正するシーンはよくあることなので、この方法をマスターしておくと大きな時間節約になるでしょう。

図解作成においては、「部分修正のみ」というシンプルなプロンプトが大きな違いを生み出します。また、用途に応じてSVGとreactSVGを使い分けることで、より効率的な作業が可能になります。特に複雑な図や頻繁な修正が必要な場合は、reactSVGの活用を検討してみてください。

最後に、プロンプトエンジニアリングの重要性も忘れないでください。最初に少し手間をかけてプロンプトを設計しておくことで、後の作業がぐっと楽になります。日々の作業効率を上げるために、ぜひ試してみてくださいね！

それでは、また！

【プロフィール】
ワンダー・佐藤源彦（さとう もとひこ）
医療系の研究所、心理学の研究所の勤務を経て独立し、AI・心身に関する研究をしている。
主著『東洋医学と潜在運動系』、2年間専門誌に連載、など執筆業を行いつつAI共創ライティングを開発中。
心理学・カウンセリング・コーチングをAIに技術転用し、AI共創学を開発している。

https://linktr.ee/motohiko.sato