AI が作る「アーティファクト」の活用 ミニツールで業務を圧縮する

AI との会話は、これまで基本的に「使い捨て」でした。質問して、答えをもらって、コピペで持ち出す。ふつうのやりとりの流れです。

そこを変えつつあるのが、Claude の Artifacts(アーティファクト)機能です。会話の中で AI が生成したコード、HTML/CSS/JavaScript、React コンポーネント、SVG、Mermaid の図、Markdown ドキュメント、対話型の小さなアプリ、こういったものを チャットの本文とは別の独立したパネル に「作品」として並べ、リアルタイムに動かしながら改善していける機能です。2024年に登場して以来じわじわ広がってきましたが、2025年10月には 永続ストレージ(セッションをまたいでデータを保持する)と MCP 連携 が公式に追加され、一段階格上げされました。単なるコード生成のオマケから、日常業務にじわっと効き始める道具になってきています。

この記事では、Artifacts が具体的に何をするものなのか、私たちが実際に業務でどう使っているのか、ChatGPT Canvas や Gemini Canvas との違いはどこにあるか、そして中小企業として「使いどころ」と「使わないほうがいい場面」をどう線引きするかを整理します。

Artifacts とは何か 「チャットの外側」に生まれる成果物

Artifacts は、Claude の返答の中で「一定以上の長さ・独立性がある成果物」を、チャット本文の右側の専用パネルに切り出して表示する機能です。文章のまま流れて消えていくのではなく、一つの独立した作品 として扱われる、というのが大きな違いです。

扱えるものは、大まかに次のとおりです。

• コード(Python、JavaScript、TypeScript、SQL など)
• HTML / CSS / JavaScript(そのままブラウザで動くページとして即時プレビュー)
• React コンポーネント(対話型のミニアプリとして動く)
• SVG(図・アイコン・シンプルな可視化)
• Mermaid(フロー図・シーケンス図・組織図など)
• Markdown ドキュメント(整った書式のまま横で表示)

パネル内では、右上のタブから バージョン管理、コピー、ダウンロード、そして Web上に公開できる共有リンク の発行までができます。組織の外の人にも見せられるので、ちょっとしたデモや素案の共有に強い。ここは claude.ai 上の通常の Artifacts での話です。一方で、Claude Code の Artifacts は Team / Enterprise 向けで、共有範囲が組織内に閉じる仕様 なので、扱いを分けて見ておく必要があります。

料金面では、Free プランでも Artifact の作成・表示・公開リンクの発行など、基本的な体験は試せます。ただし、次に触れる MCP 連携と永続ストレージは Pro / Max / Team / Enterprise 向け の機能で、Free では使えません。「触ってみるためにいきなり有料契約」の心理的なハードルがないのはありがたい設計ですが、業務で本格的に組み込む段階では有料プランが前提になります。

そして2025年10月、Artifacts に大きな進化が2つ追加されました。

• 永続ストレージ: 作った Artifact のデータを、セッションをまたいで保持できる。ただし 公開済み Artifact でのみ動作し、1 Artifact あたり 20MB・テキストデータのみ という上限があります。共有ストレージを使う場合は、入力したデータが他の閲覧者にも見える設計になり得るため、機密情報は入れない前提 で運用するのが安全です
• MCP 連携: 外部サービスと繋いで、Artifact 側からデータを取ってきたり、逆に流し込んだりできる

これで Artifacts は「その場で作って捨てるスケッチ」から、「業務にちょっと居着かせるミニアプリ」の位置に近づいてきました。

私たちの使い方 業務ごとに「ミニツール」を秒で作る

私たちも Artifacts を業務に組み込んでいます。エンジニアリング寄りの重い開発は Claude Code に任せて、日々の細かい「一回限りの業務」を Artifacts でやる、という切り分けです。実際に手を動かしているものをいくつか。

1. 会議前の集計・比較表

「先月の顧客問い合わせを、カテゴリ別に集計して、前月比の伸びを対応表にして」と頼むと、Markdown の整った比較表が右のパネルに出てきます。数字が違えば口頭で指示して直させる。会議に持ち込む資料の準備が、数分で終わります。

2. 顧客向けの簡易 UI モック

「こういうダッシュボードのイメージを、HTML + JS で1枚のページに」と頼むと、右のパネルにそのまま動くデモページが出ます。営業提案の場で「こういう画面をイメージしてます」と見せると、口頭説明の10倍伝わる。本番実装の前段のすり合わせが一気に短くなりました。

3. CSV を渡して即分析するミニアプリ

React で書かせた小さな分析ページに、CSV をドラッグ&ドロップすると、その場でグラフや平均値・中央値を出す。誰かに Excel でお願いする、という工程が消えます。

4. 提案書の構造下書き

Markdown で「1ページ目のリード、2ページ目の課題、3ページ目の解決策、4ページ目の価格」の骨格を作らせて、右のパネルで整った書式のまま眺めながら、章ごとに文章を差し込んでいく。ゼロから Word を開いて書き始めるより、迷いが少ないです。

5. 対話型の小さなツール(スケジューラー・料金試算)

「開始日と期間を入力すると、営業日ベースの終了日を出すツール」「サービスプラン・数量・オプションを選ぶと合計金額が出る試算ツール」など、いわゆる「Excel でも作れるけど、社内共有と保守が面倒」なやつを Artifacts で作る。公開リンクにしてしまえば、担当者が変わっても URL 1本で引き継げます。

いずれも共通しているのは、「エンジニアリング能力は要らないが、システム化するほどの重さもない」業務 に効いている、というところです。

「使い捨てツール」という発想

