brand-identity

ブランドアイデンティティ

コードを通じてブランドの価値を伝える、一貫性のあるビジュアルアイデンティティシステムを作成します。

前提条件

ブランドアイデンティティを構築する前に、既存のデザインコンテキストを確認します。

• .agents/design-context.md（design-contextを参照）を読み、既存のブランド名、カラー、フォント、スタイルのアーキタイプ、対象ユーザー、ブランドマークを確認します。更新するのはユーザーが変更を希望している項目だけにします。
• ブランドの業界、対象ユーザー、パーソナリティ特性（形容詞3～5個）を特定します。
• 詳細な作業を委任します。color-paletteスキルで完全なシェードスケールを、typographyでタイプスケールを生成します。以下の変数（--brand-100、--brand-500など）は、その共通のプリミティブスケールです。

---

ステップ1：ロゴデザインの原則

基本ルール

1. シンプルさ：16x16px（ファビコンのサイズ）でも認識できる必要があります。意味を加えない要素はすべて取り除きます。
2. 記憶に残ること：際立った特徴は1つにします。3つでも5つでもなく、1つです。
3. 拡張性：16pxのファビコンからビルボードまで対応できる必要があります。小さなサイズで消えてしまう細い線は避けます。
4. 汎用性：明るい背景、暗い背景、写真の上で使える必要があります。
5. 時代を超えること：トレンド（現在流行しているグラデーション、特定のイラストスタイル）は避けます。フラットで幾何学的な形は長く使えます。

CSS/SVGロゴの手法

シンプルな幾何学的SVGマーク（48x48のviewBox、角丸長方形と内側の図形）を使います。CSSのみでマークを作る場合は、色付きの角丸四角形にdisplay: grid; place-items: centerを指定し、内側の図形には::after疑似要素を使います。

最終的なロゴは、テキストをパスに変換（または図形として描画）したSVGで納品します。ロゴファイル内でウェブフォントや<text>に依存してはいけません。AI画像生成（image-generationスキル、Gemini）はコンセプトの方向性やムードボードの検討に役立ちますが、文字が不確かなラスター画像が生成されるため、選んだ方向性をクリーンなSVGとして描き直します。

---

ステップ2：ロゴのバリエーション

すべてのブランドに、最低4種類のロゴ形式が必要です。

1. プライマリー（ロックアップ）：アイコンとワードマークを横に並べます（flex, gap: 0.75rem）。アイコンは40px、ワードマークは見出し用フォントで1.25rem/700にします。
2. セカンダリー（縦積み）：アイコンの下にワードマークを配置します（flex-direction: column, text-align: center）。
3. アイコンマーク：シンボルのみ。ファビコン、アプリアイコン、アバターに使用します。
4. ワードマークのみ：インラインで使用するテキストのみのバージョンです。

レスポンシブパターン：デフォルトでは完全なロゴを表示し、max-width: 480pxではアイコンのみの表示に切り替えます。

---

ステップ3：ブランドカラーシステム

ブランドカラーシステムは、単なるパレットではありません。次のように構成します。

カラーの役割

役割	数	用途
プライマリー	1	メインのブランドカラー。CTA、主要なUI要素。
セカンダリー	1	補助的なアクセント。補完的な色。
ニュートラル	1スケール	テキスト、境界線、背景用のグレー。
セマンティック	4	成功、警告、エラー、情報。
サーフェス	2-3	背景のレイヤー。

実装

:root {
  /* Brand */
  --color-primary: oklch(0.55 0.15 250);
  --color-primary-light: oklch(0.70 0.10 250);
  --color-primary-dark: oklch(0.40 0.15 250);

  --color-secondary: oklch(0.60 0.18 330);
  --color-secondary-light: oklch(0.75 0.12 330);

  /* Surfaces (semantic names shared with design-system) */
  --bg-primary: oklch(0.99 0.005 250);
  --bg-secondary: oklch(0.97 0.005 250);
  --bg-raised: oklch(1.00 0 0);

  /* Text */
  --text-primary: oklch(0.20 0.02 250);
  --text-secondary: oklch(0.50 0.01 250);  /* ~5.8:1 on bg-primary */
  --text-inverse: oklch(0.97 0.005 250);
}

