2025年2月にAnthropicが発表した「Claude 3.7 Sonnet」は、直感的な即時応答と詳細な推論を1つのモデルで実現する「ハイブリッド推論型のAIモデル」として注目を集めています。
特に、そのビジュアル化機能は、簡単な指示だけで高品質な図表やグラフィックを作成できる点で、ビジネスや教育など様々な分野で革新的な活用が進んでいます。
今回は、Claude 3.7 Sonnetのビジュアル化機能の使い方と活用事例を紹介します。
Claude 3.7 Sonnetのビジュアル化機能の基本
Claude 3.7 Sonnetは、128,000トークンという大規模な文脈処理能力を持ち、大量のテキストや複雑なデータを一度に処理できることも、ビジュアル化機能を支える重要な基盤となっています。
さらに、Claude 3.7 Sonnetの拡張思考モード(Extended Thinking)モードを活用することで、より精緻で洗練されたビジュアル表現が可能になります。
拡張思考モードを有効にするには、チャット画面の左下からモデル選択時に「Extended」を選択します。(このモードはClaude Proの有料会員(月額20ドル)のみが利用できる機能です。)

拡張思考モードでは、AIが思考プロセスに時間をかけることができるため、複雑なデータの関係性を正確に把握し、それを視覚的に表現する際の精度が向上します。
ビジュアル化対応フォーマット(SVG、React、HTML)
Claude 3.7 Sonnetは、主に以下の3種類のフォーマットでビジュアル表現を生成することができます:
SVG(Scalable Vector Graphics):複雑な図表やイラストを作成する際に最も優れた結果を示すことが多く、編集のしやすさと高品質な出力が特徴
React:ユーザーインターフェイス(UI)の構築に使用されるJavaScriptライブラリで、インタラクティブな要素を含むビジュアル表現に適しています。
HTML:シンプルな表現や基本的なレイアウトに適していますが、複雑な図表では他のフォーマットに比べて精度が落ちる場合があります。
基本的な使い方と最適なプロンプト設計
Claude 3.7 Sonnetでビジュアル表現を生成するための基本的な使い方は非常にシンプルです。
しかし、より効果的なビジュアル表現を得るためには、以下のようなプロンプト設計のポイントを押さえることが重要です:
フォーマットの明示:「SVGで~」「Reactで~」「HTMLで~」など、希望するフォーマットを明確に指定します。
目的と対象の明確化:「経営者向けの簡潔な図解として~」「初学者にも分かりやすく~」など、ビジュアルの目的と対象読者を明示します。
スタイルや色の指定:「青と緑のグラデーションを使って~」「ミニマルなデザインで~」など、視覚的なスタイルについての指示を含めると、より希望に近い結果が得られます。
構造の提案:「中央に~を配置し、周囲に~を配置して」など、基本的な構造についての指示があると、理解しやすいビジュアルになります。
修正指示の活用:最初の出力に対して「~の部分をより大きく」「~の色を変更して」など、具体的な修正指示を出すことで、段階的に理想の表現に近づけることができます。
これらのポイントを踏まえたプロンプト設計により、Claude 3.7 Sonnetのビジュアル化機能を最大限に活用することが可能になります。
グラレコの基本概念とClaude 3.7 Sonnetでの実現方法
グラフィックレコーディング(グラレコ)とは、会議やセミナー、ワークショップなどの内容を、リアルタイムで視覚的に記録する手法です。
文字だけでなく、図や絵、色などを使って情報を整理することで、複雑な内容や抽象的な概念を直感的に理解しやすくする効果があります。
従来、グラレコは専門的なスキルを持ったグラフィックレコーダーによって行われてきましたが、Claude 3.7 Sonnetの登場により、AIを活用したグラレコの作成が可能になりました。
Claude3.7 Sonnetを使うと画像のようなグラレコが作成できます。

このグラレコは、Makiさん (https://x.com/hAru_mAki_ch) のGitHubにある「グラフィックレコーディング風インフォグラフィック変換プロンプト」を使用して作成しました。
このプロンプトでは、HTML形式で作ったグラレコが作成できます。
プロジェクトに設定して使おう
上記のプロンプトをプロジェクトに入れておくと、便利に使えます。
Claudeのプロジェクトタブから、「プロジェクトを作成」で新規プロジェクトを作ります。

プロジェクト名を入れて、

プロジェクトが作成できたら、「プロジェクトの指示を設定」の箇所にプロンプトを入れます。

先ほどの「グラフィックレコーディング風インフォグラフィック変換プロンプト」 をコピー&ペーストします。

貼り付けたら、「指示を保存」をクリックして保存します。

設定が完了したら、グラレコにしたい内容をコピペして「以下の内容をグラレコにして」と指示します。
今回は、AGIラボで出しているGPT4.5の解説記事をコピペで渡しました。

「クロードがメッセージの最大文字数に達したため、〜」メッセージが出た場合は「続ける」と入力することで再開してくれます。

無事に完成しました。右下の「公開」ボタンを押すことで、アーティファクトを公開することができます。

「公開してリンクをコピー」で、押すことで誰でも見れるようになるリンクが作成されます。


実際、作成したグラレコがこちらです。
https://claude.site/artifacts/ff8b5792-e002-4c85-92c3-6e3f5f8e10c5







