フロントエンドスライド は何をしますか？
ブラウザ上で動作する、ゼロ依存・アニメーション豊かなHTMLプレゼンテーションを作成します。
zarazhangrui氏の作品で示された視覚探索アプローチに触発されています（クレジット: @zarazhangrui）。
アクティベーションタイミング
- トーク、ピッチ、ワークショップ、社内プレゼンテーション用のデッキを作成する場合
.pptまたは.pptxスライドをHTMLプレゼンテーションに変換する場合- 既存のHTMLプレゼンテーションのレイアウト、モーション、タイポグラフィを改善する場合
- 自分のデザインの好みがわからないユーザーとプレゼンテーションスタイルを探索する場合
絶対条件
- ゼロ依存: デフォルトでは、インラインCSSとJSを含む1つの自己完結型HTMLファイルとします。
- ビューポートフィットは必須: すべてのスライドは、内部スクロールなしでビューポート内に収まる必要があります。
- 説明ではなく表示: 抽象的なスタイル質問票ではなく、ビジュアルプレビューを使用します。
- 個性的なデザイン: 凡庸な紫グラデーション、Interフォント白背景、テンプレート風のデッキは避けます。
- プロダクション品質: コードはコメント付き、アクセシブル、レスポンシブ、パフォーマンス良好に保ちます。
生成前に、STYLE_PRESETS.md を読み、ビューポートセーフなCSSベース、密度制限、プリセットカタログ、CSSの注意点を確認してください。
ワークフロー
1. モード検出
以下のいずれかのパスを選択します。
- 新規プレゼンテーション: ユーザーがトピック、メモ、または完全なドラフトを持っている場合
- PPT変換: ユーザーが
.pptまたは.pptxを持っている場合 - 改善: ユーザーが既にHTMLスライドを持っており、改善を希望する場合
2. コンテンツ収集
最低限必要な情報のみを質問します。
- 目的: ピッチ、教育、カンファレンストーク、社内アップデート
- 長さ: 短い（5〜10）、中程度（10〜20）、長い（20以上）
- コンテンツ状態: 完成原稿、ラフノート、トピックのみ
ユーザーがコンテンツを持っている場合は、スタイリング前に貼り付けるよう依頼します。
3. スタイル探索
デフォルトは視覚探索とします。
ユーザーがすでに希望のプリセットを把握している場合は、プレビューをスキップして直接使用します。
それ以外の場合は、以下を実行します。
- デッキが作り出すべき印象を質問します: 感銘、活力、集中、インスピレーション。
.ecc-design/slide-previews/に 3つの単一スライドプレビューファイル を生成します。- 各プレビューは自己完結型で、タイポグラフィ/カラー/モーションを明確に示し、スライドコンテンツは約100行以内に収めます。
- ユーザーにどのプレビューを残すか、どの要素を組み合わせるかを尋ねます。
ムードとスタイルのマッピングには STYLE_PRESETS.md のプリセットガイドを使用してください。
4. プレゼンテーションの構築
以下のいずれかで出力します。
presentation.html[presentation-name].html
assets/ フォルダは、デッキに抽出またはユーザー提供の画像が含まれる場合のみ使用します。
必要な構造:
- 意味論的なスライドセクション
STYLE_PRESETS.mdからのビューポートセーフなCSSベース- テーマ値のためのCSSカスタムプロパティ
- キーボード、ホイール、タッチナビゲーションのためのプレゼンテーションコントローラークラス
- リビールアニメーションのためのIntersection Observer
- モーション低減対応
5. ビューポートフィットの強制
これは厳格なゲートとして扱います。
ルール:
- すべての
.slideはheight: 100vh; height: 100dvh; overflow: hidden;を使用すること - すべてのタイポグラフィとスペーシングは
clamp()でスケーリングすること - コンテンツが収まらない場合は、複数のスライドに分割すること
- 読みやすいサイズを下回るテキスト縮小でオーバーフローを解決しないこと
- スライド内にスクロールバーを絶対に許可しないこと
STYLE_PRESETS.md の密度制限および必須CSSブロックを使用してください。
6. 検証
完成したデッキを以下のサイズで確認します。
- 1920x1080
- 1280x720
- 768x1024
- 375x667
- 667x375
ブラウザ自動化が利用可能な場合は、それを使用してスライドのオーバーフローがなく、キーボードナビゲーションが機能することを確認します。
7. 納品
引き渡し時:
- ユーザーが保持を希望しない限り、一時プレビューファイルを削除します
- プラットフォームに適したオープナーを使用してデッキを開きます（便利な場合）
- ファイルパス、使用したプリセット、スライド数、簡単なテーマカスタマイズポイントを要約します
現在のOSに適したオープナーを使用します。
- macOS:
open file.html - Linux:
xdg-open file.html - Windows:
start "" file.html
PPT / PPTX 変換
PowerPoint変換の場合:
- テキスト、画像、メモを抽出するには
python3とpython-pptxを推奨します。 python-pptxが利用できない場合は、インストールするか、手動/エクスポートベースのワークフローにフォールバックするかを尋ねます。- スライドの順序、スピーカーノート、抽出したアセットを保持します。
- 抽出後、新規プレゼンテーションと同じスタイル選択ワークフローを実行します。
変換はクロスプラットフォームに保ちます。Pythonで対応できる場合は、macOS専用ツールに依存しないでください。
実装要件
HTML / CSS
- ユーザーが明示的にマルチファイルプロジェクトを希望しない限り、インラインCSSとJSを使用します。
- フォントはGoogle FontsまたはFontshareから取得できます。
- 雰囲気のある背景、強いタイプ階層、明確なビジュアル方向性を優先します。
- イラストではなく、抽象図形、グラデーション、グリッド、ノイズ、幾何学模様を使用します。
JavaScript
以下を含めます:
- キーボードナビゲーション
- タッチ/スワイプナビゲーション
- マウスホイールナビゲーション
- 進行状況インジケーターまたはスライドインデックス
- 表示時アニメーショントリガー
アクセシビリティ
- 意味論的な構造を使用（
main、section、nav） - コントラストを読みやすく保つ
- キーボードのみのナビゲーションをサポート
prefers-reduced-motionを尊重
コンテンツ密度制限
ユーザーが明示的に高密度スライドを要求し、かつ読みやすさが保たれる場合を除き、以下の最大値を使用します。
| スライドタイプ | 制限 |
|---|---|
| タイトル | 見出し1 + サブタイトル1 + オプションのタグライン |
| コンテンツ | 見出し1 + 4〜6箇条書き または 短い段落2つ |
| フィーチャーグリッド | 最大6カード |
| コード | 最大8〜10行 |
| 引用 | 引用1つ + 帰属 |
| 画像 | ビューポートに制約された画像1つ |
アンチパターン
- 視覚的アイデンティティのない凡庸なスタートアップグラデーション
- 意図的な編集スタイルでない限りのシステムフォントデッキ
- 長い箇条書きの壁
- スクロールが必要なコードブロック
- 短い画面で壊れる固定高さのコンテンツボックス
-clamp(...)のような無効な否定CSS関数
関連ECCスキル
frontend-patterns: デッキ周辺のコンポーネントとインタラクションパターン用liquid-glass-design: プレゼンテーションが意図的にAppleのガラス美学を借用する場合e2e-testing: 最終デッキの自動ブラウザ検証が必要な場合
納品チェックリスト
- プレゼンテーションがローカルファイルからブラウザで動作すること
- すべてのスライドがスクロールなしでビューポートに収まること
- スタイルが個性的で意図的であること
- アニメーションが意味があり、ノイズでないこと
- モーション低減が尊重されていること
- ファイルパスとカスタマイズポイントが引き渡し時に説明されていること