| 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 は全ページ統一。