brand-guidelines

ブランドガイドラインの適用

目的

ドキュメント、プレゼンテーション、ウェブページ、マーケティング資料など、あらゆる成果物に一貫したブランドスタイルを適用します。

ブランドの基本要素

色

CSS 変数を使用してブランドカラーパレットを定義します。

:root {
  --brand-primary: #1a73e8;
  --brand-secondary: #34a853;
  --brand-accent: #ea4335;
  --brand-dark: #202124;
  --brand-light: #f8f9fa;
  --brand-text: #3c4043;
  --brand-text-muted: #5f6368;
}

タイポグラフィ

/* Primary font for headings */
--font-display: 'Product Sans', 'Google Sans', system-ui;

/* Body font */
--font-body: 'Roboto', 'Inter', -apple-system, sans-serif;

/* Monospace for code */
--font-mono: 'Roboto Mono', 'Fira Code', monospace;

/* Type scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;

余白

--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;

適用例

ボタン

.btn-primary {
  background: var(--brand-primary);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;
}

カード

.card {
  background: white;
  border: 1px solid var(--brand-light);
  border-radius: 8px;
  padding: var(--space-6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

ヘッダー

h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--brand-dark);
  font-weight: 500;
}

ドキュメントテンプレート

Google Docs

• 見出し 1：ディスプレイフォント、24pt、ブランドダーク
• 見出し 2：ディスプレイフォント、18pt、ブランドプライマリ
• 本文：本文フォント、11pt、ブランドテキスト
• リンク：ブランドプライマリ、下線付き

プレゼンテーション

• タイトルスライド：ブランドプライマリの背景に白いテキスト
• コンテンツスライド：白い背景にブランドダークのテキスト
• アクセント要素：ブランドセカンダリまたはアクセント

ベストプラクティス

1. 一貫性：ブランドカラーを正確に使用し、決して近似色で代用しないでください
2. コントラスト：テキストを読みやすくするため、コントラスト比を最低 4.5:1 にしてください
3. 階層：サイズと太さで重要度を示してください
4. 余白：ゆとりのある間隔で高級感を演出します
5. ロゴの使用：ロゴの周囲に十分な余白を確保してください