「プレゼン資料を作るのに半日かかった……」「PowerPointのデザインを毎回ゼロから考えるのが面倒」——そんな悩み、Claudeのfrontend-slidesスキルで一気に解決できます。日本語で指示するだけで、ブラウザで動くアニメーション付きのスライド資料が自動生成されるんです。
今日紹介する「frontend-slides」スキルは、プレゼン資料をHTMLで自動生成してくれるだぬ。PowerPointもKeynoteも不要、ブラウザさえあればどこでも動くスライドが完成するだぬ🦝
え、HTMLって聞くとちょっと難しそうですけど……私みたいなコード知識ゼロでも大丈夫ですか？
コードは書かなくていいだぬ。「営業向けの提案資料を5枚作って」と日本語で伝えるだけでClaudeが全部やってくれるだぬ。化けられるぞだぬ🦝
frontend-slidesスキルとは？
frontend-slidesは、GitHubで91,000以上のスターを獲得した設定集「everything-claude-code」に含まれるスキルのひとつです。外部ツール不要・ブラウザだけで動くHTMLスライドを自動生成してくれます。
everything-claude-codeにはfrontend-slides以外にも、プランナー・PMの仕事に使えるツールが揃っています。全体像はこちらで解説しています。
- 自己完結型：ファイル1つだけ。外部接続不要でどこでも動く
- アニメーション標準搭載：スライドの切り替えや要素の出現エフェクトが自動で入る
- キーボード・タッチ・スワイプ対応：PCでもスマホでも操作できる
- 複数デバイス対応：1920×1080〜375×667まで自動調整
- PowerPoint変換対応：既存のPPTXファイルをHTMLに変換することも可能
生成されるのは「1つのHTMLファイル」だけ。メールに添付したり、サーバーにアップするだけで相手はブラウザで閲覧できます。PowerPointやKeynoteのバージョン違い問題とも無縁です。
ファイル1つだけで完結するんですか！？「PowerPointが開けない」「フォントが崩れた」みたいなトラブルもなくなりそうですね！
そうだぬ！HTMLは世界中のブラウザで動く標準フォーマットだから、環境依存のトラブルが起きないのが最大のメリットだぬ🦝
frontend-slidesでできること3選
このスキルには主に3つの使い方があります。自分の状況に合わせて使い分けてみてください。
① ゼロからスライドを新規作成する
テーマと枚数を伝えるだけで、Claudeがデザインから内容まで一気に作ってくれます。スキルを起動すると、まず3種類のスタイルプレビューを提案してくれるので、「このスタイルが好き」と選ぶだけでOK。デザインの方向性に迷っている人にも最適です。
② PowerPoint（PPTX）ファイルをHTMLに変換する
「既存のPowerPointをWeb公開したい」「取引先にブラウザで見せたい」という場合も対応できます。PPTXファイルをClaudeに渡して「HTMLスライドに変換して」と指示するだけで、アニメーション付きのHTMLファイルに変換されます。
③ 既存スライドのデザインを改善する
「このスライドをもっとスタイリッシュにしたい」「アニメーションを追加したい」という場合も、既存のHTMLスライドをClaudeに渡して改善を依頼できます。デザインの細部を日本語で指示するだけで修正してくれます。
新規作成も変換も改善も全部できるんですね。特に「スタイルを3種類提案してくれる」のは助かります。ゼロから考えなくていいのは楽だ…！
インストールと使い方
frontend-slidesスキルは「everything-claude-code」という設定集の一部です。全部まとめて入れるとClaudeの動作が重くなることがあるため、このスキルだけをClaude Codeに頼んで入れてもらうのがおすすめです。
Claude Codeのチャット欄に以下をそのまま貼り付けて送信してください。
GitHubの「everything-claude-code」リポジトリからfrontend-slidesスキルだけを私のClaude Codeに追加して。
github.comClaudeがリポジトリにアクセスして、frontend-slidesスキルのファイルだけを自動でセットアップしてくれます。完了後は /frontend-slides と入力するとスキルが起動します。
Claudeへの指示例
スキル起動後は、普通の日本語で指示するだけです。いくつかの具体例を紹介します。
「新規事業の提案資料を作りたい。営業先の役員向けで6〜8枚くらい。テーマカラーは深い青で、落ち着いたプロらしいデザインにして」
「このPowerPointファイルをHTMLスライドに変換して。スライド切り替えのアニメーションはフェードインにしてほしい」
「既存のHTMLスライドをもっとスタイリッシュにしたい。グラデーション背景を使って、見出しが左からスライドインするアニメーションを追加して」
ポイントは「対象者」「枚数」「雰囲気・カラー」の3点を伝えること。これだけでClaudeがプロレベルのスライドを一気に生成してくれます。
「対象者・枚数・雰囲気」の3点だけ！それだったら私でも今すぐ試せそうです。
最初にClaudeがスタイルを3パターン見せてくれるから、「どれが好きか選ぶだけ」で方向性が決まるだぬ。デザインに迷う時間がゼロになるだぬ🦝
PowerPoint / Keynote との比較
「いつも使っているPowerPointでいいじゃないか」という声もあると思います。それぞれの使い分けを整理しました。
| 比較項目 | PowerPoint | HTMLスライド（frontend-slides） |
|---|---|---|
| 閲覧環境 | Office必要 / バージョン依存あり | ブラウザがあればどこでも |
| 作成スピード | 手作業でレイアウト調整が必要 | Claudeへの指示で即生成 |
| アニメーション | 手動設定が必要 | 自動で高品質なアニメーション付き |
| 共有方法 | ファイル送付 / クラウド共有 | HTMLファイル1つをメールやURLで共有 |
| デザイン自由度 | テンプレート内での調整 | コードレベルで完全自由 |
もちろんPowerPointが得意な場面（印刷・社内規定がある場合など）もあります。「素早くWeb公開したい」「環境に依存せず見せたい」「アニメーションをリッチにしたい」場面ではHTMLスライドが強力な選択肢になります。
社外向けの提案資料や発表スライドにHTMLスライドを使えば、「PowerPointが開けない」「レイアウトが崩れた」ってトラブルが丸ごとなくなりますね！
まとめ：スライド作成の時間を半分にしよう
frontend-slidesスキルのポイントをおさらいします。
- frontend-slidesスキルでブラウザだけで動くアニメーション付きHTMLスライドを自動生成できる
- 新規作成・PPTX変換・デザイン改善の3つの使い方がある
- インストールはClaude Codeにお願いするだけ（このスキルだけを個別に追加できる）
- 指示は「対象者・枚数・雰囲気」の3点を日本語で伝えるだけ
- PowerPointのバージョン依存・フォント崩れ問題が丸ごと解消
プレゼン資料の作成は、多くのデザイナーや企画職が「地味に時間を取られる作業」のひとつです。Claudeに任せることで、その時間を本来のクリエイティブな作業に使えるようになります。まずは簡単な資料1枚から試してみてください。
今日の社内MTG用のスライド、さっそくClaudeで作ってみます！半日かかってたのが一瞬になったら最高ですよね！
スライド作成でAIを使いこなせる人と使いこなせない人の差は、これからどんどん広がっていくだぬ。早く始めた分だけ化けられるだぬ🦝 ぜひやってみるだぬ！
こうして作ったHTMLスライドをブログで公開したいと思ったら、WordPressブログを始めてみるといいだぬ。国内最大手のエックスサーバーなら、初心者でも安心してブログを立ち上げられるだぬ🦝
Claudeで作ったスライドをブログで発信できたら、もっといろんな人に見てもらえますよね！
WordPressの自動インストールもできるから、非エンジニアでも10分でブログを立ち上げられるだぬ。サポートも手厚いから安心して始められるぞだぬ🦝
コメント