mcpField
B
brand-designer

brand-designer

github.com/oakossデザイン・UI20231 回インストール11 週間前に更新
リポジトリ

brand-designer について

Brand Designerは、ブランド調査から素材納品までのビジュアルアイデンティティ設計を支援するガイドです。新規ブランドやブランド規定を整備するチーム向けに、SVGロゴ、配色、タイポグラフィ、ガイドライン、テンプレートを扱い、色のコントラストにも配慮します。

主な機能

  1. 01複数形式のSVGロゴを設計
  2. 02アクセシビリティに配慮した配色を作成
  3. 03文字階層とCSSプロパティを設定
  4. 04ブランド利用ガイドを文書化
  5. 05SNS・印刷用テンプレートを作成
  6. 06ブランド素材を整理してfaviconを生成

活用シーン

  1. 01新しいブランドのビジュアルアイデンティティを構築
  2. 02アイコン版やワードマーク版のロゴを作成
  3. 03ブランドカラーとタイポグラフィを設定
  4. 04SNS・印刷向け素材を準備

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/oakoss/agent-skills --skill brand-designer

インストール後、Claude Code で/brand-designerを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
asset-management.md
brand-guidelines.md
color-palette.md
logo-design.md
templates.md
typography.md

詳細

ブランドデザイナー

概要

ブランドデザイナーは、コンセプトの策定からアセットの納品まで、完全なビジュアルアイデンティティシステムを作成します。SVG コンポーネントを使ったロゴデザイン、アクセシビリティに準拠したカラーパレットの生成、タイポグラフィスケールの設定、ブランドガイドラインのドキュメント作成、ソーシャルメディアや印刷物向けテンプレートの作成を行います。

使用する場合： 新しいブランドアイデンティティプロジェクト、SVG バリエーションを使ったロゴデザイン、Tailwind と連携したカラーパレットの作成、タイポグラフィシステムの設定、ブランドガイドラインのドキュメント作成、ソーシャルメディアテンプレートの生成、ブランドアセットファイルの整理。

使用しない場合： UI コンポーネントライブラリのデザイン（design-system を使用）、画像最適化パイプライン（asset-manager を使用）、Figma からコードへのワークフロー（figma-developer を使用）、マーケティングコピーやコンテンツ戦略。

クイックリファレンス

パターンアプローチ主なポイント
ロゴデザインフルロゴ／アイコン／ワードマークのバリエーションを備えた SVG コンポーネントまずモノクロでデザインし、その後に色を追加
カラーパレットプライマリ、セカンダリ、ニュートラル、セマンティックの各レイヤー60/30/10 ルール：ニュートラル／プライマリ／アクセント
タイポグラフィシステムディスプレイ用と本文用のフォントペアに CSS カスタムプロパティを組み合わせるフォントファミリーは最大 2 つ
ブランドガイドラインロゴの使用方法、色、タイポグラフィ、ブランドの声とトーンクリアスペースのルールと最小サイズを含める
ソーシャルメディアテンプレートプラットフォーム固有の寸法に合わせた SVG テンプレートOpen Graph は 1200x630、プロフィールは 400x400
アセットの整理ロゴ、色、フォントごとにディレクトリを構成SVG を主な形式とし、PNG は @1x/@2x/@3x を用意
ファビコンの生成SVG ソースから Sharp ベースのスクリプトで生成16、32、48、64、128、256px のサイズを生成
アクセシビリティ背景上のテキストに対する WCAG AA コントラスト比プライマリカラーが白背景で AA に準拠することを確認

ブランド発見チェックリスト

質問目的
会社は何をしていますか？業界の背景を把握する
ターゲットオーディエンスは誰ですか？デモグラフィックおよびサイコグラフィックに基づくターゲティング
ブランドの価値観は何ですか？中核となるアイデンティティの柱
ロゴからどのような印象を受けてほしいですか？感情面の方向性
避けたい色やシンボルはありますか？制約と配慮事項
競合他社はどこですか？差別化の機会

よくある間違い

間違い正しい方法
最初にロゴをカラーでデザインするまずモノクロでデザインします。配色を追加する前に、ロゴが単色でも機能することを確認します
ブランドの確認チェックリストを省略するデザインの前に、会社の価値観、対象者、競合他社、制約を必ず把握します
3種類以上のフォントファミリーを使用する統一感を保つため、ディスプレイフォントと本文フォントを各1種類にします
ロゴのバリエーションを用意しないフル版、アイコンのみ、ワードマークのみのバリエーションに加え、モノクロ版も作成します
ロゴをPNGのみで書き出すSVGを主要な形式として用意し、ラスター画像が必要な場合は@1x、@2x、@3xのPNGを追加します
大きな背景にブランドカラーを使用する60/30/10のルールに従います。60％をニュートラルカラー、30％をプライマリーカラー、10％をアクセントカラーにします
ロゴにエフェクト（影、グラデーション）を加える承認済みのバリエーションをそのまま使用します
クリアスペースのルールがないロゴの周囲に、最も高い文字の高さと同じクリアスペースを定義します
最小サイズの指定がないデジタル：フル版120px／アイコン40px。印刷：フル版1in／アイコン0.25in

委任

ブランドデザインに取り組む際は、以下に委任します。

  • design-system -- トークンの階層とコンポーネントアーキテクチャ
  • asset-manager -- 画像の最適化とアセットパイプライン
  • figma-developer -- Figmaからコードへの実装

参考資料

  • ロゴデザイン -- フル版、アイコン、ワードマークのバリエーションを備えたSVGロゴコンポーネント
  • カラーパレット -- ブランドカラーの定義、Tailwind設定、使用ガイドライン
  • タイポグラフィ -- フォントの選定、CSSカスタムプロパティ、Reactタイポグラフィコンポーネント
  • ブランドガイドライン -- ブランドの声、トーン、ビジュアルルールを網羅したガイドラインテンプレート
  • テンプレート -- ソーシャルメディア、名刺、プロフィール画像用のSVGテンプレート
  • アセット管理 -- ファイルの整理、ファビコンの生成、HTMLメタタグ

コメント

Markdown 対応