チャットの横でアプリが動く——ClaudeのArtifactsで、思いつきを30分で形にする
たとえば、こんな夜
個人開発のSaaSを動かしながら、毎日コードを書く生活をしていると、新しいアイデアが浮かぶたびに「プロトタイプを作って試したい」気持ちが湧きます。困るのは「30分プロトタイプにすら届かない、もっと小さい思いつき」をどう扱うか、というところ。「CSVから簡単なグラフを描くだけのウィジェット」「色のパレットを見ながらコントラスト比をチェックする小道具」——本気のプロダクトではなくて、自分の頭の中の絵を確かめたいだけ、という温度感のものがあります。Bolt.newで新プロジェクトを切るのは少し重い。Cursorを開いて新規ファイルを作るのも大袈裟。そういう小さな思いつきが、開発環境を開く前に消えていく時期があります。
こんなふうに使える
ClaudeのArtifacts機能を使うと、コードと一緒に動くプレビューを横に並べて議論できます。思いついたUIアイデアを、コードと動くプレビューで同時に見られます。チャットの隣にReact / HTML / SVG / Mermaidの図がリアルタイムで描き出されます。2026年からはセッションを超えて状態が残るArtifactsも作れます。
想像してみると
Claudeのチャットを開いて「コントラスト比チェッカーをArtifactで作ってほしいです。背景色と文字色をカラーピッカーで選べて、コントラスト比の数字とWCAG AA/AAA判定が即座に出るUI。シングルファイルのReact＋Tailwindで、横幅は400pxくらいの小さなウィジェット。状態管理はuseStateで十分」と打ち込んでみる。返ってくるメッセージの右側に、Artifactsのプレビューが立ち上がる。コードのタブとプレビューのタブが切り替えられて、プレビュー側ではカラーピッカーが動いて、コントラスト比の数字がリアルタイムで更新されている。「ピッカーの初期値を変えたい」「コントラスト比の小数点を2桁にしたい」と続けて指示すると、Artifactは新しいバージョンとして上書きされていって、右側のプレビューも一緒に更新される。Cursorのエディタを開かずに、これだけで欲しい形まで届く時間が生まれます。
この記事でできること
「こういうのが欲しい」を、いつもの開発環境を開かずに、チャットの画面で確かめられる。ClaudeのArtifacts機能を使うと、コードと一緒に動くプレビューを横に並べて議論できます。
- 思いついたUIアイデアを、コードと動くプレビューで同時に見られる
- チャットの隣にReact / HTML / SVG / Mermaidの図がリアルタイムで描き出される
- 2026年からはセッションを超えて状態が残るArtifactsも作れる
使うもの: Claude（無料でも可、Pro $20/月で扱いやすい）
かかる時間: 約30分（小さな計算UI1本の場合）
必要なスキル: チャットに思いつきを書ける程度でOK
手順：チャットに描きたいものを言うだけ
ステップ1：プロダクトの説明を1段落で書く
Claudeに、こう書きます。
「コントラスト比チェッカーをArtifactで作ってほしいです。背景色と文字色をカラーピッカーで選べて、コントラスト比の数字とWCAG AA/AAA判定が即座に出るUI。シングルファイルのReact＋Tailwindで、横幅は400pxくらいの小さなウィジェット。状態管理はuseStateで十分」
書きながら「30秒で済んだな」となります。新規プロジェクトを切る前の、IDEの起動時間より短いくらいです。
ステップ2：チャット横にウィジェットが出てくる
返ってきたメッセージの右側に、Artifactsのプレビューが立ち上がります。コードのタブとプレビューのタブが切り替えられて、プレビュー側ではカラーピッカーが動いて、コントラスト比の数字がリアルタイムで更新されている。Claudeの公式機能カタログを読むと、Artifactsはこの「React / HTML / SVG / Mermaid / マークダウン / チャート」をリアルタイムプレビューする仕組みで、Free / Pro / Max のどのプランでも使えると整理されています。
最初の出力は固定の初期値で出てくるので、「ピッカーの初期値を変えたい」「コントラスト比の小数点を2桁にしたい」と続けて指示します。Artifactは新しいバージョンとして上書きされていって、右側のプレビューも一緒に更新されます。エディタを開かずに、これだけで欲しい形まで届きます。
ステップ3：気に入ったらコードをそのまま自分のプロジェクトへ
ウィジェットの形が固まったら、Artifactのコードをコピーして、Next.jsプロジェクトのcomponents/に貼り込みます。Tailwindで書かれているので、ほぼそのまま動きます。最終的なリファクタはエディタ側で入れますが、「ゼロから書く」と「動くものをリファクタする」では、消費する集中力が全然違います。
つまずいた：複雑すぎる依頼は通らない
欲張って「ローカルストレージに履歴を保存して、過去のチェック結果をリストで出して、CSVエクスポートもつけて」と一気に頼むと、Artifactは出てくるものの、ローカルストレージ周りが少しずれていて、思った通りに動かないことがあります。
このときの学びは「Artifactsは、1ファイルで完結する小道具に絞ったほうが速い」ということ。複数ファイルや外部APIをまたぐ要件は、Bolt.newやCursorに渡したほうが結果的に早い。Artifactsは「小さい円の中で動くものを、その場で見たい」という用途に最適化されている、という温度感です。
2026年からはセッションを超えてArtifactの状態を保存できる「Stateful Artifacts」もあると公式に説明されていて、日記アプリやトラッカー的なものはここで完結させられるとのこと。リンクで共有もできるという話なので、SaaSの「機能Aだけ切り出したデモ」を友人に渡す使い方も挑戦できそうです。
学んだこと：プロトタイプの「下限」が下がる
これまで、プロトタイプの最小単位はBolt.newの30分ボード、ということが多かった。ClaudeのArtifactsを混ぜると、その下にもう一段「5分ウィジェット」というレイヤーができます。
- 5分ウィジェット：Claude Artifacts。1ファイルで完結する小道具。プロジェクトを切らない。
- 30分プロトタイプ：Bolt.new / v0。複数画面の流れまで見たい。
- 本番：Cursor + Cloudflare Workers。継続して育てるプロダクト。
この3層が揃うと、思いつきを潰さずに済むようになります。「思いつきの数」よりも「思いつきが消える前に形にできるかどうか」のほうが大事、という景色が見えてきます。
次に試したい
Stateful Artifactsで、「個人開発タスクの可視化ダッシュボード」を作るプランがあります。複数のSaaSのMRRをそれぞれ手入力するだけのシンプルなUIで、月に1回ログを残せれば十分。新しいプロジェクトを切らずに、claude.aiの中だけで完結する個人ツールとして育てられるか、試せます。
「コードを書く前の数十分」をAIと一緒に過ごすほうが、結局トータルでは速い。これが、ここ1年で一番大きい作業観の変化として残ります。