編集雑誌プレゼンテーション
Featured by
淡苍
Why we love this skill
このスキルを使えば、WebGLの流動的な背景と洗練されたタイポグラフィを融合させた、独自のスタイルの「電子雑誌×電子インク」ウェブベースのPPTにコンテンツを変換できます。これにより、プレゼンテーションは芸術的で洗練されたものになり、従来のPPTの退屈さに別れを告げることができます。
指示
出力を生成する際には必ずウェブページを使用し、ユーザーにどの言語を使用したいかを尋ねるようにしてください。
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 はすべて事前に設定されています。`
#### 2.1 ・変更が必要なプレースホルダー(**見落としやすい**)
コピー後すぐに以下のプレースホルダーを変更してください。そうしないと、ブラウザのタブに「[必須] 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` の `