自分でコードを書かなくても Claude がアプリを作ってくれるー Artifacts の始め方と活用アイデア

はじめに

「Claude に何かを作ってもらうと、チャット画面の横に実際に動くものが現れた」という体験をしたことはあるでしょうか。これが Claude の Artifacts 機能です。

Artifacts は、自分でコードを書かなくても、Claude に話しかけるだけでインタラクティブなツールや Web ページ、図表などを生成・プレビューできる機能です。完成したものはそのまま共有したり、公開したりすることもできます。

この記事では、Artifacts の基本的な仕組みから、具体的な作り方・活用アイデアまでを紹介します。「Claude を使っているけど Artifacts はよくわかっていない」という方でも、読み終えたあとには実際に試してみたくなるはずです。

Artifacts とは何か

通常のチャット応答との違い

Claude との普段のやりとりでは、回答がテキストとしてチャット欄に流れていきます。Artifacts はそれとは少し異なります。Claude が「これは独立したコンテンツとして扱ったほうがいい」と判断したとき、チャット欄の右側に専用ウィンドウが開いて、そこにコンテンツが描画されます。

公式ドキュメントによると、内容が独立していて通常 15 行を超える規模があり、会話の外で編集・再利用・参照する可能性が高いと Claude が判断したときに Artifacts が作成されます。つまり「ちょっとした回答」ではなく、「手元に残して使いたいもの」が Artifacts として生成されます。

対応プランと利用環境

Artifacts のサイドバーアクセスおよび AI 搭載 Artifacts 機能は、Free・Pro・Max・Team・Enterprise のすべてのプランで利用できます。Web・iOS・Android・Claude Desktop のいずれの環境でも動作します。

サイドバーの Artifacts タブ（インスピレーション閲覧や作品一覧管理ができる専用スペース）も全プラン・全環境で利用できます。ただしプランによって見える内容が異なります。Free・Pro・Max は Anthropic がキュレーションした Artifacts のコレクションを「Inspiration」タブから閲覧・試用できます。Team・Enterprise は組織内で共有された Artifacts のみ表示され、外部への公開はできません。モバイルでは「Get inspired」バナーからアクセスできます。

有効化の手順

画面左下の名前やイニシャルをクリックし、「Settings（設定）」→「Capabilities（機能）」から Artifacts のトグルで ON/OFF を切り替えられます。デフォルトでは有効になっていることが多いですが、もし動作しない場合はここを確認してみてください。

Artifacts で作れるコンテンツの種類

Artifacts が対応しているコンテンツには、大きく分けて以下の種類があります。それぞれの特徴と向いている用途をまとめておきます。

種類	概要	向いている用途	備考
コードスニペット	各種プログラミング言語のコード	プログラムのコードをそのまま表示・共有したい場合	ダウンロード可
HTML	ブラウザで動く Web ページ	簡易ツール、計算フォーム、LP のモックアップ
React コンポーネント	インタラクティブな UI パーツ	ダッシュボード、状態管理が必要な操作画面
SVG	ベクター形式の図	アイコン、シンプルな説明図	拡大しても劣化しない
ダイアグラム / フローチャート	テキストから生成するダイアグラム	フローチャート、構成図	Mermaid 記法で生成される
Markdown / テキスト	構造化されたドキュメント	レポート、議事録、仕様書	ダウンロードして再利用しやすい

「PDF や Excel は作れないの？」という方へ PDF・Excel・PowerPoint・Word ファイルの生成は、Artifacts とは別の「コード実行とファイル作成（Code execution and file creation）」機能で対応しています。同じ Settings 画面で管理されているため混同されやすいですが、異なる機能です。こちらもすべてのプランで利用でき、チャットから自然言語で依頼するだけでファイルを作成・ダウンロードできます。

初めて Artifacts を試すなら、Mermaid によるフローチャートや HTML のシンプルなツールが扱いやすくおすすめです。たとえば「新規ユーザー登録のフローをフローチャートで図にしてください」と Claude に話しかけるだけで、次のような構造のフローチャートが Artifacts ウィンドウに自動生成されます。自分でコードを書く必要はまったくありません。

【Claude への入力例】
新規ユーザー登録のフローを Mermaid のフローチャートで図にしてください

