brand-style-guide

ブランドスタイルガイド

ブランドシステムを明確に記録し、誰もが曖昧さなく活用できるようにします。このドキュメントは、最も長く使われる成果物です。デザイナー、開発者、代理店、ベンダーが何年にもわたって参照します。プレゼンテーションではなく、リファレンスマニュアルとして作成してください。

このスキルは、ブランドアイデンティティがすでに設計されていることを前提としています（まだの場合は、まず brand-identity を実行してください）。このスキルの成果物は、正式なリファレンスドキュメントになります。

---

使用する場面

• 完成したブランドアイデンティティのブランドガイドラインを作成する
• 正式なガイドがない既存ブランドをドキュメント化する
• 既存のスタイルガイドの不足や不整合を監査する
• ベンダー、パートナー、新しいチームメンバーに渡すブランドブックを作成する
• 大規模なブランド刷新後にガイドを更新する

使用しない場面

• ブランドアイデンティティがまだ設計されていない（brand-identity を使用してください）
• ブランドボイスに特化した作業（ボイスドキュメントには brand-voice を使用し、その後に統合してください）
• UI コンポーネントを構築する（design-standards または design-system を使用してください）

---

必要な入力

• 完成したブランドアイデンティティ（ロゴ、カラー、タイポグラフィ、画像の方向性、モーションの原則）
• ブランドボイスとトーンのドキュメント（またはボイスのセクションを作成するために十分な情報）
• 実際のコンテキストでブランドを示す適用例
• 必須、柔軟、禁止事項の判断

---

フレームワーク：8つのセクション

完全なスタイルガイドには8つのセクションがあります。多くのガイドでは2つか3つのセクションが省かれ、その結果、後工程で混乱が生じます。最初から8つすべてを作成してください。

1. ストーリー

ブランドの背景にある物語です。なぜ存在するのか、何を大切にしているのか、何を拒むのかを説明します。

• 起源／創業のストーリー
• ミッションとビジョン
• 価値観（3〜5項目。それぞれが実践で何を意味するかも記載）
• ポジショニングステートメント
• オーディエンス（ブリーフと同程度の具体性で記載）
• 私たちが「何ではないか」（明確に拒否するもの）

2. ロゴシステム

すべてのマークのあらゆるバリエーションと、その使用ルールを記載します。

• プライマリロゴ（各要素の関係を示す構成グリッド付き）
• ワードマーク
• シンボル／グリフ
• ロックアップのバリエーション（横組み、縦積みなど）
• モノグラム（システムに含まれる場合）
• クリアスペースのルール（ロゴ周囲に必要な最小余白）
• 最小サイズ（印刷物とデジタルで許容される最小サイズ）
• 使用可能なカラー処理（フルカラー、単色、ノックアウト、反転）
• 禁止する処理（拡大縮小、回転、色の変更、ドロップシャドウ、グラデーションなど、禁止事項すべて）
• ファイル形式と保存場所

3. カラー

ルールを含む完全なカラーパレットを記載します。

• プライマリパレット（ブランドを象徴するカラー）
• セカンダリパレット
• ニュートラルカラーのスケール
• セマンティックカラー（成功、警告、エラー、情報）
• ライトモードとダークモードのバリエーション
• 各色の値：HEX、RGB、HSL、CMYK、Pantone（印刷で使用する場合）
• コントラスト比の記録
• 使用可能な組み合わせ
• 禁止する組み合わせ
• 使用の優先順位（プライマリを先に、セカンダリを補助として、ニュートラルを中心に）

4. タイポグラフィ

完全な文字組みシステムを記載します。

• ディスプレイ書体（サイズ例付き）
• 本文書体（サイズ例付き）
• 等幅書体（該当する場合）
• タイプスケール（使用する具体的なサイズ）
• ウェイトとスタイルの使い分け（用途ごとのウェイト）
• 行の高さの比率
• 文字間隔の基準
• Web のフォールバックスタック
• ライセンス上の制約がある状況で使えるオープンソースの代替書体
• 禁止する処理（全大文字の多用、擬似イタリックなど）

5. 画像とイラスト

このブランドにおける画像の見せ方を説明します。

• 写真の方向性とサンプルライブラリ
• イラストのスタイルとサンプルライブラリ
• アイコノグラフィのシステムと全アイコンセット（または追加ルール）
• 使用禁止の画像（よくあるストックフォトの clichés、決して見せないもの）
• 写真の処理ルール（色処理、トリミング、構図）

