6uclz1 HTML Slides
Core Experience
- ユーザーが指定したテーマを、1つのHTMLページを縦に連続スクロールして読み進めるプレゼンテーションとして構成する。
- 「HTMLでスライドを作成する方法」を解説する場合は、設計、HTML構造、CSS表現、JavaScriptによるインタラクション、検証の順に理解できる章立てにする。
- PowerPointのようなページ切り替え式にしない。各章を必要に応じて画面高いっぱいに見せながら、背景、グラデーション、余白で連続した流れを作る。
- Apple公式サイトのような、スクロールによって情報の焦点、奥行き、展開が変化する体験を目指す。特定サイトの外観を複製せず、スクロールを情報設計に活用する。
- 画面幅いっぱいの背景を途切れさせず、章ごとの色、光、画像、グラデーションが自然に移り変わるようにする。
Liquid Glass Interface
- 左側にLiquid Glass風のサイドバーを固定し、章タイトルと現在位置を表示する。
- サイドバーを背景から切り離された不透明パネルにしない。半透明の色、
backdrop-filter、薄い境界線、ハイライト、影を使い、背後の背景色と光の影響を受けるようにする。 - 現在の章を明確に強調し、ナビ項目の選択で対応する章へスムーズにスクロールできるようにする。
- サイドバー左下に経過時間タイマーを配置し、プレゼンテーション中に常時確認できるようにする。
- 画面右下にLiquid Glass風の注釈UIをフローティング表示し、現在の章に対応する補足、話者メモ、要点を表示する。
- 小さい画面ではサイドバーと注釈UIを縮小、折りたたみ、または再配置し、本文を隠さないようにする。
Scroll Interaction
- 各章の要素にフェード、移動、スケール、段階的表示を加え、スクロール位置に応じて自然に登場させる。
- 重要な説明、図、コード例には
sticky表現を使い、周囲の内容が進行する間も焦点を維持する。 IntersectionObserverまたは同等の仕組みで現在の章を判定し、サイドバーの強調表示と右下の注釈を同期して更新する。- アニメーションはネイティブスクロールを妨げない範囲に保ち、キーボード、トラックパッド、マウス、タッチ操作で同じ内容へ到達できるようにする。
prefers-reduced-motionを尊重し、動きを減らした環境でも情報と現在位置が失われないフォールバックを用意する。
Implementation And Validation
- 指定がなければ、セマンティックなHTML、CSS、JavaScriptを1つの実行可能なHTMLファイルにまとめる。状態管理、表示ロジック、スタイルの責務を分けて保守しやすくする。
- 章ごとに安定した
idを付け、ナビゲーション、現在位置判定、注釈データを同じ章定義から参照できるようにする。 - レスポンシブ表示、十分な文字コントラスト、フォーカス表示、横スクロールの防止を実装する。
- 実ブラウザでスクロールし、現在位置ナビ、タイマー、章別注釈、フェード、
sticky表現が連動することを確認する。 - デスクトップ幅とモバイル幅の両方で、本文、サイドバー、注釈UIが重ならず、最後の章まで自然に到達できることを検証する。