スクロールとドラッグの商品展示
実際に動作するウェブページと編集可能なソースファイルを納品します。まず、今回のインタラクションがスクロールか、ドラッグか、または両方の共存かを確認します。既存のページに新しいインタラクションを追加する場合は、すでに許可されているもう一方のインタラクションを保持します。参照動画は視覚と動きの関係を把握するために使用し、その動画から元のサイトが特定のフレームワークを使用していると断言することはできません。ページの表示と実際のEC注文システムは、それぞれ完了状態を分けて説明します。
参照からの抽出
ローカル動画から再生時間とフレームサイズを読み取り、開始、トランジションの中間、終了のフレームを抽出します。必要に応じてサンプリングを増やし、連続した動きを確認します。記録する項目：オブジェクトの位置とサイズ、視点の変化、背景と小道具、文字サイズ、遮蔽の順序、スクロール方向とスクロールバック動作。録画画面の枠、解説字幕、マウスカーソルをウェブデザインの一部と誤認しないでください。
参照情報をスクロール進行に沿ったアクションテーブルに整理します。画面に直接表示されているもの、推測されるもの、そして今回選択した実装方法をそれぞれマークします。コーヒーのケーススタディと路線判断の参考は references/motion-design.md を参照してください。
表示方法の選択
- 実際の視点変更、インタラクティブな回転、マテリアル変更が必要な場合：Three.js 3DモデルとGSAPを組み合わせます。適切なGLBがあればそれを優先的に再利用します。単純なカップや瓶などはパラメトリックジオメトリでモデリングし、オリジナルの示意モデルであることを明示します。
- カメラが固定、ライティングが複雑、既存のレンダリング素材がある場合：Canvasスプライトシーケンス。フレーム番号はスクロール進行によって決定します。未ロードのフレームとメモリ使用量を処理し、任意のビデオをフレームごとにシークしてもスムーズに再生されることを前提としません。
- 移動、透明度、平面の傾きのみの場合：DOM/CSSレイヤーで十分です。単一の画像から実際の前面から背面への回転を生成することはできません。
素材の路線が決まったら、スクロールロジックを構築します。ユーザーがブランドを指定していない場合は、明確なデモ用ブランドと商品データを使用します。認証、売上、レビュー、実際の取引結果を捏造しないでください。
スターターテンプレート
Vite + Three.js + GSAP ベースの自己完結型テンプレートが2セットあります。商品とタスクに応じて選択します。新しいブランドの場合は、ビジュアルを再設計する必要があります。
assets/starter/（coffee、デフォルト）：コーヒーのスクロールナラティブにドラッグを重ね、フレーバーによる色変更とローカルショッピングバッグを備えます。mini.htmlは商品とショッピングバッグを共有するミニアプリ風H5です。assets/gallery/（gallery）：香水、ヘッドホン、腕時計の3つのビジュアルテーマ。ヘッドホンはスクロール展開、3段落のテキスト、ドラッグの共存をサポートします。香水と腕時計はドラッグと構造ボタンを使用します。コーヒー以外のケーススタディをこれらに基づいて作成できます。
まだ存在しないディレクトリに作成します（スクリプトは既存プロジェクトを上書きしません）：
python3 /path/to/scroll-product-showcase/scripts/create_project.py /absolute/path/to/new-project
cd /absolute/path/to/new-project
npm ci
npm run dev -- --port 5197
実際のスキルインストールパスに応じて /path/to/scroll-product-showcase を置き換えてください。ポートが占有されている場合は、使用可能なポートに変更し、実際のアドレスを納品します。
コーヒー以外のケーススタディを生成する場合は --template gallery を追加します。ギャラリーのヘッドホンエントリは /?case=headphones で、その他に /?case=perfume と /?case=watch があります。既存プロジェクトを修正する場合は、そのプロジェクトを直接編集し、ジェネレーターで上書きしないでください。
修正箇所：
src/scene.js：カメラ、ライト、スクロールポーズ、および独立したドラッグ角度。コーヒーモデルはここに、ギャラリーモデルはsrc/models.jsにあります。src/scroll-story.js：スクロール段階、同期テキスト、プログレスバー。src/main.js：エントリポイントとインタラクション状態。コーヒーのポインタージェスチャーはsrc/drag.js、ショッピングバッグはsrc/bag.jsにあります。- コーヒー
src/products.js、ギャラリーsrc/content.js：商品テキストとカラーリング。 src/style.cssとindex.html：タイポグラフィ、レスポンシブレイアウト、テキスト、セマンティック構造。- コーヒー
mini.html、src/mini.js、src/mini.css、src/cup-viewer.js：ミニアプリ風インターフェース。vite.config.jsは2つのビルドエントリを保持します。
テンプレートはCSS stickyを使用してシーンを固定し、ScrollTriggerで進行を駆動します。同じレイヤーにさらにpinを重ねないでください。他のプロジェクトではScrollTrigger pinに変更することもできますが、競合するstickyレイアウトを削除する必要があります。
インタラクションの組み合わせと実装上の制約
ドラッグ、スクロールの共存、構造ボタン、ミニアプリインターフェースが関わる場合は、references/interaction-modes.md を読んでください。ポーズの重ね合わせ、入力の役割分担、受け入れ基準が記載されています。
- 単一の0-1進行度でスクロールによって編成されたモデル、カメラ、テキストを制御します。同じ手動角度では、順方向と逆方向で同じ進行度に達すると同じポーズになるはずです。ドラッグ角度は独立して保存し、スクロールポーズに重ね合わせます。2つのハンドラーが互いの回転を上書きしないようにしてください。
- スクロールとドラッグが共存する場合、リセットはデフォルトで手動角度のみをクリアし、スクロール進行とカラーリングは保持します。構造ボタンが同じアクションを制御する場合は、タイムラインの対応する位置にジャンプし、別のアニメーションで進行を競合させないようにします。ユーザーが他のリセットの意味を明確に指定した場合は、その要求に従います。
- まずオブジェクトのセーフエリアを決定し、その後にテキストを配置します。モバイル端末ではオブジェクトのサイズと軌跡を再設定し、デスクトップ版を単に等比縮小しないでください。
- タイトル、説明、選択ボタン、価格はアクセシブルなHTMLに配置します。Canvasは視覚表現を担当します。
- テクスチャを交換する場合は、古いテクスチャを解放します。アンマウント時にオブザーバー、アニメーション、イベント、GPUリソースをクリーンアップします。ピクセル比を制限し、不可視のシーンが継続的に再描画されないようにします。
- 動きの軽減設定のために、静的な構図と直接アクセス可能な商品情報を提供します。WebGLが失敗した場合でも、商品選択とショッピングバッグは保持します。
- ローカルショッピングバッグは、選択、数量変更、削除、永続化に対応します。バックエンドに接続していない場合は、デモであることを明確に記載し、注文が送信されたり支払いが完了したと表示しないでください。
検証と納品
まずビルドし、次にブラウザで実際のレンダリングを確認します。実際のインタラクションで、開始、中間、終了、巻き戻し、狭い画面、動きの軽減、商品選択をカバーします。共存モードでは、中間でのドラッグ、スクロールの継続、リセットも実際にテストします。ケースを切り替えた後、テキスト、ステージの高さ、カラーリングを確認します。ショッピングバッグがある場合は、数量、合計、リフレッシュ後の状態を検証します。ページの異常、リソース読み込み、水平方向のはみ出しを確認します。
コーヒーテンプレートの scripts/verify-browser.mjs はオプションの回帰テストスクリプトです。PLAYWRIGHT_MODULE で既存のPlaywrightモジュールを指定し、BASE_URL で実際のサーバーを指定できます。現在の環境でブラウザツールの使用が規定されている場合は、そのツールを使用して同様のインタラクティブ検証を実行し、別途ブラウザドライバーを起動しません。ギャラリーは上記のシナリオに従ってブラウザツールを使用して検証します。実際に実行したチェックのみを報告し、ビジュアルが合格かどうかを判断するためにスクリーンショットを確認する必要があります。ビルド成功やHTTP 200は画面検証の代わりにはなりません。
完了後、プレビューURL、ソースコードディレクトリ、主要なスクリーンショットを提供します。実際の実装路線と、まだ接続されていないサービスを説明します。ユーザーが明示的に録画やビデオを要求した場合のみ、追加で録画します。静的なスクリーンショットをインタラクティブ検証や録画として報告しないでください。
技術リファレンスは必要に応じて参照：GSAP ScrollTrigger、Three.js GLTFLoader