見出し画像

ClaudeのArtifacts機能で画像を表示しよう！

yoshi8

こんにちは！DiningXの吉波です！
生成AIの情報発信を始めて３週間、フォロワーがもうすぐ1300人に到達しそうです！🎉
いつもフォローやいいね&リポストしてくださり、ありがとうございます！

今回は、ClaudeのArtifacts機能で画像を表示する方法について紹介します！実際のポストはこちら↓

これまでのClaudeでは、外部の画像を使用する時にPlaceholder（ダミー画像）で置き換えられてしまうことが多々発生していたため、画像を表示することが困難でした🫠

しかし、安定して画像を出力できる方法を見つけたので以下に記載します！（出力が安定しないこともあるため、ご自身の環境でもお試し下さい🙇）


はじめに

まずは、Claudeに画像を入力するためのコンポーネントを渡します。ここで重要なのは、imgタグのsrcの部分を｛ここにURLの文字列を入れる｝のようにすることです。

Claudeとの対話開始
こちらのコンポーネントを理解して

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を渡していきます。

注意）著作権の問題を避けるため、使用する画像の権利を確認することが重要です。また、権利問題を避けるためにご自身のサーバーで管理している画像を使用することを推奨します。

実際の画像URLを渡す様子

画像が表示される

コード生成が終了すると、Claudeのプレビュー画面に指定した画像が表示されるようになります。画像のURLが有効であれば、指定された画像が表示されるはずです。

Artifactsのプレビュー画面で画像が表示されている様子

対応環境

現時点で、画像表示が確認できている環境を以下に列挙します。
（他にも表示できたよって方がいたら、ぜひ教えて下さい🙏）

対応環境

検証環境

  • MacBook Pro（macOS Sonoma 14.4.1）

  • iPhone SE3（iOS 17.5.1）

表示できない例

ChromeでClaudeのArtifactsをプレビューすると、画像が表示できませんでした。

Chromeで表示した様子

画像URLの取得方法（PC）

PCであれば、ChromeやSafariから画像を検索し、表示したい画像を右クリックします。その後、「画像アドレスをコピー」を選択することで、URLを取得することが可能となります。

PCで検索する様子

画像URLの取得方法（スマホ）

スマートフォンであれば、ChromeやSafariから画像を検索し、表示したい画像を長押しします。その後、「共有…」を選択し、「コピー」を押すことで、URLを取得することが可能となります。

Safariで画像を検索して長押し
コピーを押すとURLを取得できる

LPに組み込む活用例

先ほど作成したコンポーネントを使うことで、画像付きのLPを作ることも可能となります！

まとめ

いかがでしたか？Claude Artifactsで画像を表示できると活用の幅がぐんと広がりますね！ご自身の環境で試した例などあれば、ぜひ教えて下さい！よろしければ、該当ツイートのリポストをよろしくお願いします！🙌


この記事が気に入ったらサポートをしてみませんか？