Claudeと「一緒に作る」 ─ アーティファクトで会話から成果物ができる

ClaudeなどのAIに何かを作ってもらうとき、文章のままだと完成イメージが湧きにくいことがあります。提案書、Webページ、図解……出てきたものを頭の中で組み立てるのは、思った以上に手間がかかります。

これは、Claudeの「アーティファクト」機能を使うといっきに手間を短縮できます。会話の横に成果物がそのまま立ち上がって、その場でプレビューしながら一緒につくっていける機能です。今回はその仕組みと、実際の使い方を紹介します。

以前の記事では、Claudeを自分専用に育てる「プロフィール×スタイル×プロジェクト」の組み合わせを取り上げました。今回はその先、Claudeとの会話を「実際に成果物」にする話です。

Claudeの「アーティファクト」とは

アーティファクトとは、会話の中で生まれた成果物を、会話とは別の専用エリアに立ち上げる機能です。

通常の会話だと、Claudeの返答はメッセージとして本文に流れていきます。長い文章やコードは読みづらく、見比べたり修正したりが手間。アーティファクトは、そういう「成果物として扱いたいもの」を会話の横に切り出して、ひとつのプレビュー画面として表示してくれます。

場面	通常の会話	アーティファクト
出力の見え方	本文に流れる	別エリアにプレビュー
編集	会話で頼んで再生成	その場で直接編集も可
共有	テキストをコピー	URLで共有もできる
向く出力	短い回答や説明	文書、コード、図、HTML

アーティファクトで作れるもの

アーティファクトで扱える形式は、多くありますが主に以下がおすすめです。

• テキスト
  提案書、記事、マニュアル。長い文章はアーティファクトに切り出すと、見通しがよくなる
• コード
  HTML / CSS / JavaScript / Python など。シンタックスハイライト付きで読みやすく表示される
• HTML
  その場でWebページとしてプレビューできる。レイアウトも見ながら直せる
• SVG
  図解やダイアグラム。ロゴのラフ案などもここで作れる
• Mermaid
  フローチャートやシーケンス図。コードで書いた構造が図として立ち上がる

形式によって扱いやすさが変わります。テキストやコードは安定して扱えますが、SVGやMermaidのような図はリクエストが複雑になると指示が反映されにくい傾向があります。この点はあとの節で触れます。

会話しながら育てるコツ

アーティファクトは「作ってもらう」だけでは半分の使い方です。本領は「会話しながら一緒に育てる」ところにあります。

• 直接編集する: アーティファクト画面で文字をその場で書き換えられる。細かい修正は会話より早い
• 会話で大きく直す: 「もう少しカジュアルに」「3章を2つに分けて」など、構成レベルの変更は会話で頼む
• バージョンを遡る: 修正履歴が残っていて、前のバージョンに戻せる。試行錯誤しても安心
• 一気に書き換えず、少しずつ: 大きな変更を一度に頼むより、小さく区切るほうが意図が伝わりやすい

「一発で完璧なものを作らせる」より、「会話のキャッチボールで形にしていく」スタンスがアーティファクトには合います。

得意なこと、苦手なこと

私たちの経験から、アーティファクトの得意・苦手の境目を整理します。

得意なこと

• 要件定義から設計、Webサイトのプロトタイプまで一気通貫: 「こういうサイトを作りたい」と話しながら、要件メモ → 設計書 → 実際のHTMLページまで会話の中で揃う。共有用のURLも生成できるので、関係者に「これでどう？」とすぐ見せられる
• ブログ記事の下書きやリライト: 文章を切り出して並べて読めるから、執筆や推敲と相性がいい
• シンプルな図解やフローチャート: SVGやMermaidで小ぶりな図を作るのは速い

苦手なこと

• 複雑なSVG: 細かい要素が多い図解は、その場で見られるのは便利ですが、修正リクエストを重ねると崩れて、結局時間がかかることがある
• 複数ファイルが絡む本格的なアプリ開発: 1つのアーティファクトに収まらない規模は、Claudeのコード開発ツール「Claude Code」の領域
• セキュリティ設計・モジュラーモノリス・フレームワーク活用: 認証や権限まわりの設計、分割設計の判断、Next.jsやLaravelのようなフレームワーク前提の開発は、ファイル間の連携やパッケージ管理が必要になるため、こちらもClaude Codeの領域
• 長期的に育てるドキュメント: ファイルの保存が手動なので、継続して更新するものは別の場所で持っておくほうが安心

まとめ

今回のポイントを整理します。

ここまでで、無料のClaudeでできることを一通り見てきました。アカウント作成から始まり、スタイルとプロジェクトで自分用にカスタマイズし、3つの機能を掛け合わせ、そして今回のアーティファクトで会話を成果物にするところまで。ブラウザのClaudeを、自分の手の中で動かせる感覚が、もう手に入っているはずです。

次の数回は、Pro/Maxプランで開く有料機能の中から、特におすすめのものを紹介します。ここまでの基礎が固まっていれば、有料機能はその上に乗る形でスッと馴染むはずです。

次回は「Claude Design」。会話からUI/UXデザインがそのまま立ち上がる、アーティファクトの一歩先の世界です。