Claude Design は、Claude との会話でデザイン・プロトタイプ・プレゼンを作れるベータ機能です。ただ「作れる」だけでなく、Claude Code と双方向に同期したり、外部ツールへ書き出したりできるのが特徴です。この記事では、その連携を「どのツールで何ができるか」「どう使うか」までかみ砕いていきます。
まず Claude Design とは何か、コードや外部ツールと連携できるようになった意味の全体像は Claude Design とは — コードや外部ツールと連携できるようになった意味を読み解く で扱いました。本記事はその実践編として、ツール別・ユースケース別の使い分けと、AI 駆動開発のクリエイティブスタジオとしての活用シナリオに踏み込みます。
事実は Claude 公式のサポート記事「Claude Design を始める」 に基づき、公式に記載のない連携の挙動は自社の活用アイデアとして明確に分けて書きます。
要点
Claude Design はベータ版です。各ツールとの連携挙動や手順は公式記事に詳細が無いものも多く、仕様は今後変わる可能性があります。本記事で「私たちはこう使うと考えます」と書いた箇所は、自社の見解であって公式の手順ではありません。最新の状況は公式情報をご確認ください。
Claude Code 連携でデザインとコードを往復する
連携の中でまず押さえたいのが、Claude Code との双方向同期です。Claude Design は Claude Code と /design-sync・/design コマンドを通じて双方向に同期できます。
そして、デザインシステムの取り込み元として次の 3 種類に対応しています。
- GitHub リポジトリ
- デザインファイル
- ローカルのコードベース
この組み合わせが効くのは、すでにコード側でデザイントークンやコンポーネントを定義しているチームです。コードベースを取り込み元にすれば、コードで決めた見た目を起点にデザイン側で案を広げられます。逆に、デザイン側で固めた方向性を Claude Code 経由でコードへ戻すこともできます。
取り込み元別の使いどころ
取り込み元の 3 種類は、チームの現状に応じて選び分けると考えています。ここは公式に手順が細かく書かれているわけではないので、私たちの使い方の方針として整理します。
| 取り込み元 | 向いている状況 |
|---|---|
| GitHub リポジトリ | デザイントークンやコンポーネントをコードで管理し、リポジトリが正の状態 |
| デザインファイル | デザイン側に資産がまとまっていて、そこを起点に展開したい状態 |
| ローカルのコードベース | 手元で実装しながら、その場でデザインへ反映させたい状態 |
コツ
コードベースを取り込み元にできるということは、「実装で決まっている事実」をデザインの前提に揃えられるということです。デザインとコードで色やコンポーネントの定義がずれていく、よくあるすれ違いを起点から防ぎやすくなります。
FIXITデザインとコードを往復って、結局どっちが先なの？
Irodoriどちらからでも始められます。コードに定義があるなら、それを取り込み元にするのがいいです。
FIXITIrodoriはい。実装で決まっている前提を起点にすると、デザイン側がそこからずれにくいんです。
FIXITじゃあデザインで直したら、コードにも戻せるの？
Irodori戻せます。/design-sync
で同期するので、片方の変更をもう片方へ写し替える手間が減ります。
エクスポート先をユースケース別に整理する
次に、外部ツールへのエクスポートです。公式に挙げられているエクスポート先は Adobe・Canva・Gamma・Lovable・Miro・Replit・Vercel・Wix で、あわせてスタンドアロンの HTML・PDF・PPTX として書き出せます。
ここで注意したいのは、「どのツールへ出せるか」は公式の事実ですが、「Claude Design とそのツールが具体的にどう繋がるか (連携の挙動・手順)」は公式記事に詳細が見当たらない点です。以下の表は、各ツールが一般に何のためのものかという前提から、私たちが想定するユースケースを添えたものです。連携の具体的な動きは公式の最新情報をご確認ください。
| カテゴリ | エクスポート先 | 私たちが想定する使いどころ (自社見解) |
|---|---|---|
| クリエイティブ系 | Adobe・Canva | 生成したビジュアルを既存のデザイン制作フローへ持ち込み、仕上げや展開に活かす |
| プレゼン系 | Gamma・PPTX・PDF | 提案資料やピッチをそのまま配布・編集できる形で書き出す |
| 共同編集系 | Miro | チームでの発散・整理や、関係者を巻き込んだレビューの場に持ち込む |
| アプリ生成・ホスティング系 | Lovable・Replit・Vercel・Wix | プロトタイプを動く形にして共有・公開し、フィードバックを早く回す |
| 素の配布 | スタンドアロン HTML | 特定ツールに縛られず、URL やファイルとして手早く共有する |
それぞれの狙いを補足します。
クリエイティブ系 (Adobe・Canva)
Adobe や Canva は、いずれもビジュアル制作で広く使われているツールです。Claude Design で会話しながら起こしたビジュアルを、こうした使い慣れた制作環境へ持ち込めるとみられます。素案を Claude Design で素早く出し、仕上げや細かな展開は手に馴染んだツールで、という分担が考えられます。
プレゼン系 (Gamma・PPTX・PDF)
プレゼンテーションは PPTX や PDF として直接書き出せるほか、Gamma へのエクスポートにも対応しています。提案資料を会話で組み立て、そのまま配布できる形式や編集しやすいスライドツールへ渡せるため、資料作成のリードタイムを縮める用途で活かせるとみられます。
共同編集系 (Miro)
Miro はホワイトボード型の共同編集ツールです。Claude Design の成果物を Miro へ持ち込めれば、関係者を集めての発散・整理や、付箋ベースのレビューに乗せやすくなると考えます。1 人で完結させず、チームの議論の土台にする使い方が向いていそうです。
アプリ生成・ホスティング系 (Lovable・Replit・Vercel・Wix)
ここが開発の現場では特に効いてくる領域です。Lovable・Replit・Vercel・Wix は、いずれもアプリの生成・実行・公開に関わるツールです。会話で起こしたプロトタイプを、こうしたツールへ渡して動く形にし、URL で共有できれば、関係者が実際に触ってフィードバックする流れを早く作れるとみられます。
素の配布 (スタンドアロン HTML)
特定のツールに依存させたくない場面では、スタンドアロンの HTML として書き出せるのが便利です。受け取った相手が何のアカウントも持っていなくても、ブラウザで開いて確認できます。社外への共有や、ツールを問わない軽い受け渡しに向いています。
注意
ここに挙がっていないツール (たとえば Figma) との連携については、公式サポート記事に記載が確認できないため、本記事では対応の有無を断定しません。表のユースケースも、公式の手順ではなく自社の想定です。実際の連携挙動は公式の最新情報をご確認ください。
反復編集を 3 つの操作で使い分ける
作りっぱなしではなく、生成した成果物を直していく工程も連携と同じくらい実務的です。Claude Design の反復編集には、操作の粒度に応じた 3 つの方法があります。
| 操作 | 変更の範囲 | 向いている場面 |
|---|---|---|
| チャットで指示 | 全体に対する変更 | 構成やトーンを大きく変えたいとき |
| インラインコメント | コンポーネント単位の変更 | 特定パーツだけ直したいとき |
| キャンバスで直接編集 | 即時の調整 | その場で手早く位置や値を整えたいとき |
使い分けの考え方は、変更したい範囲の大きさで選ぶことです。大きな方向転換はチャットで一気に、特定のコンポーネントの調整はインラインコメントで的を絞って、ちょっとした手直しは直接編集で即座に。これを混同すると、全体に効かせたい変更を 1 つずつ直して時間を溶かしたり、逆に細かい調整のたびに全体が動いてしまったりします。
コツ
「どの操作がどの範囲に効くか」を最初に意識しておくと、反復のテンポが上がります。直したい範囲を見極めてから操作を選ぶ、という順番がコツです。
クリエイティブスタジオから見た活用シナリオ
ここからは、Claude や AI エージェントを実プロジェクトに組み込んできた AI 駆動開発のクリエイティブスタジオとして、私たちが想定する活用シナリオを自社の見解として描きます。いずれも公式が示した手順ではなく、ここまでの事実をどう組み合わせるかというアイデアです。
ひとつ目は、プロトタイプの高速共有です。会話でプロトタイプを起こし、Vercel などのホスティング先へ書き出して URL で共有する。関係者がその場で触ってフィードバックを返し、それをチャットやインラインコメントで反復する。この一連を 1 つの対話の中で回せれば、合意形成にかかる往復が縮むとみられます。
ふたつ目は、デザインシステムを起点にした実装への接続です。コードベースを取り込み元にしてデザインを起こし、Claude Code と /design-sync で同期しながら実装へ落とす。コード側で調整が入れば、それをまたデザインへ戻す。デザインとコードが同じ AI の対話でつながると、両者を別々に管理していたときの写し替えコストが下がると考えます。
FIXIT結局、最初に試すならどのユースケースがいいの？
Irodori自社のデザインシステムを取り込んで、小さく 1 画面作るところからがいいです。
FIXITいきなり全部のツール連携を試さなくていいんだ？
Irodoriはい。前提が揃っていないと、生成結果を見比べる基準そのものが崩れます。
FIXITIrodoriそうです。土台が揃っていれば、連携先を増やしても結果がぶれにくくなります。
ただし、どのシナリオでも前提は変わりません。会話で速く作れることと、ブランドとして崩れない成果物が出ることは別の話です。組織のデザインシステムを継承できる仕組みがあっても、その土台を整えて運用するのは引き続き人の役割です。連携先を増やすほど、出力がぶれない土台の重要性は増します。
要点
連携の数より先に、評価の物差し (デザインシステム・ブランド資産・受け入れ基準) を固めておくことが効きます。土台が揃っていれば、どのツールへ展開しても結果がぶれにくくなります。
このあたりの「AI に任せる前提として何を整えるか」という考え方は、コーディングでも共通します。AI 駆動開発そのものの全体像は AI 駆動開発とは で、ツールを現場に定着させる進め方は AI 開発ツール定着支援 で扱っています。
まとめ — 連携の地図を持ってから小さく試す
整理すると、Claude Design の連携は次の 3 層で捉えられます。Claude Code との双方向同期でデザインとコードを往復する層、外部ツールへのエクスポートで成果物を用途別に展開する層、そして反復編集で粒度ごとに仕上げる層です。どのツールで何ができるかの地図を持っておくと、目の前の仕事にどの連携を使うかを選びやすくなります。
そのうえで、最初の一歩はやはり小さく試すことです。自社のデザインシステムを取り込み、1 画面だけ作ってみる。動くプロトタイプにしたければ Vercel などへ書き出して共有してみる。自分たちのどの往復が短くなるかを確かめてから、連携先を広げていく。この順番が、遠回りに見えて確実です。
Claude Code や AI エージェントを使った開発の伴走は AI エージェント開発 で、ツール導入と定着の支援は AI 開発ツール定着支援 で承っています。Claude Design の活用を含めた個別のご相談は お問い合わせ からどうぞ。