Claude、最近またじわじわ便利になってきているんですが、Artifactsまわりの進化がちょっと見逃せないなと思って書いてます。
自分もずっと「チャット画面の横にコードが表示されるやつ」くらいの認識だったんですが、2026年に入ってから機能が増えすぎていて、ちゃんと把握し直した方がいいなと。
この記事でわかること
- Claude ArtifactsとLive Artifacts機能の基本
- MCP連携でできること（Google Calendar・Slack・Asanaなどとの連携）
- ノーコードでダッシュボードやWebアプリを作る流れ
- バージョン管理機能の活用
Claude Artifactsってそもそも何？
Claudeとの会話の中でコードやドキュメントなどをサイドパネルに表示してくれる機能です。HTML・React・SVG・Mermaid図・コードファイル・整形済みドキュメントなどがレンダリングされます。
作ったものはそのままプレビューで確認できて、リンクで共有したり、ソースをダウンロードしたり、サイトに埋め込むこともできます。受け取った側はClaudeアカウント不要で閲覧できるのが地味にありがたいです（リミックスしたい場合はアカウントが必要）。
無料プランでも基本的に使えますが、ストレージ上限（最大20MB）やLive Artifacts機能はPro・Max・Team・Enterpriseの有料プランが必要です。設定をいじった記憶がない場合、デフォルトでオンになっているのに気づかず使えていたりします。
Live Artifactsが思ったより本格的だった
今回いちばん「へぇ」となったのがLive Artifacts。普通のArtifactsが「一度作って終わり」に近いのに対して、Live Artifactsはセッションをまたいでも内容が永続されるのが特徴です。
たとえばこういう使い方ができます：
- 週次のメトリクスを表示するダッシュボードを一度作っておいて、次に開いたときに最新データで自動更新
- Linear・Slack・カレンダーと連携したプロジェクトトラッカー
- スプレッドシートのデータを引っ張ってくるレポートビュー
IDE不要、ホスティング不要、デプロイ作業なし。外部サービスへの接続はModel Context Protocol（MCP）を通じて行い、Asana・Google Calendar・Slackなどのツールと読み書きができます。ClaudeにMCPサーバーを設定済みの人なら便利に使えますが、接続先サービス側の利用料やAPI利用料、MCPサーバー運用コストなどは別途発生する場合があるので、その点は注意です。
MCP連携の具体的な流れ
ArtifactがMCPツールにアクセスする際は、最初の操作時に許可を求めるプロンプトが表示されることがあります。設定した許可がその後引き継がれるので、一度OKしておけば、次から都度確認が出ないのは使い勝手としてかなり良いです。
自分が試したのはGoogle Calendarと繋いだ週次スケジュールビュー。Claudeに「今週の予定を一覧で表示するArtifactを作って」と頼んだら、思ったより素直にHTMLで作ってくれました。見た目は最初ちょっと微妙でしたが、「もっとシンプルにして」「色をグレーベースに変えて」と追加指示するだけで整っていく感じが、コードを直接いじるよりだいぶラクでした。
バージョン履歴も意外と使える
Artifactのバージョン履歴を開くと、変更の経緯を確認したり、現在のバージョンと以前のバージョンを比較したり、うまくいかなかった更新を以前のバージョンに戻したりできます。
「あの見た目の方が良かったな」ってなったときに戻せるのは安心感があります。Gitっぽい操作感ですが、コマンド不要なのでとっつきやすいです。
※この記事にはプロモーションが含まれます
ちなみに、Aiarty Image Enhancer（AI画像高画質化ツール。ノイズ除去・8倍拡大に対応）も気になっています。Aiarty Image Enhancer
まとめ
Claude Artifactsは「チャットの横に出てくるやつ」から、かなり実用的なツールに育ってきた印象です。特にLive Artifacts＋MCP連携の組み合わせは、ノーコードでダッシュボードやWebアプリのプロトタイプを素早く作れるのが大きな強みですね。個人的には今後もこのあたりの進化を追っていきたいです。
まだ使ったことない方は、まず無料プランでHTMLやSVGを生成してみるところから始めると雰囲気がつかみやすいと思います。
参考になったらクリックしてもらえると嬉しいです!
