Claude Design: サイドプロジェクトから100万ユーザーを抱えるビジュアルワークベンチへ

はじめに

Claude Designは、Anthropic社内における予期せぬ変化への実用的な対応として生まれた。

2025年秋、プロダクトデザイナーのNate Parrottは、Visual Studio Code拡張機能Claude Codeを開発する2名のエンジニアと共に働く唯一のデザイナーだった。彼らの目標は、Claude Codeのターミナルベースの機能をグラフィカルインターフェースに統合し、一般ユーザーがより簡単に理解・操作できるようにすることだった。

チームは9月末にベータ版をリリースした。その後、11月にClaude Opus 4.5が登場し、Parrottの周りのエンジニアたちはかつてないスピードで成果を生み出し始めた。

しかし、彼自身のデザインプロセスは同じペースで加速することはなかった。

Parrottはワークフローの再調整を待つのではなく、自身のペースについていくための小さなツールを余暇に構築した。このサイドプロジェクトはやがてClaude Designへと成長した——Anthropic Labsのプロダクトであり、リリース初週に100万人以上が利用した。

この物語は、単にAIデザインプロダクトがヒットした話ではない。一方で、AIが他のチームよりも先に組織内の一部のプロセスを加速させ、新たなボトルネックを生み出す様子、そして他方で、その不均衡の影響を受けた人々が同じ技術を活用して自身の働き方を再設計する方法を示している。

エンジニアリングの加速がデザインに先行

当初のチームは小規模だった。2名のエンジニアと1名のプロダクトデザイナー。

Opus 4.5のリリース前は、作業ペースはほぼ同期していた。エンジニアリングとデザインは共同で機能を進めることができ、いずれかの機能が他方を持続的にリードすることはなかった。

新しいモデルがリリースされると、このバランスは崩れた。

エンジニアはClaude Codeを活用して、より多くの作業を実装、テスト、修正、納品できるようになった。一方、Parrottは従来とほぼ同じペースでデザインを行っており、デザインがプロセスの中で遅い部分となった。

これは、AIアプリケーションのより広範な影響を示している。

AIはすべての役割を同等に、または同時に改善するわけではない。ある企業ではソフトウェア実装が加速しても、プロダクト戦略、デザインレビュー、法務承認、コンテンツ、テスト、カスタマーサポートは変わらないかもしれない。

結果は必ずしも即座の雇用代替ではない。より一般的なのは、その第一の影響として、関連するワークフロー間にミスマッチが生じることだ。

エンジニアリングのスピードが向上すると、組織の他の部分は新たな問いに答えなければならない。

• デザインは実装開始前に十分な方向性を探求できるか？
• プロダクトマネージャーは十分迅速に意思決定できるか？
• レビュー担当者は増大する変更の量を評価できるか？
• ブランド基準はより速い制作ペースに対応できるか？
• 開発者が構築を約束する前に、チームは合意に達することができるか？

Parrottの対応策は、プロセスの中でボトルネックとなっている部分のためのツールを作成することだった。

初期の試み：AIに「デザインをやらせる」

Claude Codeは主にテキストベースだったため、Parrottは当初これを

デザインを別のテキストタスクとして扱った。

彼はターミナル出力をClaudeにコピーし、インターフェースのスクリーンショットを追加し、機能を説明し、モデルにデザインを依頼した。

結果は期待外れだった。

問題はClaudeに視覚的またはコーディング能力が欠けていることではなかった。このリクエストは、モデルにビジュアルアイデアを表現、テスト、修正するための強力な媒体を提供していなかった。

チャット内のデザイン記述は、依然として単なる記述に過ぎなかった。それはクリックできず、サイズ変更できず、アニメーションを追加できず、操作可能なフローとして体験することもできなかった。

Parrottはこのサイドプロジェクトを約1ヶ月実験した。転機は、Claudeに抽象的に「デザイン」を生成させるのではなく、HTMLを作成するよう依頼したときに訪れた。

HTMLがビジュアルキャンバスに

HTMLは通常、ウェブサイトのフォーマットと見なされるが、Parrottはそれが広範なビジュアルおよびインタラクションの媒体として機能することを認識した。

ウェブページには以下を含めることができる。

