Claude 3.5 Sonnet: 実際のプロジェクトでの使用例

Claude 3.5 Sonnetは、大学院レベルの推論(GPQA)、学部レベルの知識(MMLU)、およびコーディング能力(HumanEval)において新たな業界基準を設定しています。ニュアンス、ユーモア、複雑な指示の理解において顕著な改善を示し、自然で親しみやすい調子の高品質なコンテンツを書くのに卓越しています。

私はしばらくの間Claude 3.5 Sonnetを使用してきました。このブログ記事では、私の経験と、良い点・悪い点、できること等をすべて共有したいと思います。

まず、Claude 3.5 SonnetがChatGPT 4.0よりも多くの場合、賢く、優れていることは明らかだと言えます。両方を使用すると、しばらくして違いを感じることができるでしょう。この投稿では、Claude 3.5 Sonnetのすべての機能と能力について説明します。
Claude 3.5 Sonnet

まず、アクセスについて。ChatGPT 4.0と同様に、Claude 3.5 Sonnetも無料アカウントで利用可能ですが、使用に制限があります。このAIをよりよく理解するために、数日間にわたって作業を行い、タスクを完了できないポイントまで押し進めて、その能力をよりよく理解しようとしました。オンラインで他の人がClaude 3.5 Sonnetで行ったことについてのビデオや資料を探しましたが、私にとっては実際のプロジェクトやタスクの方が、全く役に立たないかもしれないものよりも重要です。そこで、Claude 3.5 Sonnetで試みたプロジェクトのリストを作成し、それで得られた論理と理解の限界をまとめました。

学習:インタラクティブPDFダッシュボード
Claude 3.5 Sonnetを使用して、与えられたPDF内の重要な情報をすべて要約し、教えてくれるインタラクティブなPDFダッシュボードを作成できます。多肢選択問題を作成して、与えられたトピックに関する知識を練習してテストすることもできます。

以下は、インタラクティブなPDFダッシュボードを取得するために使用した最初のプロンプトです。
プロンプト:
この情報をより視覚的な方法で理解し、テストし、学習するためのインタラクティブなPDFダッシュボードを作成してください。
上記のプロンプトで得られた結果は以下のリンクにあり、1回のプロンプトで非常に興味深い結果が得られました。
結果: https://claude.site/artifacts/cf5f95f2-4eeb-4f75-8fd2-62599fd22702
通常、結果の開発に時間をかけ、新機能を追加し、いくつかのバグを修正します。最終的に、最初の結果と比較してはるかに優れて魅力的な以下の結果に到達しました。
結果: https://claude.site/artifacts/d16b2462-0e01-4d16-b95d-5db65ad5a21b
Claude 3.5 Sonnetによって作成された学習用インタラクティブPDFダッシュボード

データ分析:CSVをグラフに変換
Claudeを使用して、2つの主要なステップでデータ分析を行うことができます。まず、データを含むCSVファイルをアップロードし(データをクリーンにすることをお勧めします)、以下のプロンプトを使用してClaudeにCSVファイルをJSONに変換するよう依頼します。

プロンプト:このCSVファイルをJSONに変換してください。
次に、2番目のステップで、以下のプロンプトを使用して、JSONファイルをインタラクティブなチャートとグラフに変換するようClaudeに依頼します。
プロンプト:JSONファイルの情報を説明するいくつかのインタラクティブなチャートとグラフを、アニメーション付きで作成してください。
以下は、10日間の3つの製品の注文数と売上を含むCSVファイルの結果です。以下のリンクの結果内で、インタラクティブなグラフ上のすべてのデータを見ることができ、理解プロセスを容易にすることができます。
結果: https://claude.site/artifacts/e69b9abc-63ec-4161-8702-050530eb774b
Claude 3.5 Sonnetによってインタラクティブなグラフとチャートに変換されたCSVファイル

Webコーディング:UIデザインからコードへ
次の非常に印象的な使用例は、Claude 3.5 Sonnetに画像をアップロードし、完璧なプロンプトを使用してUIデザインを実際のウェブサイトに変換し、必要なすべてのコードを書くことです。私のウェブサイトのスクリーンショットを使用して以下のプロンプトで始めました。私のウェブサイト:

Pouyaeti.comウェブサイトのスクリーンショット
プロンプト:以下のUIデザインを作成するためのhtml/css/jsコードを書いてください。
結果: https://claude.site/artifacts/e31194c3-64e6-4bbf-8c01-97df9dde0257
しかし、上記の結果を見てわかるように、残念ながら私が望んでいたものは作成されませんでした。単にHTMLコードが書かれただけで、見た目もあまり良くありませんでした。そこで、アップロードした画像にほぼ似たものができるまで作業を続けました。
結果: https://claude.site/artifacts/985b011f-545b-4783-b39c-0a4b0bde7608
Claude 3.5 SonnetによってウェブサイトのHTML/CSSコードに変換されたUIデザイン
ここで、最初のステップでより良いプロンプトを書き、ニーズに基づいてより良い結果を得るのに役立つテクニックを教えたいと思います。Claude 3.5内でタスクに取り組み、いくつかのプロンプトの後に望む結果を得たら、1回で同じ結果を得るプロンプトを書くようClaudeに依頼することができます。
受け取ったプロンプトは、将来のタスクを容易にします。例えば、このUIデザインをウェブサイトコードに変換するタスクについて、私は試してみて以下のプロンプトを受け取りました。
プロンプト:
以下のUIデザインを正確に再現するHTMLとCSSコードを作成してください:
[画像または詳細なUIデザインの説明を挿入] あなたの回答には以下を含めてください:
適切なセマンティックタグを使用した完全なHTML構造。
<head>セクション内の<style>タグ内のインラインCSS。
可能な限りhexコードを使用した正確な配色。
デザインに合わせた適切なレイアウト構造(flexbox、gridなど)。
該当する場合は、レスポンシブデザインの考慮。
オリジナルデザインのレイアウトと比率に近いテキストと画像のプレースホルダーコンテンツ。
必要なアイコンや視覚要素(カスタムアイコンが利用できない場合はUnicode文字や単純なCSS形状を使用)。
適切な場合はホバー状態と基本的なインタラクティビティ。
視覚的デザインのピクセルパーフェクトな再現に焦点を当て、間隔、タイポグラフィ、全体的なレイアウトを含めてください。デザインの側面が不明確または仮定が必要な場合は、あなたの解釈を明確に述べてください。
コードを提供した後、デザインの主要な側面を再現するためのアプローチを簡単に説明し、仮定や創造的な決定を行わなければならなかった領域を記してください。
上記のプロンプトを、オンラインで見つけた2つの異なるランダムなデザインで試してみました。以下の結果は1回の試行で得られたものです😌。
結果1: https://claude.site/artifacts/2af80f9b-6454-4885-a016-0e9fe8023ed2
結果2: https://claude.site/artifacts/503405e1-fb8a-4ec8-b17e-4d4c5cc8449b

