デザイン分野におけるClaude Codeの時代が到来

Anthropic は本日、Claude Design をリリースしました。早速試してみましたが、その衝撃度は、当時初めて Claude Code でコーディングした時のそれと全く変わりません。flypig 氏の言葉を借りるなら、

「先ほど使ってみましたが、こう言えます：Claude Design は Google の Stitch をまるでジョークのように見せます。」

これがデザイン分野における Claude Code のモーメントです。「デザインは死んだ」「デザイナーは置き換えられる」といった大げさなことは言いませんが、ただ伝えたいのは、

アイデアから高忠実度インタラクティブプロトタイプ (high-fidelity interactive prototype) までのギャップはほぼ消滅し、非デザイナーがついに独立して納品可能なデザインを出力できるようになりました。一方、デザイナーの生産性は指数関数的に向上しますが、デザインアウトソーシングと従来のデザインツールは大幅に縮小せざるを得なくなるでしょう。

今日の Figma 株価の大幅な下落も、これを間接的に裏付けています。

完全な事例を一つご紹介します。これは約3回のやり取りで生成したデザイン作品ですが、単なる静的な画像やウェブページではなく、内部のリンクの大部分がクリックしてインタラクティブに動作します。

「writing agent の Mac App をデザインしてください。マルチワークスペース (multi-workspace) に対応し、workspace 内のドキュメント（markdown、文書ファイル）を確認できること。ドキュメントの手動編集に加え、agent を呼び出して markdown ドキュメントを編集することも可能であること。また、チャット会話の中でドキュメントの作成・編集も行えるようにしてください。」

正直、まだどのような仕様にするか決めておらず、AI に考えてほしいので、指示がかなり曖昧でした。

その後、AI 側からいくつかの質問が表示され、選択式（単一/複数）のほか、自分で入力するか、AI に判断を委ねるかのオプションがありました。

しばらくして確認すると、3つの案が提示され、選択できるようになっていました。まるでプロのデザイナーのように、まず要件を明確に確認してから、複数の異なる方向性を提示してくれました。

各結果は静的なラフ (static mockup) やウェブページではなく、すべてクリックしてインタラクティブに操作可能です。

確認後、案2と案3はどちらも良さそうだと感じましたが、それぞれ問題点もあったため、統合する必要がありました。そこで修正意見を伝え、Codex のスクリーンショットを参考として送付し、「案2と案3を統合し、Codex のデザイン要素も取り込んでください」と指示しました。

AI はすぐに新しいバージョンを提示してくれました。ほぼ私の望んでいた内容ですが、表現が不明確だった部分も含まれていました。例えば、「Documents」と「Chat」をタブで分離した点は、私の好きなデザインであり、私が想定していた「上下配置」よりも優れていました。

全体のデザインは満足しており、これ以上の要求は浮かびませんでした。あとは細部の調整です。ドキュメント編集履歴機能が実装されていなかったため、そこを補完するよう指示しました。

「現在のデザインを基に、history 部分をデザインしてください。ユーザーがドキュメントの編集履歴をより簡単に確認し、差分を比較できることを希望します。」

すぐに一版が出力されましたが、開いてみると、出来映えがイマイチでした。

修正を促そうとした瞬間、AI 自身がレイアウトの問題を検出し、自動的に修復していることに気づきました。

修復後のバージョンは非常に美しく、レイアウトの問題もありませんでした。さらに、任意の2つのバージョンを選択して変更点を比較することも容易に行えます。

左側のメッセージ履歴を見ると、自動修正機能 (auto-correction mechanism) が備わっていることがわかります。

最終的な出力物は、React コードとスタイルシートでした。

整个过程で特に驚いた点は以下の通りです：要件を能動的に質問してくる、複数の案を提示する、複数画像の混合参照を理解する、自己検出・自己修正を行う、出力が静的なラフではなく実行可能なコード (executable code) である。この協業モードは、これまで存在したどのデザインツールとも異なります。

