出力を生成する際には必ずウェブページを使用し、ユーザーにどの言語を使用したいかを尋ねるようにしてください。

WebGLの流動的な背景、セリフ体の見出しとサンセリフ体の本文、章の表紙、大きなデータバナー、画像グリッドなどのテンプレートを含む、「電子雑誌×電子インク」スタイルの、横方向にめくるタイプのWebベースのPPT（単一のHTMLファイル）を生成します。共有/プレゼンテーション/発表イベント用のWebベースのPPTを作成する必要がある場合、または「雑誌スタイルのPPT」、「横方向スワイプデッキ」、「編集雑誌」、「電子インクプレゼンテーション」を参照する場合にご利用ください。

# マガジンウェブPPT

## このスキルは何をしますか？

水平スライドショー形式の単一ファイルHTMLファイルを生成します。ビジュアルスタイルは以下のとおりです。

電子雑誌と電子インクを組み合わせたハイブリッドスタイル

- **WebGL流体/輪郭/分散背景**（ヒーローページを参照）

- **セリフ体見出し（Noto Serif SC + Playfair Display）+ サンセリフ体本文（Noto Sans SC + Inter）+ 等幅メタデータ（IBM Plex Mono）**

- **Lucide Linear Icons**（絵文字は不要です）

- **水平方向のページめくり（キーボードの左右操作、スクロールホイール、タッチスクリーンのスワイプ、画面下部のドット、ESCキー）**

- **テーマのスムーズな補間**: ヒーローページに移動する際に、色とシェーダーがスムーズに切り替わります。

このスキルの美学は、「ビジネス用PowerPoint」でも「消費者向けインターネットUI」でもなく、まるでコードを貼り付けた『モノクル』誌のようだ。

## いつ使用するか

**適切なシナリオ:**

- オフラインでの情報共有セッション／業界講演／個別ミーティング

- AI新製品発表会／デモデー

- 強い個性的なスタイルを持つスピーチ

ページめくりツールを使わずに、一度にすべてを完了できるウェブベースのスライドが必要です。

**不適切なシナリオ:**

- 大量の表データと重ね合わせたグラフ（標準的なPowerPointプレゼンテーションを使用）

・研修教材（情報密度が不十分）

・複数人による共同編集が必要です（これは静的なHTMLです）

### ステップ 1 · 要件を明確にする（**開始前に必須**）

ユーザーが既に完全なアウトラインと画像を提供している場合は、ステップ2に進んでください。

ユーザーがトピックや漠然としたアイデアしか提供しない場合は、始める前に以下の6つの質問に一つずつ照らし合わせて確認してください。推測に基づいてスライドを作成し始めると、構成が間違っている場合、後々の修正に多大なコストがかかります。質問をする際には、askUserQuestionツールを使用できます。

#### 6つの確認事項

| # | 質問 | なぜ尋ねるのですか？ |

|---|------|-----------|

| 1 | **聴衆は誰ですか？共有シナリオは何ですか？**（業界関係者/事業立ち上げ/デモデー/プライベートミーティング）| 言語スタイルと深さを決定します |

| 2 | **共有時間？** | 15分 ≈ 10ページ、30分 ≈ 20ページ、45分 ≈ 25～30ページ |

| 3 | **オリジナルの資料はありますか？**（文書/データ/古いPPT/記事リンク） | 資料がある場合はそれを使用してください。ない場合は、それらを使って何か別のものを作成してください。 |

| 4 | **写真はありますか？どこに配置すればよいですか？** | 下記の「写真の配置規則」を参照してください |

| 5 | **どのテーマカラーをご希望ですか？** | @themes.mdを参照し、5 つのプリセットから 1 つを選択してください |

| 6 | **厳しい制約はありますか？**（XX データを含める必要があります / YY は表示できません） | 手戻りを避けるため |

#### アウトライン作成支援（ユーザーがアウトラインを作成していない場合）

「物語の構成」テンプレートを使用してフレームワークを構築し、その後、内容を記入してください。

