magazine-web-ppt

Magazine Web Ppt

このスキルでできること

次のようなビジュアルトーンの、単一ファイルの HTML 横スワイプ式デッキを生成します。

• 電子雑誌＋電子インクのハイブリッドスタイル
• WebGL の流体／等高線／分散背景（ヒーローページで表示）
• セリフ体の見出し（Noto Serif SC + Playfair Display）＋サンセリフ体の本文（Noto Sans SC + Inter）＋等幅フォントのメタデータ（IBM Plex Mono）
• Lucide のラインアイコン（絵文字なし）
• 左右へのページ送り（キーボード ← →、スクロールホイール、タッチスワイプ、下部のドット、ESC で目次）
• スムーズなテーマ補間：ヒーローページに切り替えると、色とシェーダーが柔らかく遷移します

このスキルの美学は「企業向け PPT」でも「一般消費者向けインターネット UI」でもありません。コードを縫い付けた後の Monocle 誌のような見た目です。

使用する場面

適したシナリオ：

• オフライン講演／社内業界講演／プライベートサロン
• AI 新製品の発表／デモデイ
• 個人のスタイルを強く打ち出す講演
• 「一度作れば、ページ送りツールが不要な」ウェブ版スライド

適さないシナリオ：

• 表形式のデータや積み上げグラフが長く続く内容（通常の PPT を使用）
• 研修教材（情報密度が低すぎます）
• 複数人での共同編集（これは静的な HTML です）

ワークフロー

Step 0 · 方向性を推測する。比較を求められた場合のみ質問する

概要、対象者、内容、既知のコンテキストから、5 つの雑誌の方向性のうち 1 つを推測します。各方向性には、テーマカラー、おすすめのレイアウト、クロームのスタイル、スライド枚数が設定されています。最も近いものを選び、質問せずに進めてください。

ユーザーが方向性の選択肢を見たり比較したりするよう明示的に求めた場合に限り、references/styles.md を開き、1 行の要約を 1 つの direction-cards 形式の質問として提示します。

1. Monocle Editorial · International magazine style ✦ default
2. WIRED Tech · Data + engineering
3. Kinfolk Slow · Slow living / humanist
4. Domus Architectural · Architecture / sense of space
5. Lab / Reference · Academic + craft manual

ユーザーが「わからないので、おすすめしてください」と言うか、方向性の手がかりを示していない場合は、質問せずにデフォルトで Monocle Editorial を選びます。最も失敗する可能性が低いためです。ユーザーが「AI／ベンチマーク／技術発表」に言及した場合は WIRED、「読書／プライベート／社交サークル」の場合は Kinfolk、「デザイン／建築／ポートフォリオ」の場合は Domus、「研究／学術／方法論」の場合は Lab を選びます。

方向性を選んだら、プロジェクトフォルダーに プロジェクト記録.md（Project Record）を作成または更新し、1 行目に方向性＋テーマカラー＋対象者＋所要時間を明記します（styles.md の末尾にあるテンプレートを参照）。途中で方向性を変更しないでください。途中で変更すると、それまでの作業がすべて無駄になります。

Step 1 · 意図を確認する

ユーザーがすでに完全なアウトラインと画像を提供している場合は、Step 2 に進んで構いません。

概要、プロジェクトのメタデータ、提供されたコンテンツ、会話から、以下のチェックリストを推測します。回答が欠けていることでデッキの内容が大きく変わり、安全なデフォルトもない場合は、未解決の項目だけをまとめて 1 回で質問します。チェックリストを 1 項目ずつ質問しないでください。

確認事項（6 項目）

ユーザーが選択肢の比較を明示的に求めない限り、方向性とテーマカラーは Step 0 で推測します。

