【必見】Claude 3.5 Sonnet×Artifactsのクリエイティブな活用事例30選
はじめに
AnthropicからClaude 3モデルファミリーの最新版「Claude 3.5 Sonnet」が公開され、すでに多くの活用事例がXにアップされています。
注目を集めているのが新機能「Artifacts」です。この機能により、Claude 3.5 Sonnetの出力をリアルタイムで確認、編集、発展させることができます。
本記事では、X上で共有されたClaude 3.5 SonnetとArtifacts機能の活用事例30個をまとめました！UXデザイン、Webデザイン、プロトタイプ開発、ビジネス文書作成など、様々な分野での活用例を紹介します。
それでは早速みていきましょう！
1. UXデザインとUser Story Map作成
まだまだ要検証だけど、UXデザインにClaudeの「Artifacts」機能はかなり使えるかも。
— KAJI | 梶谷健人 / 新刊「生成AI時代を勝ち抜く事業・組織のつくり方」発売！ (@kajikent) June 21, 2024
適当なサービス概要（ここではSpotify）を渡してインタラクティブな「User Story Map」を作るように指示したら行動フロー毎に機能の洗い出したがしっかりできた。
各付箋のテキストは編集可能かつ移動可能。 pic.twitter.com/JqtXkGpeTQ
2. 遷移可能な複数ページを持つWebページの制作
10分程度で遷移可能な複数ページを作成してもらった。画像参照なしで。 https://t.co/IikZG3RJX5 pic.twitter.com/cMt9RwMO3w
— しょーてぃー (@shoty_k2) June 20, 2024
3. プロトタイプを5分で作成
やばー、Claude 3.5 使ったら
— 元木大介@生成AI塾&抽象プログラミング言語: ゾルトラーク、にわとこ (@ai_syacho) June 22, 2024
5分ぐらいで抽象言語パッケージマネージャーGrimoのフロントエンドモック出来てしまった。 pic.twitter.com/JSowEOKXtu
なんか、Claude 3.5で作ったフロントエンド、Vercel使ったらハマりもせず秒でデプロイできたw
— 元木大介@生成AI塾&抽象プログラミング言語: ゾルトラーク、にわとこ (@ai_syacho) June 23, 2024
デモサイト→ https://t.co/XSQnEQ2ymJ
ざっくり手順
1. Githubリポジトリの準備:
2. Vercelアカウントの作成:
3. Vercelへのログイン:
4. 新しいプロジェクトの作成:
5. githubリポジトリのインポート:
6.… https://t.co/jcAlLqg1C0 pic.twitter.com/yQGZOexqdd
4. 営業資料やLPを5行のプロンプトから作成
【打ち合わせ中に、LPと営業資料を作れるClaude 3.5 Sonnetが半端ない】
— チャエン | 重要AIニュースを毎日発信⚡️ (@masahirochaen) June 22, 2024
本当に仕事の仕方が変わる。今までの10倍速でビジネスが進む。全ビジネスパーソン使うべき。。
・会議で新規事業アイディア生まれる
・その場で5行程度のプロンプト入力
・サービスサイトと営業資料完成… pic.twitter.com/SxLz3RGiF5
事業計画と資料もできたw
— チャエン | 重要AIニュースを毎日発信⚡️ (@masahirochaen) June 22, 2024
もう今日から販売できるw pic.twitter.com/I1kDzwhsz3
5. マリオ風ゲームを3分で実装
Claude 3.5 Sonnet + Maestro = Sparks of AGI?
— Pietro Schirano (@skirano) June 20, 2024
I asked to make a Mario clone using just geometric shapes, and the wildest part is that it gave the character animations as well, and the shapes seem like novel concepts.
It took 3 minutes. Look at the game! pic.twitter.com/YVQYp7m5Ed
6. 図解を作成
Claudeやばい。Xによくある図解画像、このクオリティでポン出ししてくれる↓ (これ画像編集入れてなくて本当にオールAI )
— すぐる | ChatGPTガチ勢 𝕏 (@SuguruKun_ai) June 21, 2024
ㅤ
本格的に「AIだけで万垢作れる時代」も近そう...
ㅤ
プロンプト：''' 最新のLLMランキングをテーマに、Twitterによくあるリッチな図解資料をsvgで作ってください ''' pic.twitter.com/ajMt2XEzGn
7. 画像生成AIの仕組みをアニメーションにする
claude 3.5 sonnetのartifactはSVGアニメーションがすばらしい。
— studio veco＠写真と教育と生成AI (@studio_veco) June 23, 2024
画像生成の毎回絵が変わる理由を簡素なアニメーションにしてみた。
生成する際にプロンプトの重みづけや組み合わせを簡素なアニメーションでできないかを考えていたのだけど、簡単にできました。#claude #artifact pic.twitter.com/1dlWj5ZL4D
8. 決済短信をもとにスライドを作成
任天堂の決済短信をCluadeに分析させた結果...
— すぐる | ChatGPTガチ勢 𝕏 (@SuguruKun_ai) June 21, 2024
ㅤ
そろそろスライド作成業務もAIで必要なくなりそう。
ㅤ
プロンプト： ''' この資料を元に、reveal.jsでリッチな分析レポートを作成して。実際に発表することを想定しつつ、リッチなアニメーションも搭載すること ''' pic.twitter.com/hYHFoqFSZd
9. 絵文字を活用したFPSを作成
Claude 3.5 Sonnet、3Dシューティングも作れる。
— すぐる | ChatGPTガチ勢 𝕏 (@SuguruKun_ai) June 21, 2024
ㅤ
地獄みたいなFPSができました...👇
ㅤ
プロンプトは簡単に：" HTML上で動作する、絵文字をふんだんに活用した3Dシューターを作成して " pic.twitter.com/6FHOCh2MPB
10. 2Dゲームをわずか20秒で開発
Claude 3.5 Sonnetの新機能「Artifacts』を使って20秒で3Dブロック崩しゲームが作れた...！
— かねちる@AIゲームクリエイター (@kanechiru) June 20, 2024
プレビューもそのままできるので素晴らしい！
(動画は倍速なしです)#AI #生成AI #Claude #game pic.twitter.com/3fe7DJTHDq
11. マンカラゲームをスクリーンショット1枚から実装
This is wild.
— Allie K. Miller (@alliekmiller) June 20, 2024
In just 25 seconds, Claude 3.5 Sonnet coded a fully functional Mancala web app for me 🕹️
I only provided ONE screenshot of the game's instructions.
It did the rest:
- Coded the entire game
- Previewed it so I could test
- Provided rules of play pic.twitter.com/WLweZUGt5C
12. ブラックジャックのUI/UXとゲームロジックを実装
Blackjack made with Claude 3.5 Sonnet
— Proper (@ProperPrompter) June 21, 2024
✅ Game logic
✅ Game area and card design
✅ Betting system
Unbelievable how quickly it can put this together. pic.twitter.com/QGCh6AS0Un
13. プロンプトの書き方を題材にスライドを作成
Claude 3.5 Sonnetは学びの形を永遠に変えてしまった。AIがスライドを作り、さらにプレゼンターまでをも担う時代に。これがプロンプト一発ででます： pic.twitter.com/nMfXOnFVe2
— 石川陽太 Yota Ishikawa (@ytiskw) June 22, 2024
14. インタラクティブな太陽系を3D表現
太陽系を3Dシミュレーションし、インタラクティブに操作できた🙌Artifacts機能楽しい！！ pic.twitter.com/f1SITUXECy
— 石川陽太 Yota Ishikawa (@ytiskw) June 20, 2024
15. ECサイトのUIを2分で作成
Claude3.5 sonnet、実際に試してみた。
— shimayuz@AIクリエイター&ChatGPT講師 (@Shimayus) June 20, 2024
えっと・・・
ECサイトが2分で完成したけど、Anthropicさん、ほんとにいいの？？
（注：動画速度 前半x5 後半x2）#Claude #Artifacts pic.twitter.com/LrwEtixr2t