最近発表されたanthropicのLLMツールClaudeの新モデル、Claude3.5 Sonnetが注目を集めています！紹介記事はこちらになります。まだ、みてない方はぜひご覧ください。
Claude 3.5 Sonnetの機能の中で最も注目されているものがコーディング機能です。ChaGPTの新モデルGPT-4oが登場した際にも、テトリスのようなゲームが簡単に作れるということで話題となりました！本記事では、Claude 3.5 Sonnetのコーディング機能に焦点を当てて実際に使ってみた様子などを紹介していきたい思います。
目次
1章 Claude 3.5 Sonnetとは？
Claude 3.5 Sonnetは、Anthropicが2024年6月にリリースした最新のAIモデルです。このモデルは、以前のバージョンであるClaude 3シリーズの進化版で、処理速度やコスト効率が大幅に改善されています。Anthropicは、AI技術の最前線をリードし続けるために、このモデルを開発しました。
ClaudeのSonnetというモデルは以前は3つあるClaudeのモデルの中で中級モデルに位置するもので、無料で使える使いやすいモデルといった印象でした。
https://twitter.com/SuguruKun_ai/status/1803957337125982469
こちらのようにClaude3.5は実用的に使うことすらできます。
主な特徴と性能
Claude 3.5 Sonnetは、その高性能と効率性で注目されています。処理速度は前バージョンの2倍、コストは5分の1に抑えられています。特に日本語との相性が良く、マルチモーダル能力や高度な推論力が強化されています。例えば、視覚情報を基にした質問応答や科学的な図表の理解が優れています。
画像出典 Anthropic
こちらがClaude3の全モデルとClaude3.5 SonnetのIntelligence（賢さ ）とコストの関係を表すグラフとなっています。Claude3.5 Sonnetはコストがそのままで賢さのみが上昇しています。
Anthropic社は今回のClaude3.5 Sonnetのようなアップデートを数ヶ月間隔で行いたいという意思を示しています。今年の後半には、Sonnet以外の2つのモデルであるHaikuとOpusの新モデルの公開も予定しているようです！
Claude 3.5 Sonnetの新機能
Artifacts機能
新たに導入されたArtifacts機能は、ユーザーがAIとの対話中にリアルタイムで視覚的なコンテンツを生成・編集できる画期的な機能です。これにより、コードスニペットやウェブサイトデザインなどを即座に確認し、編集することが可能になります。
こちらがClaude3.5 SonnetのArtifacts機能を実際に使っている様子を示した動画です。このように、画面右側に暫定のアウトプット結果が出力されて、ユーザはこれを見ながらリアルタイムで指示を加えることができます。
マルチモーダル能力の強化
Claude 3.5 Sonnetは、マルチモーダル能力が大幅に強化されており、視覚情報を基にした質問応答や不完全な画像からのテキスト転写などが可能です。これにより、より直感的で高度なAI対話が実現します。
画像出典 Anthropic
こちらがClaude3,5 Sonnetとその他の主なLLMの性能の違いをまとめた表となっています。現状性能が1番高いGPT-4oとも比べてかなりの項目でClaude3.5 Sonnetが上回っています。
2章 Claude 3.5 Sonnetを実際に使ってみた！
今回は実際にWebサイトとゲームをClaude 3.5 Sonnetに作ってもらいましょう。
Claude 3.5 SonnetでWebサイトを作成
ウェブサイト再現までの手順
まず、Claude3.5Sonnetを使ってウェブサイトを再現する手順を見ていきましょう。
手順
- ウェブサイトにアクセスし、キャプチャを撮ります。
- Claude3.5Sonnetにキャプチャを送りコーディングを依頼します。
- コードとプレビュー画面が同時に生成されるため、内容を確認できます。
以下では、具体的な作成事例をいくつか紹介していきます。
ウェブサイトの作成
画像出典 Anthropic
楽天のウェブサイトのキャプチャを基に、コーディングをシンプルに依頼します。
画像出典 Anthropic
左側にチャット欄、右側にコーディングした内容の「Code」とその結果の画面「Preview」が同時に確認できるのが特徴です。
キャプチャ画像だけで、近い雰囲気のウェブサイトを生成されました。
画像出典 Anthropic
上記のように、コードの中身も確認できます。
画像出典 Anthropic
よりウェブサイトっぽくするために、バナーや動きもつけるよう依頼したところ、より楽天のサイトに近い雰囲気で生成されました。
画像出典 Anthropic
「Version」の選択で、過去に生成したコードとプレビューに戻ることも可能です。
過去のやり取りを通して、どのような経緯で変化してきたのか確認ができます。
そのため、生成された内容がイメージと違う場合には過去生成内容をベースとしてコーディングするといった対応が可能です。
一つの画面でチャットとプレビュー、コードが全て完結するため修正しやすいのも特徴です。
ウェブサイトの共有
画像出典 Anthropic
また、生成したウェブサイトを「Publish」で共有することも可能です。
上記はテストで「新卒採用サイト」を作成したものです。
「Artifacts」の画面より「Publish」を押すと、リンクが発行され共有が可能となります。
画像出典 Anthropic
実際に作成したサイトはこちらです。
共有サイトの追加編集
また、他の人が作ったウェブサイトの確認だけでなく、「Remix」機能で追加編集をすることも可能です。
（こちらは有料プラン限定の機能となっています）
こちらは映画マトリックスのグラフィックをウェブサイトとして作成されたものです。
画像出典 Anthropic
「Remix Artifact」を押すと、自分のClaude操作画面にコードをコピーすることが可能です。
画像出典 Anthropic
この状態から追加でプロンプト入力することで、自分の仕上げたい内容に編集が可能です。
画像出典 Anthorpic
このように、「matrix」の表記を「Claude」に変更することができました！
ゲームの作成
次にゲームの作成を行っていきます。今回はテトリスの作成を依頼します。
画像出典 Anthropic
まずは自然言語だけでシンプルに作成依頼をします。作成したコードの機能、どんな役割を担っているのか、自然言語で教えてくれます。
画像出典 Anthropic
ゲームを実行する際に必要な、改善点もピックアップしてくれました。
「実際のゲームを楽しめるよう、コードを追加して」
とこちらもシンプルに依頼をします。
画像出典 Anthropic
このようにコードが追加されました！
画像出典 Anthropic
しかしながらまだ、テトリスのピースだけとなっており、実際に遊べる状態ではありません。
「この環境で使えるようにして」
と抽象的な依頼を継続してみます。
画像出典 Anthropic
わずか数回のやり取りでテトリスの実装が完了しました。
ゲームオーバーのルールやスタートボタンもちゃんと機能し、回転もできました。実装までにかかった時間は5分程度で、5回のプロンプト入力で完成しました。
①「テトリスを作成して」
②「実際のゲームを楽しめるよう、コードを追加して」
③「この環境で使えるようにして」
④「上記実装して」
⑤「置き場所が正しく反映されないことがあります。正しく反映されるようにして、枠外に置けないようにして」
上記の通り、プログラミング言語はもちろん、複雑なプロンプトも一切使わず、会話するような流れで簡単に作成ができました。
画像出典 Anthorpic
デザイン性も依頼すれば、オリジナリティあふれるゲームの作成も簡単です。今回作成したテトリスのリンクもこちらに記載しておきます。
Claude 3,5とChatGPTとの違い
やはりなんといっても、Artifacts機能によりClaude 3.5 Sonnetではリアルタイムでコードを編集・活用できる点が大きな利点です。
一方、ChatGPT-4oにはこのような機能はありません。
エディタの用意が必要なくコードの内容が反映される点は、まさに自然言語だけで開発体験ができ、プログラミング初心者でも開発に興味を持つきっかけとなるでしょう。
また、それぞれのコードの役割がチャット欄に記載され、すぐにコードとその影響の確認ができると、プログラミング初心者でも上手くいかない原因がわかりやすいと感じました。
３章 まとめ
今回は、Claude 3.5 Sonnetのコーディング機能について詳しく紹介しました！実際にテトリスをいくつかの指示だけで完成させることができたのは非常にびっくりしました。また、リアルタイムでコーディングが行われている様子も非常に近未来的なものを感じました。
このようにAIのコーディング能力は日に日に高くなっており、人間がコーディングを辞める日も近いかもしれません。
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント