guizang-ppt-skill：AIで雑誌級PPTを作るオープンソースツール
オープンソースのPPT Skillは10種類のページレイアウトと5種類のテーマカラーを内蔵し、シングルファイルHTMLで出力。ダブルクリックでブラウザからすぐ見られます。インストールと使い方のチュートリアルつき。
guizang-ppt-skill：AIで雑誌級PPTを作るオープンソースツール
オープンソースのPPT Skillは10種類のページレイアウトと5種類のテーマカラーを内蔵し、シングルファイルHTMLで出力。ダブルクリックでブラウザからすぐ見られます。インストールと使い方のチュートリアルつき。
AIでPPTを作ったことはありますか？ たぶん出来上がったものは、一眼でAI生成と分かってしまうはずです。硬いレイアウト、奇妙な配色、デザインのセンスの欠如。10年デザインをやってきたデザイナーが、自分のPPT Skillをオープンソース化しました。名前はguizang-ppt-skill。これはまた別のテンプレートライブラリではなく、雑誌の組版の言語をHTMLへ持ち込んだ完全なソリューションで、Claudeなどの大規模モデルと組み合わせて使うと、「AIが作ったとは思えない」PPTが作れます。
これは何か
guizang-ppt-skillはオープンソースのAI PPT生成スキルで、出力物はシングルファイルHTMLです。ダブルクリックでブラウザから見られ、他人へ送るときも1ファイルだけ。フォントやアニメーションが相手のパソコンで崩れる心配はありません。
ビジュアルスタイルは「電子雑誌 x 電子インク」と定義されています：
- カバー：墨色の下地 + セリフ体の大きなタイトル、背後にはゆっくり流れるWebGLの流体
- 本文：紙白の下地 + 墨色の本文、広げた印刷雑誌のよう
- ページ送り：横方向の左右スワイプに対応し、キーボード、ホイール、タッチジェスチャーも対応
- メタデータ：各ページの隅に章番号とページ番号があり、新聞・雑誌のフッターのよう
中核機能
10種類のページレイアウト
15〜30ページの発表会で使われる大部分のページタイプをカバーします：
オープニングカバー、章の区切りページ、データ大見出し、左文右図、画像グリッド、Pipelineフロー、フックとなる問い、大きな引用、Before/After比較、テキストと画像のミックス。
各レイアウトはそのまま貼り付けられるHTMLスケルトンで、文字と画像を差し替えるだけで使えます。
5種類のテーマカラープリセット
| テーマ | 適したシーン |
|---|---|
| インククラシック | 商業発表、汎用デフォルト |
| 藍瓷（インディゴ） | テック、研究、AI発表会 |
| 森林墨 | 自然、サステナビリティ、人文 |
| クラフト紙 | レトロ、文学、インディーズ雑誌 |
| 砂丘 | アート、デザイン、クリエイティブ |
テーマの切り替えは、:root内の6つのCSS変数を差し替えるだけです。設計者はあえてカスタムhexの自由度を制限しています。制約が厳しいほど、スタイルは安定するからです。
ページ送りインタラクション
キーボードの左右矢印、マウスホイール、タッチスワイプ、下部のドットによるジャンプ、ESCキーでサムネイル索引を開く操作に対応しています。ブラウザの中で本物の雑誌をめくる体験にできるだけ近づけました。
使い方
ステップ1：Skillをインストールする
プロジェクトのURL：github.com/op7418/guizang-ppt-skill
READMEには「AI向けのインストール用prompt」があり、コピーしてあなたのClaude Codeや他のAI Agentに貼り付けると、インストールを自動で完了してくれます。
Bloome Agentの中で直接使うこともできます（現在無料）。
ステップ2：会話を始める
インストールが終わったら、AIに一言**「雑誌風のPPTを作って」**と伝えます。AIは逆に6つの質問をこちらから尋ねてきます：
- オーディエンスは誰か、どんなシーンか？
- 発表時間はどれくらい？（15分は約10ページ、30分は約20ページ）
- 元素材はあるか？（ドキュメント、データ、古いPPT、記事リンク）
- 画像はあるか、どこに置いてあるか？
- どのテーマカラーにしたいか？
- ハードな制約はあるか？
一度に全部答える必要はなく、AIが1つずつ尋ねてきます。回答が終わると、まずアウトラインとテーマのリズム表を生成し、認識を合わせてからコードを書き始めます。
この確認フローは「すり合わせ」を冒頭に前倒しするもので、AIでPPTを作るとき最大の課題 -- 10ページ目に来て初めて全体の方向が間違っていると気づくという問題 -- を解決します。
ステップ3：画像を管理する
画像はindex.htmlと同じ階層のimages/フォルダに置きます。命名ルールは：
ppt/
├── index.html
└── images/
├── 01-cover.jpg
├── 03-figma.png
└── 05-dashboard.png- ページ番号はゼロ埋め + 英語の意味語とし、並び替えとAIによる参照を容易に
- 写真はJPG、スクリーンショットはPNG（画質を保ててにじまない）
- 1枚の幅は1600px以上（大画面投影でもにじまない）
画像の差し替えは同名で上書きするだけ。HTMLは1文字も変更しません。
デザインのロジック：なぜきれいに見えるのか
これはスピリチュアルな話ではなく、分解できる一連の意思決定です：
- フォントの3層分担：セリフ体は意見（大きなタイトル）、サンセリフ体は情報（本文）、等幅はメタデータ（ヘッダー・フッター）に使う
- カラーの規律：紙白 + 墨色 + 重点色1つ。下地に純白#FFFFFFを使わず、文字色に純黒#000000を使わない
- グリッドのリズム：7:5、6:6、8:4の固定グリッドで秩序を保証し、heroページとnon-heroページを交互に配置し、同じテーマが3ページ連続することをハードルールで禁止
これらのルールはすべてSKILL.mdとchecklist.mdに書かれており、AIが1条ずつ実行します。
適したシーン
- 発表会、技術共有会のプレゼンテーション資料
- 業界のクローズド懇談会、社内共有
- PowerPointを使いたくないが「きれいな」PPTが必要な人
- テキストコンテンツを素早くプレゼン可能なHTMLへ変換したいシーン
