ClaudeのArtifacts機能で画像を表示しよう!
こんにちは!DiningXの吉波です!
生成AIの情報発信を始めて3週間、フォロワーがもうすぐ1300人に到達しそうです!🎉
いつもフォローやいいね&リポストしてくださり、ありがとうございます!
今回は、ClaudeのArtifacts機能で画像を表示する方法について紹介します!実際のポストはこちら↓
これまでのClaudeでは、外部の画像を使用する時にPlaceholder(ダミー画像)で置き換えられてしまうことが多々発生していたため、画像を表示することが困難でした🫠
しかし、安定して画像を出力できる方法を見つけたので以下に記載します!(出力が安定しないこともあるため、ご自身の環境でもお試し下さい🙇)
はじめに
まずは、Claudeに画像を入力するためのコンポーネントを渡します。ここで重要なのは、imgタグのsrcの部分を{ここにURLの文字列を入れる}のようにすることです。
こちらのコンポーネントを理解して
const ImageUI = () => {
return (
<div className="bg-black min-h-screen text-white pb-16">
<div className="relative h-64 bg-black text-white">
<img
src={ここにURLの文字列を入れる}
className="w-full h-full object-cover"
/>
</div>
);
};
src="https://~~~"のように直接URLをコンポーネント内に入れてしまうと、Claude側でPlaceholder(ダミー画像)と置き換えてしまうため、まずは{ここにURLの文字列を入れる}のように変数として渡します。
画像のURLを渡す
先ほどのコンポーネントをClaudeに覚えさせたら、実際の画像URLを渡していきます。「こちらのURLでお願いします」や「こちらのURLを入力して」等を言いながら、実際のURLを渡していきます。
注意)著作権の問題を避けるため、使用する画像の権利を確認することが重要です。また、権利問題を避けるためにご自身のサーバーで管理している画像を使用することを推奨します。
画像が表示される
コード生成が終了すると、Claudeのプレビュー画面に指定した画像が表示されるようになります。画像のURLが有効であれば、指定された画像が表示されるはずです。
対応環境
現時点で、画像表示が確認できている環境を以下に列挙します。
(他にも表示できたよって方がいたら、ぜひ教えて下さい🙏)
検証環境
MacBook Pro(macOS Sonoma 14.4.1)
iPhone SE3(iOS 17.5.1)
表示できない例
ChromeでClaudeのArtifactsをプレビューすると、画像が表示できませんでした。
画像URLの取得方法(PC)
PCであれば、ChromeやSafariから画像を検索し、表示したい画像を右クリックします。その後、「画像アドレスをコピー」を選択することで、URLを取得することが可能となります。
画像URLの取得方法(スマホ)
スマートフォンであれば、ChromeやSafariから画像を検索し、表示したい画像を長押しします。その後、「共有…」を選択し、「コピー」を押すことで、URLを取得することが可能となります。
LPに組み込む活用例
先ほど作成したコンポーネントを使うことで、画像付きのLPを作ることも可能となります!
まとめ
いかがでしたか?Claude Artifactsで画像を表示できると活用の幅がぐんと広がりますね!ご自身の環境で試した例などあれば、ぜひ教えて下さい!よろしければ、該当ツイートのリポストをよろしくお願いします!🙌
この記事が気に入ったらサポートをしてみませんか?