#	質問	質問する理由
1	対象者は誰ですか？共有する場面はどのようなものですか？（社内業界向け／商用発表／デモデイ／プライベートサロン）	言葉遣いと深さを決めるため
2	講演の所要時間は？	15 分 ≈ 10 ページ、30 分 ≈ 20 ページ、45 分 ≈ 25〜30 ページ（各方向性のおすすめ範囲は styles.md を参照）
3	参照資料はありますか？（文書／データ／古い PPT／記事のリンク）	資料があればそれを基に作成し、なければ作成を支援するため
4	画像はありますか？どこにありますか？	以下の「画像のルール」を参照
5	希望するテーマカラーはありますか？	✓ Step 0 で方向性に基づいてすでに決定済み
6	必須の制約はありますか？（必ず含めるデータ XX／表示してはいけない内容 YY）	手戻りを防ぐため

アウトラインの作成支援（ユーザーにアウトラインがない場合）

「ナラティブアーク」テンプレートを使って骨組みを作成し、その後に内容を埋めます。

Hook       → 1 page   : throw out a contrast / question / hard number that makes people stop
Context    → 1-2 pages : explain the background / who you are / why this topic
Core       → 3-5 pages : the core content, interleaving Layouts 4/5/6/9/10
Shift      → 1 page    : break the expectation / propose a new view
Takeaway   → 1-2 pages : a punchline / a suspenseful question / a call to action

ナラティブアーク＋ページ数の計画＋テーマのリズム表（layouts.md を参照）。ステップ 2 に進む前に、3 つの表すべての内容をそろえてください。

後で編集できるよう、アウトラインは 项目记录.md（Project Record）または 大纲-v1.md（Outline v1）として保存するのがおすすめです。

画像のルール（ユーザーに伝えること）

作業を始める前に、以下をユーザーに明確に伝えてください。

• フォルダーの場所：项目/XXX/ppt/images/ の中（index.html と同じ階層）
• 命名規則：{page number}-{semantic}.{ext}。例：01-cover.jpg／03-figma.jpg／05-dashboard.png
  • 並べ替えやすいよう、ページ番号にはゼロを付けてください
  • 意味を表す部分には英語を使い、短く、具体的で、内容に合った名前にしてください
• 推奨仕様：
  • 各画像の幅は 1600px 以上（大画面でぼやけるのを防ぎます）
  • 写真やスクリーンショットには JPG、透過が必要な UI やグラフには PNG を使用してください
  • 合計サイズは 10MB 未満にしてください（ページ送りの滑らかさに影響します）
• 画像の差し替え方法：同じ名前で上書きする方法が最も安定します（HTML 内のパスを変更する必要はありません）。ファイル名を変更する場合は、images/oldname を全体検索して新しい名前に変更してください
• 画像がない場合：ユーザーと相談してください。まずはプレースホルダーの色付きブロックで構成を作り、後から画像を入れることもできます。ただし、レイアウト 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 シェーダー、ページ送り用 JavaScript、フォント／アイコンの CDN はすべて設定済みです。<main id="deck"> 内にあるのは、表紙、章区切り、空白の補助ページの 3 つのサンプルスライドだけです。

2.1 · 変更が必要なプレースホルダー（見落としやすい項目）

コピーしたら、すぐに以下のプレースホルダーを変更してください。変更しないと、ブラウザーのタブに「[必填] replace with the PPT title」のような不自然なテキストが表示されます。

場所	元の内容	変更後
<title>	[必填] 替换为 PPT 标题 · Deck Title	実際のデッキタイトル（例：一种新的工作方式 · Luke Wroblewski）

テンプレートのコピーが終わったら、まず毎回 grep で「[必填]」を検索し、すべて置き換えられていることを確認してください。

2.2 · テーマカラーを選ぶ（プリセット 5 種 · カスタマイズ不可）

このスキルで選べるのは、細かく調整された 5 種のプリセットのみです。ユーザーが指定した任意の 16 進数カラーは受け付けません。色の組み合わせを誤るとビジュアルがすぐに見栄えを損なうため、自由度よりも美しさを守ることが重要です。

#	テーマ	おすすめの用途
1	🖋 Ink Classic	一般用途／商用ローンチ／迷ったときのデフォルト
2	🌊 Indigo Porcelain	テクノロジー／研究／データ／技術系基調講演
3	🌿 Forest Ink	自然／サステナビリティ／文化／ノンフィクション
4	🍂 Kraft Paper	懐かしさ／人文／文学／インディー雑誌
5	🌙 Dune	アート／デザイン／クリエイティブ／ギャラリー