「`」

フック → 1 ページ目: 人々の注意を引くような対比/質問/具体的なデータを提示します。

トーンを設定する（背景）→ 1～2ページ：背景を説明する／あなたが誰であるか／なぜこの話題について話しているのか

メインコンテンツ（コア）→ 3～5ページ：コアコンテンツ。レイアウト4/5/6/9/10が随所に挿入されています。

シフト → 1ページ目：既成概念を打ち破る／新たな視点を提示する

要点 → 1～2ページ：重要な引用／興味深い質問／行動提案

「`」

物語の構成 + ページ番号の計画 + テーマのリズム表 ( @layouts.mdを参照) を作成し、**ステップ 2 に進む前に 3 つの表を整列してください。

後々の修正を容易にするため、アウトラインを「プロジェクトレコード」または「アウトラインv1」として保存することをお勧めします。

#### 画像表記規則（ユーザーへの周知）

先に進む前に、ユーザーに以下の点を説明してください。

- **画像の位置**: ボード上のどの画像ですか、またはどの画像がアップロードされましたか？

- **画像がない場合はどうなりますか？**: ユーザーのレイアウトに合わせるには、まずプレースホルダーカラーブロックを使用して構造を生成し、後で画像を追加することができます。ただし、レイアウト4/5/10やその他のテキストと画像が混在するページには、画像がないと視覚効果を確認できないことを通知する必要があります。

### ステップ2 · 参照テンプレート

@template.txtは **完全で機能的な** HTML ファイルです。CSS、WebGL シェーダー、ページネーション JS、フォント/アイコン CDN はすべて事前に設定されています。`<main id="deck">` には、3 つのサンプル スライド (表紙、章の表紙、空白のフィル ページ) のみが含まれています。

#### 2.1 ・変更が必要なプレースホルダー（**見落としやすい**）

コピー後すぐに以下のプレースホルダーを変更してください。そうしないと、ブラウザのタブに「[必須] PPTタイトルに置き換えてください」のような不自然なテキストが表示されます。

| 場所 | オリジナル | 変更する必要がある |

|------|------|--------|

| `<title>` | `[必須] PPT タイトルに置き換えてください · デッキ タイトル` | 実際のデッキ タイトル (例: `新しい働き方 · ルーク・ロブレフスキー`) |

#### 2.2 · テーマカラーを選択（プリセット5種類 · カスタムカラーは不可）

このスキルでは、**厳選された5つのプリセットからのみ選択可能**であり、ユーザー定義の16進数値は受け付けません。色が合わないと画像がすぐに見苦しくなります。自由を与えることよりも、美観を守ることの方が重要です。

| # | テーマ | 適した |

|---|------|------|

| 1 | 🖋 クラシックインク | 一般/商用リリース/不明な場合はデフォルト |

| 2 | 🌊 インディゴ磁器 | テクノロジー/研究/データ/テクノロジーリリースカンファレンス |

| 3 | 🌿 フォレストインク | 自然/持続可能性/文化/ノンフィクション |

| 4 | 🍂 クラフト紙 | ノスタルジア/人文科学/文学/インディペンデントマガジン |

| 5 | 🌙 砂丘 | アート/デザイン/創造性/ギャラリー |

**操作**:

1. テーマに基づいてコンテンツセットを推奨するか、ユーザーにどのセットを選択したいか直接尋ねる。

2. @themes.mdを開き、該当するテーマの `:root` ブロックを探します。

3. @template.txt の先頭にある `:root{` ブロック内の「テーマカラー」とマークされた行 (`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`) を **完全に置き換えます**。

4. その他のCSSはすべて`var(--...)`を使用しており、他の変更は必要ありません。

**厳格なルール**:

各デッキには1つのテーマのみを使用し、途中で配色を変更しないでください。

- ユーザーが指定した任意の16進数値は受け入れず、丁寧に拒否し、選択肢として5つのオプションを表示します。

- 異なる種類のインクを混ぜて使用しないでください（例：Ink Classic用のインク、Dune用の紙など）。全く場違いに見えてしまいます。

