作品 · AI × デザインシステム / Claude Code · 2026

Design Studio with Claude Code

あらゆるクリエイティブを Claude Code とともに作成するディレクトリ構造

概要

あらゆるクリエイティブを Claude Code とつくるための、ディレクトリ構造を作成した。サブエージェントやスキルを組み合わせ、案件の種類を問わず制作できる構成にした。

背景

クリエイティブには必ず批評がつきまとう。しかし一人では、批評を受けて改善する工程が回りにくい。Claude Code と協業することでそれを成立させ、クリエイティブの品質を一段階引き上げられないかと考えて実装した。

単なるデータの整理ではなく、批評の役目を自分の外に立てること。それがこの構造をつくった大きな理由だ。

方法

アートディレクターのエージェントにブランドルールを読ませ、成果物をそのルールに照らして審査させる。返ってくるのは感想ではなく、判定と、違反している条項の番号だ。このサイトの批評では「条件付きGO・必須修正6件」が返ってきて、実際の修正につながった。

アイデアを発散したいときは、同じ手順を同時に走らせて一度に広げる。このサイトでは18案を出して検討した。案件を立ち上げる作業も、フォルダとブリーフの雛形が最初から揃うので、考えることは中身だけになった。

同じ進め方を、業務効率化やデザインシステムの構築・運用にも展開し、仕組みとして提供している。

結果

これを用いて、ブランドの基盤とルール、ロゴやアイコンなどをつくった。このサイトで使っているアセットも、このサイト自体も、同じ仕組みからできている。いずれも同じスキルとサブエージェントから作成でき、この構造は今後も育てていく。

部品どうしの噛み合い

実線 = 判定と書き戻し / 点線 = 呼び出しと参照

呼び出される部門参照・書き戻しされる資産
/new-project
—
projects/案件ごとの記録が残る
/brief
—
—
/moodboard
trend-scoutリサーチ
library/前の案件の学びを引く
/explore
ui-web-designerUI / Webgraphic-designer静止ビジュアルmotion-designer動くプロト3d-artist立体copywriterコピー
—
/critique
art-director批評・判定
BRAND/規範。ここに照らして判定する
/deliver
—
—
/wrap
—
library/学びを書き戻す

次の案件は、前の学びから始まる ↩

このポートフォリオが、どう通ったか

7つのコマンド · 18版 · 憲法の改正2件

  1. 01/new-project案件を立てる目的と読者を決める。ここでは「採用と仕事の入口」。テンプレートを複製して、ブリーフ・リサーチ・探索・納品のフォルダが揃った状態から始まる。
  2. 02/brief方針を書く憲法から IA を導く。Works は結果、Log は過程。曖昧な依頼文を、目的・読者・制約・成功条件の形に変換する。ここを飛ばすと後の批評が効かない。
  3. 03/moodboard参考を集める4サイトを分解し、共通項だけ抜き出す。リサーチ担当のエージェントが事例を集め、方向性メモにまとめる。集めた資料は案件フォルダに残る。
  4. 04/explore案を広げる18版。光・プロッタ・流体ガラス・幾何書体。静止案は Pencil や Figma、動くものはコードのプロトタイプ。方向を何本も同時に走らせられる。
  5. 05/critique批評する条件付きGO、必須修正6件。憲法を2箇所改正した。批評役のエージェントが BRAND/ の規範に照らして審査し、可否と違反条項を返す。つくる側とは分けてある。
  6. 06/deliver書き出す35 URL を生成。検証を通してから公開へ。命名規則を当てて書き出し、画像を最適化する。渡す前に構文チェックと自動実行を必ず通す。
  7. 07/wrap閉じて学びを残すこの案件の学びを次へ渡す。学びを共有の記録に追記し、再利用できるものは library/ へ昇格させる。次の案件はそこから始まる。
捨てたもの
  • チューブのガラス
  • 手組みの薔薇
  • 常設の作図線
残ったもの
  • 数式の薔薇(12回目)
  • 円と四角だけの書体
  • 繰れている間だけの作図
規範になったもの
  • ガラスは物にのみ可、面材は不可
  • ワードマークを GEO Mono へ世代交代
  • 測っていない数字は出さない
記録に回したもの
  • 過程は Log 9本へ
  • 失敗の原因まで書く
  • 道具の限界も書く