AI実践

企画・マーケター

SNS企画・運用

コンサルティング

クリエイティブ

2026.06.21

黒山結音

Claude DesignとClaude Codeを連携する方法｜Design SyncでUI制作を実装までつなぐ

Claude Designは、会話しながらデザイン、インタラクティブプロトタイプ、プレゼン資料などを作れるClaudeの機能です。さらにClaude Codeと連携すると、デザイン案を作って終わりではなく、既存コードベースへ実装する流れまでつなげられます。

この記事では、Claude DesignのDesign System、Project、Design Syncを実務でどう使い分けるかを整理します。LP、提案資料、管理画面、顧客別資料を作るチーム向けの運用ガイドです。

まず結論

Claude Designは、Design SystemとProjectの2層で考えると整理しやすいです。
Design Systemで色、フォント、余白、コンポーネントのルールを固定します。
ProjectでLP、提案資料、管理画面、プロトタイプなどの成果物を作ります。
Claude Codeでは /design-sync でDesign Systemを取り込み、デザインとコードの往復を減らせます。
実装前には「読む → 計画する → 必要な範囲だけ反映する」の順番を守るのが安全です。

Claude Designは2層で理解する

層	役割	実務での使い方
Design System	色、フォント、余白、ボタン、カード、レイアウトなどの共通ルール	会社・サービス・顧客案件ごとに見た目の基準を固定する
Project	実際に作る成果物	LP、提案資料、管理画面、記事ページ、プロトタイプを作る
Claude Code連携	デザインを実装へ渡す橋渡し	既存コードに合わせてコンポーネント化、修正、レビューする

導入前チェック

確認項目	見るポイント
利用プラン	Claude Designが使える契約か確認する。公式ヘルプではPro、Max、Team、Enterprise向けのベータとして案内されています。
組織権限	Team / EnterpriseではDesign Systemの作成・編集権限を確認する
公開範囲	共有リンクやPublishの扱いを決める
素材	ロゴ、ブランドカラー、既存LP、提案資料、画面スクリーンショットを用意する
コード側	Claude Codeで対象リポジトリを開き、検証コマンドを把握する
秘密情報	顧客名、金額、契約条件、未公開資料を不用意に共有しない

最短ルート

Claude DesignでDesign SystemまたはProjectを作成する
ロゴ、色、既存資料、UIスクリーンショットなどの素材を投入する
Fundamentalsで色、フォント、余白、ボタン、カードなどを確認する
Projectを作り、Canvas上で見出し、CTA、余白を調整する
Publish URL、ZIP、PDF、PPTX、またはDesign SyncでClaude Codeへ渡す

Design System作成のコツ

Design Systemは、AIが毎回違う雰囲気の画面を作ってしまう問題を減らすための土台です。色やフォントだけでなく、ボタン、カード、注意書き、CTA、表、余白の使い方まで基準化します。

これからClaude Design用のDesign Systemを作ります。

目的は、Claude Codeで実装するLP、営業資料、管理画面、マニュアルの見た目を統一することです。

以下の素材を参考にして、色、フォント、余白、ボタン、カード、見出し、表、注意書き、CTAのルールを整理してください。

重視すること:
- 顧客向けに信頼感がある
- AIサービスらしいが、派手すぎない
- Claude CodeでHTML/CSS/Reactへ落とし込みやすい
- Notionやスライドにも転用しやすい
- スマホでも読みやすい

まずDesign System作成に必要な確認質問をしてください。

Project作成のコツ

Projectは実際の成果物です。最初からLP、提案資料、管理画面を全部まとめて作らせるのではなく、1つの成果物に絞ると品質が安定します。

このDesign Systemを使って、Claude Codeで実装しやすいLPのProjectを作ってください。

目的:
AI顧問サービスに興味を持った中小企業の経営者に、問い合わせしてもらうこと。

読者:
AIを使いたいが、社内に詳しい人がいない経営者、営業責任者、管理部門責任者。

ページ構成:
1. ファーストビュー
2. 課題
3. 解決策
4. 導入後の業務フロー
5. 実績・事例
6. 料金または相談導線
7. FAQ
8. CTA

