mcpField
B
Brand Guidelines Generator

Brand Guidelines Generator

github.com/claude-office-skillsデザイン・UI5454.8k 回インストール39 週間前に更新
リポジトリ

Brand Guidelines Generator について

Brand Guidelines Generatorは、企業の視覚的・言語的なブランド要素を文書化、更新するスキルです。利用ルールや例を整理しますが、ビジュアル素材は作成しません。

主な機能

  1. 01ブランドガイドの新規作成
  2. 02既存ブランド要素の文書化
  3. 03利用ルールと例の定義
  4. 04ソーシャル、色、トーンの指針更新
  5. 05クイックリファレンスカードの作成

活用シーン

  1. 01ブランドガイドの一からの作成
  2. 02既存のロゴと配色体系の記録
  3. 03ソーシャルメディアやトーン規則の追加
  4. 04簡潔なブランド資料の準備

インストール

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

$npx skills add https://github.com/claude-office-skills/skills --skill brand-guidelines-generator

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

詳細

ブランドガイドラインジェネレーター

一貫した視覚的・言語的なブランドアイデンティティを確立するために、包括的なブランドガイドラインを作成します。

概要

このスキルでできること:

  • ブランドスタイルガイドを一から作成する
  • 既存のブランド要素を文書化する
  • 使用ルールと例を定義する
  • ブランドの一貫性を維持する

使用方法

新しいガイドラインを作成する
"Create brand guidelines for [Company Name]"
"Help me document our brand identity"
"Generate a style guide based on our logo and colors"
既存のガイドラインを更新する
"Add social media guidelines to our brand guide"
"Update our color palette documentation"
"Define voice and tone guidelines"

ブランドガイドラインの構成

ガイド全体のテンプレート
# [Brand Name] Brand Guidelines

## Table of Contents
1. Brand Overview
2. Logo Usage
3. Color Palette
4. Typography
5. Imagery
6. Voice & Tone
7. Applications
8. Do's and Don'ts

---

## 1. Brand Overview

### Mission
[One sentence: Why does the brand exist?]

### Vision
[One sentence: What future does the brand aspire to?]

### Values
- [Value 1]: [Brief description]
- [Value 2]: [Brief description]
- [Value 3]: [Brief description]

### Brand Personality
[3-5 adjectives that describe the brand]
Example: Innovative, Approachable, Trustworthy

### Target Audience
[Primary and secondary audience descriptions]

---

## 2. Logo Usage

### Primary Logo
[Logo image placeholder]

### Logo Variations
- **Primary**: Full color, horizontal
- **Secondary**: Stacked/vertical
- **Icon/Mark**: Symbol only
- **Wordmark**: Text only

### Clear Space
Minimum clear space around logo: [X] times the height of [element]

### Minimum Sizes
- Print: [X] inches / [Y] mm
- Digital: [X] pixels

### Logo Colors
| Version | Use Case |
|---------|----------|
| Full Color | Primary use on white/light backgrounds |
| Reversed | On dark backgrounds |
| Monochrome | Single-color printing |

### Logo Don'ts
- ❌ Don't stretch or distort
- ❌ Don't rotate
- ❌ Don't change colors
- ❌ Don't add effects (shadows, gradients)
- ❌ Don't place on busy backgrounds

---

## 3. Color Palette

### Primary Colors
| Color | Hex | RGB | CMYK | Pantone |
|-------|-----|-----|------|---------|
| [Name] | #XXXXXX | R, G, B | C, M, Y, K | XXXX C |

### Secondary Colors
[Same format as above]

### Accent Colors
[Same format as above]

### Color Usage
- **Primary Blue**: Headlines, CTAs, primary elements
- **Secondary Gray**: Body text, borders
- **Accent Green**: Success states, highlights

### Accessibility
All text must meet WCAG 2.1 AA contrast requirements:
- Normal text: 4.5:1 minimum
- Large text: 3:1 minimum

---

## 4. Typography

### Primary Font
**[Font Name]** - [Source/License]

| Style | Weight | Use |
|-------|--------|-----|
| Heading 1 | Bold (700) | Page titles |
| Heading 2 | Semi-bold (600) | Section headers |
| Body | Regular (400) | Paragraph text |
| Caption | Light (300) | Small text, captions |

### Secondary Font
**[Font Name]** - [When to use]

### Font Sizes
| Element | Desktop | Mobile |
|---------|---------|--------|
| H1 | 48px | 32px |
| H2 | 36px | 24px |
| H3 | 24px | 20px |
| Body | 16px | 16px |
| Small | 14px | 14px |

### Line Heights
- Headings: 1.2
- Body text: 1.5
- Small text: 1.4

---

## 5. Imagery

### Photography Style
- [Lighting]: Natural, bright
- [Composition]: Clean, minimal
- [Subjects]: Real people, authentic moments
- [Mood]: [Aspirational/Professional/Friendly]

### Illustration Style
[If applicable - describe style, colors, line weights]

### Iconography
- Style: [Outline/Filled/Duotone]
- Stroke width: [X]px
- Corner radius: [X]px
- Grid size: [24x24, 16x16]

### Image Don'ts
- ❌ No stock photos that look staged
- ❌ No outdated technology
- ❌ No images that conflict with brand values

---

## 6. Voice & Tone

### Brand Voice
Our voice is: [Adjective], [Adjective], [Adjective]

| We Are | We Are Not |
|--------|------------|
| Friendly | Casual |
| Confident | Arrogant |
| Clear | Simplistic |
| Helpful | Pushy |

### Tone by Context
| Context | Tone | Example |
|---------|------|---------|
| Marketing | Inspiring | "Transform your workflow" |
| Support | Empathetic | "We understand this is frustrating" |
| Error Messages | Helpful | "Let's fix this together" |
| Legal | Clear | "Your data is protected" |

### Writing Guidelines
- Use active voice
- Keep sentences short (15-20 words)
- Avoid jargon unless necessary
- Address the reader directly ("you")

---

## 7. Applications

### Business Cards
[Specifications and layout]

### Email Signature

[Name] [Title] [Company] [Phone] | [Email] [Website]


### Social Media
| Platform | Profile Image | Cover Size |
|----------|---------------|------------|
| LinkedIn | 400x400px | 1128x191px |
| Twitter | 400x400px | 1500x500px |
| Facebook | 170x170px | 820x312px |

### Presentation Templates
[Slide specifications and examples]

---

## 8. Do's and Don'ts

### Do's ✅
- Use approved color combinations
- Maintain clear space around logo
- Follow typography hierarchy
- Use high-quality images
- Stay consistent across channels

### Don'ts ❌
- Alter logo proportions
- Use off-brand colors
- Mix too many fonts
- Use low-resolution assets
- Deviate without approval

クイックリファレンスカード

# [Brand] Quick Reference

## Colors
🔵 Primary: #XXXXXX
⚪ Secondary: #XXXXXX
🟢 Accent: #XXXXXX

## Fonts
Headlines: [Font] Bold
Body: [Font] Regular

## Logo
- Minimum size: XXpx
- Clear space: Xpx
- File formats: SVG, PNG, PDF

## Voice
[3 key adjectives]

制限事項

  • ロゴや画像などのビジュアルアセットは作成できません
  • カラーの仕様は確認が必要です
  • タイポグラフィのライセンスはユーザーの責任となります
  • 使用権については法務による確認を推奨します

コメント