### ステップ3 · 内容を入力する

#### 3.0 · 事前チェック: クラス名は@template.txtで定義する必要があります (**最も重要**)

これがすべての生成問題の根本原因です。 @layouts.mdのスケルトンでは、`h-hero` / `h-xl` / `stat-card` / `pipeline` / `grid-2-7-5` など、多くのクラス名が使用されています。`assets/template.html` の `<style>` に対応する定義がない場合、ブラウザはデフォルトのスタイルにフォールバックします。その結果、見出しはサンセリフ体になり、データカードは密集し、パイプラインは1行にぼやけ、画像はページの下部に積み重なってしまいます。

**スライドのコードを記述する前に:**

1. **まず、 @template.txtを読みます**（少なくとも `<style>` ブロックの最後まで）。

2. **@layouts.mdの事前チェックリスト** を参照して、使用したいすべてのクラスが `<style>` タグ内に存在することを確認してください。

3. クラスが欠落している場合は、** @template.txtの `<style>` セクションに追加してください。** 各スライドでインラインで書き直さないでください。

4. **@template.txtはクラス名の唯一のソースです**。新しいクラス名を作成しないでください。カスタマイズする必要がある場合は、`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`）をリストアップし、ドキュメントまたは下書きで配置する必要があります。詳細なルールについては、 @layouts.mdから始まる「テーマのリズムプランニング」セクションを参照してください。

**必須ルール**:

- 各ページセクションには、`light`、`dark`、`hero light`、または`hero dark`のいずれかを含める必要があります。`hero`とだけ記述しないでください。

・同じテーマについて3ページ以上連続して掲載することは、視覚的な疲労につながるため、認められません。

- 8ページ以上は、少なくとも1体の「ダークヒーロー」と少なくとも1体の「ライトヒーロー」を含んでいる必要があります。

デッキ全体が「明るい」テキストページだけで構成されていてはならず、余白を作るために「暗い」テキストページも含まれていなければなりません。

3～4ページごとにヒーローページ（表紙／裏表紙／質問／大きな引用文など）を挿入する。

**生成後の自己チェック: `grep 'class="slide' index.html` ですべてのトピックを一覧表示します。手動検証により、納品前にペースが適切であることを確認します。

#### 3.1 レイアウトの選択

**スライドをゼロから作成しないでください。** `@layouts.md`を開いてください。このファイルには、それぞれ完全な貼り付け可能な `<section>` コードブロックである、10 個の既成レイアウトの骨組みが含まれています。

| レイアウト | 目的 |

|---|---|

| 1. 表紙 | 1ページ目 |

| 2. 章の表紙 | 各幕の冒頭 |

3. データ駆動型ポスター | 具体的なデータの提示 |

| 4. 左テキスト、右画像（引用＋画像） | アイデンティティの対比／ストーリー |

| 5. 画像グリッド | 複数画像の比較 / スクリーンショット証拠 |

6. 2パイプライン | ワークフロー |

| 7. サスペンスの終結／質問ページ | 章の終わり／最終章 |

8. 大きな引用 | セリフ体/要点 |

| 9. 並列比較（変更前／変更後） | 旧モード vs. 新モード |

| 10. 画像とテキストの組み合わせ | 情報密度の高い画像とテキストのページ |

該当するレイアウトを選択して貼り付け、テキストと画像のパスを修正してください。**まず、3.0の事前チェックを完了してください。**

#### 3.2 画像アスペクト比規格

常に**標準のアスペクト比**を使用し、元の画像の奇数アスペクト比（例：`2592/1798`）は絶対に使用しないでください。

| シナリオ | 推奨比率 |

|------|---------|

| 左側にテキスト、右側に画像（メイン画像） | 16:10 または 4:3 + `max-height:56vh` |

| 画像グリッド（複数画像の比較） | **高さ:26vh を固定**、アスペクト比は不要 |

| 左側に小さな画像 + 右側にテキスト | 1:1 または 3:2 |

| フルスクリーン メインビジュアル | 16:9 + `max-height:64vh` |