これまで、業務ツールを作るというのは、少なくとも「エンジニアに時間を取ってもらう」ことを意味していました。Excel マクロですら、社内で書ける人は限られます。だから、繰り返す面倒な作業でも、「わざわざツールを作るほどでもないよね」と、手作業で回してしまう。この判断は、多くの中小企業でごく当たり前でした。

Artifacts が変えたのは、この 「わざわざツールを作る」の閾値 です。5分で作って、その業務が終わったら捨てる、または保管しておいて次回同じ業務が来たら呼び出す。要は「使い捨てツール」を業務ごとに気軽に生やせるようになりました。

前回書いたコードが書けなかった私が、Claude Code と Codex で自社システムを直すまでは、本番システムの改修に AI を使う話でした。Artifacts はその下位互換ではなく、まったく別のレイヤーです。本番システムを触る前、あるいは本番システムを触るほどではない日常業務の1コマ を、AI と一緒にサッと組み立てる、という位置づけです。

ChatGPT Canvas / Gemini Canvas との違い

主要3社は、同じような「独立したパネル+成果物」の機能を出してきています。ざっくり整理するとこうなります。

機能	強み	主な用途
Claude Artifacts	HTML / JS / React が その場で動くプレビュー。公開リンクの共有あり。基本機能は Free でも試せる	対話型ミニアプリ、UI モック、教育ウィジェット、業務ツール試作
ChatGPT Canvas	文章の推敲・インライン編集に強い。Word のように直接直せる	長文の校正、提案書のドラフト、コード編集の会話
Gemini Canvas	Google Docs へのエクスポートや、Gemini Enterprise での Docs / Slides 作成に強い	Google Workspace 中心の文書・スライド作成

私たちの実感で言うと、「動くものを作りたい」なら Claude Artifacts、「文章を直したい」なら ChatGPT Canvas、「Google Workspace 中心の会社」なら Gemini Canvas という棲み分けが自然です。1社1機能で決める必要はなく、業務ごとに使い分けるのが現実解です。

中小企業の使い処と、そうでない場所

Artifacts が特に効くのは、次のような業務です。

• 一回限りの業務(この案件専用の集計、この会議専用の資料下書き)
• 社内数人で使うミニツール(申請書のPDF書き出し、社内の予約状況一覧、ちょっとした試算)
• 顧客向けのデモ・素案(こういう画面をイメージしてます、というやりとりの共有)
• 教材・研修用の対話コンテンツ(社内新人向けのクイズや練習問題)

逆に、次のような領域は Artifacts では扱わないほうが安全です。

• 顧客データを扱う本番システム(データベース接続、機密情報の永続保管など)
• 金銭処理(決済、請求、給与)
• 認証・認可の中核(社員のログインを担わせる、権限判定に使う)
• 長期運用が前提の業務システム(半年後にも触り続ける前提のもの)

こういう「重い」領域は、Claude Code や、しっかりしたシステム開発の枠組みで扱うのが筋です。Artifacts の魅力は「軽く作って、必要ならすぐ捨てる」ことにあるので、その軽さを守れる範囲で使うのがいちばん活きます。

もう1つ運用上の注意として、共有前に会話全体と添付ファイルを確認する ことを挙げておきます。Team / Enterprise で Artifact を共有すると、その Artifact を作った元の会話に含まれる添付ファイルやアップロードしたファイルにも、閲覧者がアクセスできる場合があります。社内資料や顧客データが会話に含まれたまま公開する事故を避けるため、共有直前に必ず添付履歴を見直しておく のが安全です。

「使い捨てツール」の作り方 コツ3つ

最後に、Artifacts を業務で使うときのコツを、3つだけ。

コツ1: 1業務 = 1ツール、ぎゅっと絞る

「あの業務も、この業務も、全部1つにまとめて」とすると、AI 側も混乱して、動くけど雑なアプリになりがちです。「今日の会議前のこの1つの集計」「今週の1回だけ使う CSV 分析」のように、1つの目的に絞る ほうが結果的に良いものが出ます。

コツ2: 会話の中で改善リクエストを重ねる

Artifacts はバージョン管理付きなので、「ここの色を変えて」「エラー時のメッセージを直して」「モバイルでも崩れないように」と会話で直していけます。1発で完成させようとせず、5〜10ラリーで仕上げる のが Artifacts らしい作り方です。

コツ3: 完成したら公開リンクで共有、または保存

一度作ったら、公開リンク(組織外にも見せられるURL)を発行して社内共有、あるいは Claude の Projects や自分のドライブに保存しておく。次に同じ業務が来たら、それを呼び戻して微修正する のが Artifacts の資産化の仕方です。

さいごに 「頼む」から「作る」へ 中小企業のAI との付き合い方が変わる

Artifacts は、AI との共同作業の作法を静かに変えました。これまでは AI にお願いして、その答えをコピペで使う、単発の「頼む」関係が中心でした。それが、AI と一緒に 繰り返し使える小さな作品を「作る」 関係に、一段ずれてきています。

中小企業の現場から見ると、この変化は地味に大きいです。エンジニアの時間を割かなくても、経営者や現場担当者が、業務ごとにちょうど良いサイズのツールを自分で生やせるようになる。そういう小さなツールが増えていくと、業務の1日はだいぶ圧縮されます。

今すぐやるなら、次の1業務を Artifacts で試してみるのが早いです。「明日の会議で使う比較表」でも、「先週困った CSV 集計」でも、なんでもいい。Claude を開いて、日本語で頼んでみる。それだけで、AIとの付き合い方が「単発の頼みごと」から「日常の道具作り」に変わり始めます。