チャット画面で即グラフとアプリを作る — Claude 新機能
Claudeといえば、いま最も注目されているAIのひとつ。
数日前に、チャット画面の中でインタラクティブなグラフやちょっとしたアプリをその場で作ってくれる新機能が追加されました。
コードが書けなくても「これをグラフにして」と言うだけでOK。バイブコーディングを本格的に始める前に、まず気軽に体験できます。
list目次expand_more
ポイント3つ
-
Claudeがチャット画面の中で直接グラフ・図解・ビジュアルを生成する
-
クリックやスライダー操作などインタラクションが可能な出力
-
コード不要 — 「これをグラフにして」と言うだけで完了 — Web・デスクトップで利用可能
1. この機能って何？
NOTE
KNOW — 正式名称は「Custom Visuals in Chat」
Claudeがテキストで回答しながら、その途中にグラフ・図・ウィジェットを直接生成して表示する機能です。
海外コミュニティでは「Show Me」機能とも呼ばれています。
Claudeにはもともと**アーティファクト（Artifacts）**という機能がありました。
アーティファクトはサイドパネルでアプリ・ドキュメント・ツールを作成して永続保存・共有できる機能です。
今回のインラインビジュアルは、それとは目的が異なります：
| インラインビジュアル（新機能） | アーティファクト（既存） | |
|---|---|---|
| 表示場所 | チャット本文内 | サイドパネル |
| 用途 | 一時的 — 会話の流れに合わせて変化・消滅 | 永続的 — 保存・共有・ダウンロード可能 |
| 目的 | 理解を助ける説明補助 | 成果物の制作（アプリ・文書・ツール） |
2. どうやって使うの？
自動生成
特別な設定は不要です。デフォルトでオンになっています。
ユーザーのリクエストに合わせてClaudeが「文字より図の方が伝わる」と判断すれば、自動的にビジュアルを作ってくれます。
直接リクエストする
以下のように言えばOKです。
-
「これを図解にして」
-
「時間の経過に合わせて可視化して」
-
「このデータをグラフにして」
NOTE
特別なコマンドはありません
「show me」「chart this」といった専用トリガーワードがあるわけではありません。
「可視化してほしい」という意図が伝わる表現であれば、Claudeが判断してくれます。
修正も会話で
生成されたビジュアルはクリック、スライダー操作、全画面表示などが可能です。
「月別じゃなくて年別にして」「色を変えて」といった修正依頼もすぐ反映されます。
3. 何が作れるの？
-
複利グラフ — スライダーで金利・期間を変えながらリアルタイム確認
-
インタラクティブな周期表 — 元素をクリックすると詳細が表示
-
プロセスのフローチャート — 複雑な手順を自動図解
-
データ分析 — CSVファイルをアップロードしてインタラクティブなグラフを生成
-
選択肢の比較 — 2つの選択肢を並べて比較ビジュアル化
-
システム構成図 — 複雑な構造を一目で把握
-
天気・レシピ — Web検索連携でリアルタイムデータを可視化
-
その他さまざまなビジュアル資料・簡単なアプリ
4. どうやって作られているの？
この機能はNano BananaやMidjourneyのようにAIが画像を生成するものではありません。
Webページを作るのと同じようにコードをリアルタイムで書いて画面に表示する仕組みです。
-
画像AI → ピクセルで描かれた静止画像を生成
-
Claudeインラインビジュアル → コードで作られた動的な出力物を生成
コードベースだからこそクリック・操作が可能で、自分が指定したデータを正確に反映できます。
5. 実例
プロンプト
Show me easy-to-understand visuals and interactive graphs showing the stock price movements of the S&P 500, Nikkei 225, and KOSPI from January 2020 through March 2026.
(S&P 500、日経225、KOSPIの2020年1月から2026年3月までの株価推移を、わかりやすいビジュアルとインタラクティブなグラフで見せて。)
TIP
この例では、プロンプトと一緒に実際の株価指数データファイルを別途添付しています。正確な数値が重要な場合は、AIに調べさせるより自分でデータを用意して渡す方が確実です。
生成された結果
下のリンクから実際に操作できます。
→ https://claude.ai/public/artifacts/c91dc3b5-fc82-4991-b7a5-9e2a0312232a
6. 保存と共有の方法
成果物を残したり共有したい場合は以下の方法を使ってください。
| 方法 | 説明 | こんな時に |
|---|---|---|
| 📋 Copy to clipboard | 画像ファイルとしてコピー | メモ・スライドにサッと貼り付けたい時 |
| 💾 Download file | .svg / .html ファイルで書き出し | Webにアップしたり、手元に保存したい時 |
| 📌 Save as artifact | Claudeのサイドパネルに永続保存 | Claude上で引き続き編集・発展させたい時 |
| 🌐 Publish | 公開リンクを作成（アカウント不要で閲覧可） | 外部共有、ポートフォリオ、SNS投稿など |
ダウンロード vs アーティファクト vs パブリッシュ
成果物自体はほぼ同じです。違いは「どこで使うか」だけ。
Claude上で引き続き磨きたい → アーティファクトに保存
ファイルとして別の場所で使いたい → ダウンロード
誰でも見られる公開リンクを作りたい → パブリッシュ
パブリッシュ（Publish）とは？
アーティファクトをパブリッシュすると、claude.ai/public/artifacts/... 形式の公開URLが発行されます。
Claudeのアカウントを持っていない人でも、リンクを開くだけで閲覧できます。
（例）https://claude.ai/public/artifacts/c91dc3b5-fc82-4991-b7a5-9e2a0312232a
使い方：
-
アーティファクトパネルで共有したいアーティファクトを開く
-
「Publish」ボタンをクリック
-
発行された公開リンクをコピーして友人に共有
7. 制限事項
WARNING
NO — ベータ機能のため、いくつか制限があります
- モバイル非対応 — WebとデスクトップのみでiOS/Androidアプリには未対応
- 自動保存なし — 保存しないと、会話が進むうちに消える可能性あり
- 品質にばらつきあり — ケースによって完成度が異なる
- 常に生成されるわけではない — Claudeが「テキストで十分」と判断した場合はビジュアルが作られないことも
8. 他のAIとどう違う？
AIによって可視化のアプローチはさまざまです。それぞれ強みが異なるので、目的に合わせて使い分けるのがポイントです。
| サービス | 可視化方式 | 強み | 弱み |
|---|---|---|---|
| Claude | コードベースのインラインレンダリング | 会話内でインタラクティブなグラフ・図解を生成 | 画像生成不可、モバイル非対応 |
| ChatGPT | Pythonコード → 画像 + DALL-E画像生成 | データ分析・統計の可視化、AI画像生成 | 生成されたグラフは静止画なので操作不可 |
| Gemini | AI画像生成 + テキスト | 高品質な画像生成（Nano Bananaなど）、長文処理 | インタラクティブなコード可視化には非対応 |
まとめると、インタラクティブな可視化にはClaude、データ分析グラフにはChatGPT、長くて詳細な資料作成にはGeminiがそれぞれ強みを持っています。
ひとつのAIが何でも得意なわけではないので、状況に応じて使い分けることが大切です。
まとめ
-
キーコンセプト：インラインビジュアル ＝ 会話内の一時的な可視化 ／ アーティファクト ＝ 永続保存用の成果物
-
実践のコツ：データを自分で添付すると精度が上がり、保存したい場合はアーティファクト→パブリッシュの順で活用
-
メリット・デメリット：クリック・操作できるコードベースの可視化が強みだが、モバイル非対応・使用量の消費が大きめ
NOTE
NOW — さっそく試してみましょう
- claude.ai にアクセス（WebまたはデスクトップApp）
- 何でもいいので質問しながら「これをグラフにして」または「図解にして」とリクエスト
- 生成されたビジュアルをクリック・操作してみて、「色を変えて」などの修正も試してみる
- 気に入ったらアーティファクトに保存、またはパブリッシュで共有