WIGTN PPT ジェネレーター
WIGTNブランドのアイデンティティを備えた単一HTMLプレゼンテーションを作成するスキル。 テンプレート(.pptx)なしでも、ブランド原則とリファレンスのみでClaudeが毎回新たにデザインします。
核となる原則
- 原則ベース、テンプレート非依存 — 固定テンプレートファイルに依存しません。
references/のブランドトークン＋レイアウト原則を読み込み、その都度生成します。 - ブランド忠実度（Brand Fidelity） — 正確なHEXのみを使用します。「似た色」は禁止。インク
#1E1E28、シグネチャーパープル(Pantone 265)#9B51E0。 - シグネチャーパープルドットの繰り返し —
wigtn.のピリオドに由来するパープルドット(.)がブランドのシグネチャーです。すべてのスライドにパープルドットモチーフを一貫して1つ以上配置します（ページ番号横のドット、セクション番号のドット、コーナードット、進行ドットなど）。 - Light / Dark デュアルテーマ — 発表環境に合わせていずれかを選択します。1つのプレゼンテーション内で混在させません。
- Viewport Fitting — すべてのスライドは正確に
100vh。スライド内部のスクロールは絶対禁止。 - テキストのみのスライド禁止 — すべてのスライドに最小1つの視覚要素（図形・カラーブロック・ドット・ライン・アイコン）を配置します。
- Show, Don't Tell — デザインについて言葉で問い合わせません。テーマ・コンテンツのみ確定したらすぐに生成し、スクリーンショットで見せた後で調整します。
- ゼロ依存 — 単一HTMLファイル。ブラウザですぐに発表可能（フォントはCDN
<link>1行のみ許可）。
ブランド（概要）
| トークン | 値 | 用途 |
|---|---|---|
| Ink (ネイビー) | #1E1E28 | Dark背景 / Lightテキスト |
| Purple (Pantone 265) | #9B51E0 | シグネチャードット、強調、リンク |
| Purple Deep | #6B2EAA | ドットの影、奥行き、グラデーションの端 |
| White | #FFFFFF | Light背景 / Darkテキスト |
完全なパレット（Light/Darkの
:rootスニペット）、ロゴバリエーション使用ルール、タイポグラフィ、ドットシグネチャールールは 必ず references/brand.md をReadしてから適用します。
ワークフロー（4フェーズ）
Phase 0: テーマ + コンテンツ（AskUserQuestionを1回）
AskUserQuestionで 一度に まとめて質問します：
- テーマ —
Light（明るい発表会場・文書型） /Dark（ステージ・キーノート型）。推奨を含む。 - 目的 — カンファレンス / チーム共有 / ピッチデック / 教育 / 経営陣報告
- ボリューム — 5–10枚 / 10–20枚 / 20枚+
- 核心メッセージ & 画像 — 伝える内容、含める画像の有無・位置
発表者名・日付・企業/製品名など表紙に含めるメタも一緒に確認します。
Phase 1: 構造設計
コンテンツをスライドマップに分解します。密度制限: 表紙はタイトル+サブタイトル、本文はスライドあたり最大4–6箇条書き（または同等の視覚ブロック）。超過したら自動分割。
基本骨格: 表紙 → 目次 → (セクション区切り → 本文 N) × チャプター → まとめ(Thank you)。
各スライドにどの本文レイアウトを使うかは references/design-guide.md から選択します。
Phase 2: ダイアグラム（必要な場合）
フローチャート・アーキテクチャが必要な場合は、同じプラグインの handdrawn-diagram スキルを呼び出してコミット可能なダイアグラム（SVG+PNG）を作成し、スライドに挿入します。手描きトーンが負担なら、単純なCSS/SVG図形で直接描画します。
Phase 3: HTML生成
- references/brand.md と references/design-guide.md をReadします。
- 選択したテーマの
:rootトークンを適用した単一HTMLを作成します。必須ルール:.slide { height: 100vh; height: 100dvh; overflow: hidden; }- すべてのフォント・間隔は
clamp(min, pref, max)（固定px単独禁止） - 高さベースのメディアクエリ（
max-height: 700px/600px）で段階的縮小 - プログレスバー + ナビゲーションドット（パープル） + キーボード/タッチ/スワイプ +
prefers-reduced-motion - シグネチャーパープルドットを全スライドに繰り返し
- ロゴ挿入: 下記「ロゴ使用」ルールに従う
- コンテンツを埋め、アニメーションは控えめに（プロフェッショナル: 0.2–0.4s フェード/スライド）。
Phase 4: 検証と受け渡し
スクリーンショットでビューポートフィッティング・ブランド一貫性・ドットシグネチャーを確認します。Playwright/ChromeがあればスライドごとのPNGをレンダリングしてReadで点検し、なければユーザーにブラウザで開くよう案内します。
生成完了:
- HTML: docs/{ファイル名}-presentation.html (ブラウザでFキー全画面 → 矢印キー/スワイプ)
ロゴ使用
WIGTNロゴはチーム専用アセットのため、公開プラグインにはコミットしません（.gitignore）。以下の優先順位で探します：
${CLAUDE_PLUGIN_ROOT}/skills/wigtn-ppt/assets/logo/— バンドルされたロゴ（チームローカル、*.pngはgitignoreのため公開リポジトリのクローンにはなし）<project>/docs/images/— チームローカルのブランドアセット位置（同様にgitignore、公開リポジトリには含まれない）- CSS/SVGワードマークフォールバック — 上記2つのパスにPNGがない場合（公開クローン・新環境のデフォルト状態）、
wigtn+ パープルドットをフォント/SVGで直接レンダリング（brand.mdにスニペット）。フォールバックだけで常に動作します。
ロゴを使用する際は、使用するファイルを発表物ワークスペース（例: docs/workspace/）にコピーした後、HTMLで相対パスで参照します。テーマ別のバリエーションはbrand.mdのマッピングテーブルに従います（Light → NAVYロゴ、Dark → WHITEロゴ）。
アンチパターン（避けるべきこと）
- 紫グラデーションのクリシェ（
#6366f1）、白背景に基本の紫/ピンク → WIGTNパープル#9B51E0のみ使用 - Inter/Roboto/Arialを表示フォントに使用（ブランドトーンが崩れる）
- すべての要素を中央揃え、同一カードグリッドの繰り返し
min-heightの使用（スライドのはみ出しを許容）→ 必ずheight- ドットシグネチャーの欠落、テーマの混在、「似た色」での代替
参照
- references/brand.md — WIGTNブランドシステム: Light/Darkパレット、ロゴバリエーション・配置、パープルドットルール、タイポグラフィ、CSSワードマークフォールバック
- references/design-guide.md — スライドタイプ別レイアウト原則（表紙/目次/セクション/本文/まとめ）、ビューポートルール、アニメーション、アンチパターン
design-system-referenceスキル — レイアウト密度・タイポグラフィ階層のアイデアを再利用（Swiss Minimal、Editorial、Minimal CorporateがWIGTNトーンに最も近い）。ただし、色・ドット・ロゴは常にWIGTNトークンで上書きします。handdrawn-diagramスキル — ダイアグラムが必要なスライド
チェックリスト
- Phase 0: AskUserQuestionでテーマ（Light/Dark）+ コンテンツを1回で収集
- Phase 1: スライドマップ + 密度制限
- Phase 2: ダイアグラムが必要なスライドを特定（handdrawn-diagram）
- Phase 3: brand.md + design-guide.mdをRead → 単一HTMLを生成（ビューポート、パープルドット、ロゴ）
- Phase 4: スクリーンショット検証 → 受け渡し