branding

ブランディング

プロジェクトのブランドアイデンティティを一式作成します。ロゴマーク、ワードマークのロックアップ、カラーパレット、フォントの選定、本番環境向けのアセットパック、ブランドガイドが含まれます。

前提条件

開始する前に、以下のツールがインストールされていることを確認します。

which inkscape && which magick

• Inkscape — SVG の操作、テキストのパスへの変換、PNG のエクスポート
  • macOS：brew install --cask inkscape
• ImageMagick v7+ — 画像の合成、サイズ変更、形式の変換
  • macOS：brew install imagemagick

概要

ワークフローは7つのフェーズで構成されます。最初の3つはユーザーと協力して進め、残りの4つは主に自動でアセットを制作します。

1. ディスカバリー — プロジェクトについて理解し、ロゴで何を伝えるべきかを把握します
2. ロゴの生成 — SVG のコンセプトを直接作成し、ユーザーと一緒に確認します
3. フォントと色の選定 — ワードマークのフォントとブランドカラーを選びます
4. SVG の仕上げ — Inkscape を使い、テキストをパスに変換し、viewBox を整え、ロックアップを作成します
5. アセットパックの制作 — すべてのバリエーション、サイズ、形式を書き出します
6. ブランドガイド — 包括的な HTML ブランドリファレンスページを生成します
7. プロジェクトへの組み込み — アセットを必要な場所に配置します（任意）

ブラウザーでのプレビュー

共同作業で進めるフェーズでは、一時的な HTML ページを使ってユーザーに選択肢を提示します。これはこのワークフローの基本的な手法です。フォルダー内の SVG ファイルを開くようユーザーに頼んだり、見た目を想像してもらったりしてはいけません。

手順：

1. プロジェクトの tmp/ ディレクトリに自己完結型の HTML ファイルを生成します（例：tmp/brand-fonts.html）
2. Chrome で開きます：open -a "Google Chrome" /path/to/file.html
3. ユーザーが確認し、フィードバックを提供します
4. コミットする前に tmp/ 内のファイルを削除します

プレビューページの重要なルール：

• HTML と CSS のみを使用します。可能な限り JavaScript は避けてください。JavaScript が必要な場合は、セキュリティフックでブロックされる可能性のある innerHTML ではなく、安全な DOM メソッド（textContent、createElement）を使用します。
• フォントのプレビューには、<head> 内の <link> タグから Google Fonts を読み込みます。ブラウザーですぐに描画されます。
• ロックアップのプレビューでは、SVG マークを HTML に直接インラインで記述します（外部ファイルへの参照は使用しません）。
• ページは自己完結型にします。Google Fonts CDN 以外の外部依存関係は使用しません。

---

フェーズ1：ディスカバリー

ユーザーに以下を確認します。

1. プロジェクト名 — ワードマークに使用する大文字・小文字の表記と綴り
2. プロジェクトの内容 — 分野を理解するための一文
3. ロゴの雰囲気 — 抽象的な幾何学模様？ レターマーク？ マスコット？ アイソメトリック？ ミニマル？
4. シンボルや比喩 — 名前から連想されるもの（例：「Kiso」は日本語で「基礎」を意味し、積み重ねた建築ブロックのアイデアにつながりました）
5. 色の好み — 暖色系か寒色系か、既存の色があるか、または「おまかせ」

会話の中ですでに得られている回答を活用します。ディスカバリーは手短に済ませ、コンセプトの作成に進みます。

フェーズ 2：ロゴの生成

logo-design スキルを読み込み、シンボルの制作にその指示を適用してください。 ブリーフ、リファレンスライブラリでのカテゴリー調査、3つのコンセプト、各種テスト（16 px、単色、反転、競合他社と並べるシェルフテスト、svg_audit.py）、およびコンセプトのチェックポイントに従ってください。チェックポイントで作業を止め、キットは作成しないでください。ユーザーが方向性を選んだら、選ばれたシンボルをここに戻し、フェーズ 3 以降を進めます。ライブラリ内のロゴは商標であり、調査目的でのみ使用してください。

