Claude Live Artifactsで作るノーコード業務ダッシュボード完全ガイド

こんにちは、次世代システム研究室の T.D.Q です。

朝10時。コーヒーを淹れる前に、Gmail/Outlookを開いて、Slack を開いて、Google Calendar を開いて、Jira、GitHub と数えていたら、気づくとブラウザに10タブが並んでいる。ここまできてやっと「今日何から手をつけるんだっけ」を整理しはじめる ── そんな毎朝に、心当たりはないでしょうか。

もちろん、私も長らくそうでした。AI に業務サマリーを書かせても、チャットを閉じた瞬間にすべて流れていく。翌日にはまた同じプロンプトをコピペする ── という繰り返し。あれ、これって AI を使っているようで、結局のところ自分が AI のオペレーターをやっているだけでは？ そう思っていた頃に出てきたのが、2026年春に Anthropic がリリースした Claude Live Artifacts でした。これで朝の景色はだいぶ変わった、というのが正直なところです。

一度ダッシュボードを作ってしまえば、翌日からは右上の「Refresh」を1回押すだけ。プロンプトを書き直す手間もなく、トークンもほとんど食わない。コードを1行も書かなくても、自分専用の業務 OS が手元に立ち上がる ── そんな感覚に近いです。

この記事では、MacBook Pro（M-series） 上の Claude Desktop（Coworkモード） を使って、Google などの公式 MCP コネクタを束ねた「リアルタイム業務ダッシュボード」を0コードで組み立てるところまで、実際に手元で動かしたログを残しておきます。

結論

Live Artifacts・MCP・Skills、この3点セットさえ揃えば、Claude は「1回限りのチャットボット」から「自分専用の業務 OS」に化けます。本記事の手順をそのままなぞれば、30分後にはあなたの手元にも以下の6つが揃っているはずです。

• ノーコード：HTML / JavaScript の知識がなくてもダッシュボードが作れる
• 初回以降ほぼゼロトークン：2日目以降の更新はトークンをほぼ消費しない
• プロンプト再入力不要：Refresh ボタン1回で最新データに更新される
• 主要サービス連携：Google Calendar / Drive / Gmail のネイティブコネクタ（Slack・Notion など他のネイティブコネクタも同様に追加可能）+ Web Search で日々の業務情報を網羅
• バージョン履歴：失敗しても過去に戻せる。安心して改善を繰り返せる
• CSV フォールバック：API 連携が難しくても CSV アップロードで即座に使える

1. Claude Live Artifacts ─ チャットとの本質的な違い

Live Artifacts は、チャットに流れて消えていくテキスト回答とはまるで別物。最新データに常時つながり続ける、永続的でインタラクティブなダッシュボードです。ざっくり言えば「Claude が生成する、コードを書かずに使える業務用ミニアプリ」と捉えると、しっくりくるはずです。

ただし、これまでの Claude の Artifact（HTML や React コンポーネントの生成機能）は、できた瞬間にフリーズする「静止画」でした。情報が古くなれば、また同じプロンプトを打ち直して作り直さないといけない。しかも数日経つとチャット履歴の奥に埋もれて、もう見つからない。一方、Live Artifacts はそこをガラッと変えてきました。一度作るとサイドバーに「ピン留め」され、開いて 「Refresh」を押すだけで、つないだツールから最新のデータをスッと取りに行ってくれます。

処理の流れ ── どう動いているのか

抽象的な話だけだとイメージしにくいので、内部の流れを先に押さえておきましょう。プロンプトを送ると、Claude は以下の3ステップで処理を進めます。

1. コネクタ呼び出し：接続済みの各サービス（Google Calendar・Gmail・Drive・Web Search など）を順次呼び出して、リアルタイムデータを取得する
2. HTML / JS 自動生成：取得したデータを組み込んだ HTML / JavaScript を生成し、画面右側にレンダリングする
3. Artifact のピン留め：生成が終わると、Artifact は自動的にサイドバーの「Live artifacts」一覧にピン留めされる。チャットタブを閉じても消えない