最終的なすべてのカラーを、ガイドラインページとdesign-context用にhexに変換し（color-paletteスキルには変換とコントラストのスクリプトがあります）、テキストと背景の各組み合わせを検証します。

---

ステップ4：タイポグラフィシステム

ブランドフォントの選定

ブランドのパーソナリティ	フォントスタイル	例
伝統的	セリフ	Playfair Display, Lora
モダン／クリーン	ネオグロテスク／ジオメトリックサンセリフ	Inter, DM Sans, Manrope
親しみやすい／温かみのある	丸みのあるサンセリフ	Nunito, Quicksand
技術的	等幅またはグロテスク	JetBrains Mono, Space Grotesk
高級感	細身のセリフ／サンセリフ	Cormorant, Outfit
遊び心のある	ディスプレイまたは手書き風	Bricolage Grotesque, Caveat

フォントスタックの定義

:root {
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; /* design-context: Heading Font */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

必ずシステムフォールバックを含めます。最後には必ず汎用ファミリーを指定します。

---

ステップ 5：ブランドパターンとテクスチャ要素

さりげないパターンを取り入れると、視覚的な豊かさとブランド認知度が高まります。

ドットグリッドパターン

.brand-pattern-dots {
  background-image: radial-gradient(
    circle,
    var(--brand-200) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
}

斜線

.brand-pattern-lines {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    var(--brand-100) 10px,
    var(--brand-100) 11px
  );
}

グリッドパターン

.brand-pattern-grid {
  background-image:
    linear-gradient(var(--brand-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--brand-100) 1px, transparent 1px);
  background-size: 32px 32px;
}

グラデーションノイズテクスチャ

.brand-texture {
  position: relative;
}

.brand-texture::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}

---

ステップ 6：ロゴの余白とクリアスペース

最小クリアスペース

ロゴの周囲に設けるクリアスペースは、ロゴマークの高さ（またはワードマーク内の「x」など、特定の文字の高さ）と同じにします。

.logo-container {
  /* Clear zone = logo height on all sides */
  padding: var(--logo-clearzone, 2rem);
}

/* Minimum size constraints */
.logo-primary {
  min-width: 120px;  /* Never render smaller than this */
}

.logo-icon-mark {
  min-width: 24px;   /* Absolute minimum for icon-only */
}

使用ルール（必ず記載）

1. ロゴを回転させないでください。
2. 承認済みの色以外にロゴの色を変更しないでください。
3. 引き伸ばしたり、変形したりしないでください。
4. 背景が煩雑な場合は、コンテナーなしで配置しないでください。
5. マークの高さと同じ最小クリアスペースを確保してください。

---

ステップ 7：ブランドガイドラインのドキュメント構成

ブランドガイドラインのページまたはシステムを作成する際は、次のセクションを含めてください。

セクション

1. ブランドストーリー：ミッション、ビジョン、価値観（それぞれ1段落）。
2. ロゴ：すべてのバリエーション、クリアスペースのルール、最小サイズ、誤った使用例。
3. カラー：プライマリー、セカンダリー、セマンティックの各パレットと、hex/oklch/rgb の値。
4. タイポグラフィ：フォントファミリー、スケール、組み合わせのルール。
5. 画像：写真のスタイル、イラストのスタイル、アイコンのスタイル。
6. ボイス＆トーン：文章作成のガイドライン（ただし、これはビジュアルデザインの範囲外です）。
7. パターン＆テクスチャ：背景の処理。
8. 適用例：すべての要素を組み合わせた例。

<main class="brand-guide"> 内で、意味的なセクション（<section id="logo">、<section id="colors"> など）として構成します。ロゴの表示には、サンプルブロック（明色／暗色の背景バリエーション、display: grid; place-items: center; min-height: 200px）を使用します。カラースウォッチは、自動調整グリッド（minmax(160px, 1fr)）に配置します。

---

ステップ 8：ファビコンとアプリアイコンの生成

ファビコンのサイズ

