1. 数字を説明しなきゃいけないのに、スライドを作る時間がない…

「今週の数字、どうなってる？」
上司から突然Slackが飛んでくる。
手元にはExcelの数字はあるけど、グラフにまとめる時間はない。
かといって「先週比で103%です」と数字だけ返すのも味気ない。

あるいは、定例MTGの直前。
「先週の広告効果、グラフで見せてくれる？」
PowerPointを開いて、数字を入力して、デザインを整えて…
そんな時間、あと10分しかないんですけど。

もしくは、顧客訪問の前日。
「最新のトラフィック推移、明日の打ち合わせで見せたいんだけど」
正式な提案書を作るほどでもないけれど、口頭だけで説明するには弱い。
何か「見せられるもの」が欲しい。

営業の現場では、こんな場面が日常茶飯事です。

• スライドを作るのは時間がかかりすぎる（レイアウト調整、デザイン、印刷準備…）
• でも口頭だけでは説得力に欠ける（数字を並べても、相手の頭に残らない）
• 印刷や配布が必要なほどフォーマルでもない（週次報告、軽い打ち合わせ、社内共有）

この「重すぎず、軽すぎず」のちょうどいい資料が、実は一番作りにくいんです。

そこで登場するのが、Claude アーティファクト（Artifacts）です。

2. Claude アーティファクト（Artifacts）なら「その場でダッシュボード」が作れる

Claude アーティファクトは、Anthropic社が提供するClaude AIの機能の1つです。
簡単に言えば、自然言語で指示を出すだけで、インタラクティブなWebページやダッシュボードを生成してくれる機能。

たとえば「先週の売上データをダッシュボードにして」とプロンプトを入力すれば、数秒後には見栄えの良いダッシュボードが完成します。

どんなものが作れるのか？

Claude アーティファクトで作れるのは、以下のような形式です。

• HTMLウェブページ：CSSとJavaScriptを含む、インタラクティブなページ
• Reactコンポーネント：動的なグラフ、スライダー、ボタンなど
• SVG図：ロゴ、アイコン、図表
• Markdownドキュメント：構造化されたテキスト

営業資料として特に便利なのが、Reactベースのインタラクティブダッシュボードです。

「React」って何？（営業担当者向けの簡単な説明）

ここで「React」という言葉が出てきましたが、営業担当者には馴染みのない言葉かもしれません。
簡単に言えば、ボタンを押したりスライダーを動かしたりすると、画面が即座に反応して変わるウェブページを作る技術です。

たとえば、

• スライダーを動かすと、グラフの数字がリアルタイムで変わる
• ボタンを押すと、表示される情報が切り替わる

こういった「動き」を実現するのがReactです。

営業担当者は、Reactの仕組みを理解する必要はありません。
「動くダッシュボードが作れる技術」くらいの理解で十分です。

Claudeに自然言語で指示を出せば、裏側でReactを使って実装してくれます。

営業が使える自然言語プロンプト

「プログラミングなんてできない」という営業担当者も安心してください。
Claude アーティファクトは、こんな指示で動きます。

先週の売上データ（月曜80万、火曜95万、水曜110万、木曜88万、金曜120万）を棒グラフで表示してください。

目標は100万円で、達成日は緑、未達成は赤で色分けしてください。

HTMLファイルで出力してください。

これだけで、色分けされた棒グラフが完成します。

コードを書く必要はありません。
営業が普段使っている言葉で、そのまま指示を出せばいいんです。

スライド不要、タブレット/PCでそのまま表示

作成されたダッシュボードは、HTML形式です。

つまり

• タブレットやノートPCのブラウザで、そのまま表示できる
• 印刷不要、画面を見せるだけ
• リンクを共有すれば、相手のブラウザでも見られる

定例MTGでタブレットを開いて「今週の数字、こんな感じです」と見せる。
顧客訪問で「調べてきた競合情報、こちらです」とノートPCの画面を共有する。

そんな少しおしゃれな営業スタイルに最適な使い方が、数分で実現します。

3. 【実例1】週次報告ダッシュボード