翌朝以降はもっとシンプルで、Refresh ボタンを押すたびに ステップ1（コネクタ呼び出し）とステップ2の差分更新だけ が走ります。プロンプトを書き直す必要はなく、トークンもほぼ消費しない ── これが Live Artifacts の「永続化」の正体です。

従来のチャット / Artifact との違い

このフローを踏まえて、通常のチャット・通常の Artifacts・Live Artifacts の3者を主要な5軸で並べてみると、それぞれの立ち位置がはっきり見えてきます。

運用面の細かな違いまで含めて表にまとめると、こうなります。

比較項目	通常のチャット / Artifact	Live Artifacts
データの持続性	タブを閉じると消える	サイドバーにピン留め（永続）
毎日の操作	毎回プロンプトを再入力	「Refresh」ボタン1回のみ
トークン消費	毎回フル消費	初回生成のみ（以降ほぼ0）
操作性	静的なテキスト・画像	タブ切替・検索・フィルターなど完全インタラクティブ
バージョン管理	なし	更新履歴を自動保存、過去バージョンに戻れる
外部データ連携	毎回プロンプトで再指定	MCP コネクタで自動取得（Refresh 1回）

1-1. Live Artifactsの中核機能

普通のチャット AI と何が違うのか、Live Artifacts ならではの5つの特長を整理しておきます。エンジニアだけでなく、コードを書かない管理職や非エンジニア職にとっても、業務の組み立て方を変えうるポイントです。

① ノーコードでアプリを生成

まず最大の強みは、ユーザーが一行もコードを書かなくていいこと。たとえば「こんなダッシュボードが欲しい」と日本語で投げるだけで、Claude が裏で HTML と JavaScript を書き上げ、動く形で目の前に出してくれます。プログラミング未経験でも、対話だけで自分専用の業務ツールが組み上がる。地味ですが、ここはけっこう大きな転換点だと感じています。

② ワンクリック・リアルタイム更新

一度作ってしまえば、もう同じプロンプトを書き直す必要はありません。アプリを開いて右上の「Refresh」を1回押すだけ。つないでいる外部ツール（コネクタ）に再クエリが飛び、その瞬間の最新データが画面に反映される ── 派手さはないものの、毎朝効いてくる体験です。

③ 専用の管理スペース

作った Live Artifacts は、チャット履歴のなかで流れて消えることがありません。Cowork のサイドバーに「Live artifacts」という専用タブがあって、フォルダのように整理して残せます。「あのダッシュボード、どこにあったっけ」を探す時間がそのまま消えるイメージです。

④ インタラクティブな操作性

さらに、生成されるダッシュボードは、ただの画像や表ではなく、ちゃんと動く Web ページです。たとえばタブを切り替えたり、検索ボックスに打ち込んだり、フィルターで絞り込んだり、項目をクリックして詳細を開いたり ── 普段使っている SaaS と同じ操作感で触れます。

⑤ バージョン履歴の保持

そして改修するたびに、Claude が以前のバージョンを自動で履歴に残してくれます。たとえばデザインを派手にしすぎてミスったとき、機能をいじったらおかしくなったとき ── ボタン1つで前の状態に戻れるので、心理的にもガンガンいじれる安心感があります。

2. 事前準備

セットアップに入る前に、手元にこれだけ揃っているか確認しておきます。

1. Claude Desktop（macOS / Windows）の最新版：上部ナビゲーションに「Cowork」タブが表示されるバージョン（2026年春のアップデート以降）
2. 有料アカウント（Pro / Max / Team / Enterprise のいずれか）：本記事執筆時点（2026年5月）では、無料プランから Live Artifacts とコネクタ機能を利用することはできません。最新の対象プランは Anthropic 公式の料金ページでご確認ください。
3. 各サービスのアカウント：Google（Gmail・Calendar・Drive）・Slack など、連携したいサービスのアカウントを事前に準備しておきます。Step 2 のコネクタ設定時に OAuth 認証でログインします。なお、Gmail・Calendar・Drive はそれぞれ独立したネイティブコネクタとして個別に追加し、スプレッドシートの読み取りは Google Drive コネクタに内包されるため Sheets を個別に追加する必要はありません。