Claude Design はいったい何なのか

まず基本情報から説明します。Claude Design は Anthropic Labs が本日リリースした新製品で、Claude Opus 4.7 を基盤としています。Pro、Max、Team、Enterprise の各サブスクリプションで利用可能ですが（Enterprise はデフォルト無効、管理者が有効化が必要）、claude.ai/design に直接アクセスするだけで利用できます。

インターフェースは非常にシンプルです：左側がチャット、右側がキャンバスです。何を望むか記述すると、AI が右側に描画します。チャット、インラインコメント、直接編集、または AI 自動生成のスライダーを使って修正できます。修正後は HTML、PDF、PPTX、ZIP としてエクスポートできるほか、Canva に送ってさらに編集したり、Claude Code に直接パッケージ化して製品コードとして実装したりできます。

一見すると「AI 版 Figma」に見えますか？いいえ、そうではありません。

Ryan Mather は Anthropic 内のデザインチームに所属し、7つのプロダクトラインを一人で担当しています。彼が本日投稿したツイートの中に、非常に重要な一文があります。

「Claude Design を従来のキャンバスツールの使い方では使わないでください。それは別種の生物であり、独自の超能力を持っています。正直に言えば、これはキャンバスタイプのデザインツールではなく、Claude Code に近いものです。」 https://x.com/Flomerboy/status/2045162328593670321

この一文が、Claude Design を理解するための鍵となります。

Figma や Canva との根本的な違い

過去1年間、Figma は AI を追加し、Adobe も AI を搭載し、Canva にも AI が導入されました。それらの論理はすべて同じです。人間中心のキャンバスツール（canvas tool）に AI プラグインを1層追加し、描画を少し速くしたり、コピーライティングを便利にしたりするものです。

Claude Design は別の道を進んでいます。AI が主要な生成者であり、人間が主要な審査者です。この仮説を軸に、ツール全体の骨格が構築されています。

この違いは抽象的に聞こえるかもしれませんが、製品化された際にはいくつかの非常に具体的な差異として現れます。

出力は実行可能なコードであり、静的なデザイン稿ではありません

上記の Mac アプリのケースでは、最終的に得られるのは React + CSS です。実際に動作するものであり、リンクはクリック可能で、タブを切り替えることができ、バージョン間の diff（差分確認）も可能です。これは「美しい UI 画像を生成する」という次元とは全く異なるものです。

コードリポジトリ（code repository）、PPT、ブランド資料をアップロードすると、色、フォント、コンポーネント、レイアウト規範を抽出し、以降のすべてのプロジェクトに自動的に適用します。Brilliant のデザイナーからのフィードバックによると、以前は他のツールで複雑なインタラクションを完了させるのに20回以上のプロンプトが必要だったものが、Claude Design ではわずか2回のやり取りで完了します。その理由は、すでにあなたの「デザイン言語」を認識しているからです。

コードを単なるスクリーンショットとして扱うのではなく、実際にコンポーネント構造、フレームワークパターン、ファイル構成を読み取ります。そのため、デザイナーが作業を終えて handoff（引き継ぎ）ボタンを押すと、エンジニア側で受け取るのは「この画像を再現してください」というものではなく、「既存のコンポーネントライブラリ（component library）に直接接続できる実装ドラフトです」というものです。

公式ブログでは、以下のような機能にも言及されています。Claude Design に一時的な専用ツールの生成を依頼できます。例えば、ブランドカラーパレット専用のカラーピッカー、カスタムな spec（仕様書）生成ツール、小さなインタラクションプロトタイプテストツールなどです。出力は「デザインファイル」に限定されず、「問題を明確にするためのあらゆる計算成果物」となります。

Datadog からのフィードバックも興味深いです。以前は brief（要件定義）→ mockup（モックアップ作成）→ review（レビュー）というプロセスを複数回跨ぎ、1週間かけて完了していたものが、今では会議の中で議論しながら完成したプロトタイプを制作でき、エンジニアが現場でデザイン対話に参加することさえ可能になりました。

