ClaudeのArtifacts機能の使い方｜コード・HTML・グラフをブラウザ上で実行できる実践ガイド

「Claudeがコードを生成してくれたけど、実際に動くか確認するのにいちいちコピペが必要で面倒…」「AIが作ったHTMLをわざわざ別のエディタやブラウザで開くのが手間…」そう感じたことはないでしょうか。

ClaudeにはArtifacts（アーティファクト）という機能があります。コードやHTMLをチャット画面の右側パネルにリアルタイムで表示し、その場でプレビュー・実行できる仕組みです。コピペ不要でWebページのモックやインタラクティブなツールを数分で確認・修正できるようになります。

この記事では、Claude Artifactsのしくみから、HTMLページ・グラフ・業務フロー図の実践的な作り方まで、非エンジニアでもすぐ使えるレベルで解説します。claude.aiのアカウントさえあれば今日から使えます。

ClaudeのArtifacts機能とは？

ArtifactsはAnthropicが2024年6月にclaude.aiへ導入したサイドパネル表示機能です。Claudeとの会話でコードやHTMLが生成されると、チャット画面の右半分に専用パネルが自動で開き、生成結果をプレビューできます。

従来のAIチャットは「コードは生成できても、実行はできない」が当たり前でした。Artifactsはこの壁を取り除き、チャット画面のまま「生成→確認→修正依頼→再確認」のサイクルを高速で回せるようにしました。

Artifactsで作れるものの種類

Artifactsが対応している主な出力タイプは以下のとおりです。

どのプランで使えるの？

Artifacts機能はclaude.ai（執筆時点：2026年7月）の無料プランを含む全プランで利用できます。ただし、無料プランはメッセージ送信数に上限があるため、頻繁に使う場合はClaude Proへの移行が実用的です。各モデルの特性や料金プランの詳細はClaudeのモデル比較2026｜Sonnet・Opus・Haikuの違いと用途別の選び方も参考にしてください。

Artifacts機能の基本的な使い方（ステップバイステップ）

1. claude.aiにアクセスしてチャットを開始する

ブラウザでclaude.aiを開き、アカウントにログインします（アカウント未作成の場合はGoogleアカウントで無料登録できます）。チャット画面が表示されたら準備完了です。Claudeの基本操作からおさらいしたい場合はClaudeの使い方｜初心者向けの始め方から実務活用まで丁寧に解説を先にご覧ください。

2. ArtifactをリクエストするプロンプトをClaude に入力する

特別なコマンドや設定は不要です。HTMLやコードを依頼すれば、ClaudeはArtifactとして自動出力します。以下のプロンプトをそのままコピーして試してみてください。

# 問い合わせフォームの作成例
シンプルな問い合わせフォームをHTMLで作ってください。
入力項目：お名前（必須）、会社名（任意）、メールアドレス（必須）、お問い合わせ内容（必須）
送信ボタンを青（#2563EB）にして、スマホでも見やすいレイアウトにしてください。
CSSも含めてHTMLファイル1つで完結させてください。

送信すると、チャット画面右半分にArtifactパネルが自動的に開き、完成した問い合わせフォームがプレビュー表示されます。

3. Artifactパネルで結果を確認する

パネルには「Preview（プレビュー）」タブと「Code（コード）」タブが表示されます。

・Previewタブ: ブラウザで実際に表示される見た目をリアルタイムで確認できます。フォームならクリック・入力操作も可能です。
・Codeタブ: 生成されたHTMLやコードをそのままコピーできます。

実際の業務に使いたい場合はCodeタブからコードをコピーし、自社のWebページやファイルに貼り付けてください。

4. 追加の修正依頼でブラッシュアップする

プレビューを見て気になる点があれば、チャット欄に続けて修正指示を書くだけです。Artifactパネルがその場で更新されるため、毎回コードをコピペし直す手間はありません。

# 修正依頼の例
ありがとうございます。以下を変更してください。
・送信ボタンのテキストを「お問い合わせを送信する」に変更
・背景色をライトグレー（#f5f5f5）に変更
・フォーム全体を中央揃えにして、最大幅600pxで表示されるようにする

このように会話形式で修正を重ねることで、外注せずに自社要件に合ったWebパーツを素早く仕上げられます。

実務での活用例（Before/After）

【活用例1】ランディングページのモックアップ作成

