見出し画像

ClaudeのArtifactsの裏技！？画像だけでなく、音声・動画も挿入可能【プロンプト付き】

moz
割引あり

こんばんは！moz(もず)です。
生成AIについて、Xで情報発信をしています。

Artifactsって何？ゲームも作れるすごい新機能

Artifactsを知らない方向けに簡単に説明すると、
画面左側にチャット画面があり、チャットで指示すると画面右側にコードを作成してプレビューを表示してくれます。
こんな感じで対話しながらゲームを作れます👇

Artifactsのイメージ画像

これが個人的にドハマりしていて、
ここ最近、毎晩寝不足になりながらずっとゲームやツールを作って遊んでいます。

Artifactsで夜更かしの図

作ってみたゲームが人生初めてプチバズり

先日、Flappy Chickenというゲームを作ってXに投稿したら、
人生で初めて3万ビューを達成しました。
(シェアしてくれた方に感謝…！)

今思えば、ここからどんどんArtifactsの沼にハマっていったのかもしれません。笑

待って、画像も組み込めるの…！？

そんななか、「画像もArtifacts内に組み込めた！」とのポストを発見。

画像だけはずっとArtifacts内で使用できず苦戦していたのですが、
吉波拓夢さんがその方法を発見して記事にまとめてくれました！(感謝…！)

記事はこちら👇

どうやら「Chrome」では表示ができず、「Safari」なら表示ができるようです。
(ずっとChromeでチャレンジしてたので盲点でした…！)

画像の組み込みにトライ

上記の情報を見て、さっそく自分も画像の組み込みにトライ。
アレンジを加えて、複数枚の画像を使っておみくじアプリを作ることができました。

おみくじアプリはこちらで遊べます
(Chromeでは遊べないので、Safariなどでアクセスしてださい)

ちなみにClaudeへの指示はこういう風にしてました。
(画像のURLは長いので省略しています)

これらの画像URLを使って、「ボタンをクリックすると画像が表示されるツール」を作ってください。
最初はトップ画像が表示されていて、ボタンをクリックすると結果画像が出るようなイメージです。

* トップ画像: https://～(画像のURL)
* 結果画像1: https://～(画像のURL)
* 結果画像2: https://～(画像のURL)
* 結果画像3: https://～(画像のURL)
* 結果画像4: https://～(画像のURL)
* 結果画像5: https://～(画像のURL)
* 結果画像6: https://～(画像のURL)
* 結果画像7: https://～(画像のURL)

もしかしてだけど…音声や動画ファイルもいける？

「画像ができるのなら、他のファイルも可能なのかな？」と思い、
まずは音声からチャレンジ。

いける。すごい。(イェーイ！)

次は動画の組み込みにチャレンジ。
Runwayで作った動画を使い、Runwayの紹介ページ作るように指示。

できました。すごい。(語彙力)

これ結構すごいことだと思っていて、
組み合わせとアイデア次第で面白いものがたくさん作れる予感がします。
（寝不足が加速しますね）

今後これらを組み合わせたアイデアをシェアしていこうと思うので、
ぜひXのフォローをお願いします！
フォローはこちらから

どうやって音声と動画を組み込むの？

ここからは、音声と動画をArtifactsに組み込む具体的な方法と、
画像・音声・動画を同時に扱える汎用的なプロンプトを紹介します。
（購入 or 記事のシェアで読むことが可能です）

ここから先は

3,496字 / 2画像

この記事が参加している募集

#AIとやってみた

30,434件

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