これは「Figma の処理速度が30%向上した」といった最適化とは異なります。むしろ、別の作業スタイルと言えます。

公式ブログと現在公開されている使用シナリオから、Claude Design が少なくともカバーできる作業カテゴリは以下の通りです。

製品プロトタイプとインタラクションフロー。例えば私の Mac アプリのケース、あるいは5画面分の onboarding（オンボーディング）フロー、フィルターと詳細パネル付きの検索体験、承認ワークフローキューなどです。これが最も得意とする分野です。

プレゼンテーション資料（デック）。10ページのQ1結果デック、15ページの取締役会ロードマップ、顧客面談前資料、全社員向けデックなどです。PPTX 形式でエクスポートしてそのまま使用可能であり、Canva に送ってさらに編集することもできます。

マーケティング素材。ランディングページ、ソーシャルメディア用画像、イベントビジュアルなどです。

内部ツールのバックエンド（管理画面）。ダッシュボード、コンテンツ審査キュー、権限管理インターフェースなどです。このカテゴリは過去には専任のフロントエンドエンジニアを配置していましたが、今では PM（プロダクトマネージャー）自身が納品可能なプロトタイプを出力できます。

デザイン探索。一度に3〜5つの方向性を提示し、選択できるようにします。以前は「時間が足りないため2パターンしか作れません」という状況でしたが、今は「5案を出しますから、1つ選んでさらにブラッシュアップしてください」という流れになります。

また、公式が重点的に語ってはいませんが実際には重要な機能として：ビデオデモがあります。Ryan Mather 氏は、静的画像だけでなく直接ビデオ形式のプレゼンテーションを生成できることに言及しています。これは製品リリース、ユーザーテスト、投資家とのコミュニケーションにおいて新たな能力領域となります。

使用境界を一言でまとめると、構造が明確で情報ブロックがはっきりしており、インタラクションロジックが記述可能なものであれば、すべて高い品質で出力します。一方、曖昧な感情指向の純粋な芸術創作については、この分野を奪うために存在しているわけではありません。

Ryan Mather 氏が単独で7つの製品を担当しているという事実は、一つのシグナルです。これは2ヶ月前であれば不可能だったことです。

生産性は指数関数的に向上しますが、チーム規模が縮小する可能性が高いです。過去に1社で5人のデザイナーが必要だった業務が、今では1〜2人で完了でき、かつ個人あたりの出力量・品質も向上します。残った人材の価値はさらに高まります。彼らが携わるのは、判断力が真に求められる業務だからです：ブランドの方向性、主要なイラストレーション、ネーミング、戦略レベルの意思決定など。残りの80%の実務作業はモデルが引き受けます。

プログラミング分野では Claude Code が台頭し、AI を活用できるエンジニアの生産性が数倍に跳ね上がり、取り残された者は徐々に市場から排除されていきます。分析分野では各種 AI 支援データ分析により、アナリストは「SQL を書く人」から「AI と共に質問を投げかける人」へと変化しています。新しい専門分野が台頭するたびに、同じ軌道を描いてきました：1人あたりの生産量が急騰し、トップ層はより多くの成果を手にし、底辺層は機会が徐々に消えていくのを見守るだけです。デザイン分野もまさにこの転換点に差し掛かっています。

これは全く新しい能力です。以前はアイデアがあっても、スケッチを描いてデザイナーの順番を待つか、自分でダサい PPT を作って我慢するしかなかったものです。今ではアイデアを明確に記述すれば、エンジニアや投資家、顧客に直接渡せる完成品が得られます。

Figma、Adobe、Canva への影響