プラン	月額（目安）	Rate Limit	Live Artifacts	推奨用途
Pro	$20/月	標準	◯	個人利用・検証
Max	$100/月〜	Pro の5〜20倍	◯	ヘビーユース個人
Team	$25/user/月〜	Pro の約5倍	◯	チーム・業務利用（推奨）
Enterprise	要相談	最大	◯	大企業・コンプライアンス対応

※ 料金・Rate Limit は変更される場合があります。最新情報は Anthropic 公式サイト でご確認ください。

3. Live Artifactの構築手順

Step 1：Claude Desktop のインストールとCowork起動

1. claude.ai/download から Claude Desktop の最新版をダウンロードしてインストールする
2. アプリを起動してログインし、画面上部のタブから 「Cowork」 を選択する

Step 2：MCP Connectors の追加

MCP（Model Context Protocol）は、Claude が外部サービスのデータを安全に取得するための仕組みです。このステップは、以下の2つのサブステップに分けて進めます。

• Step 2-A：Claude Desktop のネイティブコネクタを追加する（必須）
• Step 2-B：X (Twitter) などネイティブ未対応サービスの取り扱い

※ 自社のプライベート GitHub リポジトリの PR / Issue 連携が必要な場合は、別途 github/github-mcp-server の導入を検討してください。本記事の主用途（業務ダッシュボード）では、GitHub の公開情報は後述の Web Search で十分カバーできます。

Step 2-A：ネイティブコネクタの追加（Google Calendar / Drive / Slack）

1. Cowork 画面で左下の 「Customize」（スライダーアイコン）をクリック
2. 「Connectors」 セクションを開き、「+」（Browse connectors） ボタンをクリック
3. 追加したいサービス（Google Calendar・Google Drive・Slack など）を選択してログインし、権限を付与する
4. コネクタ一覧への追加を確認する

※ 各サービスを選択すると、ブラウザが立ち上がって Google / Slack 等の OAuth 同意画面に遷移します。表示される権限スコープ（Calendar の閲覧、Drive のファイル読み取り 等）を確認の上、「許可」をクリックすればコネクタが有効化され、Cowork の Connectors 一覧に “Connected” 表示で戻ります。

サービス	取得できる主なデータ	接続タイプ
Google Calendar	本日・今週の予定、招待中のイベント	ネイティブ
Google Drive	最近更新されたファイル・フォルダ検索、スプレッドシートの行・セルデータ（KPI等）の読み取り	ネイティブ
Slack	メンション・チャンネルメッセージ・検索	ネイティブ
Notion	ページ・データベースの読み取り	ネイティブ
Gmail	受信メール・ラベル・検索	ネイティブ

Step 2-B：X (Twitter) の取り扱いについて

X (Twitter) の公式 MCP コネクタは、本記事執筆時点（2026年5月）では Claude Desktop のネイティブ一覧に含まれていません。とはいえ慌てる必要はなく、Claude 標準の 「Web Search」機能（デフォルトで有効）を使えば、X 上のトレンド情報や技術ニュースは十分に取りに行けます。

【参考】Zapier MCP で X に接続する方法：
X のツイート検索や特定アカウントのメンション取得が必要な場合は、Zapier MCP 経由での連携も選択肢の一つです。Connectors に「Zapier MCP」を追加し、X の Action（Search Tweets・Search Mentions）を設定することで利用できます。Zapier は HubSpot・Zendesk・Stripe など多数の SaaS と連携可能なため、ネイティブ非対応のツールを Claude から呼びたい場合の有力な選択肢です。対応アプリ数や料金プランは Zapier 公式でご確認ください。

Step 3：権限の設定

デフォルトでは、Claude がコネクタを呼び出すたびに「この操作を許可しますか？」というポップアップが出ます。毎朝ダッシュボードを自動更新したいなら、ここで止まっていては Refresh 1回の世界が成立しません。読み取り専用のアクションに限って 「Always allow（常に許可）」 を設定しておきましょう。

1. Customize > Connectors を開く
2. 各コネクタを展開し、個々のアクション（例：list_events・search_files）の権限設定を確認する
3. 読み取り系アクションのみ 「Always allow」 に変更する