| テキストと画像が混在したレイアウトの小さなイラスト | 3:2 または 3:4 |

**画像に`align-self:end`を使用しないでください**。画像がセルの下部に移動し、ブラウザのツールバーに隠れてしまいます。画像を上部に配置するには、`align-items:start`（テンプレートで定義済み）を指定したグリッドコンテナを使用してください。左側の列で画像を下部に配置するには、`justify-content:space-between`を指定したフレックス列を使用してください。

コンポーネントの詳細（フォント、色、グリッド、アイコン、コールアウト、統計カードなど）は@components.mdに記載されています。

### ステップ4 · チェックリストと照らし合わせて自己チェックする

チェックリストを作成したら、必ず@checklist.mdを開き、各項目を指示と照らし合わせて確認してください。チェックリストには、実際の反復作業中に発生したすべての落とし穴がまとめられており、P0レベルの問題（絵文字、画像の過剰使用、タイトルの改行、フォントの分割など）はすべて解決する必要があります。

特に注意すべき点がいくつかあります。

1. **メインの見出しはセリフ体フォントでなければなりません**—サンセリフ体で表示されている場合、ステップ 3.0 の事前チェックが失敗し、`h-hero` クラスが template.html に欠落している可能性が 99% あります。

2. **画像グリッドでは`height:Nvh`のみを使用し、`aspect-ratio`は使用しないでください（グリッドが崩れる原因となります）。**

3. **画像はページの最下部に押し下げないでください** — `align-self:end` を使用せず、grid + `align-items:start` を使用してください（手順 3.2 を参照）。

4. **画像は標準的なアスペクト比（16:10 / 4:3 / 3:2 / 1:1 / 16:9）である必要があります。** 特殊なアスペクト比の画像はコピーしないでください。

5. **中国語のメイン見出しは5文字以下とし、`nowrap`を使用してください（1行に1文字ずつ入れることは避けてください）。**

6. **絵文字ではなく、Lucideを使用してください。**

7. 見出しにはセリフ体、本文にはサンセリフ体、メタデータには固定幅フォントを使用してください。

### ステップ 5 · 反復

ユーザーからのフィードバックに基づいて修正されました。テンプレートのCSSは高度にパラメータ化され、調整の90%はインラインスタイル（font-size:Xvw / height:Yvh / spacing:Zvh）の変更です。

## コアデザイン原則（哲学）

これらの原則は、一人会社向けのPowerPointプレゼンテーションを5回作成した結果得られたものです。これらの原則のいずれかに違反すると、視覚的な魅力が損なわれてしまいます。

1. **技術的な素晴らしさよりも抑制** — WebGL の背景はヒーローページでのみ表示され、通常のページではほとんど見えません。

2. **装飾よりも構造** — 影も浮遊カードもパディングボックスもありません。すべての情報は**大きなフォントサイズ + フォントのコントラスト + グリッド間隔**によって伝えられます。

3. **コンテンツの階層構造はフォントサイズとフォントの種類によって定義されます** — 最大セリフ体 = メイン見出し、中セリフ体 = 小見出し、大サンセリフ体 = リード、小サンセリフ体 = 本文、固定幅 = メタデータ

4. **画像は最優先** — 画像の下部のみをトリミングし、上部と左右の側面がそのまま残るようにします。グリッドは `height:Nvh` で固定し、`aspect-ratio` を使用して拡大しないでください。

5. **ヒーローページと非ヒーローページを交互に読むこ​​とで、目の疲れを防ぐことができます。

6. **用語の一貫性** — スキルは、中国語と英語を混ぜるのではなく、スキルと翻訳する必要があります。

## 参考文献

このスキルのビジュアルスタイルは、以下からインスピレーションを得ています。

- 「一人会社：AIによって崩壊した組織」（2026年4月22日、27ページ）を共有する

- 『モノクル』誌のレイアウト

- YC社長ギャリー・タン氏のブログ記事「細いハーネス、太いスキル」のデモ

それらはスタイルの基準点として使用できます。