Before: LP制作を外部のWeb制作会社に依頼すると見積もり・制作に数週間、費用は数十万円。「完成品を見てから修正を出す」ループになり、コミュニケーションコストも膨らみがちでした。

After: Claudeに「新サービスのLPをHTMLで作って。ヘッダー・特徴3点・CTA・フッターの構成で」と依頼すれば数分でラフ版が完成します。社内で確認・合意した上で外注先に渡す「仕様の叩き台」として使えるため、修正回数と発注コストが大幅に下がりました。

【活用例2】月次売上データの可視化

Before: Excelでグラフを整えるのに毎月20～30分かかっていました。軸の設定やデザイン調整が都度必要で、同じ手順を繰り返す定型作業になっていました。

After: 月次データをテキストでClaudeに貼り付け、「棒グラフをSVGで作って」と一言加えるだけでArtifactパネルに即座にグラフが表示されます。以下のプロンプトで試してみてください。

# 売上グラフの作成例
以下の月次売上データをSVGの棒グラフで可視化してください。
・4月: 1,250万円
・5月: 1,380万円
・6月: 1,190万円
・7月: 1,450万円
棒の色は青系（#3B82F6）を使い、各棒の上部に金額を表示してください。
横幅600px、高さ400pxで作成してください。

【活用例3】業務フロー図の作成

Before: PowerPointで業務フローを手作業で作成するたびに図形の配置や矢印の調整に時間がかかり、変更のたびにやり直しが必要でした。

After: Mermaid形式でフロー図を依頼すると、Artifactパネルにきれいな図が表示されます。「ステップを1つ追加して」「承認フローを分岐させて」と会話形式で修正できるため、現場の業務ヒアリングをしながらその場でフロー図を完成させることも可能です。

# 業務フロー図の作成例
以下の受注業務フローをMermaidのフローチャートで作成してください。
手順：
1. 顧客から注文メールを受信
2. 在庫確認（在庫あり→3へ、在庫なし→4へ）
3. 注文確認メールを送信→発送→完了
4. 欠品連絡メールを送信→入荷待ち→3へ

うまくいかない時の対処法

Artifactパネルが表示されない

Claudeがコードをプレーンテキスト形式で返した場合、Artifactパネルは自動表示されません。その場合は「HTMLのArtifactとして出力してください」と明示的に追記すると解決することがほとんどです。また、ブラウザを最新版にアップデートしておくことも大切です。

プレビューにエラーが表示される

Reactコンポーネントで「外部ライブラリが読み込めない」というエラーが出ることがあります。claude.aiのArtifact実行環境は使えるライブラリに制限があるためです。エラーメッセージをそのままチャット欄にコピーして「このエラーを修正してください」と依頼するのが最も早い解決法です。AIでエラーログ・スタックトレースを解析する方法も参考になります。

思ったデザインと仕上がりが違う

「おしゃれに」「プロっぽく」などの抽象的な指示より、具体的な数値・色コード・レイアウト指定を含めると精度が上がります。「フォントサイズ16px、メインカラー#2563EB、余白は上下24px」のように数値で指定するクセをつけましょう。参考にしたいデザインがある場合は、生成AIにファイルを読み込ませる方法のように画像ファイルをそのままClaudeに添付すると、より意図が伝わりやすくなります。

複数のArtifactを一貫性を持って管理したい

同一プロジェクトで複数のページやコンポーネントをArtifactsで作り続けると、会話が長くなるにつれてスタイルや設計方針にばらつきが出ることがあります。そのような場合はClaude Projectsの使い方と組み合わせることで、デザインルールや設計方針をプロジェクト設定として保持し、長期間にわたって一貫性を保てます。

なお、Artifactsで作ったHTMLやWebアプリを外部公開する際は情報セキュリティにも注意が必要です。セキュリティ対策の全体像については姉妹サイトセキュリティマスターズ.TOKYOで詳しく解説しています。

本記事のまとめ

ClaudeのArtifacts機能は、コード・HTML・グラフ・フロー図をチャット画面上でそのまま生成・プレビュー・修正できる機能です。コピペ不要で「作る→確認→修正」のサイクルを高速に回せるため、非エンジニアでもWebモックや業務ツールの試作を大幅な時間短縮で実現できます。

まずはclaude.aiを開いて、「シンプルな問い合わせフォームをHTMLで作って」と入力してみてください。右側にArtifactパネルが開き、フォームのプレビューが表示されれば成功です。AIと対話しながら業務ツールを仕上げる新しい働き方を体験してみてください。