【重要】セキュリティ上の注意：
Write / Delete 系のアクション（ファイル作成・削除・スプレッドシート書き込みなど）への「Always allow」設定はおすすめしません。業務上どうしても書き込み系の自動化が必要な場合は、以下のリスクを十分に理解した上でご判断ください。

・ Live Artifacts の自動実行時に意図しないデータの削除・書き換えが発生する可能性
・ プロンプトの解釈ミスや AI ハルシネーションによる誤操作のリスク
・ 実行前の確認ダイアログがスキップされ、影響範囲を事前にレビューできない

特に企業データを扱う場合は、まず読み取り系のみを Always allow に設定し、書き込み系は都度確認のまま段階的に動作検証を重ねるアプローチを推奨します。

Step 4：Skills ファイルの登録（トークン節約・デザイン統一）

Artifact を作るたびに「ダークモードで、フォントは Noto Sans JP で、アクセントカラーは…」と書き続けるのは、正直しんどい。一度 Skills ファイルにブランドガイドラインを登録しておけば、Claude が裏で勝手に読み込んで、生成 UI に反映してくれるようになります。

以下のサンプルをベースに brand-guideline.md を作ってみてください。

## Brand Guidelines for Claude Artifacts

### Color Palette
- Primary:    #0052CC  (Blue)
- Secondary:  #00B8D9  (Cyan)
- Background: #0D1117  (Dark / GitHub-like)
- Surface:    #161B22
- Text:       #E6EDF3
- Accent:     #39D353  (Green for positive metrics)
- Warning:    #F78166  (Red for alerts)

### Typography
- Font family: "Noto Sans JP", "Inter", sans-serif
- Heading size: 1.5rem (h2), 1.2rem (h3)
- Body size: 0.9rem

### Logo
- URL: https://example.com/assets/logo.svg
- Width: 120px

### Design Principles
- Style: Minimal, data-dense (inspired by Linear / Vercel Dashboard)
- Layout: Grid-based, card components
- Spacing: 16px base unit
- Border radius: 8px
- Always use Dark Mode by default

登録手順：

1. Customize > Skills を開く
2. 「+ Add skill」 をクリックし、brand-guideline.md をアップロード
3. Skill 名を「Brand Guidelines」などに設定して保存する

Step 5：Live Artifact の新規作成

1. Cowork 画面の左サイドバーから 「Live artifacts」 タブを選択する
2. 右上の 「New artifact」 ボタンをクリックする
3. 「Chat with Claude」 を選択してダッシュボード構築用チャットを開始する

Step 6：プロンプトでダッシュボードを構築する

セットアップさえ終わってしまえば、あとは Cowork のチャットに「こんなダッシュボードが欲しい」と日本語で投げるだけ。Claude が必要なコネクタを順番に叩き、HTML / JavaScript を生成してサイドバーに永続化してくれます。翌朝以降は Live artifacts > （作成したダッシュボード名） > Refresh のワンクリックで運用が回ります。

品質を左右する最大のポイントは どのコネクタ（データソース）を使うかを、プロンプトでハッキリ書くこと。プロンプト設計の3原則と、コピペでそのまま使える完成例は、次の Section 4 でじっくり解説します。

4. プロンプト設計の3原則と完成例

ここまでで土台は揃いました。いよいよ本題、「どんなプロンプトを書けば、質の高いダッシュボードが出てくるのか」 に踏み込んでいきます。まずは汎用的に効く 3原則 ── データソースを明示する、レイアウトを具体化する、AI Analysis を入れる ── を整理して、その応用例として、管理職（C-level・Director・EM）向けの 「エグゼクティブ・コマンドセンター（Executive Command Center）」 を実際に組み立ててみましょう。

エグゼクティブ・コマンドセンターは、Live Artifacts の機能を欲張ってフルに盛り込んだ完成形のひとつ。Calendar・Drive・Web Search の3コネクタを束ねて、3タブで本日の業務・ビジネス指標・市場動向を1画面に押し込み、末尾の AI Analysis セクションでマネージャーへの示唆まで自動で書かせる ── そんな構成です。まずはこれを写経してから、自分の業務に合わせて書き換えてみてください。そうすると、あとで Section 5 の応用パターンを読むときも、自然と「自分の職種ならどう作り変えるか」という目線で読めるようになります。

