Artifacts は Claude の機能で、チャットの隣のパネルに「動くもの」をその場で生成・編集できる仕組みです。コード、HTML ページ、React アプリ、SVG や Mermaid の図、長文ドキュメントを、会話の流れのまま作って、すぐ動かして、リンクで共有できます。本記事では、何が作れるのか、どう使うのか、そして 2025〜2026 年に加わった「AI が中で動くアプリ」までを、初めての人向けに具体的に整理します。
FIG.1 左で言葉にして指示し、右のパネルにその場で動く成果物が現れる
類似機能に ChatGPT の Canvas、Gemini の Canvas がありますが、本記事は Claude の Artifacts に絞って解説します。Artifacts は 2026 年時点で無料プランを含むすべての Claude プランで使えます。「Pro 以上でないと触れない」というのは過去の話で、まず無料で試せます。
01Artifacts で何が作れるか
「コードしか作れない」と思われがちですが、対象はかなり広いです。2026 年時点で、おおむね次の種類をその場でレンダリング・編集できます。
画面・アプリ
HTML ページ（CSS・JavaScript 込み）や React コンポーネント。ボタンを押す・入力するなど、実際に操作できる。
図とコード
SVG 図、Mermaid のフローチャート、30 以上の言語のコード。図はその場で描画される。
文書
Markdown の長文レポートや企画書。.docx / .pptx / .xlsx / .pdf としてダウンロードできる形でも出力できる。
ポイントは、結果が「文章としての説明」ではなく「動く実物」で返ること。ログイン画面を頼めば、読めるコードではなく、その場でクリックできる画面が出てきます。
02典型的な使いどころ
初学者がまず体験するとよい使い方を、具体例とともに挙げます。どれも「専門知識のない人が言葉で頼む」だけで届く範囲です。
- プロトタイプ作成：「ログイン画面のサンプル HTML を」と頼むと、右ペインに操作できる画面が出る。配色や文言をその場で直せる。
- 図解の自動生成：「この手順をフローチャートにして」と頼むと Mermaid 図が、「組織図を SVG で」と頼むと編集できる図が出る。
- ミニアプリ：「割り勘の計算ツールを」「簡単な家計簿を」と頼むと、実際に動く小さなアプリができる。エンジニアでなくても試せる。
- 長文ドキュメント：レポートや議事録テンプレを Artifact にすると会話と分離して管理でき、「ここだけ書き直して」と部分修正しやすい。
Artifacts の価値は、「説明を読む」から「実物を試す」へ距離を縮めるところにある。
03基本の使い方（4 ステップ）
そのまま頼む
特別なモードは不要。普通のチャットで「〜を作って」と頼めば、Claude が成果物に向く内容だと判断したとき自動で Artifact パネルを開く。無料プランでも使える。
制約を最初に添える
「外部ライブラリは使わない」「1 ファイルで」「スマホ表示も考慮」など、条件を先に伝えると、後からの作り直しが減る。
