シナリオベースPPTデザイン
このスキルは2つのものを提供します：
- テンプレートリファレンス：
styles/<ブランチ>/exemplar/とsamples/にある完成サンプル。 - デザインガイド：
guide/にある「構成方法や形状の選び方」に関する説明。
基本原則：スタイルはシナリオと資料に従い、固定しない。 サンプルは品質の基準や表現手法を示すためのものであり、そのままコピーするためのものではありません。新しいデッキは自分の内容に合わせて再構成します。サンプルのレイアウトをそのまま真似たり、全てのデッキを同じ見た目にすることこそ、このスキルが避けたい「AI感」です。
環境要件
- macOS、Google Chrome、
uv。レンダリング時にはローカルのChromeを呼び出します。ブラウザのダウンロードは不要。 - フォントはすべてmacOSのシステムフォントであり、スキルに同梱できません。中国語フォントのウェイトはPostScript名で指定する必要があります（例：
STSongti-SC-Black、FZLTTHK--GBK1-0）。ファミリー名とfont-weightだけを指定すると、標準ウェイトにフォールバックします。
フロー
00 シナリオ判断
まずユーザーから提供された資料を読みます。 資料で答えられる質問は再度聞かないでください。次に、「答えがデザインの決定を変える」質問だけを、一度に最大3〜4個まで行います。質問ツールが利用可能な場合はそれを使用します。
| 質問 | 決定すること |
|---|---|
| どのような場面で使用する？例：コンテスト発表、授業・学術報告、クラス会・学校イベント、業務報告、その他 | どのスタイルブランチを選ぶか |
| 会場でプロジェクター投影するのか、ファイルを配布して各自で見せるのか？発表時間は？ | 情報密度とページ数。投影：文字を大きく、少なく、約1分1ページ。ファイル配布：情報をより密にできる |
| 観客に何を覚えてもらい、何を感じてもらいたい？例：専門的で信頼できる、創造性がある、温かくて面白い、熱血 | ブランチ内のどのテーマを選ぶか |
| 使用しなければならない色、ロゴ、テンプレートの要件はある？例：校章、クラス旗の色、コンテストの要件 | メインカラー変数 |
シナリオ → ブランチとテーマ
| シナリオ | ブランチ | テーマの選び方 | 密度 |
|---|---|---|---|
| 挑戦杯（チャレンジカップ）、インターネット+、起業コンテスト、プロジェクト発表 | roadshow-cn | 単一テーマ；コンテストがビジネス寄りの場合、金色を明るくし、さらにテクノロジー感のあるシアンを追加 | 詰め込む（7割以上） |
| 授業期末報告、読書レポート、グループ研究発表 | course-report | 人文・社会科学は paper；理工・デザイン・データは swiss | 余白を許容し、文字サイズのコントラストを大きくする |
| クラス会、中間・期末の振り返り、運動会、サークル、卒業 | school-event | 思い出、感謝は handbook；コンテスト、激励は pop | 余白を許容し、各ページに一つの「実物」 |
| デザイン性や個性を強調したい場合：ポートフォリオ解説、就職・大学院推薦の自己紹介、デザイン系共有、個人テーマのスピーチ | curve-minimal | 控えめで理性的、デザイン原稿のようにしたい、またはファイル配布・印刷をするなら pen（薄い背景）；より表現力豊かで個性的に、投影発表するなら ribbon（濃い背景） | 非常に少なく、大量の余白；各ページに一つの重点のみ |
| どれも適さない | 新しいテーマまたはブランチを作成（下記参照） | — | — |
適切なブランチがない場合、最も近いものを無理に適用しないでください。 「雰囲気 → フォント → 形状言語 → 色」の順に新しい tokens.css を派生させます。必須変数とオプション変数の区分は styles/roadshow-cn/tokens.css の先頭に書かれています。フォントはまず scripts/fontcheck.py でChromeが実際に使用していることを確認します。
メインカラーはユーザーの資料から優先的に取得します（例：学校の標準色、クラス旗の色、テーマに関連する色など）。
01 素材の整理
ユーザーの資料から写真、重要な数字、引用文、証明書ファイルをリストアップします。写真の枚数はレイアウトに直接影響します：写真が3枚未満の場合は、フォトウォールを作成しません。現時点ではこのステップは手作業で整理する必要があり、スクリプトはありません。
02 アウトライン
まず章を決め、各ページに役割を割り当てます：表紙、章ページ、コンテンツページ、データページ、エンディング。各ブランチの典型的なページタイプは styles/<ブランチ>/style.md を参照してください。
03 各ページの形状選択
各ページについて、まずその情報の関係性（階層、順序、対比、並び替え、割合、重要な数字、並列、現場写真など）を認識し、次に guide/shapes.md で対応する候補形状を探し、選択基準と現在のブランチに基づいて一つを選びます。「なぜこの形状を使うのか」を説明できなければ、選択ミスです。装飾は最後に追加し、構図上の役割に基づいて選びます（同じドキュメントのセクション4）。
04 レンダリング
- 選択したブランチの
exemplar/deck.htmlのファイル構造を参考に記述しますが、その構図をそのままコピーしないでください：<head>の最初の行にテーマスクリプト<script>{const t=new URLSearchParams(location.search).get('theme');if(t)document.documentElement.dataset.theme=t}</script>を配置します。これを忘れると、render.pyでテーマ名を渡してもデフォルトテーマで静かにレンダリングされます。- 次に
tokens.css、lib/base.css、ブランチのcomponents.cssを順に参照します。roadshow-cn は単一テーマのブランチであり、lib/base.cssも使用していないため、独自のサンプルに従って記述します。 - ページ末尾で
lib/shapes.jsを参照します。 - 各ページは
<section class="slide">で、サイズは 1920×1080 です。
- ページ内の
<style>には座標とサイズのみを記述します。色はすべてvar(--c-*)を使用するか、JavaScript 内でShapes.T('役割名')を使用して読み取ります。 - 写真の位置は
<div class="photo" data-label="…">を使用します。実際の画像がある場合は、内部に<img>を配置します。 - レンダリングコマンド：
uv run --with playwright python scripts/render.py <deck.html> <出力ディレクトリ> [テーマ名]
05 チェック
render.pyは自動的にチェックします：テキストボックスのオーバーフロー（.fitが追加された要素のみ）、JSエラー、省略記号、テーマ変数の欠落。- 各ページのPNGを必ず確認してください。 自動チェックでは、要素の重なり、隠蔽、末尾の単独行を検出できません。新しく作成したページを最初にレンダリングするときは、ほとんどのページでこのような問題が発生します。
guide/anti-patterns.mdと照らし合わせて確認します：カードの羅列、ピンク紫のグラデーション、絵文字によるイラストの代用はすべて失敗とみなします。- 大きな書道フォント、手書きフォント、またはディスプレイフォントのタイトルには
.fitを追加しないでください。そうしないとチェックが誤検出します。
06 納品
PNGとPDF（render.py がすでに生成しています）をユーザーに渡し、ユーザー自身に効果を確認してもらいます。現在、編集可能なPPTXのエクスポートはサポートしていません。修正が必要な場合はHTMLを編集して再レンダリングします。
ファイル一覧
| パス | 内容 | いつ読むか |
|---|---|---|
guide/shapes.md | 情報関係 → 形状、理由、シナリオバリエーション、実装方法、変数依存関係付き | フェーズ03、各ページで使用 |
guide/anti-patterns.md | AIが直接生成したPPTの典型的な特徴 | フェーズ05 |
styles/<ブランチ>/style.md | ブランチの適用シナリオ、デザイン手法、ページタイプ、テーマ選択の根拠 | ブランチ選択後 |
styles/<ブランチ>/tokens.css | 色、フォント、フォントサイズ変数；異なるテーマは [data-theme] でオーバーライド | メインカラー変更時または新テーマ作成時 |
styles/<ブランチ>/components.css | ブランチのHTMLコンポーネント | フェーズ04 |
styles/<ブランチ>/exemplar/ | 4ページのサンプルと各テーマのスクリーンショット | フェーズ04、手法を確認するため |
styles/school-event/samples/banhui-full/ | 12ページの完全なクラス会サンプル（handbookテーマ、ユーザー好評） | 完全なデッキ作成時のリズム参考 |
lib/shapes.js | 19個のSVGジェネレーター（構造、データ、装飾、手描き） | フェーズ04 |
lib/base.css | リセットスタイル、キャンバス、写真プレースホルダー | フェーズ04 |
scripts/render.py | レンダリング、チェック、PNGとPDFのエクスポート | フェーズ04、05 |
scripts/pixeldiff.py | ピクセル単位の比較、回帰チェック用 | lib/ を変更した後 |
scripts/fontcheck.py | Chromeが実際に使用しているフォントを確認 | 新テーマ作成時、フォント変更時 |
未完了事項
- フェーズ01から03はまだスクリプト化されておらず、上記の説明に従って手作業で完了します。
guide/organization.md（デッキ全体の章構成、ページ役割、リズム）は未作成です。- 編集可能なPPTXのエクスポートはサポートしていません。
- フォントはマシンをまたげません：macOS以外の環境に移行する場合は、同梱可能なオープンソースWebフォントに切り替える必要があります。