logo-design がインストールされていない場合は、以下の手順でシンボルを作成してください。

編集可能な SVG として、ロゴを直接作成します。

ユーザーが選択肢を希望する場合は、ディスカバリーブリーフを参考に異なるコンセプトをいくつか作成するか、選ばれた方向性を直接ブラッシュアップしてください。ロゴの代わりとなるラスター画像を埋め込まず、整った viewBox を備えた実際のベクター形状（パス、図形、塗り、線）を作成してください。シンボルはワードマークと分けてください。ワードマークにはフェーズ 3 で適切なフォントを使用します。

SVG をレンダリングし、提示する前に目視で確認してください。小さなアイコンサイズや明暗の背景も含め、HTML プレビューでコンセプトを並べて表示してください。シルエット、間隔、線の一貫性、読みやすさを確認します。ユーザーのフィードバックをもとに調整し、承認済みのバージョンはそのまま保持します。ユーザーが後継案を選んだ場合にのみ置き換えてください。

quiver.ai や recraft.ai などのサードパーティ製 SVG ジェネレーターは、ユーザーが希望する場合、または SVG の直接編集では目的を達成できない場合の任意の代替手段です。

シンボルが選ばれたら、アセットパックを作成する前に SVG の構造（viewBox、寸法、色、埋め込みテキストやフォントの有無）を確認してください。フェーズ 4 では、残っているテキストをパスに変換します。

フェーズ 3：フォントと色の選定

フォント

シンボルのスタイルに合うフォントを 4～6 種提案します。すべての候補を並べて表示する単一の HTML プレビューページを作成します。

• 各フォントで、プロジェクト名を提案するブランドカラーを使い、大きなサイズの太字（700／800）で表示
• 比較用に、2 行目を標準の太さ（400）で表示
• 本文サンプル（"The quick brown fox..."）
• フォントが対応している場合は、太さの見本（400、600、700、800）
• 印象と適合性に関する簡潔なメモ（例："幾何学的でモダン — 現在のワードマークに最も近い"）

Google Fonts の <link> タグからフォントを読み込みます。ユーザーが比較できるよう、Chrome でページを開いてください。

ユーザーがフォントを選んだ後：

1. 最も確実な入手先である Google Fonts の GitHub リポジトリからダウンロードします。

   curl -L -o /tmp/FontName.ttf "https://raw.githubusercontent.com/google/fonts/main/ofl/fontname/FontName%5Bwght%5D.ttf"
   

   注：ほとんどの Google Fonts では ofl/ パスを使用します。file /tmp/FontName.ttf でダウンロードを確認してください。"TrueType Font data" と表示される必要があります。"HTML" や "ASCII text" ではありません。
2. ローカルにインストールします：cp /tmp/FontName.ttf ~/Library/Fonts/（macOS）
3. アセットパック用に brand/fonts/ に保存します

色

ユーザーがすでにカラー付きのロゴを持っている場合は、まず色を抽出します。SVG 内で見つかったすべての色を、プレビュー用 HTML ページにチップとして表示し、それぞれの役割に基づいて名前を付けます（例：「船体ネイビー」「帆レッド」）。

次に、ブランドカラーの候補を、クリックできそうな大きなカードとして提示します。カードには以下を含めます。

• 16 進数カラーを示す大きな色見本
• 色の名前と、その色が与える印象の説明
• 最適な色についての推奨メモ

色の用途を示す提案カラー体系セクションも含めます。

• プライマリ — ボタン、リンク、アクティブ状態
• ダーク／ネイビー — サイドバー、見出し、ダークサーフェス
• アクセント — アラート、破壊的操作、視覚的なアクセント
• ハイライト — 情報バナー、選択状態

カラーバリエーションの検討： ユーザーが異なる色合いを試したり、色を置き換えたりしたい場合（例：「この赤は暗すぎます」）、色を置き換えたロゴ全体をそれぞれ表示する 4～6 種類のバリエーション比較ページを作成します。素早く試せるよう、sed を使って SVG 内の 16 進数カラー値を置き換え、各バリエーションの SVG を HTML に直接インラインで埋め込みます。

