ブランドガイドを CLAUDE.md にして自動チェック化する

コース構成

このコースで学ぶこと

1. 01

   なぜ「文書化されないブランドガイド」が事故るか

   口頭で伝わっているブランドルールは、新メンバーが入るたびに崩れます。文書化 + 自動チェックで守る。

   「あの色は使わない」「このフォントは見出しだけ」「ロゴの周りには余白を取る」— こうしたルールは、ベテランの頭の中にあります。新人が入ると半年は崩れ続け、いつのまにかブランドが揺らぐのが現場の現実。

   Claude Code の CLAUDE.md にブランドガイドを書いておけば、Claude が制作物を見るたびに自動でチェックしてくれます。デザイナー本人もチェック工数が減ります。

   ブランドガイドの構造を決める
2. 02

   ブランドガイドの構造を決める

   色・タイポ・余白・装飾・禁止事項の 5 セクション。これだけあれば 80% カバーできる。

   • **色**：プライマリ・アクセント・ニュートラル・絶対禁止
   • **タイポ**：和文フォント・欧文フォント・サイズ範囲・ウェイト
   • **余白**：グリッド単位（4px or 8px）・最小マージン・コンテナ幅
   • **装飾**：角丸の値・影の数・グラデーションの可否
   • **禁止**：絶対やってはいけない表現（セリフ・3D・ネオン等）
   なぜ「文書化されないブランドガイド」が事故るか実際に書く CLAUDE.md
3. 03

   実際に書く CLAUDE.md

   下記をコピペして、自社用に書き換えるだけで完成。

   markdown

   # 弊社ブランドガイド（2026.05 版）
   
   ## カラー
   ### Primary
   - `#d97757`（warm clay）— メインアクセント
   ### Neutral
   - `#1f1b17`（charcoal）— テキスト
   - `#faf7f3`（cream）— 背景
   - `#7a7268`（muted）— サブテキスト
   ### 禁止色
   - 純黒 `#000000`（charcoal を使う）
   - ネオン系（`#00ff00` 等）
   - グレー一色（warm tint を加える）
   
   ## タイポグラフィ
   - 和文：游ゴシック / Geist Sans
   - 欧文：Geist Sans / Geist Mono（数字）
   - 見出し：Bold（700）、本文：Regular（400）
   - 禁止：明朝体・スクリプト系・装飾フォント
   
   ## 余白
   - グリッド：8px ベース
   - 最小マージン：16px
   - コンテナ最大幅：1280px
   
   ## 角丸
   - 12px / 16px / 24px のみ
   - 完全な角（0px）は禁止、ピル形状（999px）は CTA のみ
   
   ## 影
   - 1 種のみ：inset 1px white + 22px 拡散の暖色シャドウ
   - 複数階層の影は禁止（ネオモーフィズム的表現）
   
   ## 禁止表現
   - 3D 風グラデーション
   - セリフ系フォント
   - ベタ塗りの黒背景
   - 派手なアニメーション（バウンス・ジッター）

   ブランドガイドの構造を決める制作物を渡してチェックさせる
4. 04

   制作物を渡してチェックさせる

   新しいバナー・ランディングページのデザインを Claude に見せて、ブランドガイド準拠かを評価してもらう。

   text

   > design/banner-spring-2026.png を読み込み、CLAUDE.md のブランドガイドと比較して。
     違反箇所を 3 段階（重大 / 中 / 軽微）で分類、それぞれ修正案を提示。
   
   > ランディングページ HTML/CSS（src/pages/landing-spring.tsx）を読み、
     ブランドガイドの色・タイポ・角丸・影・余白の各項目で監査。
     違反箇所はファイル名:行で指摘し、改善後の値も提示して。

   出力イメージClaude の返答（違反指摘リスト・要約）

   ## ブランドガイド監査結果
   
   ### 重大（2 件）
   - 背景に純黒 `#000000` を使用 → `#1f1b17`（charcoal）に変更
   - 見出しに明朝体 → 和文は游ゴシック / Geist Sans に統一
   
   ### 中（1 件）
   - CTA ボタンの角丸 `8px` → 規定は 12 / 16 / 24px。`12px` を推奨
   
   ### 軽微（1 件）
   - 上部マージン `12px` → 最小マージンは 16px
   
   …（中・軽微あと 3 件）

   実際に書く CLAUDE.mdSkill 化と運用
5. 05

   Skill 化と運用

   `/brand-check` の 1 コマンドでチェックが走るように。新メンバーが入っても品質が揺らがない仕組み。

   手を動かす

   0 / 4

   • ブランドガイドを CLAUDE.md or .claude/rules/brand.md に書く
   • `brand-check` Skill を作成（description: 「制作物のブランドガイド準拠を確認したいとき」）
   • デザイナー全員に共有（git で配布）
   • 新メンバーのオンボーディングで「最初の 1 週間で 5 回 /brand-check を試す」を課す

   Lv.3 — メモリと CLAUDE.md

   理解度チェック

   1. Q1.ブランドガイドの自動チェックを継続運用するうえで『新メンバーが入っても品質が揺らがない』ための鍵は？

      A毎月リードデザイナーが全制作物を目視チェックするBガイドを git で配布し、新メンバーのオンボーディングで /brand-check を必修化するC違反したらペナルティを設けるDデザイナーを増員する

   2. Q2.ブランドガイドの自動チェックを Claude に任せてよい範囲はどこまでか？

      Aブランドの今後の方向性を決める意思決定B新色や新フォントを採用するかどうかの最終判断C許可色・フォント・余白などの定量ルールに違反していないかの一次チェックDロゴの刷新そのもの

   3. Q3.ブランドガイドの CLAUDE.md に含めるべきでない情報はどれか？

      A許可されたカラーコードと禁止色のリストB推奨フォントとウェイトの組合せC未公開クライアントの実名や契約金額D禁止表現（3D 風グラデーション、セリフ系フォントなど）
   制作物を渡してチェックさせる