4-1. 3原則の詳細：データソース・レイアウト・AI Analysis

原則① データソースを明示する

「どのコネクタから、何を取りに行ってほしいのか」を箇条書きで具体的に書く。地味ですが、ここが一番効きます。「最新の情報を集めて」みたいな曖昧な投げ方をすると、Claude は API 選びに迷い、想定外のデータが混ざったり、最悪コネクタ呼び出し自体をスキップしてくることもあります。サービス名 / 接続種別 / 取得対象、この3点を1行ずつ書いておく。たとえば「Google Calendar（ネイティブコネクタ）：本日の全スケジュール」のような書きぶりで十分です。

原則② レイアウトを具体的に指定する

また、UI 構成も想像以上に具体的に書くのがコツです。たとえば「上半分にカレンダー、下半分に未読メールカード」「3タブ構成（本日 / 指標 / 市場）」── このくらい解像度を上げる。色やフォントといったビジュアルは Step 4 の Skills に逃がしておいて、プロンプト本文では情報の配置と粒度だけに集中します。タブ数・カード数・グラフ種別まで最初に決めきっておくと、Claude のアウトプットが格段に安定します。

原則③ AI Analysis セクションを必ず追加する

データを表やグラフに並べるだけだと、結局はただの BI ツールと変わりません。Live Artifacts の真の強みは「データを取得しつつ、その場で推論させられる」ところにあります。プロンプトの末尾にこんな一文を入れておきましょう ── 「上記データを分析し、注目すべきリスクまたはチャンスを3点、具体的なアクション付きでまとめてください」。データ取得と AI コンサルティングを同じ画面の中で同時に走らせる。これがダッシュボードの体験価値を一段引き上げる、一番大きなレバーだと感じています。

4-2. 完成例：エグゼクティブ・コマンドセンターのプロンプト

3原則を踏まえて、管理職（C-level・Director・EM）向けの高機能ダッシュボード 「エグゼクティブ・コマンドセンター」 を組み立ててみます。以下のプロンプトはそのままコピーして使えます。[ ] の中身だけ、ご自身の環境に合わせて差し替えてみてください。

あなたはシニアフロントエンドエンジニアとして振る舞ってください。以下の仕様で 「エグゼクティブ・コマンドセンター」 という名前の Live Artifact を作成してください。

■ デザイン仕様
– スタイル: Stripe・Linear・Vercel のダッシュボードに近い、モダン・ミニマル・高級感のあるデザイン
– カラーモード: Dark Mode（Skills ファイルのブランドガイドラインを参照）
– レイアウト: 3タブ構成（Tab 1 / Tab 2 / Tab 3）

■ データソース（以下のコネクタを使ってリアルタイムデータを取得してください）
1. Google Calendar（ネイティブコネクタ）：本日の全スケジュールを取得する
2. Google Drive（ネイティブコネクタ）：以下のスプレッドシートから KPI を取得する
– スプレッドシート URL: https://docs.google.com/spreadsheets/d/[SPREADSHEET_ID]/edit
– シート名: Q3_KPI
– 取得列: 「日次売上（Daily Revenue）」「新規登録ユーザー数（New Signups）」「目標進捗率（Goal Progress %）」の3指標
3. Google Drive（ネイティブコネクタ）：チーム内で最近更新された上位3ファイル（Docs / Slides）を取得する
4. Web Search：以下3軸の最新動向を検索し、要点をまとめる
a. GitHub Trending：site:github.com/trending をベースに「AI agents」「LLM」に関連する今週の注目リポジトリ（star 数急増・新規 Issue 傾向）
b. 主要 AI ベンダーの公式発表：Anthropic / OpenAI / Google DeepMind の直近24時間のブログ・リリースノート
c. X (Twitter) パイオニア層の発言：「AI agents」「LLM models」に関する直近24時間のトレンド投稿（影響力のある研究者・エンジニアを優先）

■ Tab 構成と表示内容
Tab 1：Daily Focus（本日の集中事項）
– 本日のスケジュールをタイムライン形式で表示（残り時間付き）
– Drive から取得した「要確認ドキュメント3件」をカード形式で並べる

