先週、李継剛先生に招待され、AIと組織に関するプライベート共有セッションのインタビューに招待されました。
セッション後、最もよく聞かれた質問は「あのPPTで何を使ったのか、それを公開してほしいというものでした。
副産物が本題になるとは思っていませんでした。
そこで、guizang-ppt-skill（https://github.com/op7418/guizang-ppt-skillhttps://github.com/op7418/guizang-ppt-skill)）として公開することにしました。
今日の記事では、このスキルがどのようなものか、そして10年間デザイナーをしてきた私がなぜ見やすいと思うのかについてお話しします。
その見た目
スキルで生成されたPPTを開くと、最初の印象はおそらく「AIで作ったようには見えない」でしょう。
直感的な特徴をいくつか挙げます。
- 表紙: インク色の背景にセリフ体のメインタイトル、背後でかすかにWebGLの流体がゆっくりと流れています。
- 本文: 背景色が紙の白に戻り、インク色のテキストが上に重なり、まるで開いた印刷雑誌のようです。
- ページめくり: 左右に水平スライド。キーボード、スクロールホイール、タッチジェスチャに対応。標準的なPowerPointの「次のスライド」ではありません。
- メタデータ: 各ページの四隅には小さな等幅フォントのテキストがあり、「Act II・15 / 25」など、新聞のページ番号のように表示されます。
このビジュアルトーンに「電子雑誌 × Eインク」という名前を付けました。
インスピレーションはMonocle、The Guardian、NYTなどの印刷雑誌のレイアウトの伝統と、Kindleの電子ペーパーの読書体験を重ね、現代のWebインタラクション構文でまとめたものです。
できること
スキルは現在、10のページレイアウト、5つのテーマカラープリセット、そして完全なページめくりインタラクションを提供します。
10のレイアウトは、15〜30ページの共有セッションで使用するほぼすべてのページタイプをカバーしています。
オープニングカバー、章区切り、データポスプレッド、データポスター、テキスト左画像右、画像グリッド、パイプラインプロセス、サスペンス質問、大きな引用、Before/After比較、テキストと画像の混合レイマーシブ。
それぞれが直接貼り付け可能なHTMLスケルトンで、テキストと画像を変更するだけで使用できます。
5つのテーマは、異なるシナリオに対応しています。
- Ink Classic — ビジネス発表、一般的なデフォルト
- Indigo Porcelain — テクノロジー、研究、AIカンファレンス
- Forest Ink — 自然、サステナビリティ、人文科学
- Kraft Paper — ノスタルジア、文学、インディーズ雑誌
- Dune — アート、デザイン、クリエイティビティ
各テーマは、6つのCSS変数の値セットが異なるだけです。テーマを切り替えるには、:root内のそれら6行のコードを置き換えるだけです。
ユーザーはカスタムの16進数カラーコードを許可されていません。その理由は後ほど説明します。
ページめくりインタラクションは、キーボードの左右矢印、マウスホイール、タッチスライド、下部ドットジャンプ、ESCキーによるサムネイルインデックス表示に対応しています。
ブラウザで実際の雑誌をめくる体験に可能な限り近づけることを目指しています。
出力は単一ファイルのHTMLです。ダブルクリックでブラウザで表示できます。他人に送信するのも1ファイルだけなので、フォントやアニメーションが相手のコンピューターで壊れる心配はありません。
使い方
実際、このスキルの真の価値はテンプレート自体にあるのではなく、人間 × AI のPPTコラボレーションのインターフェースを定義している点にあります。
ここでは、私自身が1週間使用した後で特に伝える価値があると思う3つのことを挙げます。
まずはAIとこれら6つのことを明確にする
スキルをインストールしたら、「雑誌スタイルのPPTを作って」と言うだけで、Claudeが積極的に以下の6つの質問をしてきます。
- 対象者とシナリオは？（内部業界 / ビジネス発表 / プライベート共有）
- 共有時間は？（15分≒10ページ、30分≒20ページ）
- 元ネタ資料はある？（ドキュメント、データ、過去PPT、記事リンク）
- 画像はある？どこにある？
- どのテーマカラーにする？（5つのプリセットから選択）
- ハードな制約はある？（XXデータは必須 / YYは表示不可）
一度にすべて言う必要はなく、1つずつ質問してきます。回答後、まずアウトラインとテーマリズム表を提示します。コードを書き始める前にまずすり合わせる—このステップで、私の手戻りの80%を防げます。
以前のAIを使ったPPT作成の最大の痛点は、すぐに書き始めてしまい、10ページ目になって初めて方向性の誤りに気づくことでした。この明確化プロセスにより、「すり合わせ」を最初の段階に持ってくることができます。
画像の挿入方法
画像は、index.htmlと同じ階層にあるimages/フォルダに配置します。命名規則は以下の通りです。
1ppt/2├── index.html3└── images/4 ├── 01-cover.jpg5 ├── 03-figma.png6 └── 05-dashboard.png
- 0埋めのページ番号＋英語のセマンティクス—1ではなく01、fengmianではなくcover。これによりソートが容易になり、AIの参照も明確になります。
- 写真はJPG、スクリーンショットはPNG—スクリーンショットにはテキストが含まれるため、PNGで鮮明さを保ちます。
- 単一画像の幅は1600px以上—大画面プロジェクションでもぼやけません。
Claudeに「3ページ目はFigmaインターフェースのスクリーンショット」と伝えるだけで、自動的にimages/03-figma.pngと記述されます。同じ名前のファイルをフォルダにドロップするだけで完了です。
画質を損なわない画像置き換えの秘訣：同名で上書きする
これは私が遭遇した最大の落とし穴です。コピー完了後に画像を変更したい場合、グローバルにパスを検索して置換する必要があり、HTMLが壊れることがよくありました。
正しい方法は、たった一言です。新しい画像を古い画像を新しい画像で同名のまま上書きし、HTMLの文字は一切変更しないことです。
なぜこのような見た目なのか
使い方について説明したところで、なぜこのような見た目なのかについてお話ししましょう。
優れたデザインは神秘的なものではなく、分解可能な一連の決定事項です。私が行ったことは、基本的に、雑誌業界が100年以上かけて蓄積してきたレイアウト言語をHTMLに移植したに過ぎません。
タイポグラフィの3層構造
- セリフ体 → 「意見」。メインタイトルにセリフ体を使用すると、読者はすぐに「これは真剣に受け止めるべき文章だ」と感じます。
- サンセリフ体 → 「情報」。本文は高密度で、読みやすい。
- 等幅フォント → 「メタデータ」。ヘッダー・フッターの章番号、日付、ページ番号。雑誌のフッターやターミナルのコードのように。
読者は考え込む必要がなく、目が自動的にその文章が本文なのか注釈なのかを判断できます。
色彩の規律
紙の白、インク色、そして1つのアクセントカラーで十分です。
真っ白はまぶしく、真っ黒はっきり黒は攻撃的です。印刷業界は決してそうしませんし、Kindleもそうしません。
スキルの5つのテーマでは、背景色に #FFFFFF はなく、テキスト色に #000000 もありません。
各セットは6つのCSS変数のみを公開し、SKILL.mdには明確に次のように記載されています。ユーザーはカスタム16進数カラーコードを許可されず、5つの中から1つを選択する必要があります。
制約が厳しいほど、スタイルは安定します。「見た目」を守ることは、ユーザーに自由を与えることよりも重要です。
グリッドとリズム
7:5、6:6、8:4といった固定グリッドにより、1ページ内の秩序が保たれます。
ヒーローページと非ヒーローページは交互に配置し、デッキ全体のリズムを確保する必要があります。
1ページ詰まっていて、次のページは余白がある—それが雑誌をめくる時の「呼吸」感覚です。
スキルには厳格なルールとして、同じテーマのページが3ページ以上連続することはP0エラーと規定されています。
リズムのないPPTは、PDFに積み上げられたスライドの単なる山です。
最後に
上記のルールは、私が発明したものは一つもありません。
私は10年間デザイナーとしてUI、インタラクション、AI エフェクトを手がけてきましたが、これら、これらは実際には業界の常識です。
私はそれらをSKILL.mdとchecklist.mdに一つずつ書き込んだだけで、AIが代わりに実行してくれるようにしたのです。
言い換えれば、このスキルは、私の10年間の美的感覚を圧縮したパッケージです。
以前は、まともなPPTを作るために、グリッドを調整し、フォントサイズを選び、カラー値を選ぶのに丸2日かかっていました。
今では、資料をAIに投げるだけで、これらのルールに従って組み立ててくれます。私は確認するだけでいいのです。
だからこそ、公開しても大丈夫だと思えました。
ルールは私だけのものではありません。私の何十年も前にMonocleのデザイナーが使っていたものです。私はそれを2026年のHTMLにコピーしただけです。
スキルはGitHubにあります: github.com/op7418/guizang-ppt-skill
READMEには「AI用のインストールプロンプト」が含まれています。それをコピーして Claude Code や他のAIエージェントに貼り付けると、自動的にインストールが完了します。インストール後は、「雑誌スタイルのPPTを作って」と言うだけでトリガーされます。
Bloome Agentでも使用でき、現在は無料です。
https://bloome.im/agent/join/iKXCLtkD?ref=wNL9Ew2G
このコンテンツが役に立ったと思われたら、ぜひ「いいね！」をいただくか、必要としている友達にシェアしてください。
また、このスキルを使って作成したPPTをコメント欄でシェアしていただくこともできます。