形式	サイズ	用途
ICO	32x32	ブラウザーのタブ（旧式）
PNG	180x180	Apple タッチアイコン
PNG	192x192	Android ホーム画面
PNG	512x512	Android スプラッシュ画面、PWA
SVG	任意	モダンブラウザー、拡大縮小可能

SVG ファビコン（最新の推奨方法）

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #4f46e5; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #818cf8; }
    }
  </style>
  <rect width="32" height="32" rx="6"/>
  
  <path d="M11 8h6a4 4 0 0 1 0 8h-6zm0 8h7a4 4 0 0 1 0 8h-7z" fill="none" stroke="white" stroke-width="3" stroke-linejoin="round"/>
</svg>

例の色の代わりに、デザインコンテキストのプライマリーの hex 値（ダークモードではプライマリーライト）を使用します。

Web マニフェスト

{
  "name": "Brand Name",
  "short_name": "Brand",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#4f46e5",
  "background_color": "#ffffff"
}

---

ステップ 9：ソーシャルメディアのアバターの一貫性

プラットフォーム間で一貫性を保つためのルール

1. 正方形または円形のアバターには、ロゴ全体ではなくアイコンマークを使用します。
2. マークが円形の切り抜きの端に触れないよう、パディングを設けます。
3. 背景にはブランドのプライマリーカラーを使用します。

/* Avatar-safe logo layout */
.social-avatar {
  width: 400px;
  height: 400px;
  background: var(--brand-500);
  display: grid;
  place-items: center;
  border-radius: 50%; /* Preview circular crop */
}

.social-avatar .logo-mark {
  width: 55%;  /* Leave ~22.5% padding on each side */
  height: 55%;
  color: white;
}

プラットフォームごとのサイズ

プラットフォーム	推奨アップロードサイズ
X/Twitter	400x400px
LinkedIn	400x400px
Instagram	320x320px
GitHub	500x500px
Slack	512x512px

---

ステップ 10：ブランドの適用例

名刺

3.5x2in、フレックスカラム、justify-content: space-between。氏名にはディスプレイフォントの 14pt/700、肩書きにはブランドカラーの大文字 9pt、連絡先にはグレーの 8pt を使用します。

メール署名

テーブルベースで構成します。ブランドカラーの border-right が付いたロゴマーク（48px）と、隣接するセルに縦に並べた氏名／肩書き／連絡先を配置します。Arial を使用し、スタイルはインラインのみとします。

ステップ 11：確認して保存する

1. 検証シートをレンダリングします（スクラッチパッドの HTML）：明るい背景、暗い背景、ブランドカラーの背景にロゴの各バリエーションを配置します。アイコンマークは 16、32、48、180px で表示し、モックのブラウザータブにファビコンを配置し、円形に切り抜いたアバターを表示します。スクリーンショットを撮り（npx playwright screenshot --full-page "file://$PWD/brand-proof.html" proof.png）、Read で表示します。次の点を確認します：16px でもマークを認識できること、線が消えていないこと、すべての背景でコントラストが保たれていること、円形の切り抜きに何も触れていないこと。
2. .agents/design-context.md への書き戻しを提案し、変更された項目のみを更新します：ブランドアイデンティティ（名前、タグライン）、カラーシステムの行（16 進数値）、タイポグラフィのフォント、デザインスタイルのアーキタイプ、ブランドマーク（ロゴの説明、アイコンスタイル）。差分を表示し、保存する前に確認を求めます。

---

クイックリファレンス：ブランドアイデンティティのチェックリスト

1. ブランドの個性を定義します（形容詞 3～5 個）。
2. ブランドのメインカラーとサブカラーを選びます。
3. フォントの組み合わせ（見出し＋本文）を選びます。
4. ロゴマークをデザインし、4 種類すべてのバリエーションを作成します。
5. クリアゾーンと最小サイズを定義します。
6. フルカラーシステム（シェード、セマンティックカラー、ニュートラルカラー）を作成します。
7. ブランドパターン／テクスチャを作成します。
8. ファビコンとアプリアイコンを作成します。
9. ソーシャルメディア用アバターを作成します。
10. ブランドガイドラインのページにすべてを記録します。
11. 検証シートをレンダリングして確認し、ブランド情報を design-context に保存します。