Claude機能ガイド
Claude Artifactsとは｜使い方とできること
Artifacts（アーティファクト）は、Claudeとの会話から生まれた「成果物」を、チャット欄とは別の専用パネルに切り出して表示・編集できる機能です。コード、文書、図表、簡単なWebページやゲームまで、会話を続けながら横で成果物が育っていく感覚で使えます。このページでは、仕組み・使い方・向き不向きを初心者向けに整理します。
このサイトは Anthropic や Claude の公式サイトではありません。Claudeの基本的な使い方、ChatGPTとの違い、文章作成・長文整理・仕事での活用を初心者向けに整理する非公式ガイドです。機能・料金・提供状況は変更される可能性があるため、重要な判断ではAnthropic公式情報も確認してください。
Artifactsとは何か──「会話」と「成果物」を分ける仕組み
通常のClaudeとの会話では、依頼した文章もコードも、すべてチャットの返信として流れていきます。短い依頼ならこれで十分ですが、「作ったものを何度も直しながら仕上げていく」作業になると、修正のたびに全文が再掲されて会話が読みにくくなり、どれが最新版か分からなくなりがちです。
Artifactsはこの問題を解決するための仕組みです。ある程度まとまった成果物（コード、文書、図表など）をClaudeが作ると、それがチャット欄の横の専用パネルに表示されます。以降は「ここの色を変えて」「この段落をもっと短く」と会話で指示するだけで、パネル内の成果物が更新されていきます。会話は会話、成果物は成果物として分かれているので、修正を何度重ねても最新版がひと目で分かります。
Artifactsでできること
| 種類 | 具体例 | 特徴 |
|---|---|---|
| Webページ・簡易アプリ | 計算ツール、診断チェック、簡単なゲーム、ランディングページの試作 | HTMLやReact形式のコードを、その場で実際に動く状態でプレビューできる |
| 図・イラスト | フローチャート、構成図、簡単なロゴ案、アイコン | SVG形式で描画され、そのままダウンロードして使える |
| 文書 | レポート、マニュアル、企画書の下書き | Markdown形式で整形された読みやすい状態で表示される |
| コード | スクリプト、設定ファイル、関数の実装 | 構文ハイライト付きで表示され、コピーしやすい |
| データの可視化 | グラフ、簡単なダッシュボード | 数値データを渡すと、視覚的なグラフとして描画できる |
特に強力なのが1行目の「実際に動く状態でプレビューできる」点です。プログラミングの知識がなくても、「割り勘計算ツールを作って」と頼めば、その場で入力して動かせるツールが手に入ります。
使い方の流れ（実例つき）
- まとまった成果物になる依頼をする──例：「イベント参加費の割り勘計算ツールを作って。人数と合計金額を入れると1人あたりの金額が出るシンプルなもの」。具体的に伝えるほど、1回目から狙いに近いものが出てきます。
- Artifactsパネルで動作を確認する──画面の横に成果物が表示されます。ツールなら実際に数字を入れて動かしてみます。
- 会話で修正を重ねる──「端数は切り上げにして」「スマホでも見やすく」のように、気になった点を1つずつ伝えます。パネル内の成果物が更新されていきます。
- 完成したら保存する──コピー、ダウンロード、または共有リンクの発行（提供状況による）で手元に残します。
コツは、最初から完璧な指示を作ろうとしないことです。まず動くものを出してもらい、実物を見ながら直していく方が、結果的に速く狙い通りのものに辿り着けます。
向いている用途・向いていない用途
向いているのは、1つの画面・1つのファイルで完結する成果物です。ちょっとした業務ツール、提案用のモックアップ、勉強用の教材、資料に貼る図表などは、Artifactsの得意分野です。「アイデアを最速で目に見える形にする」道具だと考えると使いどころが掴みやすくなります。
一方、複数ファイルにまたがる本格的な開発や、既存サイトのファイルを直接編集する作業には向いていません。手元のフォルダーにあるファイルを読み書きしたり、サーバーに反映したりする作業は、Claude Codeの領域です。Artifactsで試作 → 気に入ったらClaude Codeで本実装、という流れも実務ではよく使われます。
公開・配布前の注意点
- Artifactsで作ったツールやページを外部に公開する場合は、表示崩れや計算間違いがないか、人間が実際に動かして確認する
- グラフや資料に含まれる数値は、元データと照合する（AIがそれらしい数値を作ってしまう場合があります）
- 共有リンクを発行する場合は、成果物の中に個人情報や社内情報が含まれていないか確認する
- 他者の著作物（画像・文章・デザイン）を模倣した成果物をそのまま商用利用しない
ChatGPTのCanvasとの違い
ChatGPTにも「Canvas」という、会話と成果物を分けて編集できる似た機能があります。役割は近いものの、Artifactsは動くプレビュー（HTML/SVG）の表示に強く、Canvasは長文の共同編集に寄った設計という違いがよく指摘されます。詳しい比較はClaudeにCanvasはある？ChatGPT Canvasとの違いで整理しています。
AIガイド群
FAQ
claudeguide.jpはClaudeの公式サイトですか？
いいえ。このサイトは Anthropic や Claude の公式サイトではありません。初心者向けに使い方や注意点を整理する非公式ガイドです。
Artifactsは無料プランでも使えますか？
提供範囲はプランや時期によって変わる可能性があります。最新の提供状況はAnthropic公式情報で確認してください。
Artifactsで作ったツールを仕事で配布してもよいですか？
配布前に、動作確認、数値の正確性、個人情報・機密情報の有無、著作権の問題がないかを人間が確認してください。商用利用の可否は利用規約の確認もおすすめします。
プログラミングが全く分からなくても使えますか？
使えます。「何を作りたいか」を日本語で伝えるだけで動くものが出てきます。ただし、出てきたものが正しく動くかの確認は自分で行う前提で使ってください。