ブランドデザイナースキル

ブランドアイデンティティ、ロゴデザイン、ビジュアルブランドシステムの構築をお手伝いします。

私ができること

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

• ロゴデザインとバリエーション
• カラーパレット
• タイポグラフィシステム
• ブランドガイドライン

ビジュアルアセット：

• 名刺、レターヘッド
• ソーシャルメディアテンプレート
• マーケティング資料
• ブランドプレゼンテーション資料

ブランド戦略：

• ブランドポジショニング
• ターゲットオーディエンスの定義
• 競合分析
• ブランドボイスとトーン

ロゴデザインプロセス

ステップ1：ブランド調査

回答すべき質問：

• その企業は何をしているのか？
• ターゲットオーディエンスは誰か？
• ブランド価値観は何か？
• ロゴはどのような感情を呼び起こすべきか？
• 避けるべき色やシンボルはあるか？

ブリーフ例：

## ブランドブリーフ：TechStart

**業界：** SaaS、開発者向けツール
**ターゲットオーディエンス：** ソフトウェア開発者、25～40歳
**ブランド価値観：** イノベーション、シンプリシティ、信頼性
**パーソナリティ：** モダン、テクニカル、親しみやすい
**競合：** GitHub、GitLab、Vercel

**ロゴ要件：**

- モノクロで機能する
- 16px（ファビコン）から看板サイズまでスケール可能
- モダンで流行に左右されない（長く使用できる）
- ユニークで記憶に残る

---

ステップ2：ロゴコンセプト

コンセプト1：ワードマーク

クリーンでモダンなタイポグラフィ
企業名にフォーカス
例：Google、Facebook、Netflix

コンセプト2：レターマーク

ユニークなイニシャル
長い企業名に最適
例：IBM、HBO、CNN

コンセプト3：アイコン + ワードマーク

シンボル + 企業名
最も汎用性が高い
例：Nike、Apple、Twitter

SVGロゴ例（Reactコンポーネント）：

// components/brand/Logo.tsx

interface LogoProps {
  variant?: 'full' | 'icon' | 'wordmark'
  color?: 'primary' | 'white' | 'black'
  size?: number
}

export function Logo({ variant = 'full', color = 'primary', size = 40 }: LogoProps) {
  const colors = {
    primary: '#0066CC',
    white: '#FFFFFF',
    black: '#000000'
  }

  const fillColor = colors[color]

  if (variant === 'icon') {
    return (
      <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
        <circle cx="20" cy="20" r="18" fill={fillColor} />
        <path
          d="M15 20 L25 15 L25 25 Z"
          fill="white"
        />
      </svg>
    )
  }

  if (variant === 'wordmark') {
    return (
      <svg width={size * 4} height={size} viewBox="0 0 160 40" fill="none">
        <text
          x="0"
          y="30"
          fontFamily="Inter, sans-serif"
          fontSize="24"
          fontWeight="700"
          fill={fillColor}
        >
          TechStart
        </text>
      </svg>
    )
  }

  // フルロゴ（アイコン + ワードマーク）
  return (
    <svg width={size * 5} height={size} viewBox="0 0 200 40" fill="none">
      <circle cx="20" cy="20" r="18" fill={fillColor} />
      <path d="M15 20 L25 15 L25 25 Z" fill="white" />
      <text
        x="50"
        y="30"
        fontFamily="Inter, sans-serif"
        fontSize="24"
        fontWeight="700"
        fill={fillColor}
      >
        TechStart
      </text>
    </svg>
  )
}

使用方法：

// ロゴのバリエーション
<Logo variant="full" />
<Logo variant="icon" size={32} />
<Logo variant="wordmark" color="white" />

---

カラーパレット

プライマリブランドカラー

// config/brand-colors.ts

export const brandColors = {
  // プライマリ（メインブランドカラー）
  primary: {
    50: '#E6F0FF',
    100: '#CCE0FF',
    200: '#99C2FF',
    300: '#66A3FF',
    400: '#3385FF',
    500: '#0066CC', // メインブランドカラー
    600: '#0052A3',
    700: '#003D7A',
    800: '#002952',
    900: '#001429'
  },

  // セカンダリ（アクセントカラー）
  secondary: {
    50: '#FFF4E6',
    100: '#FFE9CC',
    200: '#FFD399',
    300: '#FFBD66',
    400: '#FFA733',
    500: '#FF9100', // メインアクセント
    600: '#CC7400',
    700: '#995700',
    800: '#663A00',
    900: '#331D00'
  },

  // ニュートラル（グレースケール）
  neutral: {
    50: '#F9FAFB',
    100: '#F3F4F6',
    200: '#E5E7EB',
    300: '#D1D5DB',
    400: '#9CA3AF',
    500: '#6B7280',
    600: '#4B5563',
    700: '#374151',
    800: '#1F2937',
    900: '#111827'
  },

  // セマンティックカラー
  success: '#10B981',
  warning: '#F59E0B',
  error: '#EF4444',
  info: '#3B82F6'
}

