Claude Code との連携
Claude Design で作ったデザインは、絵のままで終わりません。ふだんお使いの Claude Code に引き渡すと、そのまま本物の Web ページやアプリに育てられます。この章では、デザインとコードを行き来させる2つの連携方法を学びます。
- デザインを Claude Code に引き渡す「Hand off to Claude Code（クロードコードへ引き継ぐ）」を使える
- 引き継ぎ書一式（バンドル）に何が入っているかを説明できる
- Claude Code 側の
/design-syncで、自分のサイトの色や部品を Claude Design に取り込める - 取り込んだ決まりごとを、いつ更新し直すべきか判断できる
下絵が、そのまま本物になる
これまでの章で作ってきたデザインは、いわば「よくできた下絵」です。見た目は本物そっくりですが、まだインターネット上で公開されて動く Web ページではありません。
この下絵を本物にするのが Claude Code です。藤川さんはすでに Claude Code を日常的に使っていますから、新しい道具は何も要りません。Claude Design と Claude Code は、次の2方向でつながっています。
| 方向 | やること | 使う機能 |
|---|---|---|
| デザイン → コード | Claude Design で作った下絵を、Claude Code に渡して本物のページとして実装してもらう | Export（書き出し）内の Hand off to Claude Code（クロードコードへ引き継ぐ） |
| コード → デザイン | 手元のプログラム一式から色・文字・部品の決まりを Claude Design に取り込む | Claude Code 側の /design-sync（デザイン同期の合図） |
この2方向がそろっているので「デザインで下絵を描く → コードで実装する → 実装した結果をまたデザインに反映する」という往復ができます。まずはデザイン → コードの方向から見ていきましょう。
Design → Code：デザインを引き渡す
Hand off to Claude Code とは
第8章（書き出しと共有）で学んだ Export（書き出し）メニューには、PDF や PPTX と並んで Hand off to Claude Code（クロードコードへ引き継ぐ） という項目があります。
PDF ／ PPTX ／ Standalone HTML ／ ZIP ／ Canva ／ Hand off to Claude Code
図：右上の Export（書き出し）を押すと、メニューの中に Hand off to Claude Code（クロードコードへ引き継ぐ）がある
これを選ぶと、Claude Design がデザインの「引き継ぎ書一式」を自動でまとめてくれます。この一式のことをバンドル（bundle ＝ ひとまとめの束）と呼びます。中身は次の3つです。
- ブランドの決まりごと — 使っている色・文字の種類・余白のルール
- 部品の構造 — 見出し・ボタン・カードなど、ページを組み立てている部品の一覧と組み合わせ方
- デザインの意図 — 「なぜこの配置にしたか」「ここは何を目立たせたいか」という設計の考え
Claude Code はこのバンドルを受け取り、続きから実装を始められます。デザインの決まりごと・部品の構造・意図が引き継がれているからです。
これまで、デザイン案を Claude Code に伝えるには、画面写真を撮って「こういうページを作って。色はこれで、ボタンはここで…」と言葉で説明し直す必要がありました。Hand off to Claude Code（クロードコードへ引き継ぐ）を使えば、この説明し直しの手間がゼロになります。写真では伝わらない「設計の意図」まで一緒に渡るのが大きな違いです。
引き渡しの流れ
第6章（LP・Webページを作る）で作った教室の生徒募集ページを例に、実際の流れを見てみましょう。
- デザインを仕上げる
Claude Design で募集ページのデザインを完成させます。文言や色の直しは、引き渡す前に済ませておくとスムーズです。 - Export（書き出し）を開く
キャンバス右上の Export（書き出し）ボタンを押します。 - Hand off to Claude Code（クロードコードへ引き継ぐ）を選ぶ
メニューの中から選びます。デザインの決まりごと・部品の構造・意図をまとめたバンドル（引き継ぎ書一式）が作られます。以降は画面の案内に従ってください。 - Claude Code 側で実装を頼む
いつもの Claude Code を開き、引き継いだ内容をもとに「このデザインの通りに本物のページを作って」と日本語で頼みます。 - できあがりを確認する
Claude Code が作ったページをブラウザで開き、デザインの通りになっているか見比べます。直したい所があれば、そのまま Claude Code に伝えます。
Claude Design は「見た目を素早く決める場所」、Claude Code は「決めた見た目を本物にする場所」です。見た目の試行錯誤はデザイン側で済ませ、固まってから引き渡すのがコツです。実装の途中で見た目を大きく変えたくなったら、デザイン側に戻ってやり直すほうが早いこともあります。
Code → Design：自分のサイトの決まりを取り込む
/design-sync とは
今度は逆方向です。すでに動いている自分のサイトやアプリがあるとき、その「色・文字・部品の決まり」を Claude Design に教え込めます。使うのは Claude Code 側の /design-sync（デザイン同期の合図）です。
- Claude Code を開く
取り込みたいサイトのプログラム一式が入っているフォルダで、いつも通り Claude Code を起動します。バージョン 2.1.181 以上が必要です。 /design-syncと入力する
チャット欄に/design-syncと打って送信します。Claude Code が手元のプログラム一式を読み、色・文字・部品の決まりを抜き出して Claude Design に送ります。- Claude Design 側で確認する
取り込みが済むと、以後 Claude Design での生成物が「自分のサイトと同じ部品・同じ色」で作られるようになります。
取り込まれるのは、実際のプログラムに書かれている本物の決まりごとです。たとえば primary-blue（メインの青）のような色の名前や、spacing: 16px（余白は16ピクセル）のような余白のルールです。Claude Design はこれに従って新しいデザインを作るので、「デザイン案と実物で色が微妙に違う」というズレが起きにくくなります。
双方向だから「往復」できる
この連携は一方通行ではありません。実装済みのコードの状態を Claude Design のキャンバスに反映し直すこともできます。つまり次のような往復が可能です。
| 場面 | 流れ |
|---|---|
| 新しいページを増やしたい | /design-sync で決まりを取り込む → Claude Design で自分のサイトと同じ見た目の新ページ案を作る → Hand off to Claude Code（クロードコードへ引き継ぐ）で実装 |
| 実装後の姿を確かめたい | Claude Code で実装した状態を Claude Design のキャンバスに反映し直し、見た目を確認・調整する |
/design-sync は、実行したその時点の決まりごとを取り込むだけです。その後にコード側で色や部品を変えても、Claude Design には自動で伝わりません。色や部品を変えたら、もう一度 /design-sync を実行してください。「デザイン側の色が古いままだ」と感じたら、まず再実行を疑うのが近道です。
第7章（参考資料・ブランドを与える）では、GitHub リポジトリ（プログラム置き場）などからデザインシステムを取り込む方法を学びました。/design-sync は、それを手元の Claude Code から直接行える入り口です。ふだん Claude Code で触っているプログラムなら、こちらのほうが手軽です。
第6章で作った教室の生徒募集ページを、Hand off to Claude Code（クロードコードへ引き継ぐ）で Claude Code に渡し、引き継ぎ内容を確認するところまでやってみましょう。
- 募集ページのプロジェクトを開く
Claude Design で第6章の募集ページを開き、デザインが完成状態であることを確認します。 - Export（書き出し）→ Hand off to Claude Code を選ぶ
右上の Export（書き出し）から Hand off to Claude Code（クロードコードへ引き継ぐ）を選びます。バンドル（引き継ぎ書一式）が作られるので、画面の案内に従って引き渡しを完了させます。 - Claude Code で引き継ぎ内容を確認する
引き渡し完了後の受け取り方は画面の案内に従ってください。引き継いだ内容が Claude Code の手元にある状態になったら、次のプロンプトを貼り付けます。
Claude Design から引き継いだ募集ページのデザイン一式を確認してください。 次の3点を、専門用語を使わずに日本語で教えてください。 ①使われている色と文字の決まり ②ページを組み立てている部品の一覧 ③このデザインの意図（何を目立たせようとしているか） そのうえで、このデザインの通りに本物のWebページを作る場合の 進め方を、簡単な手順で提案してください。まだ作り始めないでください。
Claude Code が色・部品・意図を説明できたら、引き継ぎは成功です。デザイン側で決めた内容（第6章で指定した配色や構成）と食い違いがないか見比べてください。実装まで進めたくなったら「では、この手順で作って」と続けるだけです。
Hand off to Claude Code（クロードコードへ引き継ぐ）で作られるバンドル（引き継ぎ書一式）に含まれるものを、3つ挙げてください。
ヒントを見る
「見た目の決まり」「組み立ての情報」「考えていたこと」の3方向で思い出してみてください。画面写真だけでは伝わらないものは何だったでしょうか。
模範解答を見る
次の3つです。
- ブランドの決まりごと（色・文字・余白のルール）
- 部品の構造（ページを組み立てている部品の一覧と組み合わせ方）
- デザインの意図（なぜこの配置・強調にしたかという設計の考え）
特に3つ目の「意図」は画面写真では絶対に伝わらないもので、バンドルならではの価値です。
/design-sync（デザイン同期の合図）をもう一度実行すべきなのは、どんな時でしょうか。理由も添えて答えてください。
ヒントを見る
/design-sync が取り込むのは「実行した時点」の決まりごとです。その後にコード側で何かが変わったら、Claude Design はそれを知っているでしょうか？
模範解答を見る
コード側で色や部品などの決まりごとを変えた後です。
理由：/design-sync はコードの変更を自動で見張ってくれません。実行した時点の内容を一度取り込むだけなので、その後の変更は Claude Design に伝わらないままです。変更のたびに再実行することで、デザイン側の生成物を最新の決まりに合わせられます。
次の項目に自信をもって「はい」と言えたら、この章は合格です。