web-deck

Web Deck — CoinFund Web Presentation Builder

最小限のデザインで、CoinFund ブランドのスライドデッキを自己完結型の HTML ファイルとして作成します。各デッキは単一の .html ファイルです。ビルド手順や依存関係は不要で、Git で簡単にバージョン管理できます。

使用するタイミング

ユーザーがWeb ベースのスライドデッキ（HTML/CSS/JS）を希望する場合に使用します。.pptx 形式で出力する場合は、代わりに jake-deck スキルを使用してください。このスキルは、ブラウザー上で動作し、PDF にもエクスポートできるプレゼンテーション向けです。

ユーザーが指定する内容：

1. モード：static（印刷に最適化され、JS を使用しない）または dynamic（キーボード操作、スライド遷移）。デフォルト：dynamic。
2. コンテンツ：スライドのタイトルと内容。アウトラインまたは箇条書きで指定します。

デザインシステム

カラーパレット（CSS カスタムプロパティ）

:root {
  --bg:      #F7F3EE;  /* Warm cream — all slide backgrounds        */
  --text:    #1A1A1A;  /* Near-black — headings, primary body text   */
  --gray:    #7A7A7A;  /* Secondary text, labels                     */
  --ltgray:  #C8C2BA;  /* Divider rules, subtle borders              */
  --white:   #FFFFFF;  /* Title slide background, table headers      */
  --red:     #C0392B;  /* Warnings, risks, negative indicators       */
  --green:   #27AE60;  /* Positive indicators, "ready" status        */
  --blue:    #2C3E50;  /* Section headers, callout boxes             */
}

タイポグラフィ

すべてのテキストに Nunito を使用します（Google Fonts から読み込み、オフライン時はシステムフォントにフォールバックします）。

要素	サイズ	ウェイト	色
スライドタイトル	28px	700	--blue
セクション見出し	16px	700	--text
本文	13px	400	--text
ラベル／補足	11px	400	--gray
脚注	10-11px	400	--red または --gray

レイアウト

スライドのアスペクト比は 16:9（ベースサイズは 960px x 540px、ビューポートに合わせて拡大縮小）です。

