# 800-branded-pptx

> エイトハンドレッド（800）社のブランドデザインに沿ったPowerPointプレゼンテーションを作成するスキル。一流コンサルティングファームのようにデザイン・レイアウトを工夫し、ストーリーや論理構造が直感的にわかるスライドを作成する。ダークグリーン(#1B3928)をメインカラーとし、Meiryo UIフォント、クリーンでミニマルなレイアウトを特徴とする。「800風のスライドを作成」「エイトハンドレッドのデザインでプレゼンを作って」「800社のテンプレートでPPTX作成」「スライドを作成」「提案書を作成」などのリクエスト時に使用。

- Author: Masaki Kono
- Repository: masaki69/consulting-toolkit
- Version: 20260209142801
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-09
- Source: https://github.com/masaki69/consulting-toolkit
- Web: https://mule.run/skillshub/@@masaki69/consulting-toolkit~800-branded-pptx:20260209142801

---

---
name: 800-branded-pptx
description: エイトハンドレッド（800）社のブランドデザインに沿ったPowerPointプレゼンテーションを作成するスキル。一流コンサルティングファームのようにデザイン・レイアウトを工夫し、ストーリーや論理構造が直感的にわかるスライドを作成する。ダークグリーン(#1B3928)をメインカラーとし、Meiryo UIフォント、クリーンでミニマルなレイアウトを特徴とする。「800風のスライドを作成」「エイトハンドレッドのデザインでプレゼンを作って」「800社のテンプレートでPPTX作成」「スライドを作成」「提案書を作成」などのリクエスト時に使用。
---

# 800 Branded PPTX Skill

800ブランドのデザインガイド＋コンポーネント＋ボイラープレートを提供し、pptxスキル（`../pptx/SKILL.md`）をラップするスキル。

## 読み込み順序（必須）

| 順序 | ファイル | 内容 |
|------|---------|------|
| 1 | 本ファイル（SKILL.md） | デザイン哲学・全体方針 |
| 2 | [references/design-guide.md](references/design-guide.md) | カラー・フォント・コンポーネント仕様 |
| 3 | [references/consulting-deck-boilerplate.js](references/consulting-deck-boilerplate.js) | ヘルパー関数群＋サンプルスライド構成（**カラー定数の唯一の定義元**） |
| 4 | [../pptx/SKILL.md](../pptx/SKILL.md) | pptxgenjs API・QA手順・画像変換（pptxスキルに委譲） |

## コンテンツ作成モード

ユーザーがテキストやmdファイルなどのコンテクストを提供した場合、スライド作成に着手する前に、以下の2つのモードのどちらで進めるかをユーザーに確認する。

| モード | 説明 |
|--------|------|
| **忠実再現モード** | 提供されたコンテクストの内容を割愛・省略・文言の変更をせず、そのまま忠実にスライドへ再現する。ただし、1枚のスライドに収まらない場合は、下記「ピラミッド構造」の原則に従って複数スライドに分割することは許容する。 |
| **柔軟作成モード** | 提供されたコンテクストを素材として活用しつつ、スライドとして最適な構成・表現・文言に再編集する。情報の取捨選択、要約、表現の変更を行う。 |

**確認の例**: 「提供いただいた内容をそのまま忠実にスライドに反映しますか？ それとも、スライドに適した形に柔軟に再編集してもよろしいですか？」

※ ユーザーがコンテクストを提供せず、トピックや指示のみを与えた場合はこの確認は不要。

## ピラミッド構造

複数スライドにまたがるパートでは、見出しレベルの異なるスライドを同列に並べない。

**原則**: サマリスライド → 詳細スライド群の順に構成する。
- あるパートを複数枚で説明する場合、まずそのパート全体の要点を概観するサマリスライドを置く
- その後に、個々のトピックを掘り下げる詳細スライドを並べる
- 同一階層のスライド同士でタイトルの粒度を揃える

**例**:
```
[サマリ] 3つの成長戦略（概要を1枚で）
  ├─ [詳細] 戦略①: 新規顧客開拓
  ├─ [詳細] 戦略②: 既存顧客深耕
  └─ [詳細] 戦略③: 新規事業展開
```

## デザイン哲学

**一流のコンサルティングファームのように、デザイン・レイアウトを工夫し、デザイン・レイアウトによってストーリーや論理構造が直感的にわかるようにする。アイコンも適宜挿入する。**

### 原則

- **構造の可視化**: スライド上の情報の関係性を、その内容に最も適した表現方法で視覚化する。表現方法はヘルパー関数に限定されない。例: カード並列、グリッド、ステップチャート、フローチャート、マトリクス、ファネル、ピラミッド図、タイムライン、テーブル、カスタマージャーニーマップ、ビジネスモデル図、システム構成図、グラフ、箇条書き、図解など。pptxgenjs API で自由に構成してよい
- **1スライド1メッセージ**: 各スライドに明確なキーメッセージを持たせ、それを支える最適なレイアウトを選ぶ
- **アイコンによる直感性**: react-icons（Fa系）→ sharp → base64 PNG で、概念・ステップ・カテゴリを視覚的に区別する
- **色による意味付け**: サブカラーパレット（4色）を活用し、異なるカテゴリ・フェーズ・立場を色で区別する
- **レイアウトの多様性**: 意味なく同じレイアウトを連続させない。ただし、同一フレームワークで整理される内容（例：戦略①②③をそれぞれ1枚ずつ詳述する等）は、あえて同じレイアウトを揃えることで構造の一貫性を示してよい
- **余白の活用**: 詰め込まない。余白で視覚的な優先度を明確にする

### ヘルパーの使い方

ボイラープレートのヘルパー関数（`addCard()`, `addIconBadge()`, `addQuestionCard()` 等）は部品である。スライドの内容に応じて自由に組み合わせ、複数ヘルパーを1スライド内で併用してよい。ヘルパーにないレイアウト（タイムライン、ファネル、ピラミッド図、マトリクス等）も pptxgenjs API で自作してよい。ただしその場合も、カラートークン（`C`, `SUB`）・フォント（`FONT`）・シャドウ禁止等の絶対ルールは遵守すること。

## 絶対ルール

| ルール | 詳細 |
|--------|------|
| **シャドウ禁止** | `shadow` プロパティは一切使わない。カードは `line` ボーダー＋左アクセントバーで表現する |
| **ロゴ** | `800`（Century Gothic）。「≠」は付けない |
| **フッター** | コンテンツスライドに `© Eight Hundred Inc.` を標準搭載 |
| **フォント** | 日本語 = `Meiryo UI`、英数字 = `Century Gothic`。混在時は `splitTextWithFonts()` |
| **キーメッセージ** | 体言止め禁止・句点必須の完全な文章 |
| **HEXコード** | `#` を付けない（`"29BA74"` ✓ / `"#29BA74"` ✗） |
| **背景** | コンテンツスライドは白。タイトル/セクション/クロージングのみダークグリーン |

## クイックスタート

```
1. consulting-deck-boilerplate.js をプロジェクトディレクトリにコピー
2. Design Tokens（C, SUB, FONT）はそのまま使う
3. // ═══ SLIDES ═══ 以降を案件の内容に差し替え
4. node build.js で生成
5. pptxスキル（../pptx/SKILL.md）のQA手順でビジュアルQA
```

## 責務の分離

| 本スキルが提供するもの | pptxスキルに委譲するもの |
|---------------------|--------------------------|
| カラーパレット（C, SUB） | pptxgenjs API仕様 |
| フォント設定（FONT） | QA手順（Content QA, Visual QA） |
| コンポーネント仕様（カード、セクション、フッター等） | 画像変換（soffice, pdftoppm） |
| ヘルパー関数群 | テキスト抽出（markitdown） |
| デザイン哲学・原則 | 依存パッケージのインストール手順 |
| ボイラープレート（サンプルスライド構成） | |

これにより、別のブランドでスライドを作りたい場合は、本スキルの `C`, `SUB`, `FONT` を差し替えるだけでよい。pptxスキルのメカニクス部分は共通で再利用できる。