HTMLファーストデッキ は何をしますか？
PowerPointでユーザーが引き続き編集できる、カスタムメイドで見栄えの良いデッキを構築するための2フェーズの方法です。
このワークフローを使う理由
PowerPointはビジュアルデザインを 反復 するのに最悪な場所です。遅く、扱いにくく、一貫性を保つのが難しいです。 HTML/CSSは反復に最適な場所です。スライドをレイアウトし、プレビューし、間隔、色、階層を数秒で洗練できます。しかし、最終成果物は 本物の編集可能な.pptx でなければならず、ユーザーが自分のツールで文言やブランディングを微調整できるようにする必要があります（スライドごとの画像エクスポートは役に立ちません）。
そこで、HTMLでデザインし、ネイティブのPPTXで納品します。 高速な反復と編集可能な結果の両方を手に入れられます。
このフォルダにあるもの:
| ファイル | 説明 |
|---|---|
references/html_prototype.html | フェーズ1の開始点: 3スライド、CSS変数としてのブランドカラー、スライドショーナビゲーション |
scripts/pptx_helpers.py | フェーズ2のヘルパーライブラリ: ジオメトリ、パレット、ヘッダー/フッター/カード/ピル/テイクアウェイコンポーネント |
scripts/render_diagram.py | コードで描かれたSVGを高解像度PNGにレンダリングします |
scripts/render_pptx.ps1 | .pptxのすべてのスライドをチェック用にPNGにエクスポートします（Windows + PowerPoint） |
examples/example_deck.py | ヘルパーを使用して構築された、実行可能な3スライドのデッキ |
examples/example_diagram.py | 図セクションのすべてのテクニックを示す、実行可能な図ジェネレーター |
文体 — コピーライターではなく、コンサルタントのようにタイトルを書く
タイトル、サブヘッダー、本文を1行でも書く前にこれを読むこと。 レイアウトは正しくても言葉が間違っていると、ユーザーが書き直さなければならないデッキができあがり、これはデッキがないよりも悪いです。これはクライアントや同僚に見せるものすべてに当てはまります — デッキ、HTMLスライドショー、ダッシュボード、ステータスレポート、ワンページャーなど。
スライドに対するデフォルトのLLMのレジスターは、キャッチーな広告代理店のコピーです。ほとんどのビジネスオーディエンスはそれを求めていません。ユーザーが別のものを求めない限り、経営陣向けに書くシニアコンサルタントのレジスターで書いてください。平易で、宣言的で、具体的で、一度で仕上げます。
ルール
タイトルはスライドが何であるかを示します。演じるものではありません。
内容を名付けてください。タイトルだけをスキャンした読者が議論を再構築できない場合、タイトルは失敗しています。ラベル付けと番号付けは、巧妙さよりも常に優れています — フェーズ1: 返金漏れ は読者に自分のいる場所を伝えます； 最初に使うもの は何も伝えず、読者に調べさせるために読み進めさせます。
避けるべき構文
| 避ける | なぜ失敗するか | こうする |
|---|---|---|
ダッシュボードが報告する。 / 説明しない。 | 「セットアップ、そしてオチ」の2ビート。スローガンのように読め、発見事項ではない。 | 現在のダッシュボードは数値を報告するが、分析はしない |
彼らはダッシュボードが原因で最後のツールをやめた。 / 彼らに別のダッシュボードを売ってはいけない。 | 同じ2ビート。さらに、読者に説教している。 | なぜ別のダッシュボードでは問題が解決しないのか |
最初に使うもの: | 答えを保留してサスペンスを生み出すコロン保留。 | フェーズ1: 返金漏れ |
そして、これを修正する方法がこちらです。 | くだけた話し言葉で、誰も尋ねていない質問に答えている。 | 推奨される修正と見積もり |
3つのこと。そしてそれを証明する。 | リズムのための区切られた断片。 | このミーティングで必要なもの |
テーブルに載るもの。 | 説明の代わりになる慣用句。 | 私たちが提供するもの |
隔週で、番号の付いた発見事項。 | ラベルが属する場所にあるキャッチフレーズ。 | タイムライン |
これを発見できるのは、4つのサプライヤーすべてを見ている人だけです。 | 修辞的な前置き。 | なぜ私たちのチームがこの仕事を行う立場にあるのか |
また避けること: 見出しとしての修辞的な質問； メイン タイトルとしての単語のドラマ (罠, 劇, クロージング) ；パンチのための文の断片；emダッシュの開示；「大事なことは」；声に出して読みたくなるようなもの。
具体的に
- タイトル: 名詞句または平叙文。
分析方法。データ要件と納期。クライアントへの質問。フェーズ1の実行に必要。 - 作業に番号を付ける。 フェーズ、階層、ステップ。
フェーズ1からフェーズ8、ティア1/2/3。番号付けはプログラムを読みやすくし、会議で人々が参照できるものを提供します。 - サブヘッダー は修飾語を運びます。ジョークではありません:
フェーズ1 · 方法、データリクエスト · ティア1。 - 本文: 主語と動詞のある完全な文。強調を3回繰り返すのではなく、一度、適切に言い切ってください。
- 具体性を維持する。 平易であることは曖昧であることを意味しません。
本年累計840万ドル、返金率12.5%はまさに正しいです。数字、名前、日付、出典が、それを信頼できるものにします。 - 控えめに太字を使用 — 段落の中で重みを持つ1つのフレーズに対して。リズムのためではありません。
- 引用は例外です。 クライアントの逐語的な引用はそのまま残し、真に力強い1文はプルクォートに入れることができます — ただし、タグラインではなく、発見事項として述べてください。
パーセンテージは必ず基数を伴うこと
パーセンテージは良いです — 使い続けてください。しかし、基数のないパーセンテージは評価できません。「エージェントの上位10%」は、エージェントが20人なら2人、1,000人なら100人を意味します。読者はそれがパターンなのか2人の個人なのか判断できません。
- 人、物、またはイベントのシェアである場合は常に、パーセンテージの横にカウントを置いてください。
上位6エージェント（60人中10%）·4,100人の顧客（820,000人中0.5%）·サプライヤーAは1,200万ドルを受け取り、全返金額の半分（2,400万ドル）でした。 - グループが小さい場合は、パーセンテージではなく、数字を先頭に置いてください。 約30項目未満の場合、カウントが発見事項です:
6人のエージェントが18,000ドルを発行はエージェントの10%が20%を発行よりも優れています。 - 2つのパーセンテージが並んでいる場合は、両方の基数が必要です。
連絡先の12%に資金の20%は、読者がそれが90,000ドルのうちの18,000ドルであり、30,000の連絡先のうちの3,600であることを知って初めて有用になります。 - 分母を明記してください。 パーセンテージが 何の 割合かを言ってください:
8月の返金額の、少なくとも1回請求した顧客の、10日以上勤務したエージェントの。 - 可能であれば、パーセンテージが金額や人数で何を意味するかを言ってください。 「3%が別の口座に支払われた」は、
1,500件の返金（15万ドル）、年間総額の3%になります。 - 全体に占めるシェアの発見事項には、全体に占めるシェアのチャート（例：100%積み上げ棒グラフ）を使用することで、読者が計算しなくても半分を視覚的に確認できます。
セルフチェック: ページ上のすべての%について、読者はその文を離れずに「何の何%か？」に答えられますか？ 答えられない場合は、カウントを追加してください。
出荷前のセルフチェック
デッキのタイトルを順番に、それだけで読んでみてください。目次のように読めるなら、正しいです。売り込みのように読めるなら、書き直してください。
フェーズ1 — HTMLでプロトタイプを作成
16:9のキャンバス（1280×720）上に、スライドごとに1つの .slide divを持つ deck.html を構築します。ブランドカラーを :root CSS変数に設定します（ユーザーのテンプレートから取得 — 下記の「ブランド」を参照）。ヘッダー、セクションタイトル、カード、コールアウト、テーブルをレイアウトします。デザインが決まるまでここで反復します — 開いてプレビュー/スクリーンショットを撮り、構造と外観についてユーザーの承認を得ます。
references/html_prototype.html は準備された開始点です（表紙、ヘッダー+3カード+テイクアウェイスライド、画像スライド、フッター）。CSS変数パレットが含まれています。読んで適応させてください。
このフェーズはデザインのサンドボックスです。すべての単語を完璧にしないでください — レイアウトシステム（ヘッダー/フッターのクローム、カードスタイル、タイプスケール、アクセントの使い方）を確実にしてください。フェーズ2がそれをミラーリングするからです。
プロトタイプをスライドショーのようにナビゲート可能にする
HTMLプレビューがPowerPointのように進むように、常にこの小さなスクリプトを </body> の前に追加してください — クリック（または →/↓/Space）で次のスライド、←/↑ で前のスライドに進みます。 これにより、フェーズ1のレビューがプレゼンテーションのように感じられ、HTMLのみで動作します（フェーズ2に持ち込むものは何もありません）。
テキストの選択でページが変わってはいけません。 人々はスライド上のテキストをコピーするために選択します。ドラッグは click イベントで終了するため、単純なクリックハンドラーはコピー中に次のスライドにジャンプします。以下のスクリプトは、マウスの押下と解放の間の移動が5pxを超えた場合、またはテキストが選択されている場合、クリックを無視します。実際のクリックはまだ進みます。
クリックはクリックされたスライドから進む必要があり、スクロール位置に基づく推測からは決して進んではいけません。 推測はウィンドウサイズによっては間違ったスライドを選択するため、クリックが2スライドジャンプします。キー（→/←）はクリックするものがないため、引き続きスクロール位置を使用できます。
<script>
/* スライドショーのようにプレビュー: クリック または →/↓/Space = 次のスライド, ←/↑ = 前のスライド。テキスト選択では進みません。 */
(function(){
var slides=[].slice.call(document.querySelectorAll('.slide'));
function next(){ var y=scrollY+10; return slides.find(function(s){return s.offsetTop>y;}) || null; }
function prev(){ var y=scrollY-10, p=null; slides.forEach(function(s){ if(s.offsetTop<y) p=s; }); return p; }
function to(s){ if(s) s.scrollIntoView({behavior:'smooth',block:'start'}); }
var downX=0,downY=0;
addEventListener('mousedown',function(e){ downX=e.clientX; downY=e.clientY; });
addEventListener('click',function(e){
if(e.target.closest('a,button,input,textarea,select'))return;
/* テキストの強調表示、またはマウスのドラッグは、スライド上でのクリックではありません */
var sel=window.getSelection&&String(window.getSelection()); if(sel&&sel.trim())return;
if(Math.abs(e.clientX-downX)>5||Math.abs(e.clientY-downY)>5)return;
/* クリックされたスライドから進む。スクロール位置に基づく推測からではありません */
var s=e.target.closest('.slide'); to(s ? slides[slides.indexOf(s)+1] : next());
});
addEventListener('keydown',function(e){
if(['ArrowRight','ArrowDown',' ','PageDown'].indexOf(e.key)>-1){e.preventDefault();to(next());}
else if(['ArrowLeft','ArrowUp','PageUp'].indexOf(e.key)>-1){e.preventDefault();to(prev());}
});
})();
</script>
デッキがブラウザに残る場合（HTMLスライドショー）は、ここで停止してください。フェーズ1が成果物です。
フェーズ2 — ネイティブ編集可能なPPTXを生成
すべての要素が編集可能になるように、承認されたデザインをpython-pptxで再作成します。バンドルされたヘルパーライブラリ scripts/pptx_helpers.py を使用 — デッキフォルダにコピーしてください。16:9のジオメトリ、ブランドパレットブロック、およびすべてのスライドで再利用するコンポーネントを提供します:
new_prs(),blank_slide(prs),body_bg(slide)add_header(slide, title, meta),add_footer(slide, left, right)add_section_title,add_subtitleadd_text(...)— 文字列、段落のリスト、または混合スタイルのランのいずれかをサポート:[[("太字部分 ", {"bold": True}), ("通常部分", {"color": MUTED})]]add_rect,add_card(上部/左アクセントストライプ),add_pill,bulleted,add_takeawayadd_image(slide, path, x, y, w)— 画像を独自のアスペクト比で配置しますsave_deck(prs, path)— 保存し、ファイルがロック/開かれている場合は新しいファイル名に切り替えます
構造（実行可能な3スライドの例については examples/example_deck.py を参照）:
from pptx_helpers import *
def slide_intro(prs): ... # スライドごとに1つのビルダー関数
def slide_cards(prs): ...
def main():
prs = new_prs()
slide_intro(prs); slide_cards(prs)
print(save_deck(prs, DECK_DIR / "My Deck.pptx"))
苦労して得たルール（これらは一般的な失敗を防ぎます）
- ユーザーが開いているファイルを決して上書きしないでください。 PowerPointはファイルをロックします。単純な
prs.save()はPermissionErrorをスローします。save_deck()はv2,v3… にバンプすることでこれを処理します。作業コピーはわかりやすい場所に置き、どのファイルが最新かをユーザーに伝えてください。 - すべてを図形/テキストとして構築し、画像として構築しないでください。 それがポイントのすべてです — ユーザーが編集可能である必要があります。密度の高い比較には実際のテーブル（
slide.shapes.add_table）を使用してください。 - すべての実行でフォントを明示的に設定してください （python-pptxはテーマフォントを確実に継承しません）。
- オートシェープのデフォルトの影を削除 （
shape.shadow.inherit = False）し、デフォルトのテキストをクリアしてください — ヘルパーはすでにこれを行っています。 - スライドごとに1つのビルダー +
main()で順にリストします。そこでフッターに番号を付け直します。
プレビュー/確認ループ（これを行ってください — 未確認で出荷しないでください）
ビルドごとに、スライドをPNGにレンダリングして実際に見てください。オーバーフロー/スペーシングを修正し、再ビルドしてください。
- Windows（PowerPointインストール済み）:
powershell -NoProfile -File scripts/render_pptx.ps1 -pptx "My Deck.pptx" -outdir previewpreview/s1.png,s2.png… を書き出します。ファイルを読み取り専用で開くため、ユーザーがデッキを開いている間でも機能し、PowerPointがすでに実行中であればそのまま動作を続けます。 - PowerPointなし — 利用可能であれば
libreoffice --headless --convert-to pdf（またはPNGへ）。
その後、PNGを読み、ビルダーを調整し、再実行してください。クリーンになるまで反復します。
ブランド（色 + フォント）
1つのパレットをデフォルトにしないでください。ユーザーのコンテキストからブランドを取得してください: .pptx テンプレートのテーマ（ppt/theme/theme1.xml → <a:clrScheme>）、会社のサイト/CSSを読むか、2〜3色を尋ねてください。これらを :root 変数（HTML）と pptx_helpers.py の先頭にあるBRANDブロック（PPTX）に一度設定して、2つのフェーズを一致させます。WORDMARK_PATH をロゴPNGに設定してヘッダーにブランドを表示するか、Noneのままにします。両方のファイルに出荷されている色はニュートラルなプレースホルダーです。置き換えてください。
スライド内の図 — コードで描画し、生成しないでください
スライドの主要なビジュアル（フロー、パイプライン、ファネル、アーキテクチャ、またはプロセス図）については、数十のPowerPointの図形を手動で配置したり、AI画像ジェネレーターを使用したりしないでください。 画像モデルは写真やアート向けに構築されています。図では失敗します: ぼやけたテキスト、スペルミスのラベル、整列しない図形、ブランドから外れる色、そして編集不可能です。
代わりに、SVG（コードで定義されたベクター描画: <path>, <circle>, <rect>, <text>、グラデーションとフィルター付き）を書き、それを高解像度PNGにレンダリングしてください。コンピューターはすべての線を仕様通りに描画するため、ピクセル単位でシャープで、完全にブランドに適合し、再現可能で、簡単に編集可能です（16進数コードや単語を変更して再レンダリングするだけです）。
ユーザーへのアナロジー: 図を画像モデルに頼むのは、記憶から設計図をフリーハンドで描くようにアーティストに頼むようなものです。それを描くコードを書くのはCAD — 定規とコンパス — 毎回正確です。
使用例: パイプライン/フロー/ファネル図、アーキテクチャ図、プロセスマップ、コンセプト図など。
…