では、実際にどんなものが作れるのか、具体例を見ていきましょう。

よくある週次報告の悩み

営業チームの定例MTG。

「今週の売上、目標に対してどう？」
「先週と比べてどう？」
「誰が一番売れてる？」

こういう質問に、毎週Excelの数字を読み上げるのは非効率です。

かといって、毎週PowerPointでグラフを作るのも面倒。

Claude アーティファクトで作る週次ダッシュボード

以下のようなプロンプトを入力します。

📌 プロンプト例

今週の売上データをダッシュボードにしてください。

**データ**
- 月曜: 80万円
- 火曜: 95万円
- 水曜: 110万円
- 木曜: 88万円
- 金曜: 120万円
- 目標: 1週間で500万円

**表示内容**
- 日別の売上を棒グラフで
- 目標達成率を大きく表示
- 累計売上の推移を折れ線グラフで
- 色は青系でおしゃれに

ブラウザで表示できるHTMLファイルとして出力してください。

すると、Claudeが以下のような要素を含むダッシュボードを生成します。

• 大きな数字で目標達成率（「98.6%」など、一目でわかる）
• 日別売上の棒グラフ（色分けされた見やすいグラフ）
• 累計売上の折れ線グラフ（週の途中でどこまで到達しているかが分かる）
• 余白とバランスの取れたデザイン（営業資料として見栄えする）

数字を変えたいとき

「木曜日の数字、88万じゃなくて92万に修正して」とClaudeに伝えるだけで、グラフが即座に更新されます。
「グラフを選択して、データを編集して、再描画して…」という手間はゼロ。

実際の使用場面

• 毎週月曜の定例MTG：週末にサッと作って、月曜朝に共有
• 上司への報告：Slackで「今週の進捗です」とリンクを送る
• チーム全体での共有：Notionやスプレッドシートに埋め込む

4. 【実例2】顧客向け効果測定レポート

次は、顧客向けの資料です。

「調べてきました」で見せる資料

広告運用の打ち合わせで、顧客から「先月の広告効果、どうだった？」と聞かれたとき。
正式なレポートを作るほどでもないけど、数字だけ口頭で説明するのも味気ない。

こんなとき、Claude アーティファクトが活躍します。

広告効果ダッシュボードのプロンプト例

📌 プロンプト例

広告効果の簡易レポートを作ってください。

**データ**
- クリック数: 12,500
- 表示回数: 450,000
- クリック率: 2.78%
- コンバージョン数: 320
- コンバージョン率: 2.56%
- 広告費: 85万円
- 売上: 640万円
- ROAS: 7.5倍

**表示形式**
- 主要指標を大きなカードで表示
- クリック率とコンバージョン率は円グラフで
- ROASは目立つように強調
- デザインは落ち着いたグレー系で

ブラウザで表示できるHTMLファイルとして出力してください。

これだけで、以下の要素を含むダッシュボードが完成します。

• 主要KPIのカード表示（クリック数、コンバージョン数、ROASなど）
• 割合を示す円グラフ（クリック率、コンバージョン率）
• 広告費と売上の比較（視覚的に「儲かっているか」が分かる）

顧客の反応

「おお、分かりやすいですね」
数字の羅列ではなく、ビジュアルで見せることで、顧客の理解度が格段に上がります。
しかも、正式なレポートを作る時間がないときでも、5分あれば作れるのが強み。
「次回、ちゃんとしたレポート作りますね」という前提で、とりあえず今日の打ち合わせで見せる資料としては十分です。

5. 【実例3〜5】インタラクティブ事例集（Claudeの本領発揮）

ここからが、Claude アーティファクトの真骨頂です。
単なるグラフ表示だけでなく、インタラクティブな要素を持ったダッシュボードが作れます。

【実例3】ROI計算機（スライダーで数値変更）

営業提案で「導入したらどれくらい効果が出るか？」を顧客に示したいとき。

📌 プロンプト例

ROI計算ツールを作ってください。

**入力項目**
- 月間訪問数（スライダー、1,000〜100,000）
- コンバージョン率（スライダー、0.5%〜5%）
- 顧客単価（スライダー、5,000円〜50,000円）