これは警鐘ですが、株価が10%下落したのは表面的な衝撃を反映したに過ぎない可能性があります。Ryan Mather 氏のツイートには、さらに深いシグナルが含まれています。Anthropic 自身のデザインチームは Claude Design を主力ツールとして使用しており、Figma は稀に言及される程度です。もし Anthropic のデザイナーが Figma を主に使わなくなっているなら、他のテクノロジー企業は何を根拠にそれを主力として使い続けるのでしょうか？さらに2〜3四半期後、企業の年度予算がデザインツールの経費を再編成し始めた時点で、既存ツリの継続利用数は株価よりもはるかに直接的な答えを示すでしょう。

再計算すべき事項が2つあります。1つ目はデザイン職員の定員です。Mather 氏が単独で7つの製品ラインをカバーしていますが、その背景には元々3〜5人のデザイナーが必要だった業務量が存在します。これを年度予算表に反映させれば、この数字が問われないはずがありません。2つ目はツールのサブスクリプションコストです。主力業務が単一製品でほぼ完結するようになれば、以前は Figma、Sketch、Notion、Miro、Keynote に分散していたアカウントが再評価の対象となります。

これは長らく待望されていた朗報です。デザインからエンジニアリングへの引き継ぎは、常に最も困難なプロセスの一つでした：デザイナーがビジュアルに基づき作成し、エンジニアがコードに基づいて実装し、その間には Figma 上の注釈と往復するレビューに頼るしかありませんでした。今では Claude Design から出力される成果物自体がコンポーネント構造と実装ドラフトを内包しており、実装コストが直接1桁分低下します。

Claude Design は現在 research preview（研究プレビュー）段階にあり、明確にするべき現実的な境界がいくつかあります。

監査ログや使用量の追跡機能がなく、データ駐留（Data Residency）にも対応していません。アップロードされたアセットは永続的に保存されます。コンプライアンス要件が厳格な企業に所属している場合、短期的には最高機密性の高いデザイン素材を直接アップロードしない方が無難です。

現在はウェブインターフェースのみ提供されており、API は公開されていません。自社製品に組み込みたい場合、現時点では不可能であり、Claude API と Agent SDK を基に同様の機能を独自構築する必要があります。ただし Claude Design の能力がこれほど強力な背景には、Opus 4.7 モデルのマルチモーダル能力（multimodal capability）の強化が最も重要であり、理論的には Opus 4.7 を使用しても同様の製品を構築できるでしょう。

しかし Claude Code と同様に、同じ Claude モデルを使用しているにもかかわらず、Claude Code は多くの面でより優れたパフォーマンスを発揮します。Anthropic 自身が新しいモデルを最大限に活用する方法を熟知していること、さらにユーザーの使用データやインタラクションに基づいて次世代モデルを訓練し、データフラインホイール（Data Flywheel）を形成できるという逆輸入の優位性があるからです。

この優位性は、短期的には OpenAI や Gemini などの他社がすぐに追いつくことはできません。

7日ごとにリセットされる週間使用枠（weekly allowance）

追加使用枠（extra usage）の購入可能

allowance の具体的な数値は非公開

PM／エンジニアが比較的一定のペースで mockup（モックアップ）を出力

追加使用枠（extra usage）の購入可能

allowance の具体的な数値は非公開

追加使用枠（extra usage）の購入可能

allowance の具体的な数値は非公開

各プロビジョニング済みユーザー（provisioned user）には、個別の週次利用枠（weekly allowance）が用意される

管理者は追加利用分（extra usage）を購入可能

週次利用枠（weekly allowance）の具体的な数値は非公開

各プロビジョニング済みユーザー（provisioned user）には、個別の週次利用枠（weekly allowance）が用意される

管理者は追加利用分（extra usage）を購入可能

週次利用枠（weekly allowance）の具体的な数値は非公開

Enterprise（エンタープライズ）の従来の席数制（seat-based）Standard/Premium

PM（プロジェクトマネージャー）／エンジニア／デザイン重ユーザー

各ユーザーが個別に週次利用枠（allowance）を享有

管理者は追加利用分（extra usage）を購入可能

