HTML PPT クリエーター
ブラウザで直接開く、明確で視覚的に意図されたHTMLスライドデッキを作成します。デフォルトでは、インラインCSSとJavaScriptを使用し、ビルドステップなしで1つの自己完結型presentation.htmlにします。
ワークフロー
- ユーザーの依頼、ソーステキスト、データ、ブランドアセット、要求された出力場所を確認します。
- 不足している詳細に対して妥当なデフォルトを推測します。質問は、対象者、目的、言語、スライド数、または視覚的な方向性が結果を大きく変え、推測できない場合にのみ行います。
- 簡潔なスライドシーケンスをデザインします。各スライドに1つの役割と有用なタイトルを与え、コーディング前に重複を削除します。
- 主題に合ったビジュアルシステムを選択します。色、タイポグラフィ、スペーシング、境界線、影、動きに関するCSSカスタムプロパティを定義し、一貫して使用します。
- ゼロから始める場合は、ベースとして
assets/starter.htmlをコピーします。サンプルスタイルを必須テーマとして扱うのではなく、すべてのサンプルスライドとテーマトークンを置き換えます。 - 完全なデッキを実装します。セマンティックな
<section class="slide">要素、ビューポートに合わせて拡大縮小する固定16:9ステージ、およびキーボード/クリック/タッチナビゲーションを使用します。 - 最終QAの前に
references/QUALITY.mdを読んでください。ブラウザ制御が利用可能な場合はブラウザでデッキを開き、すべてのスライドを検査し、オーバーフローとインタラクションの欠陥を修正してからHTMLファイルを提供します。
ユーザーが反復的なワークフローを要求しない限り、計画チェックポイントを導入したり、章ごとの承認を要求したりしないでください。
成果物の契約
- デフォルトで
presentation.htmlを生成します。ユーザーが要求した場合、またはデッキが再利用可能なローカルアセットや実質的なアプリケーションロジックを本当に必要とする場合にのみ、マルチファイルフォルダを使用します。 - デフォルトのデッキはオフライン対応にします：インラインCSSとJavaScript。ローカルまたは埋め込みの画像とフォントを使用します。ユーザーが承認しない限り、CDN依存関係は避けてください。
- 提供された事実、文言の制約、引用、ロゴ、ブランドルールを保持します。統計や情報源を決して捏造しないでください。
- タイトルスライド、一貫性のある本文、および適切な場合には目的のあるクロージングスライドを含めます。要求されたフォーマットが別のことを示している場合は、これらを強制しないでください。
ArrowLeft、ArrowRight、Space、PageUp、PageDown、Home、Endをサポートします。クリック/タップナビゲーションとタッチスワイプをサポートします。全画面表示にはFを使用します。- 控えめなスライドカウンターまたは進行状況インジケーターを表示します。コントロールは視覚的に控えめで、プレゼンテーションに安全な状態を保ちます。
- 各スライドが横長1ページとして印刷され、装飾的なコントロールが非表示になるように印刷CSSを追加します。
prefers-reduced-motionを尊重します。動きは控えめに使用し、重要な情報を明らかにするためにアニメーションに依存しないでください。- 明示的に要求されない限り、スピーカーノート、ナレーションスクリプト、音声、自動再生、録画ヘルパー、ビデオタイムライン、またはTTSインフラストラクチャを追加しないでください。
コンテンツとビジュアルのルール
- スライドごとに1つの主要な主張をします。段落よりも、簡潔な3〜6個のサポート項目を優先します。
- 関係に適した視覚的な形式を使用します：比較、プロセス、タイムライン、階層、メトリック、引用、画像、チャート、または図。
- 装飾的なフィラーよりも、実際のコンテンツ、シンプルなSVG、CSS図、意味のあるチャートを優先します。
- 強力な階層と十分な余白を維持します。ドキュメントを読むためではなく、離れた場所から見るためにデザインします。
- デッキ全体で一貫したテーマを維持しつつ、レイアウトのバリエーションを許可します。すべてのスライドを同じ丸いカードのグリッドにしないでください。
- 一般的なAIスタイルを避けます：不必要な紫のグラデーション、過度のグロー、ランダムなガラスパネル、絵文字の装飾、偽のアプリアイコン、データのない装飾的なチャート。
- テキストのコントラスト、目に見えるフォーカス状態、有用なaltテキスト、および適切なDOM読み取り順序を確保します。
- コンテンツが収まらない場合は、短くするかスライドを分割します。本文テキストを無理に縮小して収めようとしないでください。
既存のデッキの編集
ユーザーが再設計を要求しない限り、現在のアーキテクチャとデザイン言語を維持します。最小限の一貫した変更を行い、その後、ナビゲーション、スライド番号、オーバーフロー、印刷レイアウト、レスポンシブスケーリングを再確認します。
完了チェック
完了を報告する前に：
- 要求されたメッセージ、数値、引用、スライドの順序を確認します。
- 最初と最後のスライドの境界とすべてのナビゲーション方法をテストします。
- 16:9のデスクトップサイズと少なくとも1つの小さなビューポートですべてのスライドを検査します。
- テキストのクリップ、衝突、小さすぎるタイプ、壊れたメディア、コンソールエラー、および偶発的なスクロールを確認します。
- ファイルがビルドステップなしで開き、外部依存関係が承認されない限りオフラインでも使用可能であることを確認します。
- 結果を引き渡す前にすべての障害を修正します。