• レイアウトとタイポグラフィ。
• 動きとアニメーション。
• インタラクションコントロール。
• クリック可能なプロトタイプ。
• チャートと図。
• スライド形式のシーケンス。
• ビデオとオーディオ。
• フォームとプロダクトフロー。
• 同じアイデアのレスポンシブバージョン。

これにより、HTMLは会話とビジュアルワークをつなぐ有用な橋渡しとなった。

Parrottは分割画面インターフェースを作成した。

• 左側はClaudeとの会話。
• 右側はリアルタイムのHTMLプレビュー。

ユーザーが変更を説明すると、Claudeが基盤となるページを更新し、結果がキャンバスに表示される。

これは静的な画像を生成するよりも有用だった。なぜなら、出力がプロダクトのように機能するからだ。ボタンは動作し、トランジションは実行され、プロトタイプは複数の状態を含むことができ、各画面を手動で描画してリンクする必要がない。

HTMLだけでは不十分

技術的に利用可能なプロトタイプでも、一貫性がなく見えることがある。

Parrottは、プロダクトデザインは各決定の背後にあるプロダクトとブランドを理解することに依存すると考えた。HTMLを作成する方法を知っているモデルが、Anthropicに属するフォント、色、コンポーネント、スペーシングルール、ビジュアル原則を自動的に知るわけではない。

そこで彼は、Anthropicのビジュアルシステムをツールの作業コンテキストに抽出した。

これには以下が含まれる。

• タイポグラフィ。
• 色選択。
• 既存アセット。
• インターフェースコンポーネント。
• レイアウトパターン。
• デザイン原則。

この変更により、生成される作品はランダムなAIインターフェースのように見えず、Anthropicのプロダクトファミリーの一部のように見えるようになった。

この内部実験は後にClaude Designの中核機能となった。

オンボーディングプロセスでは、Claude Designはコードベース、デザインリファレンス、スライド、ドキュメント、スクリーンショット、ロゴ、カラーパレット、タイポグラフィ仕様などのソースコードを分析できる。そして、色、タイポグラフィ、コンポーネントなどの要素を含む再利用可能なデザインシステムを生成する。

そしてレイアウトパターンも。

チーム版およびエンタープライズ版組織では、システムをチーム全体に公開できる。管理者は標準のシステムを承認し、編集権限を制限することで、プロジェクトが企業の規範と一致するようにできる。

プロトタイプがAnthropic内部で広まる

ParrottはHTMLワークフローとAnthropicブランドコンテキストを統合して、小さな内部プロトタイプを作成した。

プロダクトデザイナーはこれを使ってインタラクティブなプロトタイプを作り始めた。

従来のクリックスルーワークフローでは、デザイナーは各画面の各状態を描画し、手動で接続する必要があった。内部Claude Designプロトタイプを使えば、デザイナーは素材を提供し、期待される動作を説明し、Claudeに体験を実装させるだけでよい。

各結果は共有可能なリンクを生成する。

これにより、プロトタイプの位置づけが変わった。

もはやデザインアプリ内の単なるプライベートファイルではなく、同僚同士で開き、クリックし、議論し、修正できる共有ドキュメントへと変貌を遂げた。その動作方法は共有ドキュメントと全く同じである。

決定的な瞬間は、Anthropic研究所でのあるオフサイトイベントで訪れた。

Parrottは、参加者がこのツールを使ってクリエイティブ提案のためのプレゼンテーションスライドを作成するのを目撃した――時には、会議の真っ最中、自分の発表が目前に迫った中で慌てて仕上げることもあったという。

この自発的な採用により、研究所チームは、このサイドプロジェクトが実際のニーズを確実に満たしていると確信した。Claude Designは専任チームの支援を受け、非公式な内部実験から正式なプロダクトへと移行した。

Anthropic研究所が自然なインキュベーションの場である理由

Anthropic研究所は2026年1月にさらに拡張され、Claudeの新たな能力に基づく実験的プロダクトを専門にインキュベートする体制となった。

このチームは、独自のプロダクト開発モデルのために設けられた。

1. モデルの能力の限界に粗い実験を構築する。
2. 実際のユーザーに早期に試してもらう。
3. ユーザーが繰り返し選択するワークフローを観察する。
4. 有効性が確認された実験に人員とインフラを追加する。
5. 成功したアイデアを信頼性の高いプロダクトへと拡大する。

