2025 年 7 月時点の Claude で Artifacts で自分が便利に使っている出力方法のメモ
2025 年 7 月時点の Claude で Artifacts で自分が便利に使っている出力方法のメモです。
背景
あくまで 2025 年 7 月時点の仕様での試してみたお話です。ここから仕様が変わったり、より良いアプローチが見つかるかもしれません。
Claude を現在は Pro ユーザーで使ってます。Artifacts がとても便利でして、とはいえ、得手不得手はある中で、どんな出力方法やってるかなーというところをメモしておきます。
Artifacts においては、現時点では Pro でも Free でも出力自体は変わらなくメッセージ数の上限が違うだけなので、Free でも応用は効くと思います。
Mermaid 記法で図表を出力
Markdown の Mermaid 記法で図表を出せます。
ちゃんと Artifacts で出せるのがありがたいです。
目玉焼きの料理の手順を、フライパンを熱する～油をひく～卵を割って卵を落とす～しばらく焼く～出来上がりで Mermaid 形式でドキュメントに書いてください。
こんなお願いで、
Artifacts にこんな感じで出力できます。
flowchart TD
A[開始] --> B[フライパンを熱する]
B --> C[油をひく]
C --> D[卵を割って卵を落とす]
D --> E[しばらく焼く]
E --> F[出来上がり]
F --> G[完了]
style A fill:#e1f5fe
style G fill:#c8e6c9
style F fill:#fff3e0また、このようにコピーができるので Mermaid Live Editor などで外部で表示することも可能です。
シンプルなデータ可視化
Claude の Artifacts でシンプルなデータ可視化ができます。Excel データや CSV データはちゃんと中まで読んでくれて分析してくれます。
東京都オープンデータカタログサイトで 狛江市が指定等を行った文化財の一覧 を例に使います。
これは文化財の一覧です。文化財のカテゴリ分けをして、そのカテゴリ数の分布をグラフにしてください。Chart.js を使ってシンプルな HTML で表示してください。
こんな風に聞くと、
と前分析してくれて、
ぐりぐり分析してくれて、
最終的にこんな感じで可視化してくれます。精密にやるのは結構大変ですが、ざっくり出すぶんにはイイ感じに可視化できます。
もうちょっとインタラクティブなグラフもできる
Claude の調子にもよりますが、上記の会話でデータが読まれている状態で、さらにちょっとインタラクティブなグラフもできます。
いいですね。別のドキュメントで町ごとのくくりで、ボタンを押すとカテゴリ分布が切り替わる棒グラフにしてほしいです。
こんな風に聞くと、
今回のグラフに合った分析が行われて、
ぐりぐりと HTML が構築されて、
このような町ごとのくくりで、ボタンを押すとカテゴリ分布が切り替わる表示ができます。
Markdown で構造化文書をまとめてくれる
これが一番使っているかもしれません。
Markdown を使って、イイ感じに、見出しやリストを出力してくれます。
たとえば、上記の流れを引き継いで
このデータ分析結果をドキュメントにまとめてくれますか。
このように聞くと、
のように、分析してくれます。ざっくり聞いてもいい感じに出してはくれますが、分析方針やまとめ方を細かく指示すると、より一層、目的に沿ったものができます。
# 狛江市指定文化財データ分析報告書
## 📋 概要
本報告書は、狛江市指定文化財のデータ（23件）について、カテゴリ別および地区別の分布を分析したものです。データ分析を通じて、同市の文化財の特徴と地理的分布の傾向を明らかにしています。
## 📊 全体概要
**基本統計**
....以下略
こちらもコピーができて、中身は Markdown なので Joplin のような Markdown 表示ができるツールにメモを移せば、自分のナレッジとして活用できます。
他のデータと突き合わせることもできる
狛江市の文化財データに 東大和市が指定等を行った文化財の一覧 をさらにアップロードして分析もできます。こういう複雑な分析もやってくれるので、自分が思いもしなかったポイントに出会えたりします。
東大和市が指定等を行った文化財の一覧も加えて、狛江市のデータと分析してみてください。カテゴリごとの傾向を見るのが最初はイイかなと。
こんな感じでアップロードしつつお願いします。
多少データカラムが違っても頑張ってくれます。
CSV でよくある文字コードも変換しようと頑張ります。
こんな感じでグラフを出してくれます。
このときは分析レポート HTML に含めてくれました。
3D コンテンツも作れる
JavaScript のライブラリが結構充実しているので 3D ライブラリを使ってコンテンツを作れます。
3D 立方体を回せるインタラクティブな HTML を Three.js を使って表示してください。
とお願いすると、
Three.js を呼びつつコンテンツを作ってくれます。
これ、ちゃんとマウスで回せます。
地図表示もいける
OpenStreetMap も動作するので地図表示もいけます。
OpenStreetMap を使って日本の主要都市へフォーカス移動できるコンテンツを作ってください。
とお願いすると、
地図ライブラリを読みつつ、おおよその都市座標も取ってきて表示してくれます。
こんな感じです。ただし地図タイルが外部データとして取ってこれない CORS 的な制約にひっかるっぽいので、これは HTML ダウンロードしてローカルで表示してみましょう。
そうすると、しっかり地図コンテンツが表示されます。
さらに地図可視化もできる
東京都の公共施設一覧 のオープンデータのような位置情報が入っているデータ、可視化したいですよね。
このデータをアップロードしつつ、地図表示したいといえばできます。
OpenStreetMap で地図表示の仕組みを作ってください。このあと位置情報 CSV を読み込むか埋め込んで各情報をピンで配置します。ひとまずいまはダミーで主要都市の位置情報で。
と表示の基礎をつくります。地図の仕組みともなるとデータも表示もと一気に依頼すると、うまくいかないこともあるので、こうします。
一旦、ダミーな主要都市位置が出てきます。
そのうえで 東京都の公共施設一覧 を手元のメモ帳で文字コードを UTF8 にしたものをアップロードして、以下のようにお願いします。
この UTF8 の CSV データから、名前・緯度・経度に合わせて埋め込んでください。東京都の公共施設一覧です。他のカラムまで入れるとデータ量が多いので入れないでください。
Claude での CSV データは UTF8 にしたほうがトラブルが起こりにくいです。素直に動作します。
無事書き出されたようです。
HTML をダウンロードしてローカルで表示してみると、うまく表示されました！ここまでくると、ちょっと複雑なので Claude もうまくいかないことがありますが、今回はがんばってくれました～。