Claudeで図解を生成する方法

最近、AIの進化が止まるところを知りませんが、特に注目したいのが「Claude」を使った図解生成の機能です。今回は、GoogleのUIを題材にして、具体的なプロンプトの使い方とその結果を見ていきたいと思います。

参考ツイート

まず、こちらのツイートをご覧ください。

かなり使えるCluade図解活用法を見つけた...！
ㅤ
AWSなど、初心者にはどこをどういじればいいのかよく分からないサイトを扱う時や解説記事を作成するときに役立つ図解作成方法👇
ㅤ
🚩 やり方
① 以下のようなプロンプトを入力
''' AWS ( 使いたいサイト名 )… pic.twitter.com/yTEKH3NYMB

— すぐる | ChatGPTガチ勢 𝕏 (@SuguruKun_ai) June 28, 2024

このツイートでは、AWSなど複雑なサイトの操作手順を視覚的に説明する方法として、Claudeを活用した図解生成の手順が紹介されています。

GoogleのUIを使った図解生成の例

次に、このツイートを参考にしつつ、GoogleのUIを題材にして図解を生成してみます。まずは、Googleの検索画面を再現した画像を生成し、どのように検索するのかを説明します。

プロンプト例 1
以下のプロンプトを入力します。

Googleの画面を再現した画像をSVGで作成して。
その上で、どうやって検索するのかを図示しながら説明して。

このプロンプトを入力すると、Googleの検索画面を再現した図解が生成されます。下の画像がその例です。

プロンプト例 2
さらに、特定の部分を強調するために、クリックする部分を赤い四角で囲む指示を追加してみます。

クリックする部分は赤い四角で囲んで。

この指示を追加すると、以下のような画像が生成されます。

図解生成の手順解説

このように、プロンプトを工夫することで、視覚的に分かりやすい図解を簡単に作成することができます。特に、「クリックする部分を赤い四角で囲む」といった具体的な指示を追加することで、さらに分かりやすくなります。
Claudeを使えば、複雑なUIの操作手順も視覚的に整理し、効率的に伝えることが可能です。ぜひ一度試してみてください。

(この記事はChatGPTを使用しています)