html-ppt-taste-editorial

HTML PPT — エディトリアル・ミニマリズム

ネオンが苦手なブリーフ向けの16:9デッキです。投資家向けアップデート、デザインレビュー、社内マニフェスト、講義用デッキなどに適しています。SaaSのランディングページではなく、雑誌の別冊のような印象です。

ソース

Leonxlnx/taste-skill — skills/minimalist-skill/SKILL.md をもとに要点をまとめています。デッキシステムはプロジェクトのデッキ規約に従います。各 .slide は 100vw × 100vh のセクションで、アクティブなスライドには .active / .is-active が付きます。また、同梱のサンプルでは、ギャラリーの iframe 内でキーボード、ホイール、タッチ、ドットによるナビゲーションを操作できます。スクリプトが無効な場合や印刷時のフォールバックでは、すべてのスライドを表示します。このディレクトリの example.html を参照してください。

厳守するルール

• 下地： 温かみのあるオフホワイト #FBFBFA / #F7F6F3。前景色はオフブラック #1A1A19。純白や純黒は使用しないでください。
• 書体の組み合わせ： 見出しにはセリフ体（Instrument Serif / Newsreader / Lyon）、本文にはグロテスク体（Inter Tight / Switzer）、メタ情報にはモノスペース体（JetBrains Mono）を使用します。
• スライドごとの見出しサイズ： タイトルには、イタリックに対応したセリフ体で clamp(56px, 6.5vw, 96px)、行の高さは 1.05、文字間隔は -0.025em を使用します。
• 極細線のみ： 1px solid #EAEAEA — 枠線、区切り線、表のセルに使用します。ドロップシャドウは禁止です。
• アクセントカラーは1色： 落ち着いたパステルカラーの組み合わせから選びます（例：セージ #346538 と #EDF3EC、または赤 #9F2F2D と #FDEBEC）。眉見出しのドット、チャートの塗り、コールアウト用チップなどに控えめに使います。スライドの背景色には使用しないでください。
• スライドの余白： 広めに取ります（最低でも 72px 96px）。タイトルの幅は最大14chです。
• 眉見出し： 各スライドの冒頭に、letter-spacing: 0.18em のモノスペース大文字眉見出しと、セクション番号 01 / 09 を置きます。
• ページ番号： モノスペース体で右下隅に配置します。

禁止事項

• Inter（使う必要がある場合は Inter Tight を使用できますが、Switzer / SF Pro を優先してください）。Roboto、Open Sans は使用しないでください。
• 強いドロップシャドウ。グロー。グラデーションテキスト。
• 同じ幅のカードを3枚並べた機能紹介。代わりに、幅を不均等にした極細線区切りのカラムを使用します。
• テキストや箇条書きのマーカーとしての絵文字 — — を使うか、マーカーを付けないでください。
• すべてのスライドに全面写真を使用すること。画像を使うスライドは1〜2枚にして、ここぞという場面に限ります。
• AIの陳腐な文句（「Elevate」「Unleash」「Seamless」「Next-Gen」）。
• フェードインより目立つスライド遷移。

必須のスライド構成パターン（推奨合計数は10〜12枚）

1. 表紙 — セリフ体のタイトル、文中のイタリックアクセント、モノスペース体のメタ情報フッター。
2. 眉見出し＋主張 — 左に本文のリードとなる一文、右に番号付きのモノスペース目次。
3. 番号付きマニフェスト — 極細線で区切った3〜4つの主張。
4. ベントー型データスライド — 極細線の間隔を設けた、不均等な6カラムグリッド。統計値はセリフ体、補足情報はモノスペース体で表示します。
5. 引用／抜粋 — 大きなセリフ体で一文を表示し、モノスペース体で出典を記載。上下に極細線を引きます。
6. 比較 — 縦の極細線で区切った2カラム。「Doesn't / Does」または「Before / After」。
7. 表または索引 — display: grid; gap: 1px を極細線の色で設定します。
8. チャートまたは内訳 — モノスペース体のラベルを付けたフラットな横棒グラフ。アクセントカラーの塗りは最新の棒だけに使います。
9. チーム／奥付 — モノスペース体のキーと値のリスト。アバターは使用しません。
10. 締めくくり — 最後の一文はセリフ体のイタリック。CTA はゴーストボタン、署名はモノスペース体にします。

モーション

• 実行時のナビゲーション：キーボード、ホイール／トラックパッド、タッチスワイプ、ドットボタンのいずれを使っても、同じアクティブスライド状態が更新されるようにします。フェードはおよそ 400ms cubic-bezier(0.16, 1, 0.3, 1) に保ちます。
• 静的表示／印刷時のフォールバック：実行環境が起動していない場合やドキュメントを印刷する場合も、すべてのスライドを表示します。
• translate、blur、自動送りは使用しないでください。

事前チェック

• 下地は温かみのあるオフホワイト、前景色はオフブラック。純黒／純白は使用しない
• タイトルにはセリフ体、本文にはグロテスク体、メタ情報にはモノスペース体を使用 — 3種類の書体にそれぞれ役割を持たせる
• アクセントカラーは1色のみ。デッキ全体で最大3回使用する
• すべてのスライドに眉見出し、セクション番号、ページ番号を付ける
• 極細線のグリッドを使った表または比較モジュールを少なくとも1つ含める
• ドロップシャドウ、グラデーション、絵文字、禁止フォントを使用しない
• キーボード、ホイール／トラックパッド、タッチスワイプ、ドットナビゲーションのすべてで1枚ずつスライドが切り替わり、アクティブなドットとスライドの状態が同期する