【Claude 3.5 Sonnet】 Artifacts の応用的な使い方

この記事では、 Claude 3.5 Sonnet の Artifacts を用いて実施できる、応用的な使い方を紹介します。

先日、今までの 対話型AI サービスの大きな転換点になるのではと思われる画期的な機能 Artifacts が Claude に搭載されました。

/blogs/claude3.5-sonnet-artifacts/

私もリリースされて以来、どのようなことが実現できるのか色々試している段階ではありますが、すでに様々な可能性を感じてワクワクしています。

【Claude 3.5 Sonnet】 突如リリースされた Artifacts が度肝を抜くレベル | Lazy Developer

この記事では、2024/06/21 に突然利用できるようになった、 Claude 3.5 Sonnet と Artifacts 機能について紹介します。 筆者は GPT 4 より Claude3 の方が使いやすく感じ、ChatGPT Plus を解約して乗り換えたのですが、すぐ後に GPT 4o が登場してしまいました

lazy-developer.jp

基本的な使い方

応用編の前に、普通に使っていて実現できることを列挙してみます。

• コーディング（UI）のプレビュー
• マークダウンのプレビュー

この辺りは、普通にプロンプトを書いていても気づくことでしょう。

画面を作ってもらえるだけで、生産性が段違いなので、この辺の基本的な使い方だけでも十分価値があります。

こんな適当な指示文でも、かなりのクオリティの UI を提案してくれます。

ここから、「色を変える」 とか 「○○セクションを追加する」 など、画面を見ながらチューニングできるわけですね。

でも、それ以外にも様々な使い方がありそうです。

応用編1. フローチャートを作成させる

一般的なブログ等のWEBサイトを構築するための手順をフローチャート（svg）として提示してください。 レンタルサーバー, Wordpress を前提とします。

こんなプロンプトを投げてみましょう。

アウトプットが以下です。

簡単な資料の画像として、そのまま使えそうですね。

これは簡単な例ですが、応用できそうな方法として

• 仕様書からデータフローを作成させる
• WEB会議のトランスクリプトから、ヒアリングした業務フローを作成させる

など、業務上でもかなり役に立つ場面があるのではないでしょうか。

（外部リンク）Claude Proに機密データを入力したいのですが、会話を見ることができるのは誰ですか?

Claude Pro ではモデルのトレーニングに使用されないのでご安心ください。

応用編2. SNSのカード画像を作成する

現時点でのよく使われている便利なAIツールをカテゴリ別に表すsvgを作成してください。SNSでよく見るような1枚の絵で表してください。

(追加) カテゴリ別にカード化されているような表現にできますか？

最初のプロンプトでは円グラフのような表現になったので、カード化させてみました。

ここからもちろん、日本語化やアイコン付与などをしていくことで、普通に使えるレベルの画像がすぐ作れそうです。

応用編3. インフォグラフィックの作成

Claude3.5 Sonnet の特徴をインフォグラフィックにまとめ、日本語でまとめてください。 モダンでスタイリッシュな見た目とし、svg形式で提示すること。

応用編2と似たような使い方ですが、パワポで使えるレベルの図として作成できるか確認してみましょう。

プロンプトは雑に投げていますが、もっと細かくスタイルや文字サイズ、背景色など指示を与えると適切に変換してくれます。

アウトプットがこちら

<g transform="translate(285 96)">
  <rect width="230" height="88" rx="24" fill="#fffaf2" stroke="#d7c8b4" stroke-width="2" />
  <rect x="0" y="0" width="230" height="10" rx="24" fill="#d95032" />
  <text x="20" y="42" font-size="20" font-weight="700" fill="#171717">高度な知能</text>
  <text x="20" y="66" font-size="13" fill="#5a5247">複数条件の比較や筋道立てた整理に強い</text>
</g>
<g transform="translate(74 226)">
  <rect width="230" height="88" rx="24" fill="#fffaf2" stroke="#d7c8b4" stroke-width="2" />
  <rect x="0" y="0" width="230" height="10" rx="24" fill="#f1c34b" />
  <text x="20" y="42" font-size="20" font-weight="700" fill="#171717">優れた言語理解</text>
  <text x="20" y="66" font-size="13" fill="#5a5247">日本語の文脈や指示の意図を拾いやすい</text>
</g>
<g transform="translate(496 226)">
  <rect width="230" height="88" rx="24" fill="#fffaf2" stroke="#d7c8b4" stroke-width="2" />
  <rect x="0" y="0" width="230" height="10" rx="24" fill="#4ecdc4" />
  <text x="20" y="42" font-size="20" font-weight="700" fill="#171717">複雑なタスク処理</text>
  <text x="20" y="66" font-size="13" fill="#5a5247">長文要約や情報の構造化を任せやすい</text>
</g>
<g transform="translate(82 356)">
  <rect width="230" height="88" rx="24" fill="#fffaf2" stroke="#d7c8b4" stroke-width="2" />
  <rect x="0" y="0" width="230" height="10" rx="24" fill="#5fa8ff" />
  <text x="20" y="42" font-size="20" font-weight="700" fill="#171717">多言語対応</text>
  <text x="20" y="66" font-size="13" fill="#5a5247">英日混在のやり取りや翻訳の叩き台にも向く</text>
</g>
<g transform="translate(488 356)">
  <rect width="230" height="88" rx="24" fill="#fffaf2" stroke="#d7c8b4" stroke-width="2" />
  <rect x="0" y="0" width="230" height="10" rx="24" fill="#a56cf5" />
  <text x="20" y="42" font-size="20" font-weight="700" fill="#171717">高い創造性</text>
  <text x="20" y="66" font-size="13" fill="#5a5247">記事構成や表現の叩き台を素早く出せる</text>
</g>