Anthropicは、Claude Codeがこの道筋の初期の成功例であると指摘する。研究プレビューから始まり、6ヶ月以内にAnthropicが10億ドル規模のプロダクトと呼ぶ製品へと成長した。

Claude Designも同様の成長軌道をたどる。

• 一人で構築されたサイドプロジェクト。
• 社内デザイナーに採用される。
• 同僚が、作成者の想定していなかった用途に使う。
• 社内提案会で明確なニーズが確認される。
• 研究所がリソースを割り当てる。
• 研究プレビューとして公開される。
• その後、テスト段階へ移行する。

このボトムアップのプロセスは極めて重要である。なぜなら、AIネイティブなプロダクトは、事前に仕様を明確に定義することが難しいからだ。モデルの能力は急速に進化し、ユーザーは当初のチームが予見していなかったワークフローを発見する。

今回のケースでは、人々がUIプロトタイプだけでなく、視覚的なコミュニケーションにも継続的に使用したため、プロダクトの適用範囲は拡大し続けた。

プロダクトプロトタイプからビジュアルコミュニケーションへ

Claude Designは当初、プロダクトデザインツールとして位置づけられていた。

しかし、この説明はすぐに狭すぎることが明らかになった。

チームはこれを使って以下を作成し始めた。

• インタラクティブなプロダクトプロトタイプ
• ワイヤーフレームとモックアップ
• デザインの探索案
• 提案用プレゼンテーションドキュメント
• プレゼンテーションスライド
• ランディングページ
• 印刷可能なシングルページドキュメント
• マーケティング素材
• 電子メール
• アニメーション効果
• ソーシャルメディア向けビジュアルコンテンツ
• コード駆動のビジュアル実験

Parrottはこのツールを、プロダクションレベルのプロダクトデザインの一段上の階層に位置づけている。その中核的な役割は、チームが開発に着手する前にアイデアを探索し、共有することだ。この区分により、より明確な役割分担が生まれた。

Claude Design	Claude Code
初期のビジュアル探索	プロダクションソフトウェア開発
プロトタイプとコンセプトテスト	実装とリポジトリ管理
デモとビジュアルコミュニケーション	コード修正、テスト、デプロイ
開発前の合意形成	方向性確定後の開発
編集可能なキャンバスとビジュアルコントロール	IDEおよびターミナルでのコーディングワークフロー

これらのツールは連携して使用できるが、互換性のある代替品ではない。

Claude DesignとClaude Codeの切り替え

Anthropicは、デザインとコード間の双方向ワークフローを新たに追加した。Claude Codeで以下のコマンドを使用する。

/design-sync

これにより、既存のデザインシステムをワークフローにインポートし、組織の現在のコンポーネントに基づいてビジュアル作業を進められる。以下のコマンドを使用する。

/design

ターミナル上でClaude Designプロジェクトの作成、編集、同期が可能になる。チームはどちらの方向からでも作業を開始できる。

Claude Designから開始する場合

1. 複数のビジュアル方向性を探索
2. 実際のインタラクティブプロトタイプを構築
3. フィードバックを収集し、チームの合意を得る
4. 成果物をハンドオフ用にパッケージング
5. Claude Codeで実装を継続

Claude Codeから開始する場合

1. 既存のアプリケーションやコンポーネントライブラリを基に作業
2. デザインシステムを同期
3. コードをリアルタイムのビジュアルプロトタイプに変換
4. Claude Designで微調整
5. 更新されたデザインの方向性をコードワークフローに持ち帰る

これは、単にスクリーンショットを開発者に渡し、期待通りの動作を再現させるよりもはるかに信頼性が高い。ハンドオフ内容には、動作中のプロトタイプと関連するデザインコンテキストが含まれ、平面画像だけではない。

デザインシステムが日常使用の中核に

Claude Designの初期の普及は、生成能力だけでは不十分であることを示していた。チームは、プロジェクト間で一貫性を保ち、既存のブランド体制を尊重するツールを必要としていた。Anthropicはデザインシステムのインポートワークフローを再構築し、ユーザーが以下のソースから1つまたは複数のシステムを導入できるようにした。

• GitHubリポジトリ
• コードベースとコンポーネントライブラリ
• デザインリファレンス
• プレゼンテーション資料
• ドキュメント
• スクリーンショット
• 生のブランドアセット