【生成されるフローチャートの構造（Artifacts ウィンドウに図として表示されます）】
  ユーザーアクセス
      ↓
  メールアドレス入力
      ↓
  有効性チェック
    ├─[有効]→ 確認メール送信 → ユーザー確認 → 登録完了
    └─[無効]→ エラーメッセージ表示

「承認ステップを追加して」「色をわかりやすく変えて」などと続けて話しかければ、その場で図が更新されます。

AI 搭載 Artifacts とは

Artifacts には、通常のコンテンツ生成とは一段階上の使い方があります。それが「AI 搭載 Artifacts（AI-powered Artifacts）」です。

通常の Artifacts は、HTML や React などで自分でコードを書かずに Claude が生成する「ツールやドキュメントの形をしたコンテンツ」です。これに対して AI 搭載 Artifacts では、Artifacts の内部に Claude のテキスト対話機能を組み込むことができます。テキストベースの対話に特化した機能で、たとえば「特定のトピックに特化したチャットボット」「入力内容に応じてアドバイスが変わるコーチングツール」「キャラクターと会話しながら進む学習ゲーム」のようなものを、自分でコードを書かずに作成・公開できます。

利用者が AI 機能を使う際にはサインアップが求められますが、基本的な閲覧や操作はアカウントなしでも行えます。AI 機能の使用は各ユーザー自身の Claude 利用枠から消費されるため、API キーの準備や課金の心配は作成者側には発生しません。

Artifacts の基本的な使い方

作り方のコツ：問題から始める

Artifacts を作る最善の方法は、解決したい問題を説明し、Claude にそれを整理してもらうことです。ツールの仕様よりも、まず困りごとを先に伝えるほうがうまくいきます。

たとえば「毎朝、売上の CSV を手動で集計しているのが面倒で、もっと楽にしたい」のように話しかけると、Claude が仕様についていくつか質問を返してきます。それに答えていくことで自然と要件が固まり、完成度の高い Artifacts が生成されやすくなります。

アイデアが漠然としているときは、「〇〇を作りたいんだけど、何を決めておけばいい？」と Claude にインタビュー役を任せてしまうのも効果的です。

修正・イテレーションのやり方

生成されたものが気に入らなくても、最初から作り直す必要はありません。「ボタンの色を青にして」「もう少しシンプルなレイアウトにして」などと追加で伝えるだけで、Artifacts が更新されます。

バージョン履歴が自動的に保持されるため、「さっきの状態に戻したい」というときもバージョンセレクターで切り替えられます。試行錯誤しながら作り込んでいけるのが Artifacts の強みのひとつです。

Persistent Storage（永続ストレージ）について

Persistent Storage は Pro・Max・Team・Enterprise プランの Web 版および Desktop アプリで利用可能な機能です（モバイルアプリは非対応）。Artifacts がセッションをまたいでデータを保持できるようになるため、日記アプリ、進捗トラッカー、チームで共有するスコアボードのような、状態を持つアプリケーションを作る際に役立ちます。

ストレージには「パーソナル（自分だけが見えるデータ）」と「共有（全ユーザーが同じデータを参照）」の 2 種類があります。共有ストレージを使った Artifacts を初めて操作する際には、データが他のユーザーにも見えることを知らせる確認ダイアログが表示されます。業務データや個人情報を入力する前に、その Artifacts がどちらのストレージを使っているか確認しておきましょう。

なお、保存できるのはテキストデータのみで、画像・ファイル・バイナリデータは対象外です。また 1 Artifacts あたりの上限は 20 MB です。

ひとつ重要な点があります。Persistent Storage は公開済みの Artifacts でのみ機能します。 開発中やテスト段階（まだ公開していない状態）では、ストレージへの読み書きは動作しません。「保存できない」と感じたときはまず公開状態を確認してみてください。

共有・公開の方法と注意点

完成したものは外部に共有できます。プランによって用語と挙動が異なります。

Free・Pro・Max（Publishing / 公開）：誰でもアクセスできる公開リンクを発行できます。Claude アカウントを持っていない相手でも基本的な閲覧・操作が可能です。ただし、カスタマイズや AI 機能の利用にはサインアップが必要になります。
Team・Enterprise（Sharing / 共有）：組織内のメンバーにのみ公開できます。閲覧者は Team または Enterprise アカウントにログインしている必要があります。組織外への公開はできないため、外部のクライアントへの共有には使えません。

埋め込みコードについて

