Claude Designは、テキストの指示や画像・資料・コードベースをもとに、デザインやプロトタイプ、スライド、ワンページャーといったビジュアル成果物をClaudeと一緒に作るAnthropic Labsの新製品です。2026年4月17日に研究プレビューとして公開され、2026年6月17日には大型アップデートが入りました。デザインシステムの取り込み、Claude Codeとの双方向連携、トークン消費の改善などが加わり、思いつきから完成物までを1つのワークフローで進められる方向に踏み込んでいます。この記事では、Claude Designでできること、基本的な使い方の手順、6月アップデートで変わった点、Claude Codeとの連携手順までを整理します。
運営者情報
AI JOURNALは一般社団法人 日本AI導入支援協会が運営する、日本企業のAI活用支援を目的としたメディアです。記事制作にあたっては、経済産業省「AI事業者ガイドライン」をはじめとする公的機関の公表情報等を参考にしています。内容の正確性には十分配慮していますが、誤りや更新漏れがある場合は、お問い合わせフォームよりご連絡ください。掲載情報は公開日時点のものであるため、最新情報は公式サイト等でご確認ください。
Claude Designとは何か
Claude Designは、ChatやClaude Code、Claude Coworkと同じAnthropicのプロダクト群に並ぶデザイン制作ツールです。使われているモデルは、Anthropicで最もビジョン性能が高いとされるClaude Opus 4.7です。レイアウトや配色、タイポグラフィといった見た目の判断を、このモデルが担います。
位置づけとしては、Figmaのような既存のデザインツールを、生成AIを前提に置き換えることを狙ったプロダクトです。AnthropicのCPOであるMike Krieger氏が公開直前の2026年4月14日にFigmaの取締役を退任したことも、この領域への本気度の表れとして報じられました。ラフなアイデアから完成物までを自社のプロダクトだけで仕上げられるようにする、という狙いがはっきり出ています。
対応プランはClaude Pro、Max、Team、Enterpriseで、いずれも追加料金なしで使えます。Enterpriseの組織では既定でオフになっており、管理者が有効化する形です。現時点では研究プレビュー（research preview）での提供です。
Claude Designでできること
Claude Designの基本は、指示や素材をもとにClaudeが下書きを作り、それを画面上で直接修正し、必要な形式で書き出すという流れです。大きく分けて、入力・編集・出力の3段階で成り立っています。
入力ソースは幅広く用意されています。テキストプロンプトから始めるほか、画像やDOCX・PPTX・XLSXといった文書をアップロードして素材にできます。自分のコードベースを参照させてアプリの実装に沿ったデザインを起こすこともでき、ウェブキャプチャツールで既存サイトの要素を直接取り込むこともできます。
生成後の編集は、画面上のキャンバスで完結します。特定の要素にインラインでコメントを付けて直しを指示する、テキストを直接書き換える、間隔や色・レイアウトを調整スライダーで微調整するといった操作が可能です。後述するデザインシステムを読み込ませておけば、配色やタイポグラフィ、コンポーネントが自動で適用されます。
仕上げた成果物の出力先も複数あります。
- 組織内で共有できる内部URL
- フォルダとして保存
- Canva、PDF、PPTX、単体のHTMLファイルへの書き出し
- Claude Codeへのハンドオフ（実装への引き継ぎ）
主な使いどころは、動くプロトタイプ、製品のワイヤーフレームやモックアップ、デザイン方向性の複数案出し、ピッチデックやプレゼン資料、マーケティング素材などです。デザイナーでなくても、指示文と手元の資料から体裁の整ったビジュアルにたどり着ける点が特徴です。
Claude Designの使い方の手順
基本的な流れは次のとおりです。
- 入力を決める。テキストで作りたいものを指示するか、画像・DOCX/PPTX/XLSX・コードベース・既存サイトのキャプチャを素材として渡す
- 最初のデザイン案を生成させる
- キャンバス上で直す。要素へのインラインコメント、テキストの直接編集、間隔・色・レイアウトの調整スライダーで詰める
- デザインシステムを読み込ませ、配色・タイポグラフィ・コンポーネントを統一する
- 出力する。内部URLでの共有、フォルダ保存、Canva/PDF/PPTX/HTMLへの書き出し、またはClaude Codeへのハンドオフを選ぶ
最初から完成形を一発で狙うより、ラフな指示で案を出させてから、コメントと調整スライダーで方向性を詰めていく使い方が向いています。複数案を並べて方向性を比較したいときも、案出しをモデルに任せて選定に集中できます。
2026年6月アップデートで変わったこと
6月17日のアップデートは、個人が手早く作図するためというより、チームの制作フローに組み込める実務ツールへと近づける内容でした。
デザインシステムのインポート
GitHubリポジトリ、デザインファイル、生データのアップロードから、1つまたは複数のデザインシステムを取り込めるようになりました。Claudeは取り込んだコンポーネントを使って制作し、出力をデザインシステムと照合して自動で修正します。大規模チーム向けには管理者ロールが追加され、社内ガイドラインに沿った標準デザインシステムを承認・ロックできます。各メンバーが勝手な体裁で作るのを防ぎ、ブランド準拠を保てる仕組みです。
Claude Codeとの双方向連携
Claude Designで作るデザインと、Claude Codeで書くコード。これまで別々だった2つの作業を、行き来しながら進められるようになりました。Claude Codeのターミナルから/design-syncコマンドを使うと、ローカルのコードベースにあるデザインシステムをClaude Design側へ同期できます。ボタンやカードといったコンポーネント単位で取り込まれ、プレビューと使い方の情報まで同期されます。逆に/designコマンドを使えば、ターミナルを離れずにデザインプロジェクトの作成・編集・同期ができます。
デザインが完成してリリースできる状態になったら、Claude Codeに引き継げます。このとき、従来のようにスクリーンショットを見て作り直すのではなく、既存の成果物そのものを起点に実装を続けられるようになりました。見た目が粗くなりがちだったClaude Code生成のUIを、デザイン品質を保ったままコードに反映できる点が大きな変化です。
トークン消費と利用枠の改善
Claude Designの利用上限が、ChatやClaude Cowork、Claude Codeと共通の枠に統合されました。多くのユーザーは使える枠が増え、1回のやり取りあたりのトークン消費量も減りました。あわせてエラーも大幅に削減されています。デザイン生成はもともとトークンを多く消費しやすい作業で、その重さがネックになっていました。今回の変更はその点への対応にあたります。
キャンバス編集と外部連携の拡張
新しいエディタで、ドラッグやリサイズ、整列といったレイアウト操作を含め、各要素を細かく制御できるようになりました。数百件の安定性修正も入っています。書き出し先も広がり、PDFとPowerPointに加えて、Adobe、Base44、Canva、Gamma、Lovable、Miro、Replit、Vercel、Wixとの連携が可能になりました。連携先は今後さらに増える予定です。
Claude CodeとClaude Designを連携させる手順
開発を進めながらデザインの体裁を整えたいときは、2つのコマンドを使い分けます。
/design-syncは、手元のコードベースにあるデザインシステムをClaude Designに同期するためのコマンドです。すでにボタンやカードのコンポーネントが実装されているプロジェクトで使うと、その定義をプレビューと使い方ごとClaude Design側に取り込めます。Claude Designが実際の実装に沿ってデザインを作るようになるため、できあがったデザインをコードへ反映する際のズレが小さくなります。
/designは、Claude Codeのターミナルからデザインプロジェクト自体を作成・編集・同期するためのコマンドです。エディタを開き直さずにデザイン作業へ入れるため、実装とデザインを行き来する手戻りが減ります。仕上がったデザインをClaude Codeにハンドオフすれば、既存の成果物を起点に実装を継続できます。
料金と対応プラン
Claude Designは単体で売られている製品ではなく、Claudeの有料プランに含まれる機能です。対応するのはClaude Pro、Max、Team、Enterpriseの4プランで、いずれかを契約していれば追加料金なしで使えます。無料プランには含まれません。
各プランの料金は次のとおりです。いずれも米ドル建て・月払いの金額で、年払いにするとこれより安くなります。
| プラン | 月額（月払い） | 主な対象 |
|---|---|---|
| Free | 0ドル | お試し向け。Claude Designは対象外 |
| Pro | 20ドル | 個人向け。年払いなら月17ドル（年200ドル） |
| Max | 100ドルから | 利用量の多い個人向け。使用量5倍・20倍の2段階 |
| Team | 1席25ドルから（プレミアム席は125ドル） | 5〜150人のチーム向け。年払いなら1席20ドルから |
| Enterprise | 1席20ドル＋API利用料 | 大企業向け。席数と使用量に応じた個別見積 |
料金の面で押さえておきたいのが、Claude Designの利用枠はChatやClaude Cowork、Claude Codeと共通という点です。プランごとに決まった利用枠を各機能で分け合う形なので、デザイン生成を多用すると、ほかの用途に回せる枠もその分減ります。逆に6月のアップデートでこの枠が統合され、1回あたりの消費が軽くなったことで、同じプランでも実際に作れる量は増えています。
Enterpriseでは既定でオフになっているため、使う場合は管理者が組織設定で有効化します。提供形態は研究プレビューで、機能・対応範囲・価格は今後変わる可能性があります。日本から契約する場合は、円換算がカード会社のレートと海外手数料に左右され、別途消費税がかかる場合があります。最新の料金はClaude公式の料金ページ、Claude Designの対応状況はAnthropicの公式発表で確認してください。
よくある質問
Q. Claude Designは無料で使えますか
Claude Designは無料プランでは使えません。利用にはClaude Pro、Max、Team、Enterpriseのいずれかの契約が必要で、これらのプランなら追加料金なしで利用できます。
Q. デザインの知識がなくても使えますか
Claude Designはデザイナーでなくても使えます。テキストの指示や手元の画像・資料からClaudeが下書きを作り、画面上のコメントや調整スライダーで直していけるため、ゼロから作図する知識は必須ではありません。ただし方向性の良し悪しを判断する目は要るので、出力をそのまま使わず確認しながら詰めるのが前提です。
Q. 作ったデザインを他のツールに持ち出せますか
作ったデザインは他のツールへ持ち出せます。PDF、PPTX、単体HTMLファイルへの書き出しに対応し、Canvaへのエクスポートのほか、Adobe、Gamma、Miro、Vercel、Wixなどとの連携も可能です。組織内共有用の内部URLやフォルダ保存も使えます。
Q. Claude Codeとはどう連携しますか
Claude DesignとClaude Codeは双方向で連携します。Claude Codeのターミナルから/design-syncでローカルのデザインシステムをClaude Designへ同期でき、/designでデザインプロジェクトの作成・編集・同期ができます。デザインをClaude Codeにハンドオフすると、スクリーンショットからの作り直しではなく既存成果物を起点に実装を続けられます。
Q. 既存のデザインルールを守らせることはできますか
既存のデザインルールはClaude Designに守らせることができます。GitHubリポジトリやデザインファイルからデザインシステムを取り込ませると、Claudeはそのコンポーネントを使って制作し、出力をデザインシステムと照合して自動修正します。大規模チームでは管理者が標準デザインシステムを承認・ロックでき、ブランド準拠を組織として保てます。
自社の制作・開発フローにどう取り込むか
Claude Designは、デザインと実装の間にあった手戻りを減らす方向に進んでいます。デザインシステムの取り込みとClaude Codeとの双方向連携によって、ラフ案から完成物までを1つの流れでつなげられるようになりました。一方で出力の良し悪しを判断し、ブランドや要件に合わせて詰めるのは人の仕事として残ります。生成AIを制作や開発の現場でどう使い分けるかは、ツールの操作以上に運用設計の問題です。
日本AI導入支援協会では、こうしたAIツールを業務に定着させるための法人向け研修や、個人のスキルを測るAI実践検定を提供しています。自社でどこからAI活用を始めるか迷う場合の入り口として活用してください。
コメント