**表示項目**
- 月間売上
- 年間売上
- ツール導入コスト（月額5万円）
- ROI（何ヶ月で回収できるか）

リアルタイムで計算結果が更新されるようにしてください。

ブラウザで表示できるHTMLファイルとして出力してください。

すると、以下のような計算ツールが完成します。

• スライダーを動かすと、リアルタイムで計算結果が更新される
• 「月間訪問数を増やすと、売上がどう変わるか」が一目で分かる
• 顧客が自分で数字をいじって、納得感を得られる

これは、静的なスライドでは絶対に実現できない体験です。

【実例4】商談プロセス可視化（ステップ展開）

「商談のどの段階で、何をすべきか？」を可視化したいとき。

📌 プロンプト例

商談プロセスのステップ図を作ってください。

**ステップ**
1. 初回接触（課題ヒアリング）
2. デモ実施（ツール紹介）
3. 提案書提出（見積もり）
4. クロージング（契約）

各ステップをクリックすると、詳細が表示されるようにしてください。

ブラウザで表示できるHTMLファイルとして出力してください。

すると、

• ステップごとのボタンが表示される
• クリックすると、そのステップの詳細説明が展開される
• 「今どのステップにいるか」が視覚的に分かる

新人営業の教育資料や、社内での標準プロセス共有に使えます。

【実例5】競合比較ツール（チェックボックス切替）

複数の競合製品を比較するとき。

📌 プロンプト例

競合比較ツールを作ってください。

**製品**
- 自社製品A
- 競合B社
- 競合C社

**比較項目**
- 価格
- 機能数
- サポート品質
- 導入実績

チェックボックスで製品を選択すると、選んだ製品だけが比較表に表示されるようにしてください。

ブラウザで表示できるHTMLファイルとして出力してください。

すると、

• 顧客が興味のある製品だけを選んで比較できる
• 「全部見せられても困る」という課題を解決
• 顧客自身が操作することで、納得感が高まる

6. 実際に作ってみた：プロンプトと注意点

ここまで見てきて「本当にそんな簡単にできるの？」と思った方もいるでしょう。
実際にやってみた経験から、コピペできるプロンプト例とよくある失敗をお伝えします。

テンプレートから始める（初心者におすすめ）

ゼロから作るのが不安な方は、Claudeのアーティファクト公開ギャラリーにあるテンプレートから始めるのがおすすめです。

📌 おすすめテンプレート

• プロジェクトダッシュボードジェネレーター

https://claude.ai/artifacts/inspiration/7d9ae635-3bdf-429d-a24d-708828434b0a

• CSVデータ可視化ツール

https://claude.ai/artifacts/inspiration/18ace4c3-9eae-4af5-a38e-73b37a4d2131

テンプレートの使い方（Remix機能）

1. 上記のリンクをクリックして、テンプレートを表示
2. 「カスタマイズ」ボタンをクリック
3. 自分のチャット内にコピーされる（この時点でプライベート）
4. 自社のデータに差し替えて改修

🔒 プライバシーは保護されます（重要）

「カスタマイズ」したテンプレートは、あなたのチャット内にコピーされ、自動的にプライベートになります。

つまり、

• 社内の売上データを入力しても、他人には見えない
• 顧客情報を含めても、公開されることはない
• 明示的に「公開」ボタンを押さない限り、完全にプライベート

営業担当者が気にする「情報漏洩リスク」はありません。
安心してテンプレートを活用してください。

必ず「HTMLファイルで出力」を指定する

Claudeにダッシュボードを作ってもらう際は、必ず末尾に「HTMLファイルとして出力してください」と追記してください。
この一文がないと、コードがそのまま表示されてしまい、ブラウザプレビューが起動しません。

✅ 正しい指示

売上ダッシュボードを作ってください。

（データや表示内容の指定）

HTMLファイルとして出力してください。

❌ 不十分な指示

売上ダッシュボードを作ってください。

（データや表示内容の指定）

← HTMLファイル指定なし

コピペできるプロンプト例

📌 【基本形】シンプルな売上ダッシュボード