カラー使用ガイドライン

// Tailwind設定
module.exports = {
  theme: {
    colors: {
      primary: brandColors.primary,
      secondary: brandColors.secondary,
      gray: brandColors.neutral,
      green: brandColors.success
      // ...
    }
  }
}

カラーパレットドキュメント：

## ブランドカラー

### プライマリブルー（#0066CC）

- **用途：** プライマリボタン、リンク、アクティブ状態、ブランド要素
- **避けるべき用途：** 背景、広いエリア
- **アクセシビリティ：** 白地のテキストでWCAG AA達成

### セカンダリオレンジ（#FF9100）

- **用途：** CTA、ハイライト、重要なアクション
- **避けるべき用途：** 本文
- **ペアリング：** プライマリブルーとの組み合わせが最適

### ニュートラルグレー

- **用途：** テキスト、ボーダー、背景、UI要素
- **階層：**
  - 900：見出し
  - 700：本文
  - 500：副次テキスト
  - 300：ボーダー
  - 100：背景

---

タイポグラフィシステム

フォント選択

/* Google Fonts インポート */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* フォントファミリー */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* フォントサイズ */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */

  /* フォントウェイト */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* 行の高さ */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
}

タイポグラフィスケール：

// components/Typography.tsx

export function Heading1({ children }: { children: React.ReactNode }) {
  return (
    <h1 className="text-4xl font-bold leading-tight text-gray-900">
      {children}
    </h1>
  )
}

export function Heading2({ children }: { children: React.ReactNode }) {
  return (
    <h2 className="text-3xl font-semibold leading-tight text-gray-900">
      {children}
    </h2>
  )
}

export function BodyText({ children }: { children: React.ReactNode }) {
  return (
    <p className="text-base font-normal leading-normal text-gray-700">
      {children}
    </p>
  )
}

export function Caption({ children }: { children: React.ReactNode }) {
  return (
    <p className="text-sm font-normal leading-normal text-gray-500">
      {children}
    </p>
  )
}

---

ブランドガイドラインドキュメント

brand-guidelines.md の作成

# TechStart ブランドガイドライン

## ロゴ使用方法

### ロゴバリエーション

- **フルロゴ**：マーケティング資料、ウェブサイトヘッダーで使用
- **アイコンのみ**：アプリアイコン、ファビコン、ソーシャルメディアアバターで使用
- **ワードマーク**：アイコンが適切でない場合に使用

### クリアスペース

ロゴの周囲に TechStart の「T」の高さに相当するクリアスペースを保つ

### 最小サイズ

- **デジタル**：120px幅（フルロゴ）、40px（アイコン）
- **印刷**：1インチ幅（フルロゴ）、0.25インチ（アイコン）

### 禁止事項

❌ ロゴを回転させない
❌ 色を変更しない（承認されたバリエーションを除く）
❌ エフェクト（シャドウ、グラデーションなど）を追加しない
❌ 歪ませたり、拡大・縮小しない

---

## カラーパレット

### プライマリカラー

- **ブランドブルー**：#0066CC
  - RGB：0、102、204
  - CMYK：100、50、0、20
- **アクセントオレンジ**：#FF9100
  - RGB：255、145、0
  - CMYK：0、43、100、0

### 使用方法

- プライマリボタン、リンク：ブランドブルー
- CTA、ハイライト：アクセントオレンジ
- 背景：ニュートラルグレー

---

## タイポグラフィ

### フォント

- **見出し**：Inter Bold（700）
- **本文**：Inter Regular（400）
- **コード**：JetBrains Mono Regular（400）

### 階層

- H1：48px / Bold / タイト行間
- H2：36px / Semibold / タイト行間
- 本文：16px / Regular / 通常行間
- キャプション：14px / Regular / 通常行間

---

## ボイス＆トーン

### ブランドパーソナリティ

- **プロフェッショナル**だがコーポレート的ではない
- **テクニカル**だが親しみやすい
- **イノベーティブ**だが信頼できる

### ライティングスタイル

- 能動態を使用する
- 簡潔で明確に
- 専門用語を避ける（技術ドキュメント以外）
- 「I」や「one」ではなく「we」と「you」を使用する

### 例

✅ 「数秒であなたのアプリをデプロイ」
❌ 「アプリケーションは迅速にデプロイできます」

✅ 「これはあなたのような開発者向けに構築しました」
❌ 「この製品は開発者ユーザーのために設計されました」