6. ボイスとトーン

ブランドの語り口です。（別途作成している場合は、brand-voice の成果物を使用します。）

• ボイスの属性（「私たちはXであり、Yではない」という形式の形容詞を3〜5個）
• コンテキスト別のトーンの変化（オンボーディング、エラー、マーケティング、サポート、法務）
• 語彙の好み（使用する言葉、避ける言葉）
• 文法とスタイルのルール
• 例（良いコピーと悪いコピーを並べて掲載）

7. 活用例

ブランドを実際の場面で適用します。

• Web（ホームページ、製品ページ、ブログテンプレート）
• メール（テンプレート、署名、トランザクションメール）
• ソーシャルメディア（投稿テンプレート、プロフィール画像、ストーリー形式）
• 印刷物（名刺、レターヘッド、印刷広告）
• パッケージ（該当する場合）
• サイン（該当する場合）
• 社内文書（スライド、レポート、提案書）
• それぞれに、望ましい仕上がりを示す例を含めます

8. すべきこと・避けるべきこと

境界を例で示します。

• ロゴに関するすべきこと・避けるべきこと（正しい使い方と誤った使い方の視覚的な例）
• 色に関するすべきこと・避けるべきこと（使用する配色、避ける配色）
• 書体に関するすべきこと・避けるべきこと（使用する表現、避ける表現）
• 構成に関するすべきこと・避けるべきこと（効果的なレイアウトパターン、効果のないパターン）
• トーンに関するすべきこと・避けるべきこと（ブランドに合う表現、合わない表現）

実際に参照されるのは、すべきこと・避けるべきことのセクションです。最もざっと目を通しやすいセクションにしてください。

---

ワークフロー

1. 入力資料を洗い出します。 ブランドアイデンティティに関する作業で完了しているものは何ですか？ トーンに関する作業で完了しているものは何ですか？ 不足しているものは何ですか？
2. 形式を確認します。 PDF、Webページ、Notionドキュメント、印刷書籍、それともすべてですか？ 形式によって制作要件は異なります。
3. セクションごとにドラフトを作成します。 references/style-guide-template.md のテンプレートを使います。
4. 実例で検証します。 ルールごとに、実際の適用例を探します。例のないルールは無視されます。
5. 利用する人にレビューしてもらいます。 デザイナー、開発者、マーケターがギャップを見つけてくれます。
6. バージョン管理します。 スタイルガイドは進化します。文書に日付を記載し、各バージョンで変更した内容を記録します。
7. チームが実際に開く形式で公開します。 共有ドライブに置かれた200ページのPDFは、役に立たない重荷です。明確なURLがあるWebページやFigmaファイルなら活用されます。

---

よくある失敗パターン

• 「何者ではないか」のセクションを省く。 禁止事項がなければ、何でも許容されてしまいます。
• 例のない文書。 視覚的な例のないルールは抽象的で、無視されます。
• 例だけの文書。 ルールがなければ、例を新たな状況に適用できません。
• 誰も開かない静的なPDF。 チームが日常的に使う形式（Webページ、Figma、Notionなど）でガイドを公開します。
• バージョン履歴がない。 ブランドが進化しても、誰もどのルールがいつ変わったのかわかりません。
• 理想だけを掲げたルール。 ブランドが実際に守っていないルールは、提案として扱われます。望ましいことではなく、実際の状況を記録します。
• 「すべきこと・避けるべきこと」を埋め草として扱う。 このセクションは最もよく使われます。力を入れて作成しましょう。

---

出力形式

標準の出力は、複数のセクションからなるMarkdownドキュメント、または構造化されたファイル一式と、関係者との共有に使えるプレゼンテーション対応版（Webページ、PDF、Figma）です。

推奨する構成：

brand/
  style-guide.md          (the canonical document)
  story.md                (or as a section)
  logo/
    construction.md
    files/                (SVG, PNG, etc.)
  colors.md
  typography.md
  imagery/
    photography.md
    illustration.md
    icons/
      icons.md
      files/
  voice.md
  applications/
    web.md
    email.md
    social.md
    print.md
  dos-and-donts.md

消費者向けに公開する場合は、これらのソースファイルを読み込むWebページ版を作成します。ソースファイルを正とし、プレゼンテーションはその表示形式とします。

---

参照ファイル

• references/style-guide-template.md - セクションごとに記入できるテンプレートです。
• references/maintenance-playbook.md - 公開後にガイドを最新の状態に保つ方法です。