売上ダッシュボードを作ってください。

**データ**
- 4月: 300万円
- 5月: 350万円
- 6月: 420万円
- 目標: 月400万円

**表示内容**
- 月別売上を棒グラフで
- 目標ラインを赤い点線で
- 目標達成月は緑、未達成は青で色分け
- 全体的に見やすいデザインで

ブラウザで表示できるHTMLファイルとして出力してください。

📌 【応用形】インタラクティブな計算ツール

見積もり計算ツールを作ってください。

**入力項目**
- 利用人数（スライダー、1〜100人）
- 契約期間（ドロップダウン、1ヶ月/6ヶ月/12ヶ月）

**計算ロジック**
- 基本料金: 1人あたり月5,000円
- 6ヶ月契約: 10%割引
- 12ヶ月契約: 20%割引

**表示内容**
- 月額費用
- 契約期間の総額
- 割引額（あれば）

リアルタイムで計算結果が更新されるようにしてください。

ブラウザで表示できるHTMLファイルとして出力してください。

デザインのコツ

✅ 色指定は具体的に

「青系で」だと、Claudeが選ぶ青が意図と違う場合があります。

メインカラーは #2563eb（青）、アクセントは #10b981（緑）で

✅ 余白を意識する

カード間の余白を広めに取って、窮屈に見えないようにして

✅ フォントサイズを指定

タイトルは大きく（32px）、数値は太字で（24px）

よくある失敗と改善策

❌ 失敗例1：データが多すぎて見づらい

過去12ヶ月の日別データを全部グラフにして

→ グラフが細かすぎて、何も読み取れない

✅ 改善策

週次データにまとめて、過去3ヶ月分だけ表示して

❌ 失敗例2：いきなり複雑なインタラクティブ機能を作ろうとした

スライダーを動かすと計算結果が更新されるツールを作って

→ スライダーは表示されたが、動かしても数字が変わらない

⚠️ なぜ失敗したか

非エンジニアが最初から「スライダーで数値を変えると自動計算される」といった複雑な機能を作ろうとすると、失敗しやすいです。
Claudeは裏側でReactという技術を使ってインタラクティブな機能を実装しますが、プロンプトが曖昧だと、正しく動かないことがあります。

✅ 改善策

まずは静的なダッシュボードから始めてみましょう。

営業担当者には、以下の順番をおすすめします。

1. まずは静的なダッシュボードを作る（実例1, 2のような、数字とグラフを表示するだけ）
2. 慣れてきたら、シンプルなインタラクティブ要素を追加（ボタンで表示切替など）
3. 最終的に、計算ツールのような複雑なものに挑戦

最初から完璧を目指さず、まずは「数字を見やすく表示する」だけでも十分価値があります。
インタラクティブな機能は、必要になってから追加すればOKです。

❌ 失敗例3：グラフの数値と位置がずれる

売上データをグラフにして

→ 目標ラインと棒の高さが合っていない

✅ 改善策

最初から完璧を求めず、段階的に修正する前提で進める

目標ラインが棒と被っています。修正してください。

と具体的に指示。

❌ 失敗例4：色の視認性が低い

自社製品を目立たせて

→ 水色のハイライトで全然目立たない

✅ 改善策

視認性が低いです。もっと目立つ色に変更してください

と再指示。
色の具体的な指定（例：「黄色系」「オレンジ系」）も有効。

AIとの壁打ちと同じで、1回の指示で完璧なものが出来ることはまずありません。
修正を重ねることを前提に、具体的に「ここがおかしい」と指摘をすることで、短時間で仕上げることができます。

7. できないこと・注意点

ここまで読んで「Claudeすごい！これで全部解決じゃん！」と思った方。
ちょっと待ってください。
Claude アーティファクトには、できないこともあります。

PowerPoint出力は不可（その場表示専用）

Claude アーティファクトで作ったダッシュボードは、HTML形式です。

つまり、

• PowerPointファイル（.pptx）としてダウンロードできない
• Google スライドにエクスポートできない
• 印刷前提の資料には向かない