手順：

1. 内容のテーマに基づいて 1 つを提案するか、ユーザーにどれを選ぶか尋ねてください
2. references/themes.md を開き、対応するテーマの :root ブロックを見つけてください
3. コピーした assets/template.html の冒頭にある :root{ ブロックで、「theme color」コメントが付いた行（--ink／--ink-rgb／--paper／--paper-rgb／--paper-tint／--ink-tint）をまとめて置き換えてください
4. それ以外の 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> に対応する定義がない場合、ブラウザーはデフォルトのスタイルにフォールバックします。その結果、大きなタイトルがサンセリフ体になり、データカードがぎゅっと詰まり、パイプラインが一行に押しつぶされ、画像がページの下部に積み重なります。

スライドコードを書く前に、次の作業を行ってください。

1. まず assets/template.html を読みます（少なくとも <style> ブロックの末尾まで）
2. layouts.md の事前確認リストと照合し、使用するすべてのクラスが <style> に存在することを確認します
3. クラスが不足している場合は、template.html の <style> に追加します。各スライドにインラインで書き直してはいけません
4. クラス名の唯一の情報源は 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ページ以上の場合は、hero dark と hero light をそれぞれ少なくとも1ページ含めてください
• デッキ全体の本文ページを light のみにしてはいけません。間に余白を生み出すため、dark の本文ページが必要です
• 3〜4ページごとに、ヒーローページ（表紙／区切り／質問／大きな引用）を1ページ挿入してください

生成後のセルフチェック：grep 'class="slide' index.html ですべてのテーマが表示されます。提出前に、テーマのリズムが適切かどうかを手動で確認してください。

3.1 · レイアウトを選ぶ

スライドをゼロから書かないでください。references/layouts.md を開いてください。そこには、すぐに貼り付けて使える <section> のコードブロックが、完全なレイアウト骨組みとして10種類用意されています。

レイアウト	用途
1. 表紙	1ページ目
2. アクト区切り	各アクトの開始
3. 大きな数字	明確なデータを提示
4. メイン画像＋テキスト（引用＋画像）	アイデンティティの対比／ストーリー
5. 画像グリッド	複数画像の比較／スクリーンショットによる証拠
6. 2列のパイプライン（パイプライン）	ワークフローのプロセス
7. サスペンスのある締め／質問ページ	アクトの締めくくり／総括
8. 大きな引用ページ（大きな引用）	セリフ体の決めぜりふ／要点
9. 左右の比較（Before / After）	旧モデルと新モデル
10. 画像＋テキストの組み合わせ（メイン画像＋サイドテキスト）	情報量の多い画像とテキストのページ

対応するレイアウトを選び、貼り付けてから、コピーと画像パスを変更してください。まず必ず 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（テンプレートにあらかじめ設定済み）を使い、画像が上部に固定されるようにしてください。左カラムを下部に固定する場合は、フレックスカラムと justify-content:space-between を使用します。

コンポーネントの詳細（フォント、色、グリッド、アイコン、コールアウト、統計カードなど）は references/components.md にあります。

ステップ 4 · チェックリストで自己確認する

生成後は必ず references/checklist.md を開き、項目を一つずつ確認してください。ここには実際の反復作業で発生したすべての落とし穴がまとめられています。P0 レベルの問題（絵文字、画像のはみ出し、タイトルの折り返し、書体の使い分け）はすべてクリアする必要があります。

特に次の点に注意してください。

1. 大きなタイトルには必ずセリフ体を使います。サンセリフ体で表示される場合、99％はステップ 3.0 の事前確認が行われておらず、template.html に h-hero クラスがありません
2. 画像グリッドでは height:Nvh のみを使用し、aspect-ratio は使用しません（はみ出しの原因になります）
3. 画像がページ下部に積み重ならないようにしてください。align-self:end は使用せず、グリッドと align-items:start を使用します（ステップ 3.2 を参照）
4. 画像には標準の比率のみ使用できます（16:10／4:3／3:2／1:1／16:9）。元画像の変則的な比率をそのまま使わないでください
5. 中国語の大きなタイトルは 5 文字以下にし、nowrap を指定します（1 文字ずつ改行されるのを防ぎます）
6. 絵文字ではなく Lucide を使用します
7. タイトルにはセリフ体、本文にはサンセリフ体、メタデータにはモノスペース体を使用します

ステップ 5 · ローカルでプレビューする

index.html をブラウザーで直接開くだけです。macOS の場合：

open "项目/XXX/ppt/index.html"

ローカルサーバーは不要です。画像には相対パス images/xxx.png を使用します。

ステップ 6 · 反復する

ユーザーからのフィードバックに基づいて変更します。テンプレートの CSS はパラメーター化されており、調整の 90％はインラインスタイルの変更です（フォントサイズ font-size:Xvw／高さ height:Yvh／間隔 gap:Zvh）。

---

リソースファイルの概要

magazine-web-ppt/
├── SKILL.md              ← you are reading this
├── assets/
│   ├── template.html     ← the complete runnable template (seed file)
│   └── example-slides.html ← a 9-page sample deck (for the Examples preview)
└── references/
    ├── styles.md         ← the 5 magazine directions (Monocle / WIRED / Kinfolk / Domus / Lab)
    ├── components.md     ← component handbook (fonts, color, grid, icons, callout, stat, pipeline...)
    ├── layouts.md        ← 10 page layout skeletons (paste-ready)
    ├── themes.md         ← 5 theme color presets (pick only, no customization)
    └── checklist.md      ← quality checklist (P0/P1/P2/P3 tiers)

推奨する読み込み順序：

1. まず SKILL.md（このファイル）に目を通し、全体を把握します
2. ステップ 0 で方向性を選ぶときに、styles.md を読みます。5 つの方向性それぞれに、テーマカラー＋推奨レイアウト＋クロームスタイルがまとめられています
3. ステップ 1 で意図を明確にした後、方向性の確認が必要な場合は themes.md を読み、パレットの詳細を確認します
4. 開始前に、assets/template.html の <style> ブロックを読みます。ここがクラス名の唯一の情報源です。クラスが欠けていると、ページ全体のスタイルが崩れます
5. レイアウトを選ぶために layouts.md を読みます（冒頭に事前確認用のクラス名一覧とテーマのリズム計画があります）
6. 詳細を調整するときは components.md を読み、コンポーネントを確認します
7. 生成後は checklist.md を読み、自己確認します（冒頭の P0-0 ルールで事前確認を徹底します）

コアとなるデザイン原則（理念）

これらの原則は、「ワンパーソンカンパニー」の講演資料を5回にわたって改良する中で導き出されたものです。どれか1つでも破ると、ビジュアル全体が崩れてしまいます。

1. 派手さよりも抑制：WebGL の背景が見えるのはヒーローページだけで、通常のページではほとんど見えません
2. 装飾よりも構造：シャドウ、浮かせたカード、パディング付きのボックスは使いません。すべての情報は、大きな文字＋書体のコントラスト＋グリッドの余白で表現します
3. コンテンツの階層は文字サイズと書体の組み合わせで決まります：最大サイズのセリフ体＝メインタイトル、中サイズのセリフ体＝サブタイトル、大きなサンセリフ体＝リード文、小さなサンセリフ体＝本文、等幅フォント＝メタデータ
4. 画像は重要な要素です：画像をトリミングするのは下部だけにし、上部と側面はそのまま残します。グリッドでは aspect-ratio による引き伸ばしではなく、固定の height:Nvh を使用します
5. リズムはヒーローページで生み出します：ヒーローページと通常のページを交互に配置し、目が疲れないようにします
6. 用語を統一します：Skills はあくまで Skills とし、中国語と英語を混ぜた訳語は使いません

参考作品

このスキルのビジュアルのトーンは、以下を参考にしています。

• Guizang の講演「ワンパーソンカンパニー：AI が折りたたむ組織」（2026-04-22、全27ページ）
• Monocle 誌のレイアウト
• YC 社長の Garry Tan によるブログ投稿「Thin Harness, Fat Skills」のデモ

これらをスタイルの指針として扱うことができます。