Claudeはこれらのコンポーネントを使用して構築し、システムに対して出力をチェックし、表示前に不整合を修正する。これにより、このツールは日常業務においてより実用的になった。使い捨てのAI生成ランディングページは印象的かもしれないが、実際の企業では定着しにくい。システム認識型ワークフローは、組織が毎回新しいビジュアル言語をゼロから作成するのではなく、既存の選択肢からスタートすることを可能にする。

直接編集で不要なプロンプト入力を削減

Claude Designのベータ版には、ダイレクトキャンバスコントロール機能が含まれている。ユーザーは以下の操作が可能だ。

• 要素を選択
• テキストを編集
• ドラッグして再配置
• オブジェクトのサイズを変更
• 色を変更
• 間隔を調整
• 要素を整列
• インラインコメントを追加
• Claudeにデザイン全体への変更適用を依頼

これが重要なのは、プロンプト入力が必ずしも調整ごとの最適なインターフェースではないからだ。

ユーザーは、タイトルを少し左に動かしたり、カードの幅を狭めたりするために、何文も入力する必要はない。小さなビジュアル修正は、直接操作の方がはるかに迅速だ。

Parrottは、広範な探索や構造的な変更にはClaudeを使用し、最終的な微調整は手動で行うことを推奨している。

直接編集は、目視で判断した方が簡単な変更にモデルトークンを消費するのを防ぐことにもなる。

エクスポートして他のツールで作業を継続

Claude Designは作品を以下の形式でエクスポートできる。

• PDF
• PPTX
• スタンドアロンHTML
• プロジェクトフォルダ
• 社内共有可能なリンク

Anthropicはさらに、作品を他のクリエイティブツールや開発ツールに送信するためのコネクタを提供している。

公式コネクタ一覧には、Adobe、Base44、Canva、Gamma、Lovable、Miro、Replit、Vercel、Wixが含まれており、今後さらに多くの宛先が追加される予定だ。

目標は、すべての専門ツールを置き換えることではない。

プレゼンテーションはClaude Designで作成を開始し、その後GammaやCanvaで続けることができる。コンセプトはMiroに移してコラボレーションできる。プロトタイプはReplit、Vercel、Lovable、Wixに移して、さらなる構築とデプロイが可能だ。

Claude Designは、初期のビジュアルワークスペースとして機能し、アイデアを手作業による再構築を最小限に抑えながら、次に適切なツールへと導く。

Claude Designが適さないシナリオ

Claude Designには明確な限界がある。

画像生成モデルではない

Anthropicは、Claude Designには専用の画像モデルがないと述べている。

そのため、最終的なロゴの生成や、ゼロからのオリジナル画像アセットの作成には適さない。

ユーザーは、既存のロゴ、製品画像、イラスト、写真、ブランドアセットを持ち込む必要がある。

Claudeは、より大きなビジュアルコンポジション内でこれらを配置し、使用することができる。

その他の制限

• このツールは高精度なピクセル完璧なデザインを目的としていない。
• 複雑なアニメーションやインタラクションは専門ツールに任せるべきである。
• Claude Design上で作成したデザインシステムは、コードベースへの直接同期にはまだ対応していない場合がある。
• チームは、生産コードの生成にはClaude Codeなどの専用ツールに依存すべきであり、

Claude Designはあくまでデザイン探索と合意形成のためである。

これらの制限は、AIネイティブなデザインツールが、人間の創造性と既存のワークフローを置き換えるのではなく、いかに補完するかを示している。

これは本番向けのソフトウェアプラットフォームではありません

Claude Design はインタラクティブなプロトタイプやコード駆動のビジュアル作品を作成できますが、Anthropic は本番向けソフトウェア開発には Claude Code の使用を推奨しています。

プロトタイプは意図した体験を伝えることはできますが、セキュリティ、アクセシビリティ、テスト、保守性、パフォーマンス、バックエンドの信頼性、または本番デプロイメントの要件を必ずしも満たしているわけではありません。

美的判断を代替するものではありません

Claude は多数のオプションを迅速に生成できます。

しかし、どの方向性が適切か、どのディテールが凡庸に見えるか、作品が正しい理念を伝えているか、何を削除すべきか、そしてプロトタイプが本番に影響を与える準備ができているかを判断するのは、人間でなければなりません。

