Magazine Web Ppt は何をしますか？
このスキルの機能
以下の視覚的なトーンを持つ、単一ファイルのHTMLで構成される、水平スワイプ式のデッキを生成します。
- 電子雑誌 + 電子インクのハイブリッドスタイル
- WebGL流体 / 輪郭 / 分散背景（ヒーローページで表示）
- セリフ見出し（Noto Serif SC + Playfair Display）+ サンセリフ本文（Noto Sans SC + Inter）+ モノスペースメタデータ（IBM Plex Mono）
- Lucideラインアイコン（絵文字不使用）
- 水平左右ページング（キーボード← →、スクロールホイール、タッチスワイプ、下部ドット、ESCインデックス）
- スムーズなテーマ遷移：ヒーローページに移動する際、色とシェーダーがソフトに遷移します
このスキルの美的感覚は「企業向けPPT」でも「コンシューマー向けインターネットUI」でもありません。まるで Monocle 誌にコードが縫い付けられたような外観です。
使用するタイミング
適したシナリオ:
- オフラインの講演 / 社内業界講演 / プライベートサロン
- AI新製品発表 / デモデイ
- 強い個人的スタイルのトーク
- 「一度作ればページングツール不要」のWeb版スライド
適さないシナリオ:
- 長大な表形式データ、積み上げグラフ（通常のPPTを使用）
- トレーニングコースウェア（情報密度が低すぎる）
- 複数人での共同編集（静的HTMLのため）
ワークフロー
ステップ0 · 方向性を推測；比較がリクエストされた場合のみ質問
ブリーフ、オーディエンス、コンテンツ、既知のコンテキストから、5つのマガジン風方向性のうち1つを推測します。各方向性は、テーマカラー、推奨レイアウト、クロームスタイル、スライド数をパッケージ化しています。最も近い方向性を選択し、質問せずに続行します。
ユーザーが明示的に方向性オプションの表示や比較を求めた場合のみ、references/styles.mdを開き、1行の概要をdirection-cards質問フォームで提示します。
1. Monocle Editorial · 国際雑誌スタイル ✦ デフォルト
2. WIRED Tech · データ＋エンジニアリング
3. Kinfolk Slow · スローライフ / ヒューマニスト
4. Domus Architectural · 建築 / 空間感覚
5. Lab / Reference · アカデミック＋クラフトマニュアル
ユーザーが「わからない、おすすめして」と言ったり、方向性の手がかりを提供しない場合：質問せずにMonocle Editorialをデフォルトにします。失敗確率が最も低いためです。ユーザーが「AI / ベンチマーク / 技術ローンチ」に言及した場合：WIREDを選択。「読書 / プライベート / ソーシャルサークル」：Kinfolkを選択。「デザイン / 建築 / ポートフォリオ」：Domusを選択。「研究 / 学術 / 方法論」：Labを選択。
方向性を選択した後、プロジェクトフォルダに項目记录.md（プロジェクト記録）を作成または更新し、最初の行に方向性 + テーマカラー + オーディエンス + 時間を明記します（テンプレートはstyles.mdの末尾参照）。方向性は決して変更しないでください：途中で切り替えると、それまでのすべてが無駄になります。
ステップ1 · 意図を明確にする
ユーザーが既に完全なアウトラインと画像を提供している場合、ステップ2に直接スキップできます。
ブリーフ、プロジェクトメタデータ、提供されたコンテンツ、会話から以下のチェックリストを推測します。不足している回答がデッキを実質的に変更し、安全なデフォルトが存在しない場合のみ、未解決のフィールドを1つの統合質問フォームで質問します。チェックリストを1つずつ質問しないでください。
6つの質問からなる明確化チェックリスト
方向性とテーマカラーは、ユーザーが明示的にオプションの比較を要求しない限り、ステップ0で推測されます。
| # | 質問 | なぜ質問するか |
|---|---|---|
| 1 | オーディエンスは誰ですか？共有シナリオは？（社内業界 / 商用ローンチ / デモデイ / プライベートサロン） | 言語スタイルと深さを決定します |
| 2 | トークの時間は？ | 15分 ≈ 10ページ、30分 ≈ 20ページ、45分 ≈ 25-30ページ（各方向性の推奨範囲はstyles.md参照） |
| 3 | ソース資料はありますか？（ドキュメント / データ / 古いPPT / 記事リンク） | 資料があればそれを基に構築し、なければ構築を支援します |
| 4 | 画像はありますか？どこにありますか？ | 以下の「画像規約」を参照 |
| 5 | ✓ ステップ0の方向性で既に決定済み | |
| 6 | ハードな制約はありますか？（XXデータを必ず含める / YYを表示してはいけない） | やり直しを防ぎます |
アウトライン支援（ユーザーにアウトラインがない場合）
「ナラティブアーク」テンプレートを使用して骨格を構築し、コンテンツを埋めます。
フック → 1ページ : 対比 / 質問 / ハードな数字を提示して注目を集める
コンテキスト → 1-2ページ : 背景 / 自分/自分たちの説明 / このトピックの理由
コア → 3-5ページ : コアコンテンツ、レイアウト4/5/6/9/10を織り交ぜる
シフト → 1ページ : 期待を破る / 新しい見解を提案する
テイクアウェイ → 1-2ページ : 決めゼリフ / サスペンスフルな質問 / 行動喚起
ナラティブアーク + ページ数計画 + テーマリズム表（layouts.md参照）。ステップ2に進む前に、3つの表すべてを整合させてください。
アウトラインは項目记录.md（プロジェクト記録）または大纲-v1.md（アウトラインブランチ1）として保存するのが最適です。後で反復できます。
画像規約（ユーザーに伝える）
開始前にこれらをユーザーに明確に伝えてください。
- 保存場所:
项目/XXX/ppt/images/フォルダ（index.htmlと同じ階層） - 命名規則:
{ページ番号}-{セマンティック}.{ext}（例：01-cover.jpg/03-figma.jpg/05-dashboard.png）- ページ番号はゼロ埋めしてソートしやすくする
- セマンティック部分は英語で、短く、具体的で、コンテンツと一致させる
- 推奨スペック:
- 各画像は幅1600px以上（大画面でのぼやけ防止）
- 写真/スクリーンショットはJPG、透過UI/チャートはPNG
- 合計サイズは10MB未満に抑える（ページングのスムーズさに影響）
- 置き換え方法: 同名上書きが最も安定（HTML内のパスを変更する必要なし）；ファイル名が変わった場合は、
images/古い名前を全体検索して新しい名前に変更することを忘れずに - 画像がない場合: ユーザーと調整する；プレースホルダーの色ブロックで構造を先に生成し、後で画像を埋めることは可能だが、レイアウト4/5/10のような画像テキスト混合ページは、画像なしでは視覚効果が確認できないことを伝える
ステップ2 · テンプレートをコピーする
assets/template.htmlをターゲットの場所（通常は项目/XXX/ppt/index.html）にコピーし、images/フォルダを同じ階層に作成して画像を受け入れられるようにします。
mkdir -p "项目/XXX/ppt/images"
cp "<SKILL_ROOT>/assets/template.html" "项目/XXX/ppt/index.html"
template.htmlは完全で実行可能なファイルです。CSS、WebGLシェーダー、ページングJS、フォント/アイコンCDNがすべてプリセットされています。<main id="deck">内のみに3つのサンプルスライド（カバー、幕間仕切り、空白埋めページ）があります。
2.1 · 変更が必要なプレースホルダー（見落としやすい）
コピー後すぐに、以下のプレースホルダーを変更しないと、ブラウザタブに「[必填] 替换为 PPT 标题」のような不格好なテキストが表示されます。
| 場所 | オリジナル | 変更後 |
|---|---|---|
<title> | [必填] 替换为 PPT 标题 · Deck Title | 実際のデッキタイトル（例：一种新的工作方式 · Luke Wroblewski） |
毎回template.htmlをコピーした後に行うべき最初の作業：[必填]をgrep検索して、すべて置き換えられたことを確認してください。
2.2 · テーマカラーを選択する（5つのプリセット · カスタマイズ不可）
このスキルは注意深く調整された5つのプリセットからのみ選択可能です。ユーザー定義の16進数値は受け付けません。間違った色の組み合わせは一瞬で見た目を悪くします。自由を提供するよりも美的感覚を保護することが重要です。
| # | テーマ | 最適な用途 |
|---|---|---|
| 1 | 🖋 Ink Classic | 一般的 / 商用ローンチ / 何を選べばいいかわからない場合のデフォルト |
| 2 | 🌊 Indigo Porcelain | テック / 研究 / データ / 技術基調講演 |
| 3 | 🌿 Forest Ink | 自然 / 持続可能性 / 文化 / ノンフィクション |
| 4 | 🍂 Kraft Paper | ノスタルジック / ヒューマニスト / 文学 / インディーズ雑誌 |
| 5 | 🌙 Dune | アート / デザイン / クリエイティブ / ギャラリー |
方法:
- コンテンツテーマに基づいて1つを推奨するか、単にユーザーにどれを選ぶか尋ねます
references/themes.mdを開き、対応するテーマの:rootブロックを見つけますassets/template.html（コピーしたバージョン）の先頭の:root{ブロック内で、「テーマカラー」コメントでマークされた行を全体として置き換えます：--ink/--ink-rgb/--paper/--paper-rgb/--paper-tint/--ink-tint- 他のすべてのCSSは
var(--...)を通じて流れるため、他に変更は必要ありません
ハードルール:
- 1つのデッキは1つのテーマのみを使用し、途中で色を変更しない
- ユーザーからの任意の16進数値は受け付けない：丁寧に断り、5つのプリセットから選んでもらう
- 混在させない（例：Ink Classicからインクを、Duneから紙を取る）：完全に衝突する
ステップ3 · コンテンツを埋める
3.0 · 事前チェック：クラス名がtemplate.htmlで定義されていることを確認する（最も重要）
これがすべての生成問題の原因です。layouts.mdのスケルトンは多くのクラス名（h-hero / h-xl / stat-card / pipeline / grid-2-7-5など）を使用します。assets/template.htmlの<style>に対応する定義がない場合、ブラウザはデフォルトスタイルにフォールバックします。大きなタイトルはサンセリフになり、データカードは一塊に凝縮され、パイプラインは一行に潰れ、画像はページの下部に積み重なります。
スライドコードを書く前に:
- 最初に
assets/template.htmlを読む（少なくとも<style>ブロックの最後まで） - layouts.mdのPre-flightリストを確認し、使用する予定のすべてのクラスが
<style>に存在することを確認する - クラスがない場合：template.htmlの
<style>に追加する、各スライドにインラインで書き直さない - template.htmlがクラス名の唯一のソースである：新しいクラス名を作成しない。カスタムが必要な場合は、
style="..."をインラインで使用する
よく見逃されるクラス（事前に存在確認必須）：
h-hero / h-xl / h-sub / h-md / lead / kicker / meta-row / stat-card / stat-label / stat-nb / stat-unit / stat-note / pipeline-section / pipeline-label / pipeline / step / step-nb / step-title / step-desc / grid-2-7-5 / grid-2-6-6 / grid-2-8-4 / grid-3-3 / grid-6 / grid-3 / grid-4 / frame / frame-img / img-cap / callout / callout-src / chrome / foot
3.0.5 · テーマリズムを計画する（クラス事前チェックと同様に重要）
レイアウトを選ぶ前に、まず各ページのテーマクラス（hero dark / hero light / light / dark）をリストし、ドキュメントまたは下書きに書き出して整合させる必要があります。詳細なルールはreferences/layouts.mdの先頭にある「テーマリズム計画」セクションを参照してください。
必須ルール:
- すべてのページセクションは、
light/dark/hero light/hero darkのいずれかを保持する必要があります。heroだけは書かないでください - 同じテーマが3ページ以上連続すると視覚疲労を起こすため、許可されません
- 8ページ以上の場合、≥1の
hero dark+ ≥1のhero lightが必要です - デッキ全体が
lightボディページのみであってはならず、darkボディページを入れて呼吸スペースを作る必要があります - 3-4ページごとに1つのヒーローページ（カバー/仕切り/質問/大きな引用）を挿入します
生成後のセルフチェック: grep 'class="slide' index.htmlですべてのテーマをリストし、リズムが妥当であることを手動で確認してから納品します。
3.1 · レイアウトを選ぶ
スライドをゼロから書かないでください。references/layouts.mdを開きます。そこには10個の既製レイアウトスケルトンがあり、それぞれが完全で貼り付け可能な<section>コードブロックです。
| レイアウト | 用途 |
|---|---|
| 1. カバー | 1ページ目 |
| 2. 幕間仕切り | 各幕の開始 |
| 3. 大きな数字 | ハードデータを示す |
| 4. リード画像＋テキスト（引用＋画像） | アイデンティティの対比 / ストーリー |
| 5. 画像グリッド | 複数画像の比較 / スクリーンショット証拠 |
| 6. 2カラムパイプライン（Pipeline） | ワークフロープロセス |
| 7. サスペンスフルなクロージング / 質問ページ | 幕の閉じ / まとめ |
| 8. 大きな引用ページ（Big Quote） | セリフの決めゼリフ / テイクアウェイ |
| 9. サイドバイサイド比較（Before / After） | 旧モデル vs 新モデル |
| 10. 画像＋テキスト混合（Lead Image + Side Text） | 情報量の多い画像テキストページ |
対応するレイアウトを選び、貼り付け、コピーと画像パスを変更します。必ず事前に3.0のチェックを完了してください。
3.2 · 画像アスペクト比ルール
常に標準アスペクト比を使用し、ソース画像の奇妙な比率（2592/1798など）は使用しないでください。
| シナリオ | 推奨比率 |
|---|---|
| リード画像＋テキスト、メイン画像 | 16:10 または 4:3 + max-height:56vh |
| 画像グリッド（複数画像比較） | 固定 height:26vh、aspect-ratioは使用しない |
| 左に小さな画像、右にテキスト | 1:1 または 3:2 |
| 全画面ヒーロービジュアル | 16:9 + max-height:64vh |
| 画像＋テキスト混合、小さなインセット | 3:2 または 3:4 |
画像にalign-self:endを決して使用しないでください。セルの下部にスライドし、ブラウザツールバーで隠れてしまいます。グリッドコンテナ＋align-items:start（テンプレートで既にプリセット）を使用して、画像が上部に固定されるようにします。左の列を下部に固定したい場合は、flex column＋justify-content:space-betweenを使用します。
コンポーネントの詳細（フォント、色、グリッド、アイコン、callout、stat-cardなど）はreferences/components.mdにあります。
ステップ4 · チェックリストでセルフチェック
生成後、常にreferences/checklist.mdを開き、項目ごとにチェックします。これは実際の反復中に踏まれたすべての落とし穴をまとめたものです。P0レベルの問題（絵文字、画像のはみ出し、タイトルの折り返し、タイプの役割分担）はすべて合格する必要があります。
特に注意すべきいくつかの項目：
- 大きなタイトルはセリフであること：サンセリフで表示される場合、99%の確率でステップ3.0の事前チェックが行われておらず、
h-heroクラスがtemplate.htmlから欠落しています - 画像グリッドでは
height:Nvhのみを使用し、aspect-ratioは使用しない（はみ出すため） - 画像はページ下部に積み重なってはならない：
align-self:endを使用せず、grid +align-items:startを使用する（ステップ3.2参照） - 画像は標準比率のみ使用可能（16:10 / 4:3 / 3:2 / 1:1 / 16:9）、ソース画像の奇妙な比率をコピーしない
- 中国語の大きなタイトルは5文字以下で
nowrap（1行に1文字になるのを防ぐ） - Lucideを使用し、絵文字は使用しない
- タイトルはセリフ、本文はサンセリフ、メタデータはモノスペース
ステップ5 · ローカルプレビュー
index.htmlをブラウザで直接開くだけです。macOSの場合：
open "项目/XXX/ppt/index.html"
ローカルサーバーは不要です。画像は相対パスimages/xxx.pngを使用します。
ステップ6 · 反復
ユーザーフィードバックに基づいて修正します。テンプレートのCSSは高度にパラメータ化されており、調整の90%はi