制約:
- Claude CodeでReactまたはHTML/CSSにしやすい構造にする
- セクション単位で実装しやすくする
- 派手な装飾より、読みやすさと信頼感を優先する
- スマホ表示も想定する

Claude Codeへ渡す前に整理すること

整理項目	内容
実装対象	ファーストビューだけ、1ページLP全体、共通コンポーネントだけなど、範囲を決める
既存コードの制約	フレームワーク、UIライブラリ、CSS方針、既存コンポーネント、触ってよいファイルを渡す
完了条件	ビルドが通る、スマホで横スクロールしない、CTAが表示されるなどを決める
確認方法	ブラウザ確認、スクリーンショット、差分レビュー、公開前チェックを決める

Design Syncの基本フロー

Claude Code側では、いきなり書き換えずに、まずDesign Projectを読み取り、実装計画を出し、必要な範囲だけ反映します。公式ヘルプでも、Claude DesignとClaude Codeを行き来する方法として /design-sync と /design が案内されています。

Design ProjectまたはDesign Systemを読み取る
画面構成、共通コンポーネント、色、余白、フォントを整理する
既存コードで再利用できる部品を確認する
新規作成が必要な部品を最小限にする
実装計画を出してから変更する
ブラウザと差分で確認する

Claude Codeに渡す依頼文

Claude DesignのProjectをClaude Codeで実装に落としたいです。

まずDesign Projectを読み取り、以下を整理してください。

1. 画面構成
2. 共通コンポーネント
3. 色、フォント、余白のルール
4. 実装すべきセクション
5. 既存コードで再利用できそうな部品
6. 新規作成が必要な部品
7. 実装前に確認すべき不明点

まだファイルは変更しないでください。
読み取り結果と実装計画を出してから、次の指示を待ってください。

計画確定後の依頼文

先ほどの実装計画に沿って、最小差分で実装してください。

条件:
- 既存のデザインシステムとコンポーネントを優先して使う
- 触るファイルを最小限にする
- スマホ表示で崩れないようにする
- 実装後にビルドまたは表示確認を行う
- 変更内容、確認結果、残ったリスクを最後にまとめる

実務ユースケース

用途	向いている場面	注意点
LP制作	新サービス、セミナー募集、顧客別提案LP	CTAとフォーム導線を先に決める
提案資料	初回商談後、AI導入ロードマップ、業務改善提案	顧客名、金額、実績の確認を人間が行う
管理画面モック	営業パイプライン、AI業務ログ、経理ステータス	実データ項目と画面項目を揃える
マニュアル図解	Notion記事、セミナー資料、顧客オンボーディング	画像内テキストを増やしすぎない

チーム運用ルール

Design Systemの編集者を少人数にする
Projectの命名ルールを決める
社内レビュー用と顧客共有用の公開範囲を分ける
Publish前に顧客名、金額、契約条件、未公開資料の混入を確認する
Claude Code実装前に、既存コンポーネントで再現できるかレビューする

公開・納品前チェックリスト

顧客名、金額、契約条件に誤りがない
画像やロゴの利用権に問題がない
事例や数値の出典が確認済み
公開URLの範囲を確認した
不要な公開リンクを停止した
Notion、Slack、GitHubの共有先を確認した

まとめ

Claude Designは、きれいな画面を作るだけでなく、Design System、Project、Claude Code連携までつなげることで制作フローになります。実務では、まずルールを作り、成果物を作り、読み取りと計画を挟んでから最小差分で実装する。この順番が、AIデザインを業務で安全に使うための基本です。

参考リンク

最終更新: 2026年6月21日

WRITERライター紹介

黒山結音

NEXT INNOVAITION　代表取締役

「AIは現場で使えなきゃ意味がない」を掲げ、30社以上にAI顧問として導入から定着までサポート。OpenClaw・Claude・ChatGPTなどAIツールを実務でフル活用し、AI駆動経営を実践。本メディアでは、実際の現場で効果が出た事例や、AI初心者がつまずく「最初の一歩」を、専門用語を極力使わずに解説します。

OpenClaw / Claude Code / Codex / Cursor / Manus