nahisaho Brand Style Enforcer — Phase 6: デザイン統一
"地味に超重要" — デザイン統一なしには、AI 生成スライドは素人臭くなる。
概要
Brand Style Enforcer は、プレゼンテーション全体のビジュアル一貫性を保証するスキルである。 カラーパレット、フォント、余白、情報密度、アイコンの統一ルールを適用し、 プロフェッショナルな品質のスライドを実現する。
起動条件
- スライドのデザイン統一・ブランド適用が必要なとき
slide-outline.mdまたはpresentation-context.mdが存在する状態で起動- フォント・カラー・レイアウトの修正依頼があったとき
- 情報密度の調整が必要なとき
実行フロー
1. 入力ファイル確認（slide-outline.md / presentation-context.md）
2. 現状のスタイル分析
3. Microsoft カラーパレット適用チェック
4. フォント統一チェック
5. 余白・レイアウトグリッド検証
6. 情報密度分析（1スライド1メッセージ検証）
7. アイコン統一チェック
8. style-guide.md 生成
9. 修正指示リスト出力
Microsoft カラーパレット定義
Primary
| 名称 | HEX | 用途 |
|---|---|---|
| Microsoft Blue | #0078D4 |
メインアクセント、CTA ボタン、リンク |
Secondary
| 名称 | HEX | 用途 |
|---|---|---|
| Light Blue | #50E6FF |
ハイライト、図解の補助色 |
| Teal | #00B294 |
成功・ポジティブ指標 |
| Yellow | #FFB900 |
警告・注意喚起 |
Accent
| 名称 | HEX | 用途 |
|---|---|---|
| Orange | #D83B01 |
重要ポイント強調 |
| Red | #E74856 |
エラー・危険・否定指標 |
| Dark Blue | #0063B1 |
見出し背景、セクション区切り |
Neutral
| 名称 | HEX | 用途 |
|---|---|---|
| Light Gray | #F3F2F1 |
背景、カード背景 |
| Dark Gray | #323130 |
本文テキスト |
| White | #FFFFFF |
スライド背景、余白 |
フォント規約
推奨フォントマッピング
| 要素 | 欧文フォント | 日本語フォント | サイズ |
|---|---|---|---|
| タイトル | Segoe UI Semibold | メイリオ Bold | 28–36pt |
| サブタイトル | Segoe UI | メイリオ | 20–24pt |
| 本文 | Segoe UI | メイリオ | 16–18pt |
| 注釈 | Segoe UI | メイリオ | 10–12pt |
| コード | Cascadia Code | Consolas | 14–16pt |
フォント選択の判断基準
- メイリオ: 日英混在時の行高安定性が高い。第一選択
- 游ゴシック: より洗練された印象だが、行高が Segoe UI と合わない場合あり
- Segoe UI: Microsoft 標準。Windows 環境で確実に表示される
- Calibri: Segoe UI が利用不可の場合のフォールバック
情報密度ルール
定量基準
| 項目 | 基準値 | 備考 |
|---|---|---|
| テキスト行数 | 最大 6 行/スライド | タイトル行を除く |
| 箇条書き項目数 | 最大 5 項目（理想は 3） | ネスト1段まで |
| フォントサイズ下限 | 16pt | プロジェクタ投影を考慮 |
| 図:テキスト比率 | 6:4 〜 7:3 | 図多めが原則 |
| 余白確保率 | スライド面積の 20% 以上 | 上下左右最低 1 インチ |
1スライド1メッセージ検証
各スライドに対して以下を確認する:
- メッセージ特定: スライドの主張を1文で記述できるか
- 情報集中度: 主張と無関係な情報が含まれていないか
- 視線誘導: 最も重要な要素に視線が自然に向かうか
- テイクアウェイ: 聴衆がスライドを見て3秒で要点を把握できるか
レイアウトグリッド
┌──────────────────────────────────┐
│ 上部余白 (1インチ) │
│ ┌────────────────────────────┐ │
│ │ タイトルエリア │ │
│ ├────────────────────────────┤ │
│ │ │ │
│ │ コンテンツエリア │ │
│ │ (テキスト / 図解) │ │
│ │ │ │
│ ├────────────────────────────┤ │
│ │ フッター / ページ番号 │ │
│ └────────────────────────────┘ │
│ 下部余白 (1インチ) │
└──────────────────────────────────┘
左余白 右余白
(1インチ) (1インチ)
アイコン規約
- 推奨: Fluent UI Icons（Microsoft 公式）
- 代替: Material Design Icons（Google）
- 禁止: 複数アイコンセットの混在使用
- サイズ: 24px / 32px / 48px の3サイズで統一
- カラー: カラーパレット内の色のみ使用
出力テンプレート: style-guide.md
# Style Guide — [プレゼンテーション名]
## カラーパレット定義
- Primary: #0078D4
- Secondary: #50E6FF, #00B294, #FFB900
- Accent: #D83B01, #E74856, #0063B1
- Neutral: #F3F2F1, #323130, #FFFFFF
- カスタムカラー: [必要に応じて追加]
## フォント規約
- タイトル: [フォント名] / [サイズ]
- 本文: [フォント名] / [サイズ]
- コード: [フォント名] / [サイズ]
## レイアウトグリッド
- 余白: 上下左右 1 インチ
- カラム: [1カラム / 2カラム / グリッド]
## アイコン規約
- アイコンセット: [Fluent UI / Material Design]
- サイズ: [24px / 32px / 48px]
## NG パターン集
- ❌ 1スライドに7行以上のテキスト
- ❌ 14pt未満のフォント使用
- ❌ カラーパレット外の色使用
- ❌ 複数アイコンセットの混在
- ❌ 余白なしでスライド端にテキスト配置
- ❌ 色のみで情報を区別（アクセシビリティ違反）
Validation Loop（検証ループ）
検証手順
- カラーチェック: 使用色がパレット内か確認
- フォントチェック: 推奨フォント + 推奨サイズ範囲内か確認
- 密度チェック: 各スライドの行数・項目数・余白率を計測
- コントラストチェック: テキスト/背景のコントラスト比 4.5:1 以上か確認
- 1メッセージチェック: 各スライドの主張が1文で表現可能か確認
- 統一性チェック: スライド間でスタイルの一貫性があるか確認
Failure Recovery（失敗時リカバリ）
| 失敗パターン | リカバリ手順 |
|---|---|
| カラーパレット外の色検出 | 最も近いパレット色を提案し、置換指示を出力 |
| フォントサイズ違反 | 推奨サイズへの変更指示を出力 |
| 情報密度超過 | スライド分割案を提示（1→2スライド） |
| コントラスト不足 | 背景色またはテキスト色の変更案を提示 |
| アイコン混在 | 統一アイコンセットへの置換リストを出力 |
| style-guide.md 生成失敗 | デフォルトテンプレートで再生成 |
Quality Gates（品質ゲート）
以下のすべてを満たすこと:
- カラーパレット準拠率 100%（パレット外の色が0）
- フォント統一率 100%（非推奨フォントが0）
- 全スライドのフォントサイズが 16pt 以上
- 全スライドのテキスト行数が 6 行以下
- 箇条書き項目が 5 項目以下
- コントラスト比 4.5:1 以上
- 余白がスライド面積の 20% 以上
- 1スライド1メッセージが確認済み
- style-guide.md が生成済み
Gotchas（落とし穴）
Microsoft ブランドガイドラインは公式を参照 — 非公式サイトのカラーコードは 微妙に異なる場合がある。本スキル記載の HEX 値は公式準拠だが、 組織固有のブランドガイドがある場合はそちらを優先すること
日英混在時のフォント行高問題 — 游ゴシックと Segoe UI を混在させると 行高が揃わず、テキストの上下位置がずれる。メイリオを第一選択とすること。 游ゴシックを使用する場合は
line-heightを明示的に指定するダークモード対応 — 発表環境によっては暗い背景が必要になる。 ライトモード前提でスタイルガイドを作成した場合でも、 ダークモード用のカラーセット（背景:
#323130, テキスト:#F3F2F1）を 別途用意しておくことアクセシビリティ要件 — コントラスト比 4.5:1 以上を確保すること。 色だけで情報を伝えない（色覚多様性への対応）。 WCAG 2.1 AA 基準を最低ラインとする
プロジェクタ環境の色再現 — プロジェクタでは彩度が落ちる。 薄い色（Light Blue
#50E6FF等）は背景に使わず、 アクセントとしてのみ使用すること
Memory Persistence（学習記録）
このスキルの実行で得られた知見は以下に記録する:
- カスタムカラーパレットの追加定義 →
style-guide.mdに反映 - 組織固有のフォント制約 → Gotchas に追記
- 発表環境固有の問題 → Gotchas に追記
- NG パターンの新規発見 →
style-guide.mdの NG パターン集に追加
禁止事項
- カラーパレット外の色を無断使用しない — ユーザーが明示的に指定した場合を除く
- フォントライセンスを無視しない — 商用利用不可のフォントを推奨しない
- アクセシビリティ基準を下回るデザインを承認しない — コントラスト比 4.5:1 未満は不可
- 著作権のあるアイコン・画像を無断使用しない — ライセンス確認なしに埋め込まない
- ユーザー承認なしにスタイルを変更しない — 提案は行うが、適用はユーザー承認後
条件付き参照（存在する場合のみ）
references/microsoft-brand-guidelines.md→ カラーコードの公式値を確認するときreferences/wcag-contrast-checker.md→ コントラスト比の計算方法を確認するときassets/style-guide-template.md→ style-guide.md を生成するとき
⚠️ 上記ファイルが存在しない場合は、本 SKILL.md 内のインライン情報で代替する。