![見出し画像](https://assets.st-note.com/production/uploads/images/147426479/rectangle_large_type_2_3e041a4deb6e8e0f26fc56acb72ba444.png?width=1200)
ClaudeのArtifacts機能で画像を表示しよう!
こんにちは!DiningXの吉波です!
生成AIの情報発信を始めて3週間、フォロワーがもうすぐ1300人に到達しそうです!🎉
いつもフォローやいいね&リポストしてくださり、ありがとうございます!
今回は、ClaudeのArtifacts機能で画像を表示する方法について紹介します!実際のポストはこちら↓
え、ClaudeのArtifactsで画像表示できた!? pic.twitter.com/nO8urjTsHR
— 吉波拓夢 | DiningX CTO (@yoshi8__) July 15, 2024
これまでのClaudeでは、外部の画像を使用する時にPlaceholder(ダミー画像)で置き換えられてしまうことが多々発生していたため、画像を表示することが困難でした🫠
しかし、安定して画像を出力できる方法を見つけたので以下に記載します!(出力が安定しないこともあるため、ご自身の環境でもお試し下さい🙇)
はじめに
まずは、Claudeに画像を入力するためのコンポーネントを渡します。ここで重要なのは、imgタグのsrcの部分を{ここにURLの文字列を入れる}のようにすることです。
![](https://assets.st-note.com/img/1721078361141-9VTRCxQMCz.png?width=1200)
こちらのコンポーネントを理解して
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を渡していきます。
注意)著作権の問題を避けるため、使用する画像の権利を確認することが重要です。また、権利問題を避けるためにご自身のサーバーで管理している画像を使用することを推奨します。
![](https://assets.st-note.com/img/1721078486824-0bk4Ya2uvA.png?width=1200)
画像が表示される
コード生成が終了すると、Claudeのプレビュー画面に指定した画像が表示されるようになります。画像のURLが有効であれば、指定された画像が表示されるはずです。
![](https://assets.st-note.com/img/1721078623443-1bfUucx5I4.png?width=1200)
対応環境
現時点で、画像表示が確認できている環境を以下に列挙します。
(他にも表示できたよって方がいたら、ぜひ教えて下さい🙏)
![](https://assets.st-note.com/img/1721105098793-8wTr8PQvle.png?width=1200)
検証環境
MacBook Pro(macOS Sonoma 14.4.1)
iPhone SE3(iOS 17.5.1)
表示できない例
ChromeでClaudeのArtifactsをプレビューすると、画像が表示できませんでした。
![](https://assets.st-note.com/img/1721079314776-9tCvLunZPQ.png?width=1200)
画像URLの取得方法(PC)
PCであれば、ChromeやSafariから画像を検索し、表示したい画像を右クリックします。その後、「画像アドレスをコピー」を選択することで、URLを取得することが可能となります。
![](https://assets.st-note.com/img/1721079862607-BR1G86yVAU.png?width=1200)
画像URLの取得方法(スマホ)
スマートフォンであれば、ChromeやSafariから画像を検索し、表示したい画像を長押しします。その後、「共有…」を選択し、「コピー」を押すことで、URLを取得することが可能となります。
![](https://assets.st-note.com/img/1721080183149-yPnxLnjnYa.png?width=1200)
![](https://assets.st-note.com/img/1721080220155-nJez9NcNcz.png?width=1200)
LPに組み込む活用例
先ほど作成したコンポーネントを使うことで、画像付きのLPを作ることも可能となります!
これはきたか、、、?
— 吉波拓夢 | DiningX CTO (@yoshi8__) July 15, 2024
ClaudeのArtifactsで画像付きLPを検証してみた pic.twitter.com/07J0FvJ70A
まとめ
いかがでしたか?Claude Artifactsで画像を表示できると活用の幅がぐんと広がりますね!ご自身の環境で試した例などあれば、ぜひ教えて下さい!よろしければ、該当ツイートのリポストをよろしくお願いします!🙌
この記事が気に入ったらサポートをしてみませんか?