Claude Artifactsの使い方：ステップバイステップ完全チュートリアル
Kevin Stratvertの12分間のClaude Artifactsチュートリアルを完全解説：CSVからインタラクティブなダッシュボードを作り、チャットのプロンプトで仕上げ、アノテーションツールで細部を修正。さらに組み込みAI、データ保持、コネクタ、Live Artifactsまで。全14ステップ、各ステップに実際のスクリーンショット付き。
まずは要点から
- Artifactsは、ごく普通の言葉での説明からClaudeが作ってくれるインタラクティブなミニアプリ — ダッシュボード、ツール、ゲームなど — です。無料のClaudeアカウントで始められます。
- CSVをアップロードすれば、1分ほどでグラフにカーソルを合わせると数値が表示される本格的なダッシュボードが完成。以降の変更はチャットのプロンプトだけ、コードは一切不要です。
- アノテーションツールなら特定の要素だけをピンポイントで修正可能。共有は「リンクを知っている全員」向けURLをワンクリックで発行でき、ピン留めすればよく使うArtifactがライブラリの先頭に表示され続けます。
- ArtifactはClaude自身を呼び出したり、セッションをまたいでデータを記憶したり、MCPコネクタ経由でSlackやTrelloとつながったりできます — デスクトップアプリのLive Artifactsなら、常に最新データが自動で反映されます。
How to Use Claude Artifacts (Full Tutorial)
チャンネル: Kevin Stratvert · 12:42
スクリーンショットについて
本ガイドのスクリーンショットはすべて上の動画から取得したもので、著作権はKevin Stratvert氏に帰属します。各ステップには動画内の該当シーンへのリンクを付けています。ステップの解説文、キャプション、FAQは当サイトのオリジナル執筆です。
CSVからダッシュボードまで（ステップ1〜10）
- 1
Artifactsライブラリを開く
claude.aiにログイン（無料アカウントでOK）し、左サイドバーのArtifactsをクリック。AllとYoursタブには自分が作ったArtifactが一覧され、Shared with youには共有されたものが集まります。検索ボックスでライブラリ全体を絞り込めます。
Artifactsのホーム：All・Yours・Shared with youの3タブ、右上にNew artifact。0:50 から視聴 - 2
New artifactをクリック
右上のNew artifactボタンを押すと、Claudeは新しいタスクを開始。いきなり構築に入らず、まず質問から入ります。作る物を「web page」と呼びますが、これはただの土台の名前。最終的にダッシュボードでもツールでも、それをベースに作られます。
ワンクリックでガイド付きタスクを開始 — 質問が先、コードは後。1:02 から視聴 - 3
最初の質問に答える
このダッシュボードでは、Dashboard、スタイルはBold & colorful、注目テーマはSales & revenue trendsを選びました。質問の内容は人によって少し違うかもしれませんが、問題ありません。当てはまるものに答えてもいいし、すべて飛ばして1つのメッセージで要件をまとめて伝えても構いません。
タイプ・スタイル・重点：この回答がClaudeの初回ビルドを方向づけます。1:40 から視聴 - 4
CSVを添付する
Claudeがデータの出所を尋ねてきたら、自分でアップロードすると答えます。メッセージボックスの＋アイコンをクリックしてAdd files or photosを選び（ショートカットはCtrl U / Cmd U）、CSVを選択して送信。Claudeは列構成を読み取り、可視化の方針を決めてから作り始めます。
＋アイコン → Add files or photos → CSVを選択。ClaudeはUIを書く前にまずデータを分析します。2:19 から視聴 - 5
最初のバージョンを公開する
1〜2分後、ClaudeがArtifactを公開。ダッシュボードが右側に現れます — 上段に主要指標、その下にグラフ — チャットには作った内容の要約が表示されます：CSVそのままの、5フレーバー・4地域・計1,207件の注文。拡大アイコンを押すと見やすくなります。
「The Bake Sheet」：1つのCSVから生成されたKPIカードとグラフ。2:42 から視聴 - 6
グラフをホバーして正確な数値を見る
これは画像ではなく、本当に動くアプリです。折れ線にカーソルを合わせると、その月のフレーバーごとの正確な売上をツールチップが表示。棒グラフや表も同じように反応します。グラフのコードは一切手書きではなく、ClaudeがCSVからすべて生成しました。
6月のツールチップがフレーバー別の売上を分解 — 公開初版からインタラクティブ。2:58 から視聴 - 7
コードではなくチャットで改良する
気に入らないところはそのまま言えばOK。「Add a dark mode toggle to the dashboard」の一言で、Claudeはヘッダーに太陽／月の切り替えを追加した新版を再公開し、テーマ全体を切り替え、選択を記憶します。大きな変更も同じスレッドで続けて依頼できます。
プロンプト1つで：ヘッダーに月アイコンのトグル、サイト全体がダークテーマに。4:02 から視聴 - 8
アノテーションツールで細部を修正する
1か所だけ変えたいときは、Artifact右上のアノテーションツールを開き、該当箇所 — ここでは「Kevin's Cookie Company」の見出し — をハイライト。コメント欄が出るので、直したい内容を書いてSend to Claudeで即適用、またはAdd commentでページには触れずメモだけ残せます。
ハイライトして修正内容を書き、即適用か、レビューコメントとして残すかを選択。4:50 から視聴 - 9
リンクを知る人全員と共有する
Shareをクリックし、General accessをAnyone with the linkに設定、公開するバージョンを選びます — Claudeは全リビジョンを保持しているので、あえて古いスナップショットを共有することも可能。Copy linkで取得したURLは、どのブラウザでも完全にインタラクティブなダッシュボードとして動きます。
General access → Anyone with the link。バージョンセレクターで訪問者が見る版を決定。5:10 から視聴 - 10
ピン留めし、元のチャットで編集し続ける
ライブラリに戻り、カードにカーソルを合わせて3点メニューからPinを選択。ピン留めしたArtifactはPinnedセクションに集まり、ワンクリックで開けます。後日修正するときは、Chat and tasksから元のチャットを開き直してください — そのスレッドがずっとArtifactの編集室です。
3点メニューでピン留め。元のチャットは開いたまま、いつでも編集に戻れます。5:42 から視聴
レベルアップ：組み込みAI、データ保持、コネクタ、Live Artifacts（ステップ11〜14）
- 11
Claude自身を呼び出すツールを作る
ArtifactはClaudeを直接呼び出せます。新しいArtifactを作り、Something elseを選び、ツールを説明します — この例では：従業員がクッキーの材料を入力すると、Claudeが5つのネーミング案を生成。APIキーもバックエンドも不要で、訪問者が初めて実行するときにArtifactがClaudeの利用許可を求めるだけです。
The Batch Namer：材料を入力し、Generate 5 namesを押せばAIの命名案がずらり。7:02 から視聴 - 12
データを覚えてもらう
お気に入り機能を頼むと、Claudeはまず設計の質問を1つ投げます：保存した項目はこのブラウザ内のプライベートにするか、Artifactを開く全員で共有するか。今回は共有を選択。以降、スター付きの案は永続化されます — 今日タブを閉じても、明日開けばまだあります。トラッカー、リスト、軽量プロジェクトツールの基礎です。
保存はプライベートか共有か — 以降、各提案にセッションをまたいで消えないスターが付きます。8:20 から視聴 - 13
Slackなど外部サービスにつなぐ
MCP（Model Context Protocol）コネクタ経由で、ArtifactはClaudeの外でも動けます。Slack共有ボタンを頼み、Slack接続を承認し、チャンネルを選べば、保存した各アイデアにチームへ直接投稿するボタンが加わります。ネイティブコネクタのないアプリはZapier MCP経由で接続可能 — 数千種類のアクションを追加できます。
Slack接続完了：保存したアイデアを#new-cookie-ideationへワンクリックで投稿。9:40 から視聴 - 14
Live Artifactsで常に最新に保つ
ClaudeデスクトップアプリのLive Artifactsは、静止したスナップショットの代わりに、接続アプリやローカルファイルから現在のデータを取り込みます。この売上ダッシュボードはPOSレポートとGoogle Driveのスプレッドシートから自動集計。ヘッダーのReloadを押せば最新の数値で再描画 — 一度作れば、開くたびに最新のビューが表示されます。
デスクトップアプリのReloadボタンで、接続データを必要なときに再取得。12:04 から視聴