Claude Code でテック風PPTを作る：Skillと組み合わせるべき理由
PPT制作にかけていた時間の大半は、「コンテンツを見栄えよく配置する」作業でした。タイトルの位置、画像の配置、データスライドの整理、表紙にどこかテクノロジー感を出すか——どのステップも、レイアウトと格闘しているようなものでした。
Claude Code をそのまま使ってもPPTは生成できます。ただ問題があります。Claude Code は「テック風」を、グラデーション、グロー、グラスモーフィズム、ランダムな色面、努力が見えすぎる装飾として解釈しがちです。一見にぎやかに見えても、実際にプレゼンしようとすると、タイトルが不安定で、階層が乱れ、スライドのスタイルが統一されておらず、そのまま使えないことがほとんどです。
Skill の価値はここにあります。スタイル、レイアウト、画像スロット、文字サイズ階層、エクスポート形式を事前に固定することで、Claude Code の即興演奏を減らし、安定した成果物を増やします。結果は「AIが数ページ試してみた」ではなく、そのまま発表・スクリーンショット・展開できるPPT資産になります。
この記事では Guizang PPT Skill を主な例として使います。記事、Markdown、発表アウトラインを単一HTMLファイルの横スクロールPPTに変換でき、WeChat ヘッダー画像、小紅書カバー、シェアカードへの展開も可能です。まずはスイス・インターナショナルスタイルで作ったカバーの例を見てみましょう。
このサンプルは Guizang の Style B——スイス・インターナショナル方向です。ダークキャンバス、厳格なグリッド、ヘアラインルール、直角、単一の高彩度アクセントカラー。AIツール、プロダクトローンチ、データレビュー、テック発表といったテーマをクリーンに見せます。「より華やか」ではなく「何を乱してはいけないかを知っている」のが重要です。
なぜこのSkillが最近注目されているのか
Guizang PPT Skill の急拡散は、明確なニーズに応えたことから始まります。AIが普通のテンプレートページを量産するだけでは満足できなくなったのです。本当に必要なのは安定した視覚ルール——「マガジン風」とは何か、「スイス風」とは何か、どのページに大見出しを使うか、どのページにフローチャートを使うか、どのコンテンツは画像スロットにのみ入れるか——をAgentに理解させるものです。
2026年6月5日時点で、Guizang PPT Skill は15kスター、1.1kフォークを獲得。大型アップデートの長文記事は1,276いいね、272リポスト、47コメント、2,057保存、約22.4万閲覧を記録しています。保存とリポストが示すのは、「AIがPPTを作れる」という事実ではなく、その背後にある安定して再利用できる美学システムと出力方法です。
Guizang の2つのスタイルはこう理解できます。Style A はエディトリアル・インク風——個人的な表現、意見共有、ナラティブなトークに向いています。ページをめくるデジタル雑誌のような雰囲気で、作者の個性が出やすいです。
Style B はスイス・インターナショナル——事実、製品、分析、方法論の表現に向いています。より抑制され、グリッド、文字サイズ、数値、プロセスフロー、余白に重点を置きます。テック風PPTはここから直接始められます。
Guizang を入門例として勧める理由がここにあります。テンプレートだけでなく、美学的な境界と納品の境界を明確に定義しています。Claude Code がその境界内で生成することで、結果は使えるPPTに近くなり、野放し状態の試行錯誤が減ります。
重要な違い：先にルールを固め、それから生成する
Claude Code でPPTを作る最も安定した方法：まずSkillをインストールし、テーマと素材を渡してSkillの視覚システムに沿ったスライドリズムを抽出させます。次にHTML Deckを生成してブラウザでプレビューし、ページごとに確認します。最後にフィードバックで修正し、カバーやシェア画像に展開するか、ファイルをエクスポートします。
この順序が重要です。Claude Code を素のまま使うと、Agentはレイアウト、配色、アニメーションを自分で推測します。推測が多いほど画面は崩れやすくなります。Guizang の価値は、それらの選択を事前に絞り込むことです：Style A はナラティブ用、Style B は事実と方法論用、画像は固定スロットに入れ、スイス風は固定レイアウトを使い、単一HTMLファイルで納品します。
ステップ1：まずGuizangをインストールする
Claude Code 内でインストールコマンドを直接使えます。
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skillまたは、以下をそのまま Claude Code に送ることもできます。
guizang-ppt-skill をインストールしてください。
https://github.com/op7418/guizang-ppt-skill を ~/.claude/skills/guizang-ppt-skill にクローンしてください。
インストール後、SKILL.md、assets/、references/ が存在するか確認してください。
すでにインストール済みの場合は、一度更新できます。
guizang-ppt-skill を更新してください。
~/.claude/skills/guizang-ppt-skill に入って git pull を実行してください。
完了後、最新のコミットを教えてください。インストール後はClaude Code を再起動してください。次に小さなテーマで試しに動かしてみましょう。例えば「スイス風3ページPPTを作って」など。このステップはClaude Code がSkillを見つけられることを確認するためです。
ステップ2：テーマをClaude Codeに渡す——完成品を急がない
Guizang は長文記事、Markdown、発表アウトライン、プロダクトドキュメントの処理が得意です。素材をClaude Code に貼り付けて、まずコンテンツを分解させましょう。
guizang-ppt-skill を使って、以下のテーマをテック風PPTにしてください。
テーマ：[テーマを記入]
対象読者：[読者を記入]
用途：[オフライン講演 / プロダクトローンチ / Demo Day / 社内報告 / 講義]
スライド数：[例：7ページ]
発表時間：[例：8分]
既存素材：[記事、メモ、データ、スクリーンショット、リンク、Markdownを貼り付け]
ハード制約：
中国語（または日本語）が明確に読めること
1スライドに1つのコアメッセージ
文字を詰め込まない
青紫グラデーションをメインビジュアルに使わない
ブラウザプレビューが必要ここで最も有用なのは、Claude Code による最初のコンテンツ抽出です。どのコンテンツがカバーに適しているか、データスライドに適しているか、方法論スライドに適しているか、削除すべきかを教えてくれます。
ステップ3：スライドリズムを確認してからHTMLを生成する
テック風PPTの最大の失敗：全ページがカバーのように見えること。良いデッキにはリズムが必要です——カバーで注目を集め、課題ページで絞り込み、手法ページで展開し、データページで証拠を示し、締めのページでまとめます。生成前に、まずClaude Code にスライドリズムを出してもらいましょう。
このPPTにはGuizang の Style B——スイス・インターナショナルを使用してください。
ビジュアル方向：ダークキャンバス / 厳格なグリッド / 直角ブロック / 1pxヘアラインルール / 単一高彩度アクセントカラー / 高コントラスト大見出し / 抑制されたボディテキスト
アクセントカラー：レモンイエローまたはセーフティオレンジを優先。
スライドの雰囲気：テックプロダクトローンチ / AIツールデモ / データレビュー / 方法論共有
まずスライドリズム表を出してください。確認後に完全なHTMLを生成します。スライドリズムを確認したら、HTML Deckを生成させます。
スライドリズム確認。
guizang-ppt-skill で完全なHTML Deckを生成してください。
要件：7ページ程度 / Style B スイス・インターナショナル / 1スライド1コアポイント / 見出しを短く / ボディテキストは3行以内 / 画像スロット2〜3か所 / 実際の画像がない場合は構造化グラフィックまたはプレースホルダーを使用 / 生成後にHTMLファイルのパスを教えてくださいGuizang の主な成果物は単一HTMLファイルです。サーバー不要、ビルド不要。ブラウザで開くだけで横スクロールプレゼンができます。
ステップ4：ブラウザプレビューが本当のテスト
カバーだけ見るのでは不十分です。全ページを確認してください——見出しがはみ出していないか、本文が詰まりすぎていないか、画像スロットが揃っているか、ナビゲーションコンポーネントがコンテンツを隠していないか。テック風PPTの完成度は多くの場合「ミスがない」ことから来ます。
生成したHTML Deckをブラウザプレビューで開いてください。
各ページをチェック：見出しのオーバーフロー / 本文の過密 / 画像スロットの整列 / フッターやナビゲーションのコンテンツ遮蔽 / アクセントカラーの過多 / モバイルや小窓での可読性
修正が必要なページをリストアップしてください。Guizang のスイス風には検証スクリプトも付属しています。中央揃えの見出し、スロット外の画像、SVGに押し込まれたテキスト、固定レイアウトに合わないスライド構造などの一般的なレイアウトエラーをチェックします。
node scripts/validate-swiss-deck.mjs path/to/index.html検証は最低ラインを設けるだけです。本当の判断はブラウザで行います。PPTは人が見るもの——スクリプトは基本的なミスの一部しか検出できません。
ステップ5：デザインレビューのようにPPTを修正する
最初のバージョンが完成したら、「もっと高級感を出して」とだけ言わないでください。Claude Code は具体的なフィードバックに反応します。どのスライドが詰まりすぎているか、どのスライドの数字が小さすぎるか、どのスライドの画像スロットが空すぎるか、どのスライドの見出しが弱いか。
現在のHTML Deckを修正してください。
保持：全体的なダークスイス風 / レモンイエローアクセントカラー / カバーの見出し構造 / スライド3の方法論フロー
変更：スライド2の本文が詰まりすぎ / スライド4の数字が目立たない / スライド5の画像スロットが空きすぎ / 締めスライドのCTAが不明確
修正アプローチ：まずレイアウト構造を直す / 次にフォントサイズとスペーシングを調整 / 複雑な装飾を追加しない / 全体スタイルを変えない / 修正後に再プレビュー1ラウンドで1つの層だけ修正します。構造→テキスト→ビジュアル→アニメーションの順で。そうすることで、Claude Code が修正中に良い部分まで壊すリスクが下がります。
ステップ6：PPTからカバーとシェア画像を展開する
Guizang のもう一つの価値：PPTとSNS画像を同じ視覚システムに入れていること。デッキが完成したら、WeChatヘッダー画像、1:1シェアカード、小紅書カバー、Video Accountの横長カバーを同じビジュアルから引き出せます。
デッキの中で最も強いスライドが、そのままカバーになります。視覚システムを一から考え直す必要はありません。同じグリッド、カラー、見出し階層を使い回すことで、配布物の統一感が保たれます。
このPPTのコアメッセージに基づいて、guizang-ppt-skill で配套カバーを生成してください。
生成：WeChat 21:9ヘッダー画像 / WeChat 1:1シェアカード / 小紅書 3:4カバー
ビジュアルルール：Style B スイス・インターナショナルを継続 / 現在のアクセントカラーを継続 / 見出し優先 / テック風グリッドとヘアラインルールを保持 / プラットフォームロゴを追加しない / 不要なタグラインを追加しない
まず2つのカバー方向を提示してください。確認後に完全版を生成します。これがHTML Deckの利点でもあります。もともとブラウザ上にあるので、スクリーンショット、リサイズ、カバーへの展開が自然に行えます。
そのままコピーできる完全プロンプト
ゼロから実行したい場合は、以下をClaude Code に送ってください。
guizang-ppt-skill を使って、テック風PPTを作成してください。
テーマ：[記入]
対象読者：[記入]
用途：[記入]
スライド数：7ページ程度
スタイル：Guizang Style B——スイス・インターナショナル
ビジュアル要件：ダークキャンバス / 厳格なグリッド / 直角ブロック / 1pxヘアラインルール / 単一高彩度アクセントカラー / 高コントラスト大見出し / 抑制されたボディテキスト / 青紫グラデーションなし / 非機能的装飾なし
コンテンツ要件：まずコアポイントを抽出 / まずスライドリズム表を提示 / 確認後にHTML Deckを生成 / 1スライド1コアメッセージ / 画像スロット2〜3か所 / 実際の画像がない場合は構造化グラフィックを使用
生成要件：単一HTML横スクロールPPT / ファイルパスを教える / ブラウザプレビューを開く / 各ページのテキストオーバーフロー・情報密度・画像スロット・ナビゲーション遮蔽をチェック / 問題があればまずレイアウトを修正、次に詳細を修正
展開要件：PPT完成後、同じビジュアルルールでWeChat 21:9ヘッダー画像、1:1シェアカード、小紅書 3:4カバーを生成。このプロンプトの核心：まずClaude Code をSkillのルールセットに入れてから生成を開始すること。ルールが明確なほど、成果物は実際に使えるプレゼンに近くなります。
別のSkillに切り替えるタイミング
「GuizangがPPT、画像、カバーをすべてカバーできるなら、他のSkillは見なくていい？」という質問をよく受けます。見てください。それぞれ異なる問題を解決しているからです。
Guizang はコンテンツクリエーター向けのウェブPPTシステム。Frontend Slides はウェブプレゼンテーションジェネレーター。Huashu Design は総合デザインワークステーション。gpt-image2-ppt-skills は高審美の画像ファースト型PPTジェネレーター。どれもClaude Code でPPTを作るのを助けますが、美学的方向性、編集可能性、エクスポート形式が大きく異なります。
公開講演、記事→PPT変換、オフライン共有：Guizangを優先
個人スタイルのある公開トークをしたい場合や、長文記事を6〜10ページの発表スクリプトに変換したい場合、Guizang が最も直接的な選択肢です。2026年6月5日時点で15kスター、1.1kフォーク。大型アップデート記事は1,276いいね、272リポスト、2,057保存、約22.4万閲覧。エクスポートの核心は単一HTMLファイルで、ブラウザプレゼン・スクリーンショット・カバー展開に適しています。
古いPPTをウェブプレゼンに変換、アクセス可能なリンクを共有：Frontend Slidesを使う
Frontend Slides はウェブプレゼンテーションとして位置づけられています。2026年6月5日時点で20.3kスター、1.7kフォーク——このグループで最高の人気を誇ります。safe presetsを持ち、Bold Template Packも統合。Vercelデプロイスクリプトとプレイライトを使ったPDFエクスポートスクリプトも提供しています。
PPTは一部に過ぎない——プロトタイプ、アニメーション、インフォグラフィックも必要：Huashu Designを使う
Huashu Design はより広い範囲をカバーします。HTML-nativeデザインワークフローを構築します。2026年6月5日時点で16.2kスター、2.1kフォーク——フォーク数が最も多く、多くのユーザーが改変・統合を試みていることがわかります。ブランドローンチ、Appプロトタイプ、プロダクトストーリー、機能説明、アニメーション展示に適しています。MP4/GIFアニメーション、PDF/PNG/SVGインフォグラフィックのエクスポートに対応。
強いビジュアルインパクト、テンプレートクローン、全ページポスター感：gpt-image2-ppt-skillsを使う
gpt-image2-ppt-skills は画像生成アプローチを取ります。各スライドを完全なビジュアルとして生成し、テキストボックスや図形への依存を減らします。2026年6月5日時点で854スター、44フォーク。10種類の厳選スタイルを内蔵し、テンプレートクローンをサポート。コア成果物はスライドごとの高解像度PNGと16:9 .pptxです。
Skillを選ぶ前に自分に問いかけてください：最終的にどのフォーマットで納品する必要があるか。ブラウザプレゼン→GuizangまたはFrontend Slides。テキストボックスを保持したPPTX→Huashu。画像ファーストの高完成度ビジュアル→gpt-image2-ppt-skills。記事を発表とカバーセットに変換→Guizangが最も安定した起点。
最後に
Claude Code でPPTを作るポイントは、スライドを生成できるかどうかだけではありません。成果物の品質を本当に左右するのは、明確なデザインの境界を持っているかどうかです。
Guizang PPT Skill はそのための良い見本を提供しています。PPTをHTMLにし、美学のルールをSkillに書き込み、カバーと画像も同じパイプラインに入れています。コンテンツクリエーターにとって、これは1本の記事が発表スクリプトに、カバーに、インフォグラフィックに、公開可能なビジュアル資産のセットに変わることを意味します。
Claude Code が生成と修正を担い、Skillが美学の境界と出力形式を固定し、人間がどのスライドが本当に伝わっているかを判断する——それがこのカテゴリーのSkillの最も面白い点です。
関連プロジェクト：Guizang PPT Skill、Frontend Slides、Huashu Design、gpt-image2-ppt-skills。参考情報：Claude中文站 2026-05-12 X日報。