週次利用枠（allowance）の具体的な数値は非公開

Enterprise（エンタープライズ）の従量制（usage-based）

席数制枠（seat allowance）は適用せず、標準的な API 料金体系で計算

一回限りのクレジット（credit）が付与され、典型的なプロンプト（prompts）約 20 回分に相当し、有効期限は 2026-07-17

本表は Anthropic 公式の Claude Design 価格設定ドキュメントに基づいて整理したものです。公式には週次利用枠（weekly allowance）の具体的な数値が公開されていないため、該当箇所はすべて「未説明」として記載しています。

私自身は Claude Max@5x のプランを利用していますが、アプリのデザインとスライドの生成をそれぞれ 1 回行うだけで、週次の利用枠が尽きてしまいました。

Claude Design で現在明確に公開されている唯一の基盤モデルは Claude Opus 4.7 です。公式には、ユーザーが Claude Design 内で Sonnet や Haiku に切り替えられるかどうかの記載がないため、この項目は「未説明／おそらく固定」と見なすべきです。同時に、Anthropic のモデル総覧ページでは現在の中核モデルの比較が示されており、Claude Design のモデル選定背景を理解する助けとなります。

Claude Design におけるモデルの対応関係

claude-opus-4-7

入力 $5 / MTok（百万トークン）；出力 $25 / MTok

テキスト＋画像入力対応；高解像度画像をサポート

Claude Design での採用が確認済み

claude-sonnet-4-6

入力 $3 / MTok（百万トークン）；出力 $15 / MTok

Claude Design に類似する自社構築ソリューションに利用可能

claude-haiku-4-5-20251001

入力 $1 / MTok（百万トークン）；出力 $5 / MTok

上記表のデータは Anthropic のモデル総覧から抜粋したものです。なお、「Claude Design での採用関係」は Claude Design の公式ブログから引用しています。

視覚仕様面において、Opus 4.7 は Claude モデルとして初めて高解像度画像をサポートするモデルであり、最大ネイティブ解像度は長辺 2576 ピクセルに達し、1 画像あたりの最大トークン数は約 4784 です。これは Claude Design に特に重要な要素であり、同サービスがスクリーンショット、ウェブページキャプチャ、プロトタイプ照合、ドキュメントの視覚的意味を大量に利用しているためです。同時に、Opus 4.7 は新しいトークナイザー（tokenizer）を採用しており、同じテキストを処理する際のトークン数（token）が Opus 4.6 よりも約 1x〜1.35x 多くなる可能性があります。これは、画像／コード／長文脈のシナリオにおいて、開発者が最大トークン数（max_tokens）を再計算する必要があることを意味します。

Claude Design がもたらすインパクトは、単なるデザイン分野における効率の向上にとどまらず、より深いパラダイムシフト（paradigm shift）と言えます。過去、デザイナーはキャンバス上で細部まで仕込みを手動で注釈をつけることに慣れ親しんでいましたが、現在では AI がアイデアから実行可能な高忠実度インタラクティブプロトタイプまで直接生成できるようになりました。これにより、デザイナーの役割は純粋な実行者から戦略的な意思決定者へと変化しています。この変化はデザイン分野だけでなく、プログラマー、アナリスト、マーケティング担当者、プロダクトマネージャーもすでに、またはまもなく同様の革命を経験するでしょう。

このような時代において、真に再定義されるのは私たちの働き方だけでなく、生産性と創造性に対する理解そのものです。AI は人間の美的判断、ブランドへの洞察、戦略的計画を代替するものではありませんが、その登場により、誰もが最も価値の高い能力に集中する機会を得られるようになりました。

おそらく数年後、私たちは今日の Claude Design を振り返り、現在の私たちが初めて Claude Code を使用したときのように見ているでしょう。歴史の分水嶺がいつの間にか訪れていたことに気づき、私たちがまさにその全く新しい未来へと歩み出していることを知るはずです。