Tab 2：Business Metrics（ビジネス指標）
– KPI 3指標を大きな数値カード（Number Card）で表示
– 目標進捗率をプログレスバーで可視化
– 前日比の増減を矢印アイコンと色（増加: 緑 / 減少: 赤）で示す

Tab 3：Market & Tech Pulse（市場・技術動向）
– GitHub トレンドと自社リポジトリの状況をリスト表示
– X のトレンドをカード形式で3〜5件表示
– 「今日のマネージャーへの示唆（AI Analysis）」として、注目すべきリスクまたはチャンスを箇条書きで3点まとめる

上記の仕様に基づいて、今すぐ各コネクタを呼び出してデータを取得し、HTML / JavaScript でこの Artifact を生成してください。

4-3. Refresh 1回の日常運用

処理フロー全体の仕組みは Section 1 で押さえた通りです。ここでは、完成した Artifact を翌朝以降どう使うかだけ、もう一度確認しておきます。

1. Claude Desktop を開き、左サイドバーの 「Live artifacts」 タブをクリック
2. 「エグゼクティブ・コマンドセンター」を選択
3. 右上の 「Refresh」 ボタンを押す

これだけです。プロンプトを書き直す必要は一切なし。トークン消費もほぼゼロ。さらに、チャットのサイドバーを折りたたんで Artifact をフルスクリーンに広げると、目の前に自分専用のミッションコントロール・ハブが鎮座する ── そんな感覚になります。

5. 職種別ダッシュボード 応用パターン

Section 4 のエグゼクティブ・コマンドセンターを出発点にすれば、ほぼどんな職種にも同じ型を当てはめられます。ここでは応用イメージを5つ、要点だけ並べておきます。実際にプロンプトに落とすときは、4-1 の3原則と 4-2 の完成例テンプレートをベースに、データソースとタブ構成だけ職種に合わせて入れ替えていく ── そんな組み立て方が一番ラクです。

応用例	対象職種	必要なコネクタ	主な活用イメージ
① サポート対応モニター (Support Pulse)	SRE / CS	Gmail	サポートメールを重要度3段階（Urgent / High / Normal）で自動分類し、SLA 超過チケットを上部に固定表示。
② 競合動向ウォッチ (Competitor Watch)	PM	Web Search	競合サイトと公開 OSS の動向を週次でまとめ、AI が次週のアクション候補を箇条書きで提案。
③ 売上・財務ダッシュボード (Financial / Sales Pulse)	経営 / 財務	Google Drive	Drive 上の売上スプレッドシート・請求書管理シートを参照し、日次売上・月次目標進捗・支払期限超過の請求書を1画面で俯瞰。月次目標達成のための今週のアクションを AI が提案。
④ コンテンツ成長トラッカー (SEO / YouTube Tracker)	マーケティング	Web Search / Drive (CSV)	検索キーワード上位とコンテンツ別パフォーマンスを比較し、AI が来週優先すべき制作方針を提案。
⑤ ユーザー要望分析ボード (Community Feedback Analyzer)	プロダクト / UX	Google Drive	ユーザー要望を頻度ベースで自動クラスタリングし、Top5 機能要望と緊急度の高い不具合を抽出。

どのパターンも、エグゼクティブ・コマンドセンターのプロンプトのうち「データソース」と「Tab 構成」のブロックだけ差し替えれば、ほぼそのまま流用できます。

6. 実践 Tips

① Skills ファイルで自社ブランドを自動適用する

Step 4 で登録した brand-guideline.md が効いてくるのはこういう瞬間です。つまり、新しい Artifact を作るたびに「ダークモードで、フォントは Noto Sans JP で…」と書き直す手間がそっくり消える。たとえば HEX カラーコード、ロゴ URL、フォント、レイアウトの好み ── このあたりを一度 Skills にまとめておくだけで、出来上がる UI が自然とブランドに揃ってきます。地味ですが、積み重ねで時間が浮く Tip のひとつです。

② ネイティブ非対応のアプリは Custom MCP で突破する