Tailwind のカラースケール： ユーザーがブランドカラーを決定したら、Tailwind 用の色合い全体のスケールが必要になります。以下のサイトで生成するよう案内します。

• uicolors.app — OKLCH ベースの優れたスケールを生成できます
• kigen.design/color — 代替のジェネレーターです

ユーザーが 16 進数カラーを貼り付けると、OKLCH 形式の 50～950 スケールが生成されます。それを共有してもらい、プロジェクトに組み込みます。

色の決定事項を記録する

アセットパック用に、最終的な色を記録します。

• プライマリ：Tailwind のスケール名を含む、メインのブランドカラー
• すべてのロゴカラー：16 進数値と役割（船体、帆、水など）
• Tailwind スケール：50～950 の OKLCH 値全体

フェーズ 4：SVG の調整

このフェーズでは、他のすべての素材の元となるマスター SVG を作成します。9 個の SVG ファイルが必要です。

バリエーション	マークのみ	横型ロックアップ	縦型ロックアップ
カラー	mark-color.svg	logo-horizontal-color.svg	logo-stacked-color.svg
黒	mark-black.svg	logo-horizontal-black.svg	logo-stacked-black.svg
白	mark-white.svg	logo-horizontal-white.svg	logo-stacked-white.svg

ロックアップの作成

ロックアップとは、マークとワードマークのテキストを組み合わせたものです。レイアウトは 2 種類あります。

• 横型 — 左側にマーク、右側にテキストを配置し、縦方向に中央揃え
• 縦型 — 上にマーク、下に中央揃えのテキストを配置

カラー版の横型ロックアップから始めます。

1. マークの SVG を開き、寸法を確認します。
2. 選択したフォントを使用する <text> 要素とマークを組み合わせて、新しい SVG を作成します。
3. テキストのサイズを比率に合わせます。横型ではテキストの大文字の高さをマークの高さの約 40～60％にし、縦型ではテキストの幅をマークの幅とほぼ同じにします。
4. 余白を最小限にして、コンテンツにぴったり合うよう viewBox を設定します。

テキストをパスに変換する前に、各ロックアップを Chrome でプレビューします。SVG を直接開きます — open -a "Google Chrome" file.svg。先に進む前に、ユーザーにプロポーション、間隔、全体の印象を確認してもらいます。フィードバックに基づいて、テキストの x 位置、font-size、viewBox の幅を調整します。

テキストをパスに変換する

Google Fonts の @import は Inkscape では機能しません。まずフォントをローカルにインストールする必要があります（フェーズ 3 で実施済み）。次に、SVG を自己完結型にするため、すべてのテキストをパスに変換します。

inkscape input.svg --actions="select-all;object-to-path;export-filename:output.svg;export-do"

変換後、grep -c '<text' output.svg で確認します。結果は 0 になるはずです。

カラーバリエーション

• 黒：すべての塗りつぶし色を #18181b に置き換えます（純粋な黒ではなく zinc-900 を使用します。これは読みやすさを高めるための標準的なデザイン手法です）。
• 白：すべての塗りつぶし色を #ffffff に置き換えます。
• ロックアップでは、「カラー」バリエーションのマークは元の色を保ち、テキストは #18181b にします。黒／白のバリエーションでは、すべてを単色にします。

色の置き換えには sed を使います。fill="#hex" 属性と、style 属性内の fill:#hex の両方に対応します。

sed 's/fill="#[0-9A-Fa-f]\{6\}"/fill="#18181b"/g; s/fill:#[0-9a-fA-F]\{6\}/fill:#18181b/g' input.svg > output.svg

viewBox の調整

合成後、コンテンツにぴったり合うよう viewBox をトリミングします。

inkscape file.svg --actions="select-all;fit-canvas-to-selection;export-filename:file.svg;export-do"

または、要素のバウンディングボックスを確認してから、viewBox を手動で調整します。

inkscape file.svg --query-all

フェーズ 5：アセットパックの制作

ディレクトリ構成

brand/
├── svg/          9 master SVGs (from Phase 4)
├── png/          rasterized variants at standard sizes
├── favicon/      ico + png sizes + webmanifest
├── social/       platform-specific images
└── fonts/        font files + README