デザイナーの役割は、各バリエーションを手作業で作成することから、方向性の設定、システムの構築、品質の判断、チームの調整へと移行します。

Claude Design をより効果的に使用するための実用的な方法

1. プロンプト前に考える

明確なブリーフは、曖昧なリクエストを繰り返し修正するよりも、通常、より良い結果をもたらします。

オーディエンス、目的、コンテンツ、期待される印象を定義し、

Claude に構築を依頼する前に、制約条件と出力形式を明確にします。

2. ビジュアルの方向性を説明する

ガイダンスがない場合、AI システムは一般的な美的スタイルに回帰する可能性があります。

フォント、カラー、参考事例、ムードボード、作品が避けるべき、または近づくべきサンプルオブジェクトを明確に指定します。

3. 再利用可能なデザインシステムを構築する

抽象的な仕様だけでなく、実際のブランド事例をアップロードします。

完全なランディングページ、プレゼンテーション、またはインターフェースは、カラーのリストだけよりも、ブランドのビジュアル特性を明確に示します。

4. 複数の方向性を生成する

複数のオプションを要求し、比較します。

生成速度を上げる目的は、最初の答えを受け入れることではなく、最終決定の前にさらに多くの可能性を探ることです。

5. テキストが不十分な場合はスケッチを使う

手描きのレイアウトは、長々としたテキスト説明よりも効率的に空間関係を伝えることができます。

6. ワイヤーフレームから始めて、後で詳細を追加する

コアとなる問題が構造やフローである場合は、ローファイのワイヤーフレームから始めます。

これにより、モデルは装飾的なスタイルではなく、階層とインタラクションに集中できます。

7. 最終段階は手動で処理する

直接編集により、最終的な配置、間隔、サイズの微調整などのビジュアル調整を完了します。

8. Claude に実際の製品コンテキストを提供する

既存のコードベース、デザインシステム、コンポーネント、インターフェースにアクセスすることで、Claude は実際の製品に適合する作品を生成できます。

Claude Design は誰が使用できますか？

Claude Design は現在ベータ版であり、以下のバージョンで利用可能です：

• Claude Pro
• Claude Max
• Claude Team
• Claude Enterprise

該当するサブスクリプションプランで使用でき、機能はアカウントの Claude 使用枠を消費します。

企業組織の場合、Claude Design はデフォルトでオフになっており、管理者が組織設定で有効にする必要があります。

Anthropic によると、組織範囲の共有により、デザインはプライベートに保たれ、リンク経由で同僚が閲覧したり、共同編集用にオープンにしたりできます。

製品の可用性とプラン条件は変更される可能性があるため、チームはワークフローを標準化する前に、現在の Claude Design ページとヘルプドキュメントを確認する必要があります。

よくある質問

Claude Design とは何ですか？

Claude Design は Anthropic Labs の製品であり、会話と直接編集を通じてビジュアル作品の作成と洗練をサポートします。プロトタイプ、プレゼンテーション、ランディングページ、単一ページの作品、アニメーション、マーケティング素材、その他の HTML ベースのインタラクティブな成果物を生成できます。

Claude Design は誰が作成しましたか？

初期の内部プロトタイプは、Anthropic のプロダクトデザイナー Nate Parrott によって開発されました。Claude Code がエンジニアリングチームの納品速度を既存のデザインワークフローを超えて向上させた後、彼は個人のサイドプロジェクトとしてこのツールを作成しました。

Claude Design は本当に 100 万人のユーザーに達しましたか？

Anthropic によると、Claude Design はリリース初週に 100 万人以上のユーザーが使用しました。このデータは、Anthropic の 2026 年 6 月の製品アップデートで発表されました。

Claude Design はどのように HTML を使用しますか？

Claude は、デザインを説明したり静的な画像を出力したりするだけでなく、ビジュアル作品をインタラクティブなウェブコンテンツとして生成します。HTML は、レイアウト、コントロール、アニメーション、プロトタイプ、スライド、その他のビジュアル体験に柔軟な作成キャンバスを提供します。

Claude Design は既存のブランドシステムを使用できますか？

はい。

コードベース、コンポーネントライブラリ、プレゼンテーション、ドキュメント、スクリーンショット、ロゴ、カラー、フォント、その他の素材を分析し、再利用可能なデザインシステムを生成できます。チームやエンタープライズユーザーは、共有システムを公開してプロジェクトで使用できます。

