CLAUDE LABEN
FORK — Claude Code 2.1.212で/forkの挙動が変わりました。会話を新しいバックグラウンドセッションへ複製し、作業を続けたまま並走できます。従来のセッション内サブエージェントは/subtaskに移りましたLIMITS — WebSearchの呼び出しがセッション単位で既定200回に制限されました。サブエージェントの起動も既定200回が上限で、暴走した検索・委譲のループを止められますMCPBG — 2分を超えるMCPツール呼び出しは自動的にバックグラウンドへ移り、セッションが固まらなくなりました。しきい値はCLAUDE_CODE_MCP_AUTO_BACKGROUND_MSで調整できますPLANFIX — プランモードがtouchやrmといったファイルを変更するBashコマンドを、許可プロンプトもcanUseToolコールバックも通さずに実行してしまう不具合が修正されましたSONNET5 — Claude Sonnet 5は導入価格として入力100万トークンあたり2ドル、出力10ドルで提供中です。8月31日を過ぎると3ドルと15ドルに戻りますIPO — Anthropicが早ければ10月の株式公開を視野に、引受銀行が投資家との面談を組み始めたと報じられていますFORK — Claude Code 2.1.212で/forkの挙動が変わりました。会話を新しいバックグラウンドセッションへ複製し、作業を続けたまま並走できます。従来のセッション内サブエージェントは/subtaskに移りましたLIMITS — WebSearchの呼び出しがセッション単位で既定200回に制限されました。サブエージェントの起動も既定200回が上限で、暴走した検索・委譲のループを止められますMCPBG — 2分を超えるMCPツール呼び出しは自動的にバックグラウンドへ移り、セッションが固まらなくなりました。しきい値はCLAUDE_CODE_MCP_AUTO_BACKGROUND_MSで調整できますPLANFIX — プランモードがtouchやrmといったファイルを変更するBashコマンドを、許可プロンプトもcanUseToolコールバックも通さずに実行してしまう不具合が修正されましたSONNET5 — Claude Sonnet 5は導入価格として入力100万トークンあたり2ドル、出力10ドルで提供中です。8月31日を過ぎると3ドルと15ドルに戻りますIPO — Anthropicが早ければ10月の株式公開を視野に、引受銀行が投資家との面談を組み始めたと報じられています
記事一覧/Claude.ai
Claude.ai/2026-06-02中級

Claude Design のデザインシステムを“作り捨て”にしない運用設計

Claude Design で一度きれいな資料が出ても、デザインシステムを毎回作り直していては資産になりません。既存資料からの抽出を再現性のある運用に落とし込み、原稿を渡すだけで誰でも同じ品質の資料を立ち上げる回し方を、個人開発とアート活動の現場目線で設計します。

claude-design3design-system4slide-deck2workflow24anthropic-labs2

プレミアム記事

Claude Design できれいな資料が1本出たとき、多くの人はそこで満足してしまいます。けれど数週間後に次の資料を作るとき、またゼロからデザインシステムを起こし直していたら、結局「その場限りの出力」を繰り返しているだけです。私が個人開発を2014年から続けてきて痛感しているのは、効くのは1回の成果物ではなく、2本目以降を速くする“構造”をどう残すかだということでした。

この記事は、Claude Design の使い方そのものではなく、出力したデザインシステムをチームの資産として運用に乗せる設計に絞ります。基本操作はClaude Design に既存スライドを一枚渡して、会社資料のブランド再現を自動化した話で書いたので、ここではその先、再現性・横展開・人間の役割分担を扱います。

「作り捨て」にしないとはどういう状態か

判断基準はシンプルです。同じ資料を別の人が作っても、ブランドが同じ精度で再現されるか。これが満たせていなければ、デザインシステムは資産になっていません。Claude Design はオンボーディング時にコードベースやデザインファイルを読んでデザインシステムを構築し、以後のプロジェクトで色・タイポグラフィ・コンポーネントを自動的に使い回します。この「以後のプロジェクトで自動的に」を、属人的な口伝ではなく、誰でも踏める手順に落とすのが運用設計です。

