Claude Design できれいな資料が1本出たとき、多くの人はそこで満足してしまいます。けれど数週間後に次の資料を作るとき、またゼロからデザインシステムを起こし直していたら、結局「その場限りの出力」を繰り返しているだけです。私が個人開発を2014年から続けてきて痛感しているのは、効くのは1回の成果物ではなく、2本目以降を速くする“構造”をどう残すかだということでした。
この記事は、Claude Design の使い方そのものではなく、出力したデザインシステムをチームの資産として運用に乗せる設計 に絞ります。基本操作はClaude Design に既存スライドを一枚渡して、会社資料のブランド再現を自動化した話 で書いたので、ここではその先、再現性・横展開・人間の役割分担を扱います。
「作り捨て」にしないとはどういう状態か
判断基準はシンプルです。同じ資料を別の人が作っても、ブランドが同じ精度で再現されるか 。これが満たせていなければ、デザインシステムは資産になっていません。Claude Design はオンボーディング時にコードベースやデザインファイルを読んでデザインシステムを構築し、以後のプロジェクトで色・タイポグラフィ・コンポーネントを自動的に使い回します。この「以後のプロジェクトで自動的に」を、属人的な口伝ではなく、誰でも踏める手順に落とすのが運用設計です。
ここで効くのは、判断を個人の頭の中に閉じ込めず、寸法と手順として外へ出しておくことです。たとえば「タイトルは中黒で3語までつなぐ」という暗黙のルールを一文に書き起こすだけで、別の人が作っても同じリズムの見出しが並びます。踏める型として残すとは、この種の小さな判断を一つずつ言語化し、出力のたびに同じことを再発見せずに済むようにすることだと考えています。
デザインシステムに何を“言語化”させるか
抽出されたデザインシステムを資産にするには、何が言語化されているかを把握し、足りなければ追記します。最低限そろえたいのは次の6要素です。
カラー(ブランドカラー・背景・テキスト・状態色)
タイポグラフィスケール(見出しから本文までの段階)
スペーシングスケール(4px 基準などの間隔の体系)
コンポーネント(カードのバリエーション、ラベル、アイコンの出し分け)
言葉づかいのトーン(数字は具体的に/絵文字は使わない 等)
用途別の使い分け(提案資料/採用資料/ストア用 など文脈別の崩し方)
抽出直後の状態を、こうした“仕様の核”として一枚に書き出しておくと、後から差分を足しやすくなります。たとえば次のような粒度です。
# design-system.summary(抽出後に人が確定させる核)
brand :
primary : "#1E5BBF" # タイトルバー・強調
surface : "#F2F6FC" # 淡い面・囲み
text : "#1A2330"
typography :
base : "游ゴシック Bold 基準"
scale : [ 32 , 24 , 20 , 16 , 14 ] # h1..caption
spacing :
unit : 4
scale : [ 4 , 8 , 12 , 16 , 24 , 32 , 48 ]
tone :
numbers : "具体値で出す"
emoji : "使わない"
rhythm : "見出しは中黒(・)で3語までつなぐ"
usage :
recruiting : "淡い青の囲みで共通基盤を表現"
pitch : "1スライド1メッセージ、図は1枚絵に寄せる"
ここで大事なのは、抽出結果をそのまま神聖視しないことです。AI が読み取った値には、ブランドの意図とズレる箇所が必ず混じります。人が一度確定させてから資産化する、という順番を崩さないことをお勧めします。
抽出精度を上げる「入力の渡し方」の優先順位
同じ「デザインシステムを作って」でも、何を渡すかで精度が大きく変わります。私の実体験では、効く順番はおおむね次の通りでした。
完成した実物(既存スライド・ランディングページ・ロゴ)
コードベース/Figma ファイル(トークンが構造として読める)
配色・フォント指定などの断片的な仕様
文章だけの説明
文章で仕様を羅列するより、完成した1枚を渡すほうが圧倒的に多くを伝えます。これは公式の案内とも一致していて、「カラーパレットの仕様書より、完成したランディングページ1枚」という表現がまさにそれです。ブランドがまだ固まっていない場合は、先にお手本になる1枚を用意するのが近道です。ネット上の参考デザインでも、画像生成で作ったイメージでも構いません。土台になる“良い実物”を1枚作ることに最初のコストを集中させるのが、結果的にいちばん速いと感じています。
原稿→スライドの再現性を担保する「構成Markdown」
属人化を解く最大の鍵は、原稿を渡す形式を固定することでした。チャットに自由文を貼るのではなく、構成 Markdown のテンプレート を決めておくと、誰が書いても同じ骨格のスライドが出ます。私が使っている雛形はこうです。
# Deck: <資料名> / 目的: <誰に何を決めてほしいか>
## Slide: タイトル
- message: <このスライドで言い切る1メッセージ>
- visual: <図のタイプ: 箇条書き / 比較表 / マトリクス / 1枚絵>
- body:
- <要点1>
- <要点2>
- note: <デザインシステムの usage のどれを使うか>
このフォーマットを共有しておくと、Findy の開発チームが AI-DLC をスキル化して「誰が実行しても同じ骨格のドキュメントが出る」状態を作ったのと同じ効果が、資料作成でも得られます。message を1スライド1つに強制するだけで、情報の詰め込みすぎという典型的な失敗がかなり減りました。出力後の手戻りが減るぶん、全体の制作時間は体感で2〜3倍速くなっています。
複雑な図を安定して出す「下絵→清書」パイプライン
運用でいちばん事故りやすいのが複雑な図です。役割×工程のマトリクスのような図を言葉だけで指示すると、「もう少し詰めて」「この列を揃えて」の往復に時間が溶けます。これを避けるための定番ルートを固定しておきます。
図の構造だけ先に決める(縦軸・横軸・セルに入る要素)
画像生成で一枚絵のラフ(下絵)を作る
その下絵を Claude Design に渡し「これと同じ構造で清書して」と指示する
清書後に Edit で余白と整列だけ詰める
一枚絵の作り直しは画像生成のほうがトークンコストを抑えられるので、下絵は画像生成 / 清書は Claude Design の分担が時間とコストの両面で効率的です。これは本番の資料で何度か失敗して見つけた回避策で、言葉でうまく指示できない図ほど効果が大きいです。注意点として、下絵に文字を入れすぎると清書時にレイアウトが引っ張られるので、下絵は構造だけ、文言は構成 Markdown 側に持たせるのが安全でした。
デザインシステムを“育てる”ための差分の残し方
抽出したデザインシステムは、一度確定させて終わりではありません。新しい用途が増えるたびに値がじわじわ変わっていきます。私の運用では、design-system.summary に変更履歴を一行ずつ残すようにしています。値だけでなく「なぜ変えたか」を添えるのが肝で、半年後の自分がその一行を読んで意図を思い出せるかどうかが、資産として生き続けるかの分かれ目になります。
# design-system.summary の更新履歴(抜粋)
2026-05 usage に recruiting を追加(採用資料を淡い青の囲みで統一するため)
2026-06 spacing.scale に 48 を追加(縦長ストア画像で見出し下の余白が窮屈だったため)
2026-06 tone.rhythm を「中黒で3語まで」に明文化(見出しの長さがページごとにバラついていたため)
更新の引き金は「新しい用途が出たとき」と決めておくと、点検のタイミングに迷いません。逆に、用途が増えていないのに値をいじりたくなったときは、たいてい個別資料の事情をシステム側に持ち込もうとしているサインで、ここで踏みとどまるとシステムが汚れずに済みます。差分は大改修ではなく一行追記で積むほうが、結果的に長く使えると感じています。
属人化を解く運用 — 誰が作っても同じ品質にする
ここまでをチームの回し方としてまとめると、次の Before / After になります。
観点 Before(属人的) After(資産化)
ブランド再現 各自が手で再現、ページごとにズレる デザインシステムが自動で担保
原稿の渡し方 自由文、人によって粒度バラバラ 構成 Markdown で骨格を固定
複雑な図 言葉で往復、時間が溶ける 下絵→清書で安定
更新 全ページ手で直す 原稿を渡し直すだけ
横展開 作れる人が限られる 未経験者も同じ型で作れる
落とし穴は、デザインシステムと構成 Markdown を「最初に1回決めて放置」しがちなことです。実運用では、新しい用途(たとえばストア用の縦長画像)が出るたびに usage を1行ずつ足していくほうが、後から大改修するより事故が少ない。小さく育てるほうが、結果的に長く使えます。
どこまで AI に任せ、どこを人間が握るか
最後に役割分担です。私は、仕上げの微調整・事実確認・ブランドの最終判断の3つは人間が握るべきだと考えています。Claude Design は骨格と統一感を驚くほど速く立ち上げますが、「この数字は最新か」「この表現はブランドとして言い切ってよいか」までは保証しません。ここを握れるなら、残りは大胆に任せて構いません。
私自身は、フォトコラージュなどの作品本体には AI を一切使わない一方で、資料・アイコン・ストア画像といった運用・発信のデザインには AI を全面投入しています。この線引きこそが、創作の時間を守りながら4サイトと Stripe メンバーシップ運営を回すための、私なりの設計です。読者の方も、まずは自分のチームの「構成 Markdown」を1枚決めるところから始めてみてください。型が1つあるだけで、2本目以降の速さがまるで変わります。