Claude Designは、チャットで頼むだけでデザイン、プロトタイプ、1枚資料を作れるAnthropicのツールです。2026年10月時点では無料のFreeを含む全プランで使え、専用の追加料金はありません。Enterpriseでは10月15日から既定でオンになり、独立サイトの claude.ai/design は12月14日に閉鎖されます。
つまり今は、使い方を覚えるだけでなく「組織として設定を決め、既存データを移す」時期です。Claude Codeとは /design-sync と /design で行き来できますが、利用上限はClaude Codeと共有です。
この記事でわかること
- Claude Designが何をするツールで、Figmaやチャットの画像生成と何が違うか
- 会話から最初のデザインを作り、書き出すまでの手順
- 無料で使える範囲と、利用上限がClaude Codeと共有される点
/design-syncと/designを使ったClaude Codeとの往復の流れ- 法人が決めるべき設定と、12月14日までの移行チェックリスト
Claude Designは「会話の横にキャンバスが出る」デザインツール
Claude Designは、Claudeとの会話の横にキャンバスを表示し、そこでデザインを作って直せるツールです。画像を1枚吐き出す生成AIとは違い、余白や色を後から編集できる「作業場」が付いてきます。
画像生成ではなく、編集できる成果物を作る
画像生成AIは、完成した1枚の画像を返して終わりです。Claude Designはチャットで目的や対象を伝えると、インタラクティブなプロトタイプ、ワイヤーフレーム、ピッチ資料、マーケ素材といった成果物をキャンバスに出します。キャンバス上で直接動かしたり、余白・色・レイアウトの調整コントロールで整えたりできます。
組織のデザインシステムを取り込んでおけば、新しく作るものに自動で適用されます。毎回ゼロから頼む使い方と違い、色やフォントの決まりを先に読み込ませておけるので、会社のトーンから外れた画面が出にくくなります。
提供開始から閉鎖までの日付一覧
導入判断では「いつ何が変わったか」を取り違えやすいので、日付を表にしました。
| 時期 | 出来事 |
|---|---|
| 2026年4月17日 | Anthropic Labs製品として発表。研究プレビュー。Enterpriseは既定オフ（Anthropic公式発表） |
| 6月17日（現地） | ベータへ移行。デスクトップアプリにサイドバー「デザイン」を追加。デザインシステムの取り込み、Claude Codeとの双方向連携が加わった（ITmedia） |
| 9月16日 | 任意の会話でデザイン・スライド・ドキュメントを依頼できるようになった（公式リリースノート） |
| 10月8日 | ベータが終わり、Freeを含む全プランで正式提供になったと報じられている（窓の杜、PC Watch） |
| 10月15日 | Enterpriseで既定オン（公式ヘルプ） |
| 12月14日 | 独立サイト claude.ai/design が閉鎖。以降は読み取り専用（公式の移行ガイド） |
10月8日の正式提供は、報道ベースの情報です。公式リリースノートで同日のエントリは確認できていません。日付を稟議書に書くなら、10月15日と12月14日の公式ヘルプを根拠に使うのが安全です。
同時期に出た別機能との混同に注意
10月8日の前後には、DashboardsやMotionも発表されています。これらは別の機能で、Enterpriseでは既定で無効のままです。10月15日に既定オンになったのはDocs・Slides・Designです。DashboardsはClaude Dashboardsとはで別に整理しています。
使い方は「文脈を渡す→依頼→3通りで直す→書き出す」の7ステップ
最初のデザインを作るまでの流れは、公式の手順に沿えば迷いません。コツは、依頼文を書く前に素材を渡しておくことです。
入口と7ステップの手順
入口は4つあります。会話で依頼する、Output > Designを選ぶ、ArtifactsタブのDesignテンプレートを使う、Claude Codeから /design を呼ぶ。iOS/Androidアプリでも閲覧と編集ができますが、共有設定の変更はWebかデスクトップアプリで行います。
- 新しいデザインを開始する
- デザインシステムを添付または取り込む（GitHubリポジトリ、デザインファイル、アップロード。ローカルのコードベースは
/design-sync） - スクリーンショットなどの文脈を追加する
- 目的、レイアウト、内容、対象ユーザーを書く
- キャンバスで出来を確認する
- 修正する
- 書き出すか共有する
手順2と3を飛ばして4から入ると、デザインシステムも参考画面もない状態で生成することになり、汎用的な見た目になりやすくなります。既存の画面のスクリーンショットを1枚添えるだけでも、依頼の前提を伝えられます。
修正は粒度で3つの手段を使い分ける
修正の手段は粒度で選びます。
| 直したい内容 | 使う手段 |
|---|---|
| 構成そのものを変えたい（大きな変更） | チャットで指示する |
| 一部の文言や要素だけ直したい | インラインコメントを付ける |
| 色や余白など見た目を微調整したい | キャンバスを直接編集する |
大きな変更をコメントで少しずつ直そうとすると、往復が増えて利用枠も減ります。構成が違うと感じたら、迷わずチャットで言い直したほうが早いです。
書き出し先と共有の初期値
書き出しは .zip、PDF、PPTX、Google Slides、スタンドアロンHTMLに対応しています。Canva、Lovable、v0、Vercel、Netlifyなどの外部ツールへ渡す経路もあり、公式ヘルプでは約15の書き出し先が挙げられています。Claude Codeへの引き渡しも、この書き出しの1つです。
共有の初期値は非公開です。閲覧、コメント、編集の権限を人ごとに付けられるほか、組織内スコープの共有もあります。リンクを知る組織内の人が閲覧でき、同僚が編集できる設定です。
料金は専用の追加費用なし、ただし利用枠をClaude Codeと分け合う
Claude Designに専用の追加料金はありません。プランの利用上限の中で動き、その上限はClaude Codeなど他の機能と共通です。2026年10月29日時点の公式料金ページの表記は次のとおりです。
プラン別の月額と、Freeで何ができるか
| プラン | 料金（米ドル） |
|---|---|
| Free | 0ドル。Claude Design・Slides・Docsが含まれる |
| Pro | 年払い月17ドル（一括200ドル）、月払い月20ドル |
| Max | 月100ドルから |
| Team 標準席 | 年払い月20ドル／席、月払い月25ドル／席 |
| Team プレミアム席 | 年払い月100ドル／席、月払い月125ドル／席 |
| Enterprise | 席料金とAPI使用量の課金を組み合わせる形。契約条件は料金ページで確認が必要 |
日本円での価格は公式から確認できていないため、為替で計算した数字は書いていません。
Freeで使えるかどうかは、情報が割れやすい論点です。料金ページの比較表ではFreeにもDesignが含まれ、全プランで提供と読めます。「無料では使えない」と書いた記事は、正式提供前の古い情報です。
一方で、Freeの具体的な生成回数や上限は、公式で確認できていません。デザインシステム機能がPro以上に限られるという情報は個人ブログに見られますが、公式の文言では裏が取れていないため、業務で使う前に自分のプランで画面を確認してください。
利用上限の共通化がClaude Code側に響く
注意したいのは、Designの利用がチャット、Cowork、Claude Codeと同じ上限に算入されることです。大きなデザインを何度も作り直すと、その分だけ上限に近づきます。上限に達すると、利用クレジットを有効にしていない限り、リセットまで使えません。
開発チームで起こりがちなのは、午前中にDesignで試行錯誤を重ねた結果、午後のClaude Codeでの実装が上限にぶつかる場面です。導入前に見落としやすい点です。デザイナー向けの検証期間は、開発者のアカウントと分けて運用すると影響を避けやすくなります。
Claude Code連携は「デザイン→コード」と「コード→デザイン」の往復
Claude Codeとは両方向でつながります。デザインを実装へ渡す流れと、実装済みのコードからデザインシステムを作る流れです。Claude Code自体の基本はClaude Codeとはを参照してください。
デザイン→コード：1つの指示で実装に渡す
完成したデザインは、ハンドオフ用のバンドルにまとめてClaude Codeに渡せます。現在のヘルプでは、ローカルのエージェントとClaude Code on the webの両方が引き渡し先です。受け取る側は、画面の見た目だけでなく、キャンバス上で決めた構成を前提に実装を始められます。
コード→デザイン：既存コードベースをデザインシステムにする
逆向きの流れが、日本企業の現場では効きます。Claude Code側で /design-sync を実行すると、ローカルのコードベースからデザインシステムを同期できます。/design なら既存のデザインを取り込めます。プロトタイプをコードとして書き出す依頼や、プロジェクト全体の構築依頼にも対応します。
6月のアップデートでは、ターミナルを離れずにデザインの作成・編集・同期ができるとも報じられました。デザイナーがFigmaで作ったものを待つのではなく、実装の現状に合わせたデザインをその場で作れます。
PM・デザイナー・フロントエンドの役割分担
連携を前提にすると、役割は次のように整理できます。
| 役割 | 担当すること |
|---|---|
| PM | 目的と対象ユーザーを書いて初案を作り、仕様の認識合わせに使う |
| デザイナー | デザインシステムの管理、初案の磨き込み、承認 |
| フロントエンドエンジニア | /design-sync でコードとデザインシステムを揃え、引き渡されたデザインを実装・レビュー |
本番コードの品質に対する責任は、実装した人が負います。Claude Designが出したコードの品質保証を、公式は明記していません。レビューを省略する理由にはならないということです。
ここまでの運用をチームで定着させるには、使い方の型を揃える必要があります。AI駆動開発研修では、設計から実装、レビューまでAIを組み込んだ開発の進め方を実務の題材で身につけられます。Claude Codeを中心に据えたいチームには、Claude Code研修もあります。
非エンジニアがPM側でClaude Codeまで触る場合は、Claude Code非エンジニア活用が参考になります。
法人が今決めること：設定の二系統、Enterpriseの既定オン、12月14日の移行
法人の担当者が確認すべき論点は、設定、権限、データの保持、移行の4つです。個人向けの解説では触れられにくい部分です。見落とすと「知らない間に全社員が使えていた」「期限後にデータが消えた」ことになりかねません。
管理設定が二系統あり、片方だけでは有効にならない
設定は2か所に分かれています。会話内のDesignテンプレートはArtifactsの管理設定、独立サイト claude.ai/design はOrganization settingsの Claude Design が受け持ちます。片方をオンにしても、もう片方は有効になりません。
Teamは既定でオンで、Enterpriseも10月15日から既定オンです。オーナーは前倒しで有効化もできます。ただしEnterpriseのデザインシステムは、既定でオフのままです。
Enterpriseでは、カスタムロールでArtifacts配下のDesign権限を制御できます。デザインシステムは誰でも作成・編集できますが、Enterpriseのオーナーは公開できる人の制限、組織の既定設定、削除ができます。
規制の強い業種では「既定オン」が最初の論点になります。情報システム部門が把握していない状態で全社員が使えるので、10月15日以降の設定を今すぐ画面で確認するべきです。
データの扱いは、公式に書かれた範囲と未確認の範囲を分ける
公式ヘルプに書かれているのは、実行環境の分離です。プレビューはAnthropicが運営する別ドメインのサンドボックスで動き、Claudeのアカウントやログイン情報にはアクセスできません。共有権限は短寿命の署名付きトークンで都度検証され、権限を外せば即時に反映されます。
反対に、Design固有のデータ学習への利用、保持期間、SOC 2などの認証取得は、確認できた公式ページに記述がありません。断定できないので、実データを入れる前に、契約プランの条件と社内規程をセキュリティ部門と突き合わせてください。個人情報や基幹システムとの連携を伴う場合は、エンジニアと関係部門にも早めに声をかけてください。
保持期間にも注意が要ります。保持期間の設定がArtifactsに及ぶ場合、移行後の期間中に誰も開かなかったプロジェクトやデザインシステムは、完全に削除される可能性があります。開くか編集すれば、時計は再開します。
12月14日までの移行チェックリスト
独立サイトは12月14日に閉鎖され、以降は読み取り専用で、新規作成はできません。それまでは使えます。移行の手順は公式の移行ガイドに沿って次の順で進めます。
- 自社の契約が移行できる条件か確認する（下の制約表を参照）
- Artifactsページのバナー「Move team design systems」で、組織全体のデザインシステムを一括移行する
- 各プロジェクトの所有者が、自分のプロジェクトを個別に移行する（プロジェクトはArtifactsページの1アーティファクトになる）
- 移行できなかった資産を .zip などでダウンロードする
- チャットとコメントの扱いを決める
- 公開リンクを使っている場合は、閉鎖時に無効になるので共有先へ周知する
- 移行が漏れた分は「Move again」で再移行する
押さえておく仕様もあります。デザインシステムの移行では、空のものと組み込みのスターターテーマ由来のものは移行できません。所有者と共有設定は維持され、退職者のものはPrimary Ownerに移ります。Claude側ですでに変更したものは上書きされません。移行済みの独立サイト側は読み取り専用になり、元に戻せません。
特に見落としやすいのが、チャットとコメントは移行されないことです。閉鎖後しばらくして、Anthropicのデータ保持方針に沿って削除されます。議論の経緯を残したい場合は、閉鎖前に別の場所へ控えておく必要があります。
契約形態による制約も表にまとめます。
| 条件 | 移行の扱い |
|---|---|
| TeamとEnterprise共通 | Artifactsの有効化が前提 |
| CMEK（顧客管理の暗号鍵）を使う組織 | プロジェクトを1件ずつ移行（一覧・デザインシステム・一括移行は未対応） |
| HIPAA対応組織 | 現在、プロジェクトの移行は不可（一括ダウンロードも対象外） |
| ZDR（データを保持しない契約）の組織 | プロジェクトは移行不可で、Artifactsも有効にできない。閉鎖前にダウンロード |
| 「Move everything」の実行 | OwnerまたはPrimary Ownerのみ（Adminは不可） |
一括ダウンロードの機能は展開中で、それまでは個別に .zip をダウンロードする運用になります。公式の移行ガイドは更新日が「今週」としか示されず、具体的な日付を確認できませんでした。作業の直前に、最新の文面を読み直してください。
どの部署から試すか
まず1つのチームだけでデザインシステムを作り、12月14日の前に移行まで一度通すのが堅実です。全社展開の前に、移行で何が消えるかを実機で確認できます。ClaudeのCoworkとCodeの違いを踏まえた権限設計は、Claude の Cowork と Code の違いが役に立ちます。
よくある質問
Claude Designは無料で使えますか？
使えます。2026年10月時点の公式料金ページでは、FreeにもClaude Designが含まれます。具体的な生成回数の上限は公式で確認できていません。デザインシステム機能の条件は、自分のプランの画面で確認してください。
Claude DesignはFigmaの代わりになりますか？
公式の比較は確認できていません。Figma系やCanvaへ書き出せることは公式ヘルプにあります。置き換えか併用かは、自社のデザインシステムの運用実態で決める話です。
12月14日を過ぎたら、独立サイトのデータはどうなりますか？
閉鎖後は読み取り専用になり、新規作成はできません。チャットとコメントは移行されず、しばらく後に削除されます。公開リンクも閉鎖時に無効です。
Claude Designの利用はClaude Codeの上限に影響しますか？
影響します。Designの利用は、チャットやClaude Codeと共通の上限に算入されます。大規模な作り直しを繰り返すと、Claude Codeの枠が先に尽きる場合があります。
Enterpriseで既定オンになるのを止められますか？
オーナーが設定画面で管理できます。ただし設定は二系統で、片方のオンオフでもう片方は変わりません。両方を確認してください。
まとめ
今週やることは3つです。管理画面でDesignの二系統の設定を確認する。12月14日の期限を移行担当者のカレンダーに入れる。Claude Codeの上限を食い合わないよう、検証用のアカウントを分ける。
使い方は、会話で依頼し、キャンバスで直し、必要ならClaude Codeに渡すだけです。迷うのは機能ではなく運用で、特に保持期間による削除とチャット・コメントの非移行は、後から取り戻せません。
次の一手は、1チームで移行まで通した手順書を作ること。それを元に全社の方針を決めれば、判断が早くなります。
デザインから実装、レビューまでAIを組み込む開発体制を社内に作るなら、AI駆動開発研修で、チームの共通の型を短期間で揃えられます。
