目次
2026年10月12日更新：2026年10月8日の公式発表で Claude Design のベータが外れ、無料プランを含む全プランで使えるようになりました。専用画面 claude.ai/design は2026年12月14日に閉鎖されます。4章の利用条件とFAQをこれに合わせて直しています。
2026年9月26日更新：Claude Code の公式ドキュメントと公式ヘルプに合わせて3章を書き直しました。/design-sync は「リポジトリのデザインシステムを Claude Design に取り込む」コマンドで、デザインをコードへ渡す側は Claude Code への引き渡しと /design が受け持ちます。6月に増えた書き出し先の一覧も公式の発表どおりに直し、8月に Claude Code の同梱スキルになった /design の中身を足しています。
Claude Design は、会話でUIデザインやプロトタイプ、ワンページャーなどの視覚的な成果物を作れる Anthropic Labs のデザインツールだ（2026年4月17日に研究プレビューとして公開）。そして 2026年6月17日、デザインシステムの取り込みと、Claude Code との双方向同期（/design-sync、/design）を含む大型刷新が行われ、「デザイナーと開発者の往復」を一気に縮めた。さらに 2026年9月16日、Claude Cowork とチャットの統合にあわせて、Claude Design はどの会話の中でも動くようになった（専用画面 claude.ai/design は2026年12月14日に閉鎖される）。
本記事では、Claude Design とは何か・6月刷新の中身・/design-sync と /design の役割・利用条件・なぜ重要かを、公式情報に基づいて整理する。先に要点を3つ。① Claude Design は会話ベースのデザインツールで、作ったものをチャット・コメント・直接編集・スライダーで詰められる。② 6月の目玉は「自社のデザインシステムを取り込み、その実コンポーネントで作る」「Claude Code と双方向に同期する」こと。③ 2026年10月8日にベータが外れ、無料プランを含む全プランで使える（Enterprise は10月15日から既定でオン）。9月16日からはふだんの会話で「デザインを作って」と頼むだけで使え、/design-sync は Claude Code 側にある。
デザインとコードを、双方向に
— キャンバスとリポジトリを行き来する
/design-sync · /design ↔
Code→Design リポジトリのデザインシステムを /design-sync で取り込み、実コンポーネントで作る、
Design→Code 仕上がったデザインは Claude Code が引き継いで実装し、コードはライブプロトタイプとしてキャンバスに戻せる（/design）。
1. Claude Design とは
Claude Design は、「作りたいものを会話で説明すると Claude がデザインを生成し、チャット・インラインコメント・直接編集・スライダーで仕上げていく」ツールだ。作れるものは デザイン・インタラクティブなプロトタイプ・ワンページャーなどの視覚的な成果物だ（公式ヘルプ「Get started with Claude Design」）。公開時の告知ではスライドも挙がっていたが、2026年9月16日からはプレゼン資料には専用の Claude Slides が別に用意されている。2026年4月17日に 研究プレビューとして Pro / Max / Team / Enterprise 向けに公開され、最初の1週間で100万人以上が利用した。
モデルについて：4月の公開時点では Claude Opus 4.7（公式が“最も高性能なビジョンモデル”と表現）で動くとされていた。ただし 6月の刷新告知ではモデルが再言及されていないため、本記事では「6月版も Opus 4.7 で動く」とは断定しない（最新は公式で確認を）。AIデザインツール全般の比較は AIデザインツール比較 も参照。
2. 2026年6月の大型刷新
2026年6月17日の刷新で、Claude Design は「プロトタイプのおもちゃ」から 「ブランドに沿って実務をこなすワークスペース」へと位置づけが変わった。主な変更点はこうだ。
6月刷新の主な中身
/design-sync でデザインシステムを取り込み、仕上がったデザインは Claude Code に引き渡して続きを実装。/design ならコードをライブプロトタイプにもできる（§3）。要するに 「自社のブランドで作り、コードと往復し、企業ガバナンスにも乗る」方向への進化だ。
3. /design-sync と /design——デザインとコードの行き来
Claude Code には、Claude Design とつなぐコマンドが2つある。Claude Code の公式コマンド一覧によると、/design-sync は「リポジトリの React のデザインシステムを変換して Claude Design にアップロードし、生成されるデザインが実際のコンポーネントを使うようにする」スキルだ（/design-sync Acme DS のように名前も付けられる）。初回の同期はすべてのコンポーネントを検証するため、大きなリポジトリでは数時間かかることがある。claude.ai アカウントでの認可は /design-login で行う。
| 方向 | 使うもの | 何が起きるか |
|---|---|---|
| コード → デザイン（デザインシステム） | /design-sync | リポジトリのトークンとコンポーネントを読み取って Claude Design に取り込む。以後のデザインは自社の実コンポーネントから始まる。 |
| デザイン → コード（引き渡し） | Claude Code への引き渡し／/design | 仕上がったデザインを Claude Code に渡すと、スクショから作り直さず、既存の作業を引き継いで実装する。書き出しメニューの「Handoff to Claude Code」（ローカルのコーディングエージェントか Claude Code on the web）か、Claude Code から /design でデザインをコードベースに取り込む。 |
| コード → キャンバス（試作） | /design | 作ったコードをライブプロトタイプにして、キャンバスで詰める。 |
この分担は、6月の公式発表と公式ヘルプの記述による。/design-sync が向くのはデザインシステムがすでに React のコンポーネントとしてコードにある場合で、フォント・色・ガイドラインが中心のブランドのデザインシステムは、チャットでファイル・Figma のファイル・資料・ロゴから作るほうが合う（公式ヘルプ「Set up your design system in Claude Design」）。
/design は6月の発表から案内されていたコマンドで、2026年8月からは Claude Code の同梱スキルとして動く。ブリーフを渡すと UI のモック・画面遷移・ランディングページ・ポスターを1枚のキャンバスに複数のアートボードとして描き、Design アーティファクトとして公開する（公式ドキュメント「Artifacts」）。アートボードはデスクトップのブラウザで要素を選んで直接直せ、アートボードごとに PNG や PDF で書き出せる。どちらのコマンドも Anthropic API では使えるが、Amazon Bedrock・Google Cloud・Microsoft Foundry などのクラウド経由では使えない（claude.ai の機能を使うため）。仕様駆動の開発と相性が良く、仕様駆動開発の考え方とも噛み合う。
4. 利用条件
2026年10月12日時点の利用条件を、公式ヘルプと10月8日の公式発表で確かめるとこうなる。9月16日の統合で入口が専用画面から「ふだんの会話」へ広がり、10月8日にはベータが外れて無料プランでも使えるようになった。6月時点からの大きな違いはこの2つだ。
| 項目 | 内容 |
|---|---|
| プラン | Free / Pro / Max / Team / Enterprise の全プランで、既定でオン／Enterprise は2026年10月15日に既定でオンになり、それより前でもオーナーが組織設定の「Artifacts」から有効にできる |
| アクセス | ふだんの会話で頼む（入力欄の Output > Design からも選べる）／アーティファクトタブの Design テンプレート／Claude Code（/design）／iOS・Android アプリ／専用画面 claude.ai/design（2026年12月14日に閉鎖、デザインシステムは Claude の Artifacts ページから移行できる） |
| 対応環境 | web / デスクトップのキャンバスで編集でき、モバイルアプリでも依頼・閲覧・編集ができる（共有設定の変更は web / デスクトップ）／/design-sync・/design は Claude Code（デスクトップ・ターミナル）側 |
| 使用量 | チャットや Claude Code と同じ使用量上限から消費する（Claude Design 専用の枠はない） |
| 状態 | ベータ終了（4月17日 研究プレビュー → 6月17日 大型刷新 → 9月16日 会話の中で使えるように → 10月8日 ベータ終了、無料プランにも） |
混同しやすいのは 「キャンバス（web/desktop）」と「/design-sync・/design（Claude Code）」が別の場所にある点。デザインは会話の横に開くキャンバス（2026年12月14日までは claude.ai/design でも）で触り、コードとの同期は Claude Code のコマンドで行う——この役割分担が、デザイナーと開発者の橋渡しの肝だ。
5. なぜ重要なのか
これまで、デザインからコードへの移行は 「スクショを見ながら作り直す」になりがちだった。Claude Design ＋ /design-sync は、① 自社のデザインシステムを取り込んで“実コンポーネント”で作り、② デザインとコードを双方向に往復できることで、この断絶を埋める。エンジニアはゼロから組み直さず、デザイナーはコードの成果をキャンバスで磨ける。
つまり Claude Design は、「デザイナー × 開発者」の協働を一本の線でつなぐプロダクトだ。実装を素早く見せたいときは Claude Code Artifacts で共有ページにし、ブランド準拠のUIは Claude Design で——というように、Claude Code 周辺の新機能と組み合わせると効く。デザイン領域へのAI進出は競合（既存デザインツール）の株価が反応するほどのインパクトを持つ、と報じられている（具体的な数値は変動するため断定しない）。
Claude Design と同じ作成機能の仲間として、データのダッシュボードを作る Claude Dashboards と、説明アニメーションを作る Claude Motion もベータで加わりました。違いと使い分けはClaude Dashboards・Motion とはで説明しています。
まとめ
Claude Design（2026年4月研究プレビュー、6月17日大型刷新）は、会話でUI・プロトタイプ・ワンページャー等を作れる Anthropic Labs のデザインツールで、2026年9月16日からはどの会話の中でも使える。6月刷新の目玉は ① 自社デザインシステムの取り込み（実コンポーネントで構築）② Claude Code との行き来（/design-sync・引き渡し・/design） ③ キャンバスの直接編集 ④ 使用量上限の共有（“トークン浪費”の改善）⑤ エンタープライズのブランド管理 ⑥ エクスポート連携の拡充。
/design-sync は Claude Code 側のコマンドで、リポジトリの React デザインシステムを Claude Design に取り込む。仕上がったデザインは Claude Code への引き渡しか /design で実装に回し、/design はコードをライブプロトタイプにしてキャンバスへ戻すこともできる。利用は無料プランを含む全プラン（2026年10月8日にベータ終了）、専用画面 claude.ai/design は2026年12月14日に閉鎖、/design-sync は Claude Code。デザイナーと開発者の往復を縮めるのが本質だ。なお6月版のモデルは公式が再言及していない等、変わりうる点は最新の公式で確認を。関連：AIデザインツール比較、Claude Code Artifacts、仕様駆動開発。
FAQ
Q. Claude Design とは何ですか？
A. 会話でデザインを作れる Anthropic Labs のデザインツールです。作りたいものを言葉で説明すると Claude が UI・プロトタイプ・ワンページャーなどを生成し、チャット・インラインコメント・直接編集・スライダーで仕上げられます。2026年4月17日に研究プレビューとして公開され、最初の1週間で100万人超が利用しました。2026年9月16日からは、ふだんの会話で「デザインを作って」と頼むだけで使えます（アーティファクトタブの Design テンプレート、Claude Code、2026年12月14日までは専用画面 claude.ai/design からも可）。
Q. /design-sync は何をするコマンドですか？
A. リポジトリのデザインシステムを Claude Design に取り込むコマンドです。デザインシステムがすでに React のコンポーネントとしてコードにある場合に、トークンとコンポーネントを読み取ってアップロードし、以後 Claude Design が作るデザインが自社の実コンポーネントを使うようになります。初回は全コンポーネントを検証するので、大きなリポジトリでは数時間かかることがあります。逆向き（デザインをコードに、コードをキャンバスに）は、Claude Code への引き渡しと /design が受け持ちます。仕上がったデザインを Claude Code に渡せば、スクショから作り直さず既存の作業を引き継いで実装します。
Q. 2026年6月の刷新で何が変わりましたか？
A. 主に ①デザインシステムの取り込み（自社コンポーネントで構築し、出力を照合・補正）②Claude Code との行き来（/design-sync・引き渡し・/design） ③キャンバスの直接編集（ドラッグ/リサイズ/整列）④チャット・Cowork・Claude Code との使用量上限の共有による“トークン浪費”の改善 ⑤管理者がブランド標準を承認・ロックできるエンタープライズ管理 ⑥外部ツールへのエクスポート連携の拡充です。プロトタイプ用途から「ブランド準拠の実務ワークスペース」へ位置づけが進みました。
Q. どのプランで使えますか？
A. 2026年10月8日にベータが外れ、無料プランを含む全プラン（Free / Pro / Max / Team / Enterprise）で使えます（2026年10月12日時点の公式ヘルプ）。使用量はチャットや Claude Code と同じ上限から消費します。既定でオンで、Enterprise は2026年10月15日から既定でオンになります（それより前でもオーナーが有効にできます）。モバイルアプリでも依頼・閲覧・編集ができ、/design-sync と /design は Claude Code 側にあります。専用画面 claude.ai/design は2026年12月14日に閉鎖されるので、そちらのデザインシステムは早めに移行してください。
Q. どのモデルで動いていますか？
A. 4月の公開時点では Claude Opus 4.7（公式が“最も高性能なビジョンモデル”と表現）で動くとされていました。ただし 6月の刷新告知ではモデルが明示されていないため、「6月版も Opus 4.7」と断定はできません。モデルや仕様は更新されうるので、現在の正確な情報は公式ページで確認してください。