Free・Pro・Max プランでは、公開した Artifacts の埋め込みコードを生成できます。自分のブログや社内 Wiki に貼り付ける際に使える機能ですが、埋め込みを許可するドメインを「Allowed domains」フィールドに指定する必要があります。ドメインを設定しないと埋め込みは動作しないため、利用時は忘れず設定してください。

Unpublish（公開取り消し）の注意

公開した Artifacts は後から取り消すことも可能ですが、一度 Unpublish すると同じ Artifacts を再公開することはできません。再度公開したい場合は新しい Artifacts として作り直す必要があります。また、Persistent Storage を使っている Artifacts を Unpublish すると、保存されていたデータ（個人・共有ともに）は永久に削除されます。公開・取り消しの操作は慎重に行いましょう。

業務で Artifacts を活用するアイデア

プロジェクト進捗ダッシュボードを作る

週次レポートや進捗状況の可視化に活用できます。「タスク名・担当者・ステータス・期限を入力できる進捗管理ダッシュボードを HTML で作って」と伝えるだけで、ブラウザで動く管理画面が完成します。

Free・Pro・Max プランであれば公開リンクを発行してチームに配布できます。Team・Enterprise プランの場合は組織内共有になりますが、メンバー全員が同じリンクからアクセスできます。

社内向けの計算・変換ツールを作る

見積金額の計算、単位換算、工数の集計など、定型的な計算を毎回手でやっている場面は多いはずです。「税率・数量・単価を入力したら合計金額と消費税が出る見積計算フォームを作って」のように依頼すると、入力フォームと計算ロジックが一体になったツールが生成されます。

一度作ったものは共有リンクで配布できるため、チーム全員が同じツールを使える環境を整えるコストが大幅に下がります。

説明用のフローチャートや構成図を作る

資料に図を入れたいけれど、draw.io で作るのが手間だという場面も多いでしょう。Mermaid を使えば、テキストで状況を説明するだけで図が生成されます。「システムの構成図」「業務フロー」「データの流れ」など、文章で説明するよりも図のほうが伝わりやすいものをすぐに作れます。

生成した図はファイルとしてダウンロードして資料に貼り付けることも、共有リンクで直接見てもらうこともできます。

FAQ チャットボットを作る

AI 搭載 Artifacts を使えば、特定のトピックに特化した簡易チャットボットを作ることもできます。「自社製品のよくある質問に答えるボットを作って。製品情報は以下の通り」と情報を渡すと、その内容を踏まえて回答する対話型のツールが生成されます。

ここで渡した製品情報は、Artifacts を作成した時点で Claude に教えた内容として固定されます。製品情報が変わった場合は Artifacts を作り直す必要がある点は覚えておくとよいでしょう。

なお、Pro・Max・Team・Enterprise プランの Web 版および Desktop アプリでは、MCP（Model Context Protocol）を通じて Asana・Google Calendar・Slack などの外部サービスと連携した Artifacts を作ることもできます。外部データをリアルタイムに参照したい場合はこの方法が選択肢になります。社内の問い合わせ対応や、勉強会の補助ツールとして手軽に試せます。

まとめ

この記事では、Claude の Artifacts 機能の基本的な仕組みから、使い方・活用アイデアまでを紹介しました。改めてポイントを整理します。

Artifacts は、Claude との会話から独立したコンテンツ（アプリ・ツール・図表・ドキュメントなど）を生成し、チャット右側の専用ウィンドウでプレビューできる機能です。自分でコードを書く必要はなく、「こういうものが欲しい」という言葉から始められます。さらに AI 搭載 Artifacts を使えば、Claude のテキスト対話機能を組み込んだアプリも作成・公開できます。

共有・公開まわりにはプランごとの制約やいくつかの注意点があるため、業務で本格的に使い始める前に今回紹介した点を確認しておくとスムーズです。

「資料を作る時間を短くしたい」「簡単なツールをチームに配りたい」「毎回同じ計算を手でやるのをやめたい」そんな日常の困りごとの解決策として、まずフローチャート 1 枚から試してみるとよいでしょう。

この記事がどなたかのお役に立てれば幸いです。

自分でコードを書かなくても Claude がアプリを作ってくれるー Artifacts の始め方と活用アイデア

自分でコードを書かなくても Claude がアプリを作ってくれるー Artifacts の始め方と活用アイデア

はじめに