ハクソク

世界を動かす技術を、日本語で。

クロードがインタラクティブなチャート、図、ビジュアライゼーションを作成できるようになりました

74日前原文(claude.com)

概要

  • Claude がリアルタイムで ビジュアル生成 機能をベータ版としてチャットに導入
  • グラフや図表 などを会話内で動的に作成・編集可能
  • 理解促進 のため一時的なビジュアルをその場で表示
  • 全プラン対象 でデフォルト有効化
  • FigmaやCanva など外部アプリとも連携可能

Claudeのチャットでのビジュアル生成機能

  • Imagine with Claude の機能をベースに、コード不要で リアルタイムビジュアル作成
  • チャート、ダイアグラム、ビジュアライゼーション をチャット内で即時生成
  • 会話の流れに応じて ビジュアルを調整・修正可能
  • 例：複利計算のカーブや、 インタラクティブな周期表 の作成
  • 「図で表現して」「時間経過で可視化して」 などの指示で直接生成依頼も可能
  • ビジュアルは一時的 で、会話の進行に合わせて変化・消去
  • アーティファクト （ダウンロード可能な成果物）とは異なり、 理解補助 に特化

最近のClaudeの応答フォーマット改善

  • レシピ では材料・手順を明確に分けて表示
  • 天気 の質問時にビジュアルで情報提示
  • Figma、Canva、Slack など外部アプリとの 直接連携 が可能

利用方法と特徴

  • 全プランユーザー が追加設定なしで利用可能
  • Claudeが自動でビジュアル生成を判断、またはユーザーが指示して作成
  • 作成後に 追加調整や詳細化 の依頼が可能
  • 組織の業務効率化 や 理解促進 に貢献

開発者向け情報・ニュースレター

  • 月次ニュースレター で最新情報やコミュニティ事例を配信
  • メールアドレス登録 で購読可能、いつでも解除可能
  • 製品アップデート、How-to、コミュニティ特集 などを提供

Hackerたちの意見

これって、LLMの見た目の自信を高める機能な気がするけど、他の出力の正確性にはあまり寄与してないよね。つまり、「自信満々に間違ってる」って批判がさらに悪化する感じ。

└

これが私の最初の考えでもあった。結局、これってユーザーがチャットの出力を見るのをさらに遠ざけるだけで、情報が確実に信頼できるように見せるだけだよね。LLMが構造化データを生成して、それをビジュアライザーに突っ込むことができるのがそんなに衝撃的なの？心配なのは、それが信頼できるかどうかで、実際には信頼できないってことは知ってるし。

└

俺にとっては使いやすさとか生活の質を向上させる機能だね。見かけの自信を高めることとは関係ないと思う。結局、どれだけLLMを信じるか（または信じないか）によるんだろうな。最近、制限要因はLLMじゃなくて自分の直感だって気づいてきた。これがその助けになると思う。

└

GoogleがNano Bananaを使ってフローチャート生成を推し始めたときも似たようなことがあったよ。見た目が良いプレゼンは、実際に重要なこと、つまり基礎データの正確性から人々の目を逸らすことがある。

└

最近見かけたLinkedInの投稿で、AIを過信している人たちの例を見つけた。数字を作り出すこともできるってことに気づいてないんだよね。リンクはこちら：https://www.linkedin.com/posts/mariamartin1728_claude-wrote-... 追記：投稿者に感謝、誰かが問題を指摘したときに訂正のメモを投稿してたよ：https://www.linkedin.com/posts/mariamartin1728_correction-on...

└

同意するよ。次は感情を揺さぶる音楽を追加するかもね、スロップの盛り上がるクライマックスに合わせてオーケストラの部分が盛り上がるみたいな。

└

それは、物事にどれだけの努力がかかるかについての直感とずれてるよね。人間が関わってる場合、「このデータを使ってすごくおしゃれなインタラクティブチャートを作った」って言うと、もっと多くの作業をしたってことになるし、データの正確さにもそれなりの努力がかかってるだろうと推測できる。でも、LLMの場合は、そのおしゃれなチャートを作るのにそんなに手間がかからないんだよね。だから、努力のサインだったものが、実際には余計な努力がかかってないデータを信じるように私たちを誤解させてる。 （もちろん、人間はずっとこの傾向を利用して、派手なグラフィックを信じてきたけど。）