たとえば Google Search Console、社内データベース ── ネイティブコネクタにない独自 API と繋ぎたいときは、思い切って Claude 本人に頼んでしまうのが早道です。「Google Search Console 用の MCP サーバーのコードを書いて」と投げると、構築手順をステップバイステップで返してきます。つまり Claude で MCP サーバーを作り、Claude から使う ── 自己完結したループも、選択肢として十分現実的になってきました。
※ ただし、生成された MCP サーバーは必ずローカルで動作確認のうえ、本番データに接続する前にセキュリティ・権限スコープを実装者の責任でレビューしてください。

③ 接続バグは「Disconnect → Reconnect」で即解決

コネクタ側で新しいサービスを足したのに、Claude のツールリストにそれが反映されない ── という同期ラグ、たまに出ます。そんなときは Customize > Connectors を開いて、対象のコネクタを一度 「Disconnect（切断）」 してから 「Reconnect（再接続）」 してみてください。新しい権限とツールリストが一気に同期されて、何事もなかったように動き出します。

④ プロンプトに「AI Analysis セクション」を必ず追加する

原則③の繰り返しになりますが、ここはもう一度書いておきたい大事なポイントです。Live Artifacts の本当の強みは「推論」にあります。データを表とグラフに並べるだけなら、既存の BI ツールと差がつきません。プロンプトの末尾に 「上記データを分析し、今週のリスクまたはチャンスを3点、具体的なアクション付きでまとめてください」 ── この AI Analysis セクションを必ず差し込んでおきましょう。データ取得と AI コンサル、1画面で同時に走らせられるのが Live Artifacts の旨みです。

⑤ UIのスタイルを具体的なデザイン用語で指定する

初期生成の UI が「悪くはないけど、ちょっと垢抜けない」と感じたら、デザイン用語で追加指示を入れてみるのがおすすめです。たとえば「ソフト・ブルータリズムスタイルにして。白・黒・ネオンブルーをアクセントに使って」のように。
※ ソフト・ブルータリズム（Soft Brutalism）：太いタイポグラフィと無装飾なブロック構成を残しつつ、余白や角の丸みで威圧感を抑えた近年の Web デザイン傾向。Linear / Vercel のサイトが代表例。
参照スタイル名 + アクセントカラーのセットで投げると、ぐっとプロのデザイナーが作ったような佇まいに近づきます。

⑥ API連携が難しいデータは「CSV アップロード」で代用する

たとえば Stripe の売上データ、アフィリエイトツールの実績 ── API 連携が複雑だったり、とにかく今すぐダッシュボードが欲しいときは、CSV に逃げるのが現実解です。各ツールからエクスポートした CSV をまとめてチャットに放り込み、「これらの CSV をデータソースとしてダッシュボードを構築して」と頼むだけで、それなりに高度な分析画面ができあがります。もちろん API 連携の完成度にこだわらず、まず動くものを優先する ── プロトタイピングの段階や、明日までに作りたいケースでは特に効くアプローチです。

⑦ Artifact の修正は「差分指示」で短く保つ

既存の Artifact を直したいときは、わざわざ全体を作り直す必要はありません。そのまま該当の Artifact を開いて 「Tab 2 のプログレスバーの色を青に変えて」 のように、変えたいところだけを短いプロンプトで指示するのがコツです。コンテキストもトークンも節約できますし、修正のたびにバージョン履歴が残るので、失敗しても直前の状態にすぐ戻せます。

7. コストとトークン管理の実務

チームや企業で生成 AI を運用していると、コスト管理は遅かれ早かれ向き合うことになる話題です。Live Artifacts の料金体系と、トークン管理の実務で押さえておきたいポイントをここでまとめておきます。

Live Artifacts の利用条件

Live Artifacts を使うには有料プラン（Pro / Max / Team / Enterprise）のいずれかが必須です。下限は月額20ドル〜の Pro プラン（為替次第で円換算は揺れます）。チームで導入するときは、対象メンバー分のアカウントアップグレード費用を、最初から予算に組み込んでおきましょう。最新の料金は Anthropic 公式の料金ページ で確認できます。

トークンを大幅に節約する3つのアプローチ