「正式な提案書として印刷して配布する」という用途には使えません。
あくまで、タブレットやPCの画面で見せることが前提です。

印刷前提の資料には不向き

HTML形式なので、印刷すると

• レイアウトが崩れる
• 色が正しく出ない
• インタラクティブ要素が機能しない（当たり前ですが）

「資料を配布して、後で見返してもらう」という使い方には向きません。

フォーマルな商談には従来のスライドを

「役員向けの提案」「大型案件のプレゼン」「印刷して配布する資料」
こういう場面では、やはり従来通りPowerPointやGoogle スライドで、きちんとした資料を作るべきです。

Claude アーティファクトは、

• 非フォーマルな打ち合わせ
• 社内の定例MTG
• 「ちょっと数字見せて」レベルの報告

こうした場面で威力を発揮します。

外部データとの連携は制限あり

Claude アーティファクトは、外部APIへの直接アクセスができません。

つまり、

• Google アナリティクスのデータをリアルタイムで取得
• Salesforceの商談データを自動で反映

といった連携は、基本的にできません。

データは、手動で入力するか、コピー&ペーストする必要があります。

ただし、有料プラン（Pro/Max/Team/Enterprise）では、MCP（Model Context Protocol）統合により、Google カレンダー、Slackなどの外部サービスに接続できる機能が追加されています。

とはいえ、営業現場の「今すぐ見せたい」ニーズには、手動入力で十分対応できます。

料金プランについて

Claude アーティファクトは無料プランでも利用可能ですが、利用制限があります。

• 無料プラン：基本機能は使えるが、メッセージ数に制限あり
• 有料プラン（Pro/Max）：より多くのメッセージ送信が可能

詳しい制限内容は公式サポートページをご確認ください。

💡 実践的なアドバイス：
複雑なダッシュボードを何度も修正する作業は、メッセージ数を消費します。
無料プランで試す場合は、シンプルなものから始めることをおすすめします。

別のアプローチ：Gemini Canvasも選択肢に

Claude アーティファクトが「なんか合わないな」と感じたら、Gemini Canvasも試してみてください。
Geminiは特にGoogle ドライブやスプレッドシートとの連携が得意なので、Google Workspaceをメインで使っている方には相性がいいかもしれません。
データの可視化という目的は同じでも、アプローチがちょっと違うので、両方試してみて、自分に合う方を選ぶのがおすすめです。

8. まとめ：「数字を語るビジュアル」はClaudeで作る

営業の現場では、

• スライド作成は時間がかかりすぎる
• でも口頭だけでは説得力に欠ける

この板挟みが、日常茶飯事です。

Claude アーティファクトは、その間を埋めてくれるツールです。

スライド作成の重さと口頭説明の弱さの間を埋める

• 数字を入力するだけで、おしゃれなダッシュボードが完成
• タブレット/PCでそのまま表示、印刷不要
• インタラクティブな要素で、顧客の納得感を高める

正式な提案書を作るほどでもないけど、何か「見せられるもの」が欲しい。
そんなとき、Claude アーティファクトが活躍します。

非フォーマルな商談での活用

• 週次報告：毎週の定例MTGで数字を可視化
• 顧客への情報提供：「調べてきました」で見せる簡易レポート
• 社内共有：上司やチームメンバーへの進捗報告
• ROI計算：顧客が自分で数字をいじって納得できるツール

「これ、便利かも」と思ったら、まずは小さく試してみてください。

次のアクション

ステップ1：Claudeにアクセス

Claude（https://claude.ai/）にアクセスして、無料アカウントを作成してください。

ステップ2：簡単なダッシュボードを作ってみる

本記事で紹介したプロンプト例をコピーして、実際に試してみてください。

ステップ3：自分の業務に応用

週次報告、顧客向け資料、社内共有など、実際の業務で使ってみてください。

結局のところ、営業の現場では、完璧な資料よりも、今すぐ見せられる資料の方が価値があることも多いです。
Claude アーティファクトは、その「今すぐ」を実現してくれます。
「スライド作る時間ないけど、数字見せなきゃ…」
そんなとき、Claude アーティファクトを思い出してください。