└

もう起こったよ。 :) https://www.reddit.com/r/dataisugly/comments/1mk5wdb/this_ch...

└

チャートを作るときに思考の連鎖を使うと、全体の正確さが向上するんじゃないかと思ってる。

└

LLMの上にデータツールを作るときにいつもぶつかる緊張感だな。見た目のいいチャートがあると、出力が信頼できるように感じるけど、データが間違ってることもある。チャートがあると、気づきにくくなるだけなんだよね。LLMはデータの出所や計算の過程を示す必要がある。まるで「見出しを読んだから記事の内容は全部わかる」っていうのと同じくらいひどい。

すごい！アジャイル開発を説明するシンプルな図を作ってって頼んだら、めちゃくちゃ良いのができた。あの図がゆっくり動き出すのを見るのは、まるで魔法みたいだった。Mermaidのもっと綺麗なバージョンって感じ。すごいね、Anthropic。ほんと、これは素晴らしい。次はペリカンが自転車に乗ってる図を描いてもらおうかな、なんでもありだし！

Claude Codeを使ってると、よくMermaidJSの構文で図を描くように促すんだ。複数のステップをまとめるのにぴったりで、シンプルなツールでサクッと描けるのがいいよね。

これ、結構面白いし今試してるところなんだけど、ChatGPTって前からグラフを作ったりデータとやり取りする機能があったんじゃなかったっけ？例えば「ChatGPTの高度なデータ分析」とか。みんながそれを使って比較できるなら、ぜひ意見を聞きたいな。私は普段、データ分析には他のツールをたくさん使ったり、Claude Codeや他のLLMでコードを書いてデータ分析や可視化をしてるんだ。ChatGPTのチャートやグラフについての記事ね。 https://www.zdnet.com/article/how-to-use-chatgpt-to-make-cha...

└

でも、ChatGPTって前からグラフを作ったりデータとやり取りする機能があったんじゃない？ それは結構ひどい（私にとっては）。ChatGPTに何を作ってほしいかを伝えるのに、すごく具体的な言葉を使わなきゃいけないんだ。チャートの色まで指定しないと、黒い背景に黒いフォントを置いちゃうから（例えば）。それから、キャンバスに入れて、インタラクティブにして、実行可能にするように具体的に指示しないといけない。運が良ければ、右上の「プレビュー」ボタンを押して、うまくいくことを願うしかない（でも、うまくいかないことが多い）。Claudeがデモしたようなことをさせるために数段落書くこともできるけど、全然近づけない。今、Claudeを金融の洞察のために使ってるけど、すごく楽で美しいUXだよ。将来のために言うと、Geminiはこういうインタラクティブなキャンバスに関しては結構良い。ChatGPTよりはずっと劣るけど、かなりマシだね。

$20/月プランのsonnet 4.6を使って、彼らの例にある周期表を試してみたんだけど、数分後にClaudeが最大メッセージ長に達したって言って、途中で止まっちゃった。続けるボタンを押したら、最終的に表は生成されたけど、インラインじゃなくてjsxのアーティファクトになっちゃった。今はもう1日の使用制限に達しちゃった。

└

Claudeアプリのバージョンによって、新しいビジュアルAPIとアーティファクトが交互に出てくるんだ。iOS/iPadOSアプリはまだビジュアライゼーションAPIをサポートしてないし、アプリストアの更新もまだ見当たらない。

└

そんなに早くはなかったけど、十分早いと思ったよ。私の場合、HTMLファイルとしてダウンロードもできたしね。リンク: https://gist.github.com/karussell/289aeb621a71597babd6f97eb2... 追記: クロードが初期バージョンにバグがあるって確認したよ。104-117が見えないみたい。

└