① プロンプトの再入力をなくして、無駄なトークン消費を断つ

従来の AI 利用だと、毎日ダッシュボードを見るために長いプロンプトを書いて、AI にゼロから UI を作らせる必要がありました。つまり、けっこうな量のトークンを毎日燃やしていたわけです。一方、Live Artifacts は一度作ればサイドバーに常駐し、翌日からは「Refresh」を押すだけ。UI を毎回レンダリングするためのトークン消費が、ほぼゼロまで落ちます。

② Skills ファイルでコンテキストを固定化する

また、ブランドガイドラインやデザインの好みを Skills ファイルにまとめておくと、毎回のプロンプトをぐっと短く保てて、コンテキストウィンドウの消費も抑えられます。ちなみに Cowork 環境では、長いチャット履歴があると自動圧縮が走ることがある ── 動かない情報はできる限り Skills 側に逃がしておくのが安全策です。

③ 共有 Artifact のコスト負担モデルを把握する

作ったダッシュボードを社内・チームに共有するとき、課金面で押さえておきたい仕様がひとつあります。Anthropic の発表によれば、共有された Artifact をエンドユーザーが操作・更新する際の計算コストは、原則としてそのユーザー側のアカウントに紐づきます。つまり社内に広く配っても、他のメンバーのセッションで発生するコストを作成者が背負う構造ではない ── ということです。とはいえ課金まわりの仕様は今後変わる可能性もあるので、本番展開の前には Anthropic 公式ドキュメント で最新情報を確認しておきましょう。

運用方法	毎日のトークン消費（目安）	月20営業日の換算
チャットで毎日ダッシュボードを生成	約5,000〜15,000トークン/日	約10〜30万トークン/月
Live Artifacts（初回以降）	約100〜500トークン/日（データ取得のみ）	約2,000〜10,000トークン/月

※ トークン消費量はプロンプトの長さ・取得データ量・コネクタの応答速度によって変動します。上記は参考値です。

8. 制限事項とセキュリティ上の注意

Live Artifacts を社内に展開する前に、EM や管理者は以下のポイントを必ず押さえておきましょう。

• 端末間の自動同期は未対応（2026年5月時点）：Live Artifacts は作成した Claude Desktop の端末から呼び出して利用する形が基本で、他の MacBook / Windows 端末で同じ Artifact をそのまま開く機能は提供されていません。端末移行時は再作成が必要になる場合があります。最新の同期状況は Anthropic 公式リリースノートでご確認ください。
• 外部共有機能は限定的（2026年5月時点）：ダッシュボードの URL を上司・同僚と共有し、相手側のセッションで同じデータを表示する一般公開的な共有機能は、本記事執筆時点では完全には整っていません。チーム内での共有が必要な場合は、運用開始前に Anthropic の最新アナウンスを確認してください。
• 自動アクセスの範囲を把握する：「Always allow」を設定したコネクタは Refresh のたびに確認なしで API を呼び出します。どのデータが毎回送信されているかを把握した上で設定してください。Write / Delete 権限の付与は厳禁です。
• 企業機密データの取り扱い：Google Drive 経由で取得するスプレッドシートの KPI データや社内資料は、Claude を介する過程で Anthropic のサーバーに送信されます。Enterprise プランでは「Zero Data Retention（ZDR）」相当のオプション契約が可能な場合がありますが、適用範囲（モデル / 機能）は契約条件によって異なります。機密性の高いデータを扱う場合は Data Privacy Policy と契約条件を必ず確認してください。
• 外部 MCP サーバー導入時のトークン管理：本記事の範囲では使用しませんが、将来的に claude_desktop_config.json にアクセストークン（GitHub PAT・各種 API キー等）を記述する MCP サーバーを追加する場合は、平文保存となるため ファイルパーミッションを 600 に絞る・環境変数経由で読み込む・チーム環境では 1Password CLI / AWS Secrets Manager 等で起動時にトークンを取得するなどの対策を必ず行ってください。

採用情報

次世代システム研究室では、最新のテクノロジーを調査・検証しながらインターネットのさまざまなアプリケーション開発を行うアーキテクトを募集しています。募集職種一覧からご応募をお待ちしています。