ここで効くのは、判断を個人の頭の中に閉じ込めず、寸法と手順として外へ出しておくことです。たとえば「タイトルは中黒で3語までつなぐ」という暗黙のルールを一文に書き起こすだけで、別の人が作っても同じリズムの見出しが並びます。踏める型として残すとは、この種の小さな判断を一つずつ言語化し、出力のたびに同じことを再発見せずに済むようにすることだと考えています。

デザインシステムに何を“言語化”させるか

抽出されたデザインシステムを資産にするには、何が言語化されているかを把握し、足りなければ追記します。最低限そろえたいのは次の6要素です。

  1. カラー(ブランドカラー・背景・テキスト・状態色)
  2. タイポグラフィスケール(見出しから本文までの段階)
  3. スペーシングスケール(4px 基準などの間隔の体系)
  4. コンポーネント(カードのバリエーション、ラベル、アイコンの出し分け)
  5. 言葉づかいのトーン(数字は具体的に/絵文字は使わない 等)
  6. 用途別の使い分け(提案資料/採用資料/ストア用 など文脈別の崩し方)

抽出直後の状態を、こうした“仕様の核”として一枚に書き出しておくと、後から差分を足しやすくなります。たとえば次のような粒度です。

# 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 > 仕様 > 文章)
原稿→スライドの再現性を担保する構成Markdownテンプレートと、4px基準のスペーシング設計
複雑な図を安定させる下絵→清書パイプラインで、制作時間が体感2〜3倍速くなった運用ルール
Stripe による安全な決済 · いつでもキャンセル可能

この記事を購入する

この先の内容をすべてお読みいただけます。一度のご購入で、いつでも何度でもアクセスできます。このサイトは広告を掲載しておらず、皆さまのご支援がサーバー費用などの運営を支えています。

または
メンバーシップなら全記事が読み放題 →
シェア

お読みいただきありがとうございます

Claude Lab は広告なしで運営しており、サーバー費用などの運営コストはメンバーシップのご支援で賄っています。実装コード・ベンチマーク・本番設計パターンなど、実務でお役立ていただける記事を毎日更新しています。もし読んでよかったと感じていただけましたら、ぜひご覧ください。

  • コピー&ペーストで使える実装コード付き
  • 毎日新しい上級ガイドを追加
  • ¥580/月 または ¥1,480 の永久アクセス
メンバーシップを見る →

関連記事

Claude.ai2026-06-02
Claude Design に既存スライドを一枚渡して、会社資料のブランド再現を自動化した話
会社紹介や採用資料を作り直すたびに時間を奪っていたのは中身ではなく『ブランドを毎回手で再現する』作業でした。既存スライドを1枚渡してデザインシステムを抽出し、原稿を渡すだけで統一資料が立ち上がるまでの実体験を、個人開発とアート活動を続けてきた立場からまとめます。
Claude.ai2026-06-19
Claude Design に既存コードベースを読ませて画面案を作る — デザインと実装の往復を一人で畳む
6月17日の更新で Claude Design はローカルのコードベースを起点に動けるようになりました。既存コンポーネントを反映した画面案を作り、そのまま Claude Code へ渡すまでを、4サイトのUIを一人で手入れする個人開発の現場目線で設計します。
Claude.ai2026-04-25
Claude に「内なる状態」はあるのか — Anthropic のモデルウェルフェア研究が明かすこと
Anthropic が取り組む「モデルウェルフェア」研究を解説。Claude に意識や感情に似た何かがあるのか、公式見解と研究の最前線から、開発者・ユーザーが知っておくべき設計思想に迫ります。
📚RECOMMENDED BOOKS
大規模言語モデル入門
山田育矢
LLM開発
生成AIプロンプトエンジニアリング入門
我妻幸長
プロンプト
Claude CodeによるAI駆動開発入門
平川知秀
AI駆動開発
※ アフィリエイトリンクを含みます
もっと見る →