Claude Design はロゴを作成できますか？

Anthropic によると、Claude Design には画像生成モデルが含まれておらず、ロゴの作成には適していません。既存のロゴや画像素材はアップロードし、デザイン内で使用する必要があります。

Claude Design と Claude Code の違いは何ですか？

Claude Design は、初期のアイデア出し、プロトタイピング、ビジュアルコミュニケーション、チームの調整に適しています。Claude Code は、本番向けソフトウェアの実装と保守に推奨されるツールです。

どのプランに Claude Design が含まれていますか？

Claude Design は現在、Pro、Max、Team、Enterprise ユーザー向けにパブリックベータ版として提供されています。エンタープライズ管理者は先に有効化する必要があり、その後組織メンバーが使用できます。

関連ツール

• Claude Design：Anthropic のビジュアルワークスペース、プロトタイプ、プレゼンテーション、ランディングページ、ブランドクリエイティブ作業向け。
• Claude Code：Anthropic のコーディングエージェント、リポジトリ作業、実装、テスト、ソフトウェア開発向け。
• モデルコンテキストプロトコル：AI アプリケーションを外部ツール、サービス、データに接続するためのオープンプロトコル。
• Canva：Claude Design の編集可能な作品を受け取れるコラボレーションデザインプラットフォーム。
• Miro：Claude Design と連携するコラボレーションビジュアルワークスペース、チームの洗練と統合に役立つ。
• Vercel：Web 開発およびデプロイメントプラットフォーム、Claude Design の接続先の 1 つ。

関連リンク

• Nate Parrott の Claude Design 振り返り：クリエイターによる一人称の語り、製品がどのように生まれ、彼がそれをどう使っているか。

• Claude Design 紹介：Anthropic の正式リリース発表、機能概要、プラン利用可能性、エクスポートオプションを含む。

• Claude Design 100万人ユーザー更新：Anthropic の更新、初週の採用状況、デザインシステム、Claude Code 同期、編集、コネクタに関する情報。

• Claude Design システムの設定：ブランド素材のインポートと再利用可能なチームデザインシステムの公開に関する公式手順。

• [Anthropic Labs 紹介](https://www.anthropic.

• Anthropic Labs のご紹介：Anthropic が、Claude Design の背後にある実験的プロダクト孵化チームについて説明した内容。

• VS Code 上の Claude Code：Parrott が当初設計を支援した、グラフィカルな Claude Code インターフェースの公式ドキュメント。

• Claude Opus 4.5 の紹介：2025年11月にリリースされた、エンジニアリングの加速に関連するモデルバージョン。

これらはパロットのストーリーの中で述べられている。

概要

Claude Design の誕生は、あるデザイナーが、2人のエンジニアのスピードに追いつく必要性から生まれた。Claude Opus 4.5 のリリース後、この2人のエンジニアのアウトプット効率は大幅に向上していた。

ネイト・パロットの突破口は、AI にデザインを抽象的な回答として生成させるのではなく、Claude に HTML キャンバスを提供し、そこに会社のブランド体系を組み込み、結果をインタラクティブで共有しやすい形にしたことにある。

社内でこのツールが使われるようになると、もともと副業プロジェクトだったものが、Anthropic Labs の正式な製品へと発展した。Claude Design は、ローンチから最初の1週間でユーザー数が100万人を突破し、徐々にプロトタイピング、プレゼンテーション資料、ランディングページ、モーション、シングルページ概要、その他のビジュアルコミュニケーションコンテンツをサポートするクリエイティブスペースへと拡大した。

この製品は、プロダクションレベルのコーディングやプロフェッショナルな画像生成、人間のデザイン判断を代替するものではない。その価値は、より上流の段階にある。すなわち、より多くの方向性を探り、アイデアを具体化し、チームの合意形成を促進し、最終的な実装を担当するツールや人に、より成熟したコンセプトを引き渡すことにある。

AI によって実現プロセスがますます高速化する中で、デザイナーの最も価値ある仕事は上流へとシフトしている。つまり、一つ一つの画面を描くことから、適切な方向性を選び、システム体系を定義し、チームが「何を構築すべきか」について合意するのを助けることへと移行しているのだ。