cinematic-scroll

Web Design Studio

動きによってテーマを伝える、独自性のある体験を構築します。制作の技術はこのスキルから得られ、ビジュアルアイデンティティはユーザーのブリーフとプロジェクトから生まれます。このテキストのみのエディションでは、アカウント、キー、有料サービス、特定のアニメーションライブラリは必要ありません。

ルートを1つ選ぶ

監査のみの依頼では、scroll-audit スキルがインストールされていれば使用します。そうでなければ、構築は行わずに調査して所見を返します。方向性の検討またはストーリーボードのみの場合は、story direction を使用します。それ以外の場合は、recipe catalog を読み、レシピを1つ選んで読みます。

• 画像主導のナラティブ、ポートフォリオ、長文記事、キャンペーンには、Editorial story を使用します。
• ローンチ、仕組み、比較、オブジェクトに焦点を当てたストーリーには、Product reveal を使用します。
• GLB、プロシージャルオブジェクト、オービット、カメラのフライトには、Real-time 3D を使用します。

関連スキル：launch-page-strategy は、動きを加える前にページで伝え、立証すべきことを決めます。scroll-audit は既存のページを評価します。

修正の場合は、影響を受ける動作に最も近いレシピだけを使用します。選んだレシピから具体的な必要性が示されない限り、ほかのリファレンスは確認しません。ホストのフレームワーク、ルート、スタイリング、依存関係、コンテンツ、動作中のインタラクションを維持します。提供されたアセットとインストール済みのパッケージを優先します。ユーザーの依頼に含まれていない限り、公開、デプロイ、パッケージのインストール、プロジェクトの内容をサービスに送信することはしません。

最初の作業は簡潔に進めます：プロジェクトの指示 -> ブリーフ／アセット -> カタログ -> レシピを1つ -> 構築。レシピはそれぞれ単独で完結しています。具体的な不足が明らかになる前に、任意のリファレンスを調べたり、作業プロセスの文書を作成したりしないでください。コンテキストを集めるのではなく、レンダリング結果の改善に反復作業を費やします。

方向性を定める

プロジェクトの指示、既存のコード、コピー、アセットを確認します。対象ユーザー、望ましいアクション、提供形式、対象デバイス、ブランドのパレット、書体の組み合わせ、情報密度、強調点、画像、動きの特性を明確にします。後から変更できる仮定で十分な場合は、それを明示して進めます。

書き換えが依頼されていない限り、提供されたコピーはソースとレンダリング後のテキストの両方で一字一句そのまま維持します。text-transform、生成した置き換えテキスト、スクリプトによる大文字・小文字の変更を使って、見た目の上で書き換えないでください。主張、推薦文、指標、価格、顧客ロゴ、遷移先を捏造しないでください。

テーマに固有の結果をもたらす、象徴的な瞬間を1つ選びます。組み立てを見せる、画像を捉え直す、ルートをなぞる、実際の形状の中を移動するといった方法があります。その開始 -> 変化 -> 読み取れる状態での保持 -> 終了と、モバイルおよび静止時の状態を定義します。ページを拡張する前に、この縦方向のスライスを構築し、確認します。

明確な焦点、意図的な書体のコントラスト、素材と光の表現方針、繰り返し使うモチーフを1つか2つ定めます。遷移を構成し、終点だけに注目しないでください。他のブランドのスタイリングを持ち込まずに、例の仕組みを応用します。

エクスペリエンスを構築する

• 意味的に正しい h1 をちょうど 1 つ、整合性のある見出し順、選択可能なテキスト、有用なリンク、視認できるフォーカス、画像の代替テキスト、そして拡張機能の起動前に主要なアクションを用意します。ページ内のアクションでは、URL フラグメントを変更するだけでなく、約束するコンテンツを含む、意味のあるラベル付きのターゲットに移動するようにします。
• 通常、動きの軽減、失敗、JavaScript 無効の各状態で、提供されたすべてのメッセージとアクションを利用できる状態にします。非アクティブなストーリーのコピーに hidden、inert、display:none、visibility:hidden を指定しないでください。利用可否ではなく、表示をアニメーションさせます。
• アクティブ化の境界で、コントロールのセマンティクスと計算後の表示を同期させます。開閉式の要素では、aria-expanded と制御対象領域の表示状態を同時に変更し、その状態変更後に内側のラッパーをアニメーションさせます。
• スクロールのクロックを 1 つにし、アニメーションするプロパティごとに所有者を 1 つにします。固定されたジオメトリと移動する子要素を分離し、所有するリスナー、オブザーバー、タイムライン、メディア、レンダリングループをクリーンアップします。
• サンプリングしたスクロール位置すべてで、完全に表示されたフレームを維持します。トランジションの背後に恒久的なベース構成を残し、ステージ全体を空になるまでアニメーションさせたり、必須の表示をサポートされていないタイムラインに依存させたりしないでください。
• スクロール連動の変化は進行度に応じて可逆的にします。読む必要がある間はテキストを動かさないでください。頻繁に更新される箇所では、トランスフォームと不透明度を優先します。
• 離れたスクロール位置間、およびスクロール位置を変えずに描画されたフレームを比較します。意図した変化がアイドル時の揺らぎを明確に上回るようにします。そうでない場合は、時間経過に依存する動きを減らすか、対応するカメラやオブジェクトの変化を強めます。
• モバイルは、自然なフローと同時に表示するレイヤーを減らした構成として扱います。ポインターの傾き効果は、ホバー可能な細かいポインターに限定します。
• 動きの軽減設定では、すべてのメッセージとアクションを利用可能なまま、固定表示、視差、スムージング、自動再生、連続ループを取り除きます。
• スクリプト、メディア、レンダラーに障害が発生しても、有用な恒久的構成が残るようにします。

明示的な 3D、カメラ移動、または豊かなモーションが、求められる水準を定義します。求められた仕組みを取り除く前に、依存関係を修復し、解像度、エフェクト、アセットの容量を減らします。ポスターはフォールバックの証拠であり、リアルタイム 3D を完成させたことにはなりません。

検証して引き継ぐ

通常のブラウザー表示で主要なインタラクションを実証し、関連する修復後に対象を絞ったチェックを実行します。最終調整では、デスクトップ、モバイル、動きの軽減、JavaScript 無効／障害時のフォールバック、キーボード操作順、逆スクロール、リサイズ、実際のルートを確認します。冒頭、中間、読みやすく静止する箇所、終了の各フレームを確認します。変化のない失敗を繰り返したり、証拠がないのに合格として提示したりしないでください。 JavaScript 無効時のチェックは、スクリプトを無効にしたブラウザーで実行します。正確な静的状態、ポスター、必須のコピー、アクションのターゲット、作成者が指定したメディアの代替要素が認識でき、競合する読み込み UI が表示されないことを実証します。 このリポジトリにツールキットがある場合は、修復中に tools/verify/verify-build.mjs --scope output --doctor-mode advisory --runtime を実行し、最終調整時には --profiles を付けずに実行します。

動作するファイルまたはルート、正確な起動コマンド、主要な見どころ、合格したチェック、重要な制約を引き継ぎます。依頼されていない限り、ユーザーのウェブサイトに帰属表示、販促コピー、トラッキング、アップグレードバナーを追加しないでください。