---

ソーシャルメディアテンプレート

プロフィール画像（SVGテンプレート）

// templates/SocialProfileImage.tsx

export function SocialProfileImage() {
  return (
    <svg width="400" height="400" viewBox="0 0 400 400">
      {/* 背景 */}
      <rect width="400" height="400" fill="#0066CC" />

      {/* ロゴ（中央） */}
      <circle cx="200" cy="200" r="120" fill="white" />
      <path
        d="M160 200 L240 160 L240 240 Z"
        fill="#0066CC"
      />
    </svg>
  )
}

ソーシャルメディア投稿テンプレート

// templates/SocialPost.tsx

interface SocialPostProps {
  title: string
  description: string
  imageUrl?: string
}

export function SocialPost({ title, description, imageUrl }: SocialPostProps) {
  return (
    <svg width="1200" height="630" viewBox="0 0 1200 630">
      {/* グラデーション背景 */}
      <defs>
        <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#0066CC" />
          <stop offset="100%" stopColor="#003D7A" />
        </linearGradient>
      </defs>
      <rect width="1200" height="630" fill="url(#bg)" />

      {/* コンテンツ */}
      <text
        x="60"
        y="200"
        fontSize="60"
        fontWeight="700"
        fill="white"
        fontFamily="Inter"
      >
        {title}
      </text>
      <text
        x="60"
        y="270"
        fontSize="32"
        fill="#CCE0FF"
        fontFamily="Inter"
      >
        {description}
      </text>

      {/* ロゴ */}
      <Logo variant="icon" size={60} color="white" />
    </svg>
  )
}

---

名刺デザイン

// templates/BusinessCard.tsx

interface BusinessCardProps {
  name: string
  title: string
  email: string
  phone: string
}

export function BusinessCard({ name, title, email, phone }: BusinessCardProps) {
  return (
    <svg width="350" height="200" viewBox="0 0 350 200">
      {/* 表面 */}
      <rect width="350" height="200" fill="white" />

      {/* ロゴ */}
      <Logo variant="full" size={30} />

      {/* 連絡先情報 */}
      <text x="20" y="120" fontSize="20" fontWeight="700" fill="#111827">
        {name}
      </text>
      <text x="20" y="145" fontSize="14" fill="#6B7280">
        {title}
      </text>
      <text x="20" y="170" fontSize="12" fill="#6B7280">
        {email}
      </text>
      <text x="20" y="185" fontSize="12" fill="#6B7280">
        {phone}
      </text>
    </svg>
  )
}

---

ブランドアセット管理

ファイル構成

brand-assets/
├── logo/
│   ├── svg/
│   │   ├── logo-full.svg
│   │   ├── logo-icon.svg
│   │   └── logo-wordmark.svg
│   ├── png/
│   │   ├── logo-full@1x.png
│   │   ├── logo-full@2x.png
│   │   └── logo-full@3x.png
│   └── favicon/
│       ├── favicon-16x16.png
│       ├── favicon-32x32.png
│       └── favicon.ico
├── colors/
│   └── palette.json
├── fonts/
│   ├── Inter-Regular.woff2
│   ├── Inter-Bold.woff2
│   └── JetBrainsMono-Regular.woff2
├── templates/
│   ├── social-profile.svg
│   ├── social-post.svg
│   └── business-card.svg
└── guidelines/
    └── brand-guidelines.pdf

---

ファビコン生成

// scripts/generate-favicons.ts

import sharp from 'sharp'
import fs from 'fs'

async function generateFavicons() {
  const sizes = [16, 32, 48, 64, 128, 256]

  for (const size of sizes) {
    await sharp('logo-icon.svg')
      .resize(size, size)
      .png()
      .toFile(`public/favicon-${size}x${size}.png`)

    console.log(`Generated ${size}x${size} favicon`)
  }

  console.log('Favicons generated!')
}

generateFavicons()

ファビコン HTML：

<!-- layout/head に配置 -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

---

私の使用場面

最適な用途：

• 新しいブランドアイデンティティの作成
• ロゴとビジュアルシステムのデザイン
• ブランドガイドラインの構築
• マーケティングテンプレートの作成
• ブランド一貫性の確保

私がお手伝いすること：

• 記憶に残るロゴの設計
• 統一性のあるカラーパレットの作成
• タイポグラフィシステムの構築
• ブランドアセットの生成
• ブランドガイドラインのドキュメント化

作成物

🎨 ロゴデザイン（SVG）
🌈 カラーパレット
📝 タイポグラフィシステム
📄 ブランドガイドライン
🖼️ ソーシャルメディアテンプレート
💼 名刺

強力で統一性のあるブランドアイデンティティを一緒に構築しましょう！