
Claude新機能『Artifacts』でテトリスを作ろう!
こんにちは!
AI・ChatGPTの発信をしているたいがです🐯
Instagramから飛んできていただいてありがとうございます!
さて現在、AIチャットボットの“ビッグ3”といえば
ChatGPT
Gemini
Claude
だと思います。
3者が競い合うようにアップデートを繰り返していて、そのたびにユーザーは
「神アプデ!」
「これはヤバすぎる…」
と“嬉しい悲鳴”を上げているわけですが😂
今回はClaudeがアップデートされ
『Claude 3.5 Sonnet』という新しい言語モデルが使えるようになったので紹介します🙌
「言語モデル」というのは簡単に言うと
“文章を理解して言葉で答えるコンピュータプログラム”のこと。
ChatGPTの『GPT-4o』やGeminiの『Gemini1.5Pro』も言語モデルの名称です。
Claudeの言語モデルは性能順に
Haiku
Sonnet
Opus
上記3つが存在しており、今回は2番目の「Sonnet」がアップデートされて、なんと!
性能トップのOpusを追い抜いちゃったんです😳

ライバルとの比較でもSonnetの数値は頭一つ抜けてる印象😳😳

ちなみにOpusは課金しなきゃ使えないんだけど、性能トップのSonnet3.5は無料で使える!という逆転現象が今回(嬉しいことに)起きました😂
※ただし制限回数あり
そして今回のアップデートで一番ヤバいのが
『Artifacts(アーティファクツ)』って新機能で、どんなことができるのかというと
作りたいWEBサイトやゲームのコード(プログラム)を組んで、それを画面上で見られる🫣
ChatGPTやGeminiでもコードを組むことはできるんだけど、画面で見るには別のツール(エディタ)を使わなきゃいけないんですよね🤔
Sonnetではコード組みと画面表示が同時にできる点で、使い勝手は現在ナンバーワンといえるでしょう。
では実際にArtifactsで『テトリス』を作ってみようと思います!
Artifactsでテトリスを作る
まずはClaudにアクセス!
Googleアカウントorメールアドレスでアカウントを作成します。

Claudeは英語表示が初期設定なので、ブラウザの翻訳機能で日本語にしておくのもいいでしょう💡
携帯電話番号を入力して年齢確認したあと「認証コードを送信」ボタンをクリック。

携帯に届いた認証コードを入力。

以下、利用規約に同意していきます。


無事ログインできたらArtifactsの設定をおこないます。
※アクセスが集中している時間帯はログインできないことも🥺
時間を空けてリトライしましょう…
ホーム画面の左メニュー、アカウント名が表示されているところ(①)を選び、設定項目が表示されたら
「Feature Preview」(②)をクリック。

Artifacts設定画面が開いたらトグルボタン(③)をオンにします。

これでArtifactsが使えるようになります。
続いてチャット欄に
「ブラウザで遊べるテトリスを作って下さい」
と指示文を入力。

Artifactsが起動し、コードが組まれていきます。
にしてもコーディング速い。AI恐るべし…😱

右にコードが表示される
コーディングが終わったら、実際にプレイできるテトリスが画面に表示される…
はずですが、僕の場合は何度やっても1発で成功することはなかったです😭
おそらく指示文がテキトーすぎたのが原因かなと😂
でも大丈夫!エラーで動かないことを伝えれば、AIがただちに修正してくれます👍
下の画像では、テトリスの画面らしき黒い長方形が表示されるだけで何にも動かないエラーが…。
「黒い画面が表示されているだけで遊べません」
と、ざっくりでいいのでエラー内容をAIに伝えます。

すると速攻でコード修正を(文句も言わず)してくれます😍
もし人間のエンジニアに、こんなざっくりリクエストをしたらブチ切れられるかも🤣
その後、何回か修正してもらい実際にプレイできるテトリスの完成です✨

ただし、何度も修正依頼してもらえるとはいえ、無料版だとチャットの回数制限に引っかかる恐れも…😨
やりとりを短くするためには、AIが理解しやすいよう指示文(プロンプト)を工夫する必要があります。
でもそれって初心者にはムズいので、ここは運に頼るのもありかなと。
需要があれば、プロンプトのコツについても今後シェアしていきますね😊
Artifactsのその他の使用例
ゲーム制作のほかにもArtifactsでできることは色々あります。
たとえばPDFを読み込ませて、内容を図表入りでまとめることも余裕で可能です🙆🏻♂️
試しに『任天堂』の資料PDFを突っ込んでみると…

めっちゃキレイにまとめてくれました👏
まとめ
今回は『Claude 3.5 Sonnet』の新機能
Artifactsの使い方を紹介しました!
Claudeは、ビッグ3と呼ばれるAIの中でも特に日本語の精度が高く、そこを気に入ってChatGPTやGeminiから乗り換えるユーザーも少なくなかったんですが…
このArtifactsが実装されたことで、ますます乗り換え組が増えるかもしれませんね。
もちろん他のAIも巻き返すために、これからもどんどんアップデートをブチ上げてくるはず。
そんな激アツなAIの波に皆さんが乗り遅れないよう、僕自身もアップデート&発信していきます💪💪
最後までお読みいただき、ありがとうございました!
この力を利用できる知識を身につけて、
Web3.0時代を駆け抜けていきましょう!!
この感想をぜひDMで送ってくださいね!
あとインスタフォローしていただけたら泣いて喜びます!!
↓↓↓
DMで感想を送る
https://www.instagram.com/taiga_web3.0/