Claude 3.7で図解・グラフ・資料を即時作成
元記事公開日: 2025年3月10日
出典: https://note.com/ai_saborou/n/n4225909fe786
Claude 3.7に台本を渡して図解を、表データで各種グラフを、文章・記事でグラフィックレコーディング風HTMLを生成させる。表現方針や青系ビジネススタイルはプロンプトで指定する。棒・円・折れ線・レーダーのArtifactsと、図解・グラレコ用プロンプト一式が公開された。
背景
AIでサボろうチャンネルは、図解・グラフ・資料をClaude 3.7で作る方法を動画で紹介し、使用プロンプトをnoteにまとめている。図解の表現方針として、AI解説チャンネル向けの未来感・デジタル感、テキストと視覚要素のバランス、キーワードの囲み線や色による強調、簡易アイコン・図形、接続線・矢印による関係明示、余白の確保が示されている。
要望・目的
動画台本の一部分を分かりやすく伝える図を描くこと、棒グラフ・円グラフ・折れ線グラフ・レーダーチャート用の元データと可視化、グラフィックレコーディング風のHTMLインフォグラフィックへの変換が対象である。グラレコについては、引用元プロンプトをビジネス感のあるパキッとしたスタイル、青系メインカラーに書き換えること、3カラム構成と1カラム垂直構成の両方が用意されている。
実装・実施内容
図解作成プロンプト、表データ作成用の簡易プロンプト、棒・円・折れ線・レーダー各グラフ用プロンプト、グラレコプロンプトのスタイル変換用指示、3カラムおよび1カラムのビジネス風グラレコプロンプトを整理して公開している。グラフ系はClaudeのArtifactsも公開し、触って確認できる形にしている。カラースキーム、タイポグラフィ、レイアウト、フォント指定はビジネス風グラレコ用プロンプトに記述している。
AIサービス・システム
中心はClaude 3.7である。図解では台本テキストを入力し、方針に沿った構成と図を生成する。棒グラフ向けにはPlain textの表データ作成例（めちゃくちゃ雑と明記）、円グラフ向けにも簡易なデータ作成例が別々に示され、棒・円・折れ線・レーダー各プロンプトではいずれもデータが埋め込まれた状態でグラフを生成する。グラフはArtifactsとしても公開される。グラレコ系では文章・記事を、青系パレットと指定フォントによるHTMLインフォグラフィックへ変換する。引用ではClaude 3.7 Sonnetとグラフィックレコーディング風プロンプトの組み合わせも示される。