Claude Artifactsがすごい。利用事例をまとめてみた。
こんにちは、オートロンの入江です。
いま各地で話題になっているClaude Artifacts。チャットでのやりとりでリアルタイムにつくられたものが反映されていくのは、これまでの生成AIチャットUIからの大きな進化を感じさせてくれます。
今回は、Artifactsでどのようなことができるのかまとめてみました。
ゲームをつくる
イケハヤさんがご紹介されていたClaudeの新機能「Artifacts」を試してみたところ…
— 🍣お寿司職人｜osushisan.eth🥷 (@SushiNFTart) June 21, 2024
簡単な指示で、あっという間に様々なジャンルのゲームが出来ました😳🎮
・メモリーゲーム
・ジャンプアクション
・巻物集め
・シルエットクイズ
CryptoNinjaやCNPのキャラクターのゲームを想像するとワクワクです🥳✨ https://t.co/fHDdMKokKj pic.twitter.com/qM2KJQJMix
Claude3.5 Sonnet Artifacts
— あきらパパ【生成AI活用エンジニア&３児のパパ】 (@akira_papa_IT) June 20, 2024
・ブロック崩しゲームプロンプト
＝＝＝＝＝
# キャラクター
あなたは、ブロック崩しゲームの開発者です。ブラウザ上で動作する優れたゲームを作成することに非常に優れています。
## スキル
### スキル1: ゲームデザイン
-… https://t.co/PLr826d3uZ pic.twitter.com/vv7Ft5sc58
Claude3.5の新機能！
— Maki@Sunwood AI Labs. (@hAru_mAki_ch) June 20, 2024
📚Artifacts（アーティファクト）機能使ってみた⑯
動物の森ならぬ「Artifactsの森」爆誕！ https://t.co/jxw3PLiUYw pic.twitter.com/Hu7urFUVPq
Claude3.5 SonnetのArtifactsで、たまごっち的なゲームを作ってもらった
— よしかい (@yoshikai_man) June 21, 2024
さくさく実装してくれて、その場で動作確認できるから体験いいなー pic.twitter.com/vVwKqYauC3
ClaudeのArtifacts機能でピアノ弾いてみた。
— ヤマゾー＠AIエンジニア (@yamazombie1) June 22, 2024
プロンプト一発だと鍵盤の配置とか音の減衰効果とかイマイチだったけど、Claude 3.5 Sonnetと対話しながら10分くらいで実装完了。
Surfaceのタッチ画面だと私にはこれが限界。 pic.twitter.com/cOpBl6JZuC
マーケティング・分析
使用プロンプト：
— すぐる | ChatGPTガチ勢 𝕏 (@SuguruKun_ai) June 21, 2024
" あなたはプロのSNSコンサルです。 このデータを元にして、私のX分析をArtifactsで行なって下さい。グラフなどの視覚的要素をふんだんに用いてください。"
ㅤ
ちなみに、Xのアナリティクスは「ツイートごと」「日ごと」の二つがあり、両方ぶち込むとこのようにより深い分析が可能👇 pic.twitter.com/v2x8Cx8vvy
Claude3.5 Artifactsは、こんな使い方もできる！
— あやみ｜マーケティング (@ayami_marketing) June 22, 2024
Xのアナリティクスデータから、AI学習コンテンツを自動生成！
・XのツイートをもとにAI活用法がまとまっているの実践的なサイトを作ってと指示
・ツイートを読み込んで、コースが作られて中身のコンテンツも生成される… pic.twitter.com/BGZyLDB2Is
Claude 3.5とArtifacts
— エクセル兄さん(たてばやし淳)@AI時代のExcel術_書籍多数 (@excel_niisan) June 22, 2024
YouTube動画の全体像を一発でマインドマップにしてもらう方法
普通に「マインドマップ作って」と依頼すると、真ん中から放射状に展開するスタンダードなマインドマップが作られてしまって個人的には見にくい。… pic.twitter.com/tKhejDSMlK
ClaudeのArtifacts機能でUX設計時に作成する「Information Architecture Diagram」を作らせたらユーザー行動の流れや画面同士の関係性もしっかり考慮した上でバッチリなタタキ台を作ってくれた…！
— KAJI | 梶谷健人 / 著書「生成AI時代を勝ち抜く事業・組織のつくり方」 (@kajikent) June 21, 2024
これ人間のデザイナーやPdMがタタキ台つくろうとしたら結構時間かかるやつ。 pic.twitter.com/a1rny9OK5p
デザイン
文字をアニメーション表示してかっこよく表示することができました✨#Artifacts pic.twitter.com/b2mUPEwarB
— 石川陽太 Yota Ishikawa (@ytiskw) June 20, 2024
📣Claude ArtifactsでWebアプリを作る人は
— Taiyo | AIで遊ぶ大学生 (@Taiyo_AiAA) June 21, 2024
「Shadcn UIを使用して！」と指示すると、めっちゃリッチなデザインになるのでオススメ！！ pic.twitter.com/dv9z8WFmJh
Claude3.5 sonnet、実際に試してみた。
— shimayuz@AIクリエイター&ChatGPT講師 (@Shimayus) June 20, 2024
えっと・・・
ECサイトが2分で完成したけど、Anthropicさん、ほんとにいいの？？
（注：動画速度 前半x5 後半x2）#Claude #Artifacts pic.twitter.com/LrwEtixr2t
Claude 3.5のArtifacts
— エクセル兄さん(たてばやし淳)@AI時代のExcel術_書籍多数 (@excel_niisan) June 23, 2024
情報を、パステルカラーの鮮やかな1ページ完結のインフォグラフィックにまとめてもらうプロンプト。
ちょっとしたSNS図解投稿や、ブログの図解として。
AIがダサくないデザインの図解を作れるようになったのは非常に助かる！… pic.twitter.com/SdKXDoeHBB
『ChatGPTや、Claudeが作る「表」は、デザインがダサい！』
— エクセル兄さん(たてばやし淳)@AI時代のExcel術_書籍多数 (@excel_niisan) June 23, 2024
↓
ついに、一発でそこそこかっこいいデザインの表にしてくれる命令文ができました。
Claude 3.5のArtifactsを使用。無料でもできます。
コピペ用に、改行なしの弾丸プロンプトにまとめました:
```… pic.twitter.com/77U2b9qFUm
Here's the open source version of 'artifacts' from claude i built yesterday
— Sully (@SullyOmarr) June 23, 2024
Super fun model to hack with
managed to get it to build a basic google calendar clone pic.twitter.com/XCtfC6ZUQZ
コピペなしにその場で動くものができあがるという体験は思った以上にインパクトがありました。
気に入っていただけたら、シェアしていただけるとうれしいです。