同じスペック・プロンプトだけど、マックスプランでやったよ。右のペインに表示された。ダークテーマで。デイリー制限の2%を使った。

ポートフォリオ分析を頼んだら、何も言わなくても美しくてタブ付きのインタラクティブなチャートを作ってくれた。これ、ちょっと魔法みたい。チャートはただ美しいだけじゃなくて、データを早く理解するのにめちゃくちゃ役立った。正直、もし頼まれても、1週間かかってもあんなのは作れなかったと思う。

└

同様に、リクエストしていないけど、すごく役立ついくつかのビジュアライゼーションを作ってくれた。これはいいサプライズだね。結局、私が同じものを作るのにはもっと時間がかかるだろうなって思った。これをかなり活用するつもりだよ。データのビジュアライズにかなりの時間を使ってるから。

アーティファクト出力モデルは、見た目以上に役立つよ。俺たちはClaudeをマルチエージェントパイプラインで使ってて、構造化されたアーティファクト出力が自由形式のテキスト応答に比べてパースエラーを大幅に減らすことを発見したんだ。モデルは出力がレンダリングされると知っていると、違った推論をするみたい。Anthropicが具体的なフォーマット制約のあるツール使用タスクで同じような品質向上を見ているのか気になるな。

chatgptにマーメイドダイアグラムを作ってもらうと、特定のラベルに新しい行を追加してパースを壊すことがよくあるんだ。それをパースエラーとしてフィードバックすると、2回目はいつも正しいんだよね。そして、問題を正確に把握しているみたい。他にも、最初はほぼ間違えるけど、自分で修正するように促すと正しくなる例がいくつかある。根本的な原因が何なのか気になるな。

└

今日、Claudeに窓の外を見ているスキッドワードのミームを作ってもらったら、HTMLとCSSを生成し始めて、スタイルが「4歳の幼稚園児」とでも言うべきものになったよ。まだまだって感じ。

└

根本的な原因は何なんだろうね。トレーニングデータに基づいて、統計的に最も可能性の高いテキストを返すんだけど、エラーがある場合とない場合で違ってくるんだ。高精度な図を作るには、一般的な文最適化モデルとは違う注意のアーキテクチャが必要なんじゃないかな。

└

Mermaidはスペースの後でテキストを切っちゃうのが本当にひどいから、どこにでもsを入れなきゃいけないんだ。これが君のインターフェースでエスケープされる代わりにレンダリングされてるんじゃないかな。もしくはトークナイザーで翻訳が失われてるか。

└

「プロンプトの繰り返しが非推論LLMを改善する」 - https://arxiv.org/pdf/2512.14982 どのChatGPTのインスタンスでそれをやってるの？（推論？）

└

これは、IntelliJのMermaid Studioプラグインで取り組もうとしている問題の一つだよ。構文ガイドと構文/意味解析をMCPツールとして提供しているから、エージェントがマルチラインテキストやコメントのようなパターンに良いコンテキストを持って、図を反復的に洗練させることができるんだ（LLMは行末のコメントが好きだけど、Mermaid.jsはしばしばそうじゃない）。

└

問題は「なぜ最初の試行からのエラーをループバックして、2回目の試行で修正できないのか」と定義すべきだと思う。最初のパスで完全に正しい実装を生成できない理由ではなくて。

私は授業用にこういうビジュアルヘルパーをたくさん作ってきた（テーマは様々）。これはメルカトル図法を教えていて、lnが中心にどう作用するかを示してる。リンク: https://claude.ai/public/artifacts/1bded4db-c4c2-4089-aa36-5... 正直、最初はみんなもうやってると思ってたけど、実際にはそうじゃないみたいで驚いたよ - 教師もクラスもね。このアーティファクトは、とても長い会話を通じて丁寧に作られたから、ただの一発屋じゃなくて、ちゃんと手がかけられてるんだよね :D。最初からこれを正しく作るのは簡単じゃないと思うし、モデルは人間の手による適切なガイダンスがないと、関係ない詳細を延々と説明しちゃうことが多い。