Claude Designの「デザインシステム」で手持ちの完成作から色・書体・余白のルールを取り出し、次の制作も同じ基準で作る
完成した図解・資料・ロゴを添付してデザインシステムを作らせ、元の作品と合っているか確かめてから、別のテーマで1ページ試して見比べる。
どんな問題を解決するか / いつ使うか
図解やサムネ、提案資料をAIに作らせると、毎回色もフォントも余白も変わってしまう。すでに「これが自分のスタイル」という完成作があるときに。
やり方
- 材料を選ぶ:自分が権利を持つ(または使用許可を得た)完成図解、PDFやPPTXの資料、ロゴ、フォントや色の指定。仕様だけでなく完成した実例を入れる(公式もそう勧めている)。
- チャットに添付して頼む。例:
添付した図解3枚とロゴから、再利用できるデザインシステムを作って。色・フォント・余白のルールを、それぞれ何に使うかも含めて一覧で見せて
- 取り出された色・フォント・余白が元の作品と合っているか確かめる。
- 別のテーマで1ページ試す:入力欄の Output > Design(または Artifacts タブの Design)から始め、作ったデザインシステムを取り込んでから頼む。できたものを元の作品と並べて見比べる。
- 作ったデザインシステムは Settings > Design systems で管理する。
注意点(投稿時点、2026-10-12 の公式ヘルプに基づく)
- Claude Design は Free を含む全プランで使えるが、デザインシステム機能は Pro・Max・Team・Enterprise 向けのベータ。
- 使用量は通常のチャットと共通。
- 取り込みの質は元の素材しだい。フォントが元と一致するか、素材の権利は自分で確認する。
- コード側で同じことをするなら 既存のサイトや素材から、Skillsを使ってデザインシステムを「抽出」させ、AI用のJSONにする。
出典
- 投稿者: @kaiji_henshu_pr
- 投稿: @kaiji_henshu_pr · 2026-10-14
- 収集日: 2026-10-16(JST、10/15・10/16分の巡回をまとめて実施)