┌──────────────────────────────────────────────┐
│  padding-left: 76px (~0.8" equivalent)       │
│  ┌─ Title zone: top 50px ──────────────────┐ │
│  │                                          │ │
│  ├─ Content zone: top 110px ───────────────┤ │
│  │  width: 808px (~8.4" equivalent)        │ │
│  │                                          │ │
│  ├─ Footnote zone: bottom 30px ────────────┤ │
│  └──────────────────────────────────────────┘ │
└──────────────────────────────────────────────┘

必須スライド

タイトルスライド（常に最初）

• 背景：--white (#FFFFFF)、クリーム色ではありません
• CoinFund ロゴ：テキストのワードマーク「CoinFund」。52px の Arial 太字、色は --text、中央揃え
• ワードマークの下に細い区切り線：幅 240px、色は --text、中央揃え
• デッキタイトル：28px の Nunito 太字、色は --blue、区切り線の下に中央揃え
• サブタイトル／日付：14px の Nunito、色は --gray、中央揃え

<section class="slide slide--title">
  <div class="slide__wordmark">CoinFund</div>
  <hr class="slide__divider slide__divider--title">
  <h1 class="slide__deck-title">Deck Title Here</h1>
  <p class="slide__subtitle">March 2026</p>
</section>

エンドスライド（常に最後）

• 背景：--bg（クリーム色）
• 「CoinFund」：36px の Nunito 太字、色は --blue、中央揃え
• 中央揃えのグレーの区切り線
• 「coinfund.io」：13px の Nunito、色は --gray、中央揃え

<section class="slide slide--end">
  <div class="slide__end-wordmark">CoinFund</div>
  <hr class="slide__divider slide__divider--end">
  <p class="slide__end-url">coinfund.io</p>
</section>

コンテンツスライドのパターン

すべてのコンテンツスライドは、次の HTML 構造に従います。

<section class="slide">
  <h2 class="slide__title">Slide Title</h2>
  <hr class="slide__accent">
  <div class="slide__body">
    
  </div>
  
  <footer class="slide__footnote">Footnote text</footer>
</section>

パターン 1：見出し＋本文ブロック（デフォルト、最も一般的）

それぞれに太字の見出しと説明文がある、3～5 個のトピックを含むスライド向けです。

<div class="block">
  <div class="block__header">Bold header text</div>
  <div class="block__body">Gray body description text.</div>
</div>

パターン 2：ラベルと値のグリッド

2 列のレイアウトです。左側にグレーのラベル、右側にテキストの値を配置します。

<div class="kv-grid">
  <div class="kv-grid__row">
    <span class="kv-grid__label">Label</span>
    <span class="kv-grid__value">Value text here</span>
  </div>
  
</div>

パターン 3：テーブル

ヘッダー行は青地に白文字とし、本文の行はクリーム色と白を交互に使用します。

<table class="deck-table">
  <thead>
    <tr><th>Column A</th><th>Column B</th><th>Column C</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td></tr>
  </tbody>
</table>

パターン 4：番号付きリスト

青い番号＋太字のラベル＋同じ行に本文を配置します。

<ol class="numbered-list">
  <li>
    <span class="numbered-list__label">Item name</span>
    <span class="numbered-list__desc">Description text explaining the item.</span>
  </li>
</ol>

パターン 5：コールアウトボックス

左側にアクセントとなるボーダーを配した、明るい青みがかったグレーの塗りつぶしです。

<div class="callout">
  <p>Key insight or important note goes here.</p>
</div>

表示アニメーション

dynamic モードでは、スライドがアクティブになったときにアニメーション表示する要素に class="reveal" を追加します。要素はフェードしながら上に移動し、兄弟要素内での位置に応じて時間差で表示されます。

<section class="slide">
  <h2 class="slide__title reveal">Title animates first</h2>
  <hr class="slide__accent reveal">
  <div class="slide__body">
    <div class="block reveal">This block animates third</div>
    <div class="block reveal">This one fourth (0.08s delay)</div>
  </div>
</section>

static モードでは、reveal は効果を持たず、要素は通常どおり表示されます。

Static モードと Dynamic モード

Static モード（data-mode="static"）

• JavaScript は一切使用しません
• すべてのスライドを順番に表示し、CSS の改ページで区切ります
• ブラウザーの印刷機能（Cmd+P／Ctrl+P）または Puppeteer による PDF エクスポート向けに最適化されています
• 各 <section class="slide"> に page-break-after: always を適用します

Dynamic モード（data-mode="dynamic"）

• キーボード操作：矢印キー、Space、Page Up／Down
• モバイル端末やタブレットでのタッチ／スワイプ操作
• 右下に現在のスライドを表示（例：「3 / 12」）
• ビューポート上部に青い進行状況バーを表示
• スライド間で控えめなフェード遷移（CSS の opacity ＋ transition）
• .reveal 要素に時間差をつけた表示アニメーション
• スライドごとに URL ハッシュを更新（#slide-3）して、特定のスライドへの直接リンクを可能にします
• F を押すと全画面表示になり、Esc を押すと終了します
• P を押すと概要モードに切り替わります（すべてのスライドを表示し、クリックで移動できます）
• prefers-reduced-motion が設定されている場合、アニメーションは自動的に無効になります

HTML テンプレート

template.html（この SKILL.md と同じディレクトリにあります）は、すべてのデッキで使える、完全に動作するボイラープレートです。すべての CSS（デザイントークン、パターン 1〜5、アニメーション、静的／動的モード、印刷スタイル）と、すべての JS（キーボード／タッチ操作によるナビゲーション、概要モード、全画面表示、進行状況バー、ハッシュによるディープリンク）が含まれています。

新しいデッキの作成

新しいデッキを作成するときは、必ずテンプレートをコピーして開始します。

cp <skill-dir>/template.html deck.html

次に、以下を行います。

1. <html> の data-mode を "dynamic" または "static" に設定します
2. <title> と .slide__deck-title の DECK_TITLE_HERE を置き換えます
3. .slide__subtitle の MONTH YEAR を置き換えます
4. 上記で説明したコンテンツパターンを使って、タイトルスライドと終了スライドの間にコンテンツスライドを追加します

ボイラープレートを記憶を頼りに再生成しないでください。 必ずテンプレートファイルをコピーしてください。

ライブ開発サーバー（必須）

デッキは必ず開発サーバー経由で配信してください。 デッキファイルを file:// で直接開かないでください。サーバーを使うことで、ライブリロード、ハンバーガーオーバーレイメニュー、PDF エクスポートが利用できます。サーバーを使わない場合、ユーザーには操作ツールのない静的ファイルが表示されます。

開発サーバーは serve-deck.mjs（この SKILL.md と同じディレクトリ）にあります。npm の依存関係はゼロです（初回の PDF エクスポート時に Puppeteer が自動インストールされます）。

サーバーの起動

node /path/to/skills/web-deck/serve-deck.mjs 3333 /path/to/deck/directory

次に、ブラウザーを開きます。

open http://localhost:3333/deck.html

ブラウザーを開く前にサーバーを起動してください。 編集中もサーバーが実行され続けるように、run_in_background: true を使います。

サーバーが提供する機能

1. ライブリロード — SSE ベースで、ファイルを保存するたびにブラウザーを自動リロードします。スライドを編集すると、ユーザーは変更をすぐに確認できます。
2. ハンバーガーオーバーレイメニュー — 右上に常時表示されるハンバーガーアイコン（☰）。以下の機能があります。
   • PDF としてダウンロード — Puppeteer がサーバー側でデッキをスライドごとに 960×540px でレンダリングし、フォントとスタイルをすべて保持した忠実な PDF を生成します。初回使用時に Puppeteer が自動インストールされます。
   • ⌘P のヒント — ブラウザーの印刷機能も使えることを知らせます
3. 静的ファイル配信 — デッキとローカルアセット（画像、フォント）を配信します

オーバーレイメニューとリロードクライアントは、配信時に挿入されます。deck.html ファイル自体には含まれません。デッキはクリーンで自己完結した状態を保ちます。このためサーバーの使用は必須です。サーバーがなければ、ハンバーガーメニュー、PDF エクスポート、ライブリロードは利用できません。

ワークフロー

1. ユーザーがアウトライン（スライドタイトルとコンテンツの箇条書き）とモードの希望（静的／動的）を指定します
2. テンプレートをコピーします：cp <skill-dir>/template.html deck.html
3. コピーしたファイルでモード、タイトル、サブタイトルを設定します
4. 各スライドに適したコンテンツパターンを選び、コンテンツスライドを追加します
5. サーバーを起動します（バックグラウンドで一度だけ）：node <skill-dir>/serve-deck.mjs 3333 . と run_in_background: true を指定します
6. ブラウザーで開きます（一度だけ）：open http://localhost:3333/deck.html
7. 反復して調整します — Edit ツールを使ってスライドを変更します。保存するたびにブラウザーが自動リロードされます。
8. 準備ができたら、ユーザーが ハンバーガーメニュー → PDF としてダウンロード をクリックします。

重要：サーバーを起動したままにする

• 編集中も実行され続けるように、run_in_background: true を指定してサーバーを起動します
• 第 2 引数は配信するディレクトリです（デフォルトは .）
• サーバーはセッション中、終了せずに実行され続けます
• セッションが終了するか、ユーザーが作業を終えたら、サーバーを停止します：pkill -f serve-deck、または自然終了するまで待ちます

スタイルの原則

CoinFund デッキのスタイルは、抑制を重視しています。

1. グラデーション、ドロップシャドウ、装飾要素は使用しません。 スライドの CSS box-shadow はブラウザーのビューポートの枠付けにのみ使用し、スライドコンテンツ自体には使用しません。
2. 色には意味があります。 構造には青、リスクや警告には赤、準備完了や肯定的な内容には緑を使います。装飾目的では使用しません。
3. 余白を最大限に活用します。 余白を十分に取り、ブロック間の間隔を明確にします。窮屈に感じる場合は、スライドを2枚に分けます。
4. 1枚あたりのコンテンツブロックは最大4～5個です。 はみ出しを防ぎ、スライドを素早く確認できるようにします。
5. 脚注はメインコンテンツの下に、十分な間隔を空けて配置します。 下部に配置した slide__footnote を使用します。
6. アクセントラインは1枚につき1本です。 短い slide__accent <hr> でタイトルとコンテンツを区切ります。装飾はこれだけにします。
7. 冗長さより簡潔さを優先します。 箇条書きは最大1～2文にします。このデッキは会話のきっかけであり、ホワイトペーパーではありません。
8. スタイルの変更は一貫させます。 ユーザーが1枚のスライドに視覚的またはスタイル上の変更を加えた場合、その変更をデッキ内のすべてのスライドに一貫して適用します。

段階的な編集

ライブサーバーを使うと、REPL のように編集できます。ファイルを編集すると、結果がすぐに表示されます。

デッキは1つの HTML ファイルなので、次のように編集できます。

• Git で扱いやすい：各スライドが <section> ブロックになっているため、差分が明確で意味のあるものになります
• スライドの追加：既存のスライドの間に新しい <section class="slide"> ブロックを挿入します
• 順序の変更：<section> ブロックを切り取って貼り付けます
• コンテンツの編集：既存のセクション内のテキストを変更します
• スタイルの微調整：全体に適用する変更は、:root の CSS カスタムプロパティを調整します

ユーザーから特定のスライドの編集を依頼された場合は、Edit ツールを使って、該当する <section> ブロックだけを変更します。小さな変更のためにファイル全体を再生成しないでください。ライブサーバーは保存するたびに自動で再読み込みされます。

はみ出しの防止

• スライドあたり最大5ブロック（パターン1）
• ラベルと値のグリッドは最大6行（パターン2）
• 表は最大7行（ヘッダーを含む）
• 脚注は絶対位置指定で bottom: 20px に固定します
• コンテンツが収まらない場合は、スライドを2枚に分けます。フォントサイズは10px未満にしないでください