| name | build-slide-deck |
| description | 案件個別のスライド定義書（YAML）から、Youbleテンプレートと同じデザインのHTMLスライドデッキを生成するスキル。マスターのテーマCSS・スライド別マークアップを再利用し、1920x1080ステージのスタンドアロンHTMLを出力する。「定義書からスライドを作って」「HTMLデッキを生成して」等で使う。 |
スライド定義書 → HTMLデッキ生成
build-slide-definition で作った案件個別スライド定義書（YAML）を入力に、
マスターテンプレート（Youble）と同じ見た目のHTMLスライドデッキを生成するスキル。
いつ使うか
- 合格済みの案件別スライド定義書を、実際のスライド（HTML）にしたいとき
- 「定義書からデッキを作って」「HTMLで出力して」等
前提ファイル（このリポジトリの資産）
- 入力: 案件別スライド定義書
デザイン/proposals/<案件名>_スライド定義書.yaml
- テーマCSS（再利用）:
デザイン/templates/youble-theme.css（design system＋ビューア＋レイアウト）
- スライド別マークアップ（再利用の雛形）:
デザイン/templates/slide-markup/NN_*.html（17タイプの正確なHTML構造）
- マスター定義書（slot/figure語彙の正）:
デザイン/templates/Youble_スライド定義書.yaml
- 出力:
デザイン/proposals/<案件名>_deck.html（スタンドアロン）
デザインの要点（厳守）
- ステージは 1920x1080（16:9）。各スライドは
<section class="slide"> で絶対配置。
- ビューアは各
.slide を .slide-holder に入れ、JSで transform: scale() して画面幅にフィット。
- フォントは Google Fonts CDN（Zen Kaku Gothic New / Shippori Mincho / Cormorant Garamond / DM Mono）。
- アイコンは lucide CDN（
<i data-lucide="..."> ＋ lucide.createIcons()）。
- アクセント語は
<em> で囲む（CSSで黄マーカー/黄文字になる）。1スライド1語のみ。
- フッターは全ページ
<div class="foot">{提案者} / {宛先} 御中</div>、ページ番号 <div class="page">NN</div>。
- マスターの
fmt（FORMAT注記）は社内用。出力デッキには含めない（削除する）。
手順
Step 0｜入力確認
- 対象の案件別定義書 YAML を特定する。無ければ呼び出し元に要求（定義書なしで生成しない）。
- レビュー未合格の定義書なら、先に
build-slide-definition で合格させるよう促す。
Step 1｜読み込み
- 案件別定義書 YAML（slides 配列・各 slot・figures・disclaimer・accent_word）
youble-theme.css（そのまま <style> に埋め込む。スタンドアロン化のため）slide-markup/NN_*.html（各スライドタイプの正確な雛形。クラス構造を崩さない）
Step 2｜スライドごとに雛形へ流し込み
定義書の slides[] を順に処理。各スライドの id に対応する slide-markup/ 雛形を選び、テキストを置換する。
- 見出し・本文・リスト・テーブル・カードを定義書の値で差し替える。
accent_word を本文中で <em>…</em> に。figures の指示どおり図を作る（雛形のSVG/CSS構造を再利用）:
- bar_chart:
.bars/.bar(.hl) 雛形、注目1本だけ hl。
- timeline:
.stp-track/.stp-col(.now)、先頭または現在地に now。
- card_columns:
.sol/.sol-col。 mock: .mock（.mock-row は4列グリッド固定 = 3データ＋tag）。
- metric_blocks:
.met/.m（数値が長い場合は mn に inline font-size で縮小）。
- testimonial_cards:
.vo/.vo-card。 table: .cm-tbl/.tr。 plan_columns: .pr/.pr-col(.feat)。
- 定義書のスロット数とマークアップの要素数を一致させる（pillars3→sol-col3 等）。マスターと異なる個数（例: pricing 単一プラン）は、グリッドを inline で調整して中央寄せ等で破綻させない。
- disclaimer は
.src で配置。fmt注記は出力しない。
- ページ番号は 01 から通し、foot は案件の提案者/宛先で統一。
- 要確認/プレースホルダ の値（例: （要確認））はそのまま表示し、提出前差し替え対象として残す。
Step 3｜アセンブル（スタンドアロンHTML）
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>{案件名} — 提案デッキ</title>
<style>/* youble-theme.css の中身をそのまま */</style>
</head><body>
<div class="deck">
<div class="slide-holder"><section class="slide" ...>…</section></div>
…（全スライド）
</div>
<script src="https://unpkg.com/lucide@latest"></script>
<script>
// 各 slide-holder の高さと内側 .slide の scale を画面幅に合わせる
function fit(){document.querySelectorAll('.slide-holder').forEach(h=>{
const s=h.clientWidth/1920; const sl=h.querySelector('.slide');
sl.style.transform='scale('+s+')'; h.style.height=(1080*s)+'px';});}
window.addEventListener('resize',fit); fit();
if(window.lucide) lucide.createIcons();
</script>
</body></html>
Step 4｜検証
- ブラウザ/プレビューで開く（または screenshot）。各スライドが枠内に収まり、文字あふれ・図崩れが無いか確認。
- あふれがあれば該当スライドの inline font-size やテキスト量を調整。
- lucide アイコンが描画されているか、accentの黄マーカーが出ているか確認。
Step 5｜完了報告
- 出力パスとスライド枚数を報告。
- 提出前メモ（定義書の disclaimer / 要確認）を再掲し、実値差し替えが必要な箇所を明示。
原則
- マークアップのクラス構造を勝手に変えない（テーマCSSが効かなくなる）。崩れる場合は inline で微調整。
- 定義書に無い内容を足さない。プレースホルダは残し、提出前差し替えを申し送る。
- fmt（FORMAT注記）は出力しない。foot/page は全ページ統一。
