brandkit-build

Brand Kit を作る

ステップ 3／4。入力は brandkit-interview の初稿、出力は作業に使えるフォルダーです。

実際の問題

ほとんどのスタイルガイドは、内容ではなく長さが原因で失敗します。900 行も読む人はいません。コンテキストウィンドウを持つ言語モデルも同じです。読んではくれますが、20 番目のルールを最初のルールと同じように重視し、結局、平均的な判断をしてしまいます。

次の 3 つがそろえば、キットは機能します。

1. 守るべきルールが、実際に読めるほど短いこと。
2. 色と寸法が、説明だけでなく実行可能な形で用意されていること。
3. 誰かが意識しなくても、ルールが自動的に適用されること。

3 つ目は、誰もが忘れてしまう点です。フォルダー内の CLAUDE.md がそれにあたります。

作成されるもの

Brand/
├── CLAUDE.md            Arbeitsregeln, greifen automatisch in diesem Ordner
├── BRAND.md             die verbindliche Kurzfassung, das Herzstück
├── REFERENCE.md         die Rohfassung aus dem Interview, als Nachschlagewerk
├── README.md            was wo liegt, plus Starter-Satz für außerhalb
├── brand-helmet.html    Farb- und Schrift-Tokens als fertiger CSS-Block
├── brand-props.json     Akzentfarbe im Design-Editor umschaltbar
├── wordmark.svg         Schriftzug, Standardfall
├── mark.svg             quadratische Bildmarke für kleine Flächen
└── beispiel/            lauffähige Referenz mit allen Bausteinen

フォルダーを長期的に保存する場所に作成し、Git リポジトリにしてください。バージョン履歴のない Brand Kit は失われてしまいます。

BRAND.md：簡潔な概要

これが最も重要なファイルです。目安は 250 行未満です。それより長くなる場合は、内容を REFERENCE.md に移してください。

おすすめの構成：

1. ブランドを一文で表したものと、1 行で示すパーソナリティ
2. トークンの表：変数名、16 進数値、役割。面積の割合も記載します
3. タイポグラフィ：2〜3 種類の役割と、各フォーマットのサイズ階層
4. グリッドと間隔：数値の系列、ページ余白、角丸、枠線、シャドウ
5. ワードマーク：用途ごとのファイル、最小サイズ、保護領域、禁止事項
6. 構成要素：繰り返し使う要素と具体的な寸法
7. フォーマット：用途ごとのピクセル寸法
8. テキスト：言語、呼びかけ方、良い例と悪い例を 1 つずつ、禁止リスト
9. 使用禁止：視覚的な禁止事項をまとめた厳格なリスト
10. 提出前のチェックリスト：はい／いいえで答えられる 10 個の質問

効果を発揮するキットと、飾りにしかならないキットの違いを生むのは、次の 2 点です。

形容詞ではなく割合を示します。「アクセントカラーは控えめに使う」では検証できません。「アクセントカラーは面積の 10％未満とし、セクションの背景やグラデーションには決して使わない」なら検証できます。

原則ではなく具体的な寸法を示します。「ゆったりとした間隔」では誰の助けにもなりません。「セクション間の間隔はデスクトップで 96〜128 ピクセル、モバイルで 56〜72 ピクセル」とすれば役立ちます。

禁止リストは詳しく書いてください。平均的な仕上がりを防ぐ部分であり、守るのも簡単です。

CLAUDE.md：仕組み

このファイルがなければ、セッションのたびに誰かが手作業でキットについて説明する必要があります。ファイルがあれば、フォルダー内で作業する際にルールが適用されます。

簡潔にまとめ、ほかのファイルの扱い方だけを定めます。矛盾がある場合にどのファイルを優先するか、定義済みのトークンだけを使うこと、参照用の例がどこにあるか、キット自体の変更は事前に相談することなどです。テンプレートは assets/CLAUDE.md.template にあります。

フォルダー外で作業する場合は、README にスターター文を記載し、セッション開始時にコピーできるようにしてください。たとえば次のようにします。

Lies zuerst <PFAD>\BRAND.md und halte dich exakt daran.
Referenz-Artboards: <PFAD>\beispiel\

キットは自動で読み込まれません。README にはそのことを明記してください。そうしないと、初めて使う人が戸惑います。

実行可能なファイル

brand-helmet.html には、Google Fonts へのリンクと、すべてのトークンを CSS 変数として含む :root ブロックを記述します。さらに、基本スタイルと、繰り返し使う役割のための補助クラスを1〜2個追加します（たとえば、技術的なラベル用の .lbl、モノスペースの数値用の .val）。テンプレート：assets/brand-helmet.html.template。

目的は、以降のレイアウトでは var(--...) だけを使い、生の16進数値を使わないことです。こうすれば、色の変更はすべてのファイルを検索する代わりに、1行を変更するだけで済みます。

brand-props.json を使うと、デザインエディターでアクセントカラーを切り替えられます。オプションには注意してください。機能色（警告、エラー）を選択肢に含めると、ブランドのアクセントカラーをエラー色に設定され、肯定と否定が同じ色になってしまう可能性があります。ブランドカラーだけを選択肢にするか、BRAND.md に、この切り替えは検査ツールであり、2つ目のブランドアクセントではないことを明記してください。

wordmark.svg と mark.svg は、シンボルではなく、ワードマークから作成します。ブランドが明示的に求めている場合を除き、ロボット、脳、回路基板、グラデーションの球体は使わないでください。

後で問題になりやすい落とし穴があります。<text> を使った SVG は、表示するデバイスにそのフォントが必要です。Google Font を読み込んだブラウザーでは正しく表示されても、印刷時や Illustrator では代替フォントが使われます。ワードマークをブラウザーの外で使う場合は、パスに変換する必要があることを README に記載してください。

beispiel/、リファレンス

少なくとも2つの実行可能なサンプル画面を作成し、通常はデスクトップとモバイルで、すべての構成要素を正しいサイズで示します。ここは最も手間がかかる一方で、最も効果の大きい部分です。次回は一から作るのではなく、コピーして使えるようになります。

サンプルデータであることを明確に示してください。リファレンス用アートボードにある架空の数値が、実際のページに使われてしまうおそれがあります。

簡潔にまとめる。省略はしない

草案から BRAND.md にまとめる際は、次のようにします。

• 残す：すべての数値、16進数値、寸法、禁止事項の一覧。
• 削る：理由、導出過程、繰り返し、二重に記載されている内容。これらは REFERENCE.md に残します。
• 文章を表にする：「メイン見出しは52ピクセルで、ディスプレイ用フォントを使う」は、表の1行にします。

草案の段階で未確定だった内容は、ここでも未確定のままにします。未確定であることを明記してください。空欄を埋めるために、もっともらしい値を作らないでください。そうすると、誰も決定していない内容が、決定事項として扱われてしまいます。

最後に

作成したチェックリストを、リファレンス用アートボードに照らして確認します。自分のサンプルが自分のチェックリストに合格しない場合は、どちらかが間違っています。

その後、何を作成したか、どこに置いたか、BRAND.md の長さ、未確定のまま残った内容を簡潔に報告します。キットを使ったビルドについては brandkit-publish を案内してください。