プロンプトだけで、デザインがコードになった。Claude Design × Claude Code、やってみた話。

デザインが、ボトルネックだった

アイデアはある。言葉にもできる。でも、ビジュアルにできない。

エンジニアに頼む余裕はない。フリーランスデザイナーへの依頼は1件3万円以上。それを何度も往復する時間と費用が、ずっとネックだった。

「プロンプト書いたら、デザインになる。そのままコードにもなる。」

そういうツールが出た。2026年4月17日の話。

Claude Designとは何か

Anthropicが突然リリースした。名前は「Claude Design」。

ひと言で言うと、「プロンプトをデザインに変えるAIツール」。FigmaもCanvaもデザイナーも、いらない。裏で動くのはClaude Opus 4.7。Anthropic最新の視覚特化モデル。

作れるもの: UIプロトタイプ、LPワイヤーフレーム、ピッチデッキ、マーケバナー。

競合他社のツールは「複雑なページを再現するのに20回以上のプロンプトが必要だった」。Claude Designでは、2回。教育テクノロジー企業Brilliantのシニアデザイナーが実際に検証した数字。

Figmaの株価が、発表日に急落した。それだけのこと。

実際に使ってみた——操作の全工程

操作は、シンプル。難しいことは、何もない。

Step 1 — インプット
テキストで伝えるだけ。「シンプルなLP、作りたい。ターゲットはAIに興味のある20代〜30代。メインカラーはダークパープル。」それだけでいい。既存サイトのURLを貼れば、今のブランドカラーやフォントをそのまま読み込んでくれる。

Step 2 — 初版生成
Claude Opus 4.7が数秒で初版を出力する。「まず形にする」スピードが、尋常じゃない。

Step 3 — チャットで修正
「余白をもっと広く」「見出しのフォントを太くして」「右側の画像を削除」。会話するだけ。コードは書かない、触らない。

Step 4 — スライダーで微調整
Claudeが自動生成する「カスタムスライダー」が地味に天才。グロー効果の強度、要素の密度、テキストの重みを、ドラッグで直感的に操作できる。デザイン経験ゼロでも、感覚だけで動かせる。

Step 5 — 書き出し
PDF、PPTX、HTML、Canvaへの書き出し。そして——「Claude Codeに渡す」ボタン。

Claude Codeに渡してみた——ここが、核心

コードが書けない私が、なぜClaude Codeを使えるのか。

Claude Designでデザインが完成したら、ボタンを1回押す。それだけ。

Claudeが「ハンドオフバンドル」を自動で生成する。デザイン仕様、アセット、実装指示書がひとつにまとまったパッケージ。それをClaude Codeが受け取って、HTML・CSSに変換する。

私がやったこと: プロンプトを書いた。ボタンを押した。以上。

エンジニアへの説明資料を作る必要がない。仕様書の往復確認もない。「探索→プロトタイプ→本番コード」が、一人で完結する。

Claude Codeとの関係性は、いつも同じ。「私が考える、Claudeが実行する」。それだけ。

やってみてわかったこと——3つの気づき

① デザインシステムを読み込ませると、2回目以降が爆速になる
既存サイトのコードベースとデザインファイルを最初に読み込ませる。以降のプロジェクトは全部、自動でブランドカラー・フォント・コンポーネントに統一される。「うちのカラーは〇〇で、フォントは……」という説明、永遠に不要。

② 「往復コスト」が消えた
デザイナーへの説明資料。エンジニアへの仕様書。修正依頼のメール。全部、消えた。一人で探索→プロトタイプ→コードまで完結する。これが何を意味するか——時間だけじゃない。意思決定の速度が、変わる。

③ 今はまだベータ。完璧じゃない
Claude Designは現在リサーチプレビュー（ベータ）。複雑な実装は手直しが必要なケースもある。でも「たたき台が10分で完成する」なら、十分すぎる。完璧を待つより、使い倒しながら慣れた方が早い。

「デザインできないから作れない」は、もう言い訳にならない

使えるプランは Pro・Max・Team・Enterprise。Proプランに入っていれば、今すぐ追加費用なしで使える。

コードは不要。デザイン経験も不要。必要なのはプロンプトだけ。

アイデアを持っているのに、ビジュアルにできないから止まっている。そういう人が、世の中に多すぎる。

非効率は罪。Claude Designを使っていない理由、まだある？