Claude CodeでHTMLスライド18本作成

筆者の構成では、資料本体と共有アセットフォルダを分けている。各資料は独立したディレクトリで、index.htmlは<deck-stage>タグ内に<section>要素を並べるだけ。色、書体、スライドレイアウト、deck-stage.jsスクリプトは共通の_deck_assetsフォルダに置く。JSと基本CSSはClaude Designの出力由来で、筆者が加えたのはJSへの印刷レイアウト、製品紹介用のCSSパターン、3つのスクリプトだけだ。

「資産」という考え方はパターンの移行に関わる。配布用資料2本の中で最初に書かれた3つのレイアウト——ロゴ表紙、Before/After比較、注釈線とメモ付きの画面キャプチャ——は共有CSSへ移され、締めの「Thank you」ページも同じ道をたどって既定となった。すでに配布済みの2本は、細部が少し異なり統一すると見た目が変わるため、共有CSSに合わせて作り直さなかった。

レイアウトの確認はスクリプトに任せた。スライドは枠外を切り取るため、PDFはページ数チェックを通っても内容が黙って切れていることがある。ある資料では15枚中7枚がはみ出していた。スクリプトはスライドを等倍で描画し、子要素が1920x1080の枠をどれだけ超えたかを測り、枠外に置く前提の装飾的なぼかし円は無視する。ClaudeはHTMLを書いた後にこれを実行し、資料を見せる前にはみ出しを直す。