CLAUDE CODE SKILL / 配布パッケージ

「スライド作って」 の一言で、 動画まで完成する。

あのグラデーション×方眼のスライドを、誰でも一撃で。 HTMLで生成 → ブラウザで再生 → MP4書き出しまで。

PowerPoint Figma もう、いりません。

約18KB・すぐ使える 追加インストール不要で生成OK
▶ LIVE DEMO
1920 × 1080 / アニメ付き
How it works

頼んで、確認して、動画にする。
たった3ステップ。

Claude Code に話しかけるだけ。専門知識も操作も覚えることはありません。

01

頼む

作りたい内容を、ふつうの言葉で伝えるだけ。素材メモを貼ってもOK。

You ▸ このメモを募集スライドにして
02

確認する

生成されたスライドがブラウザで自動再生。直したいところは会話で何度でも修正。

You ▸ 3枚目の数字をもっと大きく
03

動画にする

OKしたら「動画にしますか?」と確認。はい、でMP4を書き出し(数分)。

AI ▸ 完成しました(62秒 / MP4)
Why it's good

“それっぽい”で終わらせない。

一撃生成

テーマや素材を渡すだけ。構成からアニメまで、まとめて組み上がります。

🎨

あのデザインのまま

方眼グリッド × グラデの統一トンマナ。誰が作っても同じ完成度に揃います。

🎬

MP4書き出し

確認のあと、1920×1080のH.264動画へ。SNS投稿にもそのまま使えます。

📦

配布がカンタン

このzipを渡して各自のフォルダに置くだけ。チーム全員がすぐ使えます。

🛡️

はみ出しガード

文字数の上限ルールを内蔵。崩れ・見切れの事故を未然に防ぎます。

🌐

ブラウザで再生

出力はHTML1枚。開けば即プレゼン。▶/Space/←→で操作できます。

Setup

導入は1分。

スライド生成だけなら追加インストールは不要。動画化を使う人だけ、右の2つを。

STEP 1スキルを置く

zipを解凍して、できた html-slide フォルダを置くだけ。

# プロジェクト単位で使うなら <プロジェクト>/.claude/skills/html-slide/ # 全プロジェクト共通で使うなら ~/.claude/skills/html-slide/

置いたら「◯◯のスライド作って」と頼むだけで動きます。

STEP 2動画化を使う人だけ

MP4書き出しに必要なツール。スライド生成だけなら不要です。

# スライドを作るプロジェクトで npm install puppeteer # Mac brew install ffmpeg # Linux sudo apt install ffmpeg

初回の動画化で node 実行の許可 を1回だけ聞かれます。承認すればOK。

INSIDEzipの中身(5ファイルだけ)

html-slide/ ├── SKILL.md … Claudeへの指示書(ワークフロー定義) ├── assets/template.html … デザイン+アニメエンジンの完動テンプレ ├── references/design-system.md … パターン10種・文字数上限・タイミング規則 ├── scripts/render-video.mjs … MP4書き出しスクリプト └── README.md … この導入手順のオフライン版
FAQ

よくある質問

Q1なにが必要ですか?
Claude Code が動く環境だけです(Mac / Windows / Linux)。スライド生成は追加インストールなし。動画化を使う場合のみ puppeteer と ffmpeg を入れます(上のSTEP 2)。
Q2どのくらい時間がかかりますか?
スライド生成は1〜2分。MP4書き出しは60秒のスライドで2〜3分が目安です。修正は会話で頼むだけなので、トータルでも従来の資料作成より大幅に短くなります。
Q3内容はどこまで自由ですか?
文言・構成・枚数は完全に自由です。逆に配色やレイアウトの大枠は「あのデザイン」に固定されているのがこのスキルの価値——誰が作っても同じ完成度に揃います。メモ・記事・スプシのデータを貼って「これをスライドに」もOK。
Q4PowerPointやPDFにできますか?
成果物はHTML(そのままプレゼン再生可)とMP4です。ブラウザで開けばプロジェクター投影も問題なし。pptx変換は対応していませんが、ほとんどの用途はHTMLとMP4でカバーできます。
Q5スマホでも見られますか?
生成されたスライドHTMLは画面サイズに自動フィットするので、スマホのブラウザでも再生できます。MP4はそのままLINEやXに投稿可能です。

さっそく、1枚作ってみよう。

ダウンロードして置いたら、あとは話しかけるだけ。

html-slide をダウンロード.zip