ゲームコーディング:Pythonを使用した複雑なゲームの作成
おそらく、1つか2つのプロンプトでClaudeを使用して簡単なゲームを作成する多くのビデオを見たことがあるでしょう。私もさまざまなゲームを作成しようと試みました。その中で最も良かったのは数独で、10分間と6つのプロンプトを使ってClaude 3.5で開発し、良いレベルに達しました。

プロンプトは簡単で、Pythonを使用してClaudeにどのタイプのゲームを作成させたいかを述べ、少しずつ改善していくだけです。その後、PythonコードをVSCodeに貼り付けて実行することができます。
結果:
Claude 3.5 Sonnetによって作成されたPythonで書かれた数独ゲーム

マーケティング&セールス:リードファネル
ここでマーケティング目的でClaude 3.5をテストする時間です。YouTubeの登録者と訪問者をメールリードに変換し、後でEメールマーケティングを行うための完全なリードファネルを図表付きで作成するようClaudeに依頼しました。ファネルを準備するのに1つのプロンプトだけを使用し、Claudeはまずファネルのすべてのステップをテキストとして含むファイルを作成し、その後、以下のリンクで見ることができる完全な図表を作成しました。

プロンプト:デジタルマーケティングに関するオンライン教育コースを販売するウェブサイトがあります。YouTubeからEメールリードを獲得するためのリードファネルを作成するのを手伝ってほしいです。マーケティングの認知バイアス(報酬傾向、希少性など)を使用し、あらゆる可能なシナリオとステップを計画した完全で十分に考え抜かれたリードファネルを作成してください。最後に、そのための図表を作成してください。
結果: https://claude.site/artifacts/4b377baf-b7dd-4f3f-8f01-3b7060c4ff97
Claude 3.5 Sonnetによって作成されたリードファネル図

システムアーキテクチャ:ツールまたはアプリ用
Claude 3.5の別の使用例は、作成したいツールやアプリのシステムアーキテクチャを作成するよう依頼することです。前の使用例と同様に図表を作成しますが、この図表はフロントエンドからバックエンド、データベースまでのアプリのアーキテクチャを示します。例えば、以下のプロンプトでは、Djangoウェブサイトに作成したいツールのシステムアーキテクチャを作成するようClaudeに依頼し、結果は非常に良好でした。

プロンプト:Djangoウェブサイト上のツールのシステムアーキテクチャを作成してください。これは生産性ツールで、登録ユーザーがポモドーロ・テクニックを使用し、作業時間と休憩時間の長さを記録し、その後、日単位で生産性に関するフィードバックと分析を受け取ることができます。
結果: https://claude.site/artifacts/7b1ce5eb-ae49-42e3-a60b-2f49787ded47
Claude 3.5 Sonnetによって作成されたアプリまたはツールのシステムアーキテクチャ

ライブツール/アプリ:アナライザーツールの作成
この使用例は私のお気に入りです。この部分では、アーティファクト上で実行できるアプリを作成します。ブログ投稿を確認し分析するアプリを作成し、それをどのように改善できるか教えてくれ、詳細な分析を提供します。以下は、Claude 3.5に最初に書いたプロンプトで、さらに2つのプロンプトを追加して素晴らしい状態まで改善しました。

プロンプト:SEO用のツールを作成してください。ブログ投稿記事を貼り付け、業界を書くことができるようにします(SEO分析に役立つと思われる他のフィールドがあれば追加してください)。次に、ランク付けしたいキーワードを追加できる場所を追加し、さらにキーワードを追加できるボタンを設置します。そして、分析ボタンとリセットボタンを追加します。分析ボタンをクリックすると、SEOの観点からブログ

たった 3 つのプロンプトでこのようなツールを作成できるというのは、本当に素晴らしいことです。プロジェクトに数時間を費やしたら、何が達成できるか想像してみてください。特に、Artifact 上で実行され、ホスティングについて心配する必要がない場合はなおさらです。友人やユーザーに送信して、作成した優れたツールを彼らも使用することもできます。

 

以上が、実際のプロジェクトで役立つ Claude 3.5 Sonnet の 7 つの使用例です。この例がお役に立ち、プロジェクトの改善にこれらの戦略を活用していただければ幸いです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です