PNG のエクスポート

Inkscape を使用してマスター SVG からエクスポートします（ImageMagick より SVG のレンダリング品質に優れています）。

マーク — 次のサイズでエクスポートします：64、128、256、512、1024px（正方形、幅 = 高さ）

inkscape mark-color.svg --export-type=png --export-filename=../png/mark-color-256.png --export-width=256

ロックアップ — アスペクト比に適した幅でエクスポートします：

• 横型：幅 400、600、800px
• 縦型：幅 300、500px

ファビコン

利用可能な場合は /favicon スキルを使用してください。そうでない場合は、マークから手動で生成します。

# PNG sizes for favicons
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/favicon-16x16.png --export-width=16
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/favicon-32x32.png --export-width=32
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/apple-touch-icon.png --export-width=180
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/android-chrome-192x192.png --export-width=192
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/android-chrome-512x512.png --export-width=512

# ICO (multi-resolution)
magick brand/favicon/favicon-16x16.png brand/favicon/favicon-32x32.png brand/favicon/favicon.ico

brand/favicon/site.webmanifest を作成します。

{
  "name": "PROJECT_NAME",
  "short_name": "PROJECT_NAME",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#HEX_OF_BRAND_COLOR",
  "background_color": "#ffffff",
  "display": "standalone"
}

ソーシャル画像

OG 画像（1280x640）— GitHub のソーシャルプレビューおよび Open Graph タグ用：

magick -size 1280x640 xc:white \
  \( brand/svg/logo-horizontal-color.svg -resize 1100x -trim +repage \) \
  -gravity center -composite \
  brand/social/og-image-1280x640.png

-gravity center の前にある -trim +repage は重要です。SVG 内部の余白を取り除くことで、ImageMagick が viewBox の境界ボックスではなく、実際の描画内容を中央に配置できるようにします。これがないと、ロゴが中央からずれて表示されます。

プラットフォームアイコン：

• Discord サーバーアイコン：マークから 512x512 で作成
• GitHub アバター：マークから 500x500 で作成
• npm アイコン：マークから 256x256 で作成

inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/social/discord-icon-512.png --export-width=512
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/social/github-avatar-500.png --export-width=500
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/social/npm-icon-256.png --export-width=256

フォントの README

フォントの選択、ライセンス、入手元を記載した brand/fonts/README.md を作成します。

# Brand Font

**[Font Name]** by [Foundry]

- Weight: 700 (Bold) for wordmark
- License: SIL Open Font License
- Source: [GitHub URL]

The full font family archive is included for reference.

フェーズ 6：ブランドガイド

brand/brand-guide.html に、包括的な HTML ブランドガイドページを作成します。デザイナーが「ブランドスタイルガイド」や「ブランドボード」として納品するような、チームの誰もが開いてブランドの使い方を確認できる 1 ページの資料です。

ブランドガイドには、次のセクションを含めてください。

1. ヘッダー

上部にプロジェクト名とタグライン／説明を配置します。

2. ロゴのバリエーション

9 種類すべての SVG バリエーションをグリッドに並べて表示します。

• カラーの行：マーク、横型ロックアップ、縦型ロックアップ（白背景）
• 黒の行：同じ 3 種類（白背景）
• 白の行：同じ 3 種類（暗い背景、例：#0f172a）

それぞれにファイル名と推奨用途を記載します。

• マーク — ファビコン、アプリアイコン、ソーシャルアバター、小さなスペース
• 横型 — ヘッダー、README バッジ、メール署名
• 縦型 — スプラッシュ画面、印刷物、縦方向のスペースに余裕がある場合

最小サイズの目安も記載します。マークは 32px 未満、ロックアップは幅 120px 未満で表示しないでください。

3. カラーパレット

各ブランドカラーを大きなスウォッチで表示し、次の情報を記載します。

• 色名と用途（例：「プライマリ — ボタン、リンク、フォーカスリング」）
• Hex 値
• OKLCH 値（利用可能な場合）
• Tailwind クラス（例：bg-primary-500）

Tailwind の全スケールを生成した場合は、50〜950 の全段階をラベル付きのスウォッチで横一列に表示します。

ロゴ固有の色（船体、帆、水など）もすべて、Hex 値とともに表示します。

4. タイポグラフィ

• フォント名、ファウンダリー、ライセンス
• ワードマークのウェイトと字間
• ワードマークのウェイトとレギュラーウェイトでのフォントプレビュー
• フォントの入手元（Google Fonts、GitHub リポジトリなど）と、brand/fonts/ 内のファイル保存場所

5. アセット一覧

brand/ ディレクトリ内の全ファイルを、次の情報とともに表に記載します。

• ファイル名
• 寸法または用途
• 形式

サブディレクトリ（svg/、png/、favicon/、social/、fonts/）ごとに整理します。

作成上の注意

• 自己完結型 HTML — すべての SVG を直接インライン化し、ブランドフォントは Google Fonts の <link> で読み込みます。外部ファイルへの参照は使用しません（ガイドはどこから開いても動作する必要があります）。
• JavaScript 不使用 — HTML と CSS のみで作成します。これにより、どこでも動作し、セキュリティフックの問題も回避できます。
• すっきりとしたプロフェッショナルなデザイン — ブランドカラー自体をページのスタイルに使用します。背景は白、見出しとアクセントにはブランドカラーを使います。
• 印刷に適したレイアウト — 標準的なページ幅で見やすいレイアウトにします。

作成後、ユーザーが確認できるよう Chrome で開きます：open -a "Google Chrome" brand/brand-guide.html

フェーズ 7：プロジェクトへの組み込み（任意）

このフェーズはプロジェクトによって異なります。次のどれが該当するか、ユーザーに確認します。

README

<p align="center">
  <a href="PROJECT_URL">
    <img src="brand/svg/logo-horizontal-color.svg" width="280" alt="PROJECT_NAME">
  </a>
</p>

GitHub はリポジトリ内の SVG をインラインでレンダリングします。width 属性を指定すると、全幅に拡大されるのを防げます。プロジェクトのウェブサイトへのリンクを設定するには、<a> で囲みます。

ドキュメントサイト／ウェブアプリ

• ファビコンを静的アセットディレクトリにコピーします
• <head> にファビコンの <link> タグを追加します
• <meta name="theme-color" content="#HEX"> を追加します
• ナビゲーションバー／ヘッダーにマークを追加します

Tailwind テーマ

ユーザーが Tailwind のスケールを使っている場合は、CSS に組み込みます：

@theme {
  --color-primary-50: oklch(...);
  --color-primary-100: oklch(...);
  /* ... */
  --color-primary-950: oklch(...);
}

GitHub

• ソーシャルプレビュー：リポジトリの Settings → Social preview → OG 画像をアップロードします（手動の手順）
• アバター：GitHub Organization を使用している場合のみ適用されます（手動の手順）

npm

• package.json にドキュメント／ウェブサイトを指す "homepage" を追加します

その他のプラットフォーム

• Discord サーバーのアイコン（手動でアップロード）
• 1Password：Discord サーバーを所有するアカウントを記載します

ブラウザー UI の操作が必要な手順を自動化しようとせず、手動の手順として最後に明確に提示してください。

チェックリスト

完了とする前に、次の項目を確認してください：

• 9 個のマスター SVG で、テキストがパスに変換されている（フォント依存なし）
• 最終マークで logo-design の監査とテストに合格している（svg_audit.py；preview_sheet.py で 16 px と単色のチェック）
• すべての標準サイズの PNG をエクスポートしている
• ファビコン一式（ico、16、32、180、192、512、webmanifest）
• 1280x640 の OG 画像が視覚的に中央に配置されている
• プラットフォームアイコン（Discord 512、GitHub 500、npm 256）
• フォントファイルを README とともに保存している
• ブランドガイドの HTML を生成し、レビューしている
• すべてのアセットを brand/ ディレクトリにコミットしている
• tmp/ 内の一時プレビューファイルを削除している
• プロジェクトへの組み込みを完了している（該当する場合）
• 手動の手順をユーザーに伝えている