scroll-craft：プレミアム・スクロール駆動ランディングページ構築スキル

scroll-craft

スクロールは、すべての訪問者が使い方を知っている唯一の入力です。このスキルは、スクロールをタイムラインとして扱います。ホイールはスクラバーであり、ページはその上に実際のテキストが重なったフィルムであり、各セクションは十分に異なる動作をするため、訪問者は次のセクションが何をするのか知りたくなり、スクロールを続けます。

あなたが制作するもの： インタビュー概要、ページの文法、カスタマージャーニーマップ、1つの設計されたピークを持つ感情曲線、スクロールスコア、1つのシグネチャームーブ、生成されたアセット、トークン駆動のデザインフロア上の実際のHTMLページ1つ、そしてすべてのスクロール位置でそれが機能することを証明するスクリーンショットの連続。

これが何でないか

これは「フライスルーを生成してその上にテキストを落とす」ではありません。そのアプローチでは、ページ全体に1つのデバイスが適用され、その方法で構築されたすべてのサイトは一目で認識できます。同じクレイメーションデiorama、同じ中央揃えのコピー、同じ01 / 06カウンター、同じ「スクロールして探索」のナッジ。5つのセクションが同じ動作をするということは、1つのセクションを5回表示しているに過ぎません。

以下に続く4つのルールは、このスキルの背骨です。

1. 多様性がプロダクトです。 ページは少なくとも4つのデバイスファミリーを使用し、同じデバイスを連続して使用してはなりません。references/devices.mdを読んでください。
2. 世界は、ブランドが本当にイラストレーションを採用している場合を除き、写真写実的でなければなりません。 ソフトマットな低ポリゴンクレイデioramaは、デフォルトとして禁止されています。references/worlds.mdを読んでください。
3. 連続したチェーンは禁止です。 単一の途切れないカメラフライトは、構築できる中で最も高価で最も壊れやすいものであり、それはシーン間のカットを隠すためだけに存在します。代わりにデバイスを変更すれば、訪問者は1つのフィルムを見ているわけではないため、カットは無料で消えます。チェーンは、ブリーフが文字通り「1つの連続した旅」である場合にのみ許可されます。
4. 異なる世界は異なるページではありません。 デバイスキットはページの見た目を変えます。構造は別の軸であり、意識的に決定されなければ、すべてのビルドが同じ骨格を継承することになります。最初の4つのビルドはまさにそうでした。references/uniqueness.mdを読んでください。

スタンディングヒーローの優先順位

次元レイヤリングは、プレミアムマーケティングヒーローのベースライン要件です。 アセットをリクエストする前に、独立して動く背景、被写体、前景、大気プレーンを計画してください。テキストフェードが付いた美しい単一の背景は、この優先順位を満たしません。奥行きは、目に見える分離、オクルージョン、そして制御された動きの違いから生まれなければならず、見出しは読みやすく、シーンは1つの明確なストーリーを伝える必要があります。

ヒーローやそのアセットを計画する前に、references/hero-depth.mdを読んでください。クリーンプレート、本物のアルファカットアウト、共有コンタクトアンカー、プレーン間のタイポグラフィ、抑制されたスクロールコレオグラフィ、モバイルアートディレクション、ビジュアルアクセプタンスについて、承認されたSonderの例とともにカバーされています。選択した文法に合った構成を使用してください。Sonderのシーンを繰り返したり、それを禁止する文法にピン留めを課したりしないでください。明示的な静的またはよりシンプルな指示を尊重し、モーションが抑制されている場合でも、静的な構成に奥行きを保ってください。

承認済みコレクション標準

プレミアムマーケティングサイトを計画する前に、references/approved-collection.mdを読んでください。承認された10サイトのリビルドを凝縮しています。実際のブランドリサーチ、レイヤー契約、意味のあるポインター/スクロール深度、適切な写真写実的または3Dレンダリング、明確なナビゲーションとエンディング、有用なインタラクション、モバイルアートディレクション、最終パッケージからの証拠。これらは実行原則と実践例であり、再利用可能なページスケルトンではありません。

ステップ0：ブリーフとクリエイティブ権限

何かを生成する前にブリーフを確立してください。 すでに提供されている回答とアセットを再利用してください。ユーザーが明示的にクリエイティブディレクションを委任した場合（例えば、「あなたの判断に任せる」や「あなたの邪魔をしたくない」）、明示的なクリエイティブ委任の下で自己作成ブリーフを書き、先に進んでください。以下の8つのトピックをカバーし、証拠と仮定を区別し、ユーザーの引用を捏造したり、別のインタビュー/承認チェックポイントを強制したりしないでください。

それ以外の場合は、不足している決定についてインタビューしてください。実際の質問をし、回答を記録し、名前だけでブランド全体を推測しないでください。

このスキルはレンジインストルメントであり、ハウススタイルではありません。人間は意図と所有するアセットを持ち込みます。インタビューはそれを適切なタイプのページに変えます。1つの途切れない世界、異なるシーン、印刷されたチャプター、ライブサーフェス。このスキルはそれらのどれでも実行できます。インタビューがどれにするかを決定します。

短くしてください。8つの質問を、1回のパスで行います。

1. 3〜5語での雰囲気と、任意のメディアからの最大3つのリファレンス。映画、アルバムカバー、ショップ、雑誌、ゲーム。「好きなサイト」ではありません。サイトを挙げることは、ページが既存のサイトのように見えてしまう原因です。
2. セクションごとのスクロールジャーニーを、彼らの言葉で。 訪問者が最初に何を見るべきか、次に何が来るか、最後のものは何か。あなたが提供したメニューではなく、彼らの順序です。
3. エネルギーカーブ。 どこで穏やかに感じ、どこで強烈に感じるべきか。ずっと騒がしいページは、ずっと静かなページと同じくらい平坦です。
4. 訪問者はスクロールしながら段階ごとにどのように感じるべきか、そして彼らが覚えておくべき「1つの瞬間」は何か？ エネルギーはラウドネスです。これは感情であり、この2つは一致しません。騒がしいページでは、静かな行為が最も強烈である可能性があります。段階ごとの回答は感情曲線になり、1つの瞬間がピークになります。どちらもBRIEF.mdで必須です。references/feel.mdを参照してください。
5. このサイトが、彼らが見たことのあるどのサイトとも違うことをすべき1つのこと。 これがシグネチャームーブの種です。本当の回答を促してください。「記憶に残る」は回答ではありません。
6. プレミアムミニマルからどれだけ離れたいか。 uniqueness.md §5の範囲を提供します。ブルータリスト、マキシマリスト、プレイフル、レトロ、デンス、エディトリアル、プレミアムミニマル。彼らの回答が美的ファミリーを決定します。あなたの好みではありません。
7. 1つの途切れない世界、それとも異なるシーン？ ページ全体が、スクロールが飛び抜ける1つの連続した場所のように感じられるべきか（worldflight、references/worldflight.mdを参照）、または別々のシーン、チャプター、カットのように感じられるべきか？これは最大の構造的分岐点であり、彼らの判断です。後で選択するデバイスではありません。両方を率直に提供してください。どちらもデフォルトではありません。
8. 彼らはすでにどのようなアセットを持っているか？ 映像、写真、プロダクトショット、ブランドキット、自分自身のクリップ。実際のアセットは世界を固定し、生成コストを削減します。回答は、何がグレーディング/エンコードされるか、何が生成されるかを決定します。「何もない」も立派な回答であり、完全に生成された世界を意味します。

回答を、マーケティング散文に言い換えず、彼らの言葉で、<workspace>/builds/<name>/BRIEF.mdに書き込んでください。ダウンストリームのすべてはそのファイルから読み取ります。

BRIEF.mdには、少なくとも以下を含める必要があります。

• 8つのトピック。提供された場合は逐語的なユーザー回答、委任された場合は明確にラベル付けされた作成者の決定を含みます。
• 感情曲線。 行為ごとに1行：感情、そして画面上でそれを引き起こすもの。行為が存在する前に書かれ、スコアが埋まるにつれて追加されます。
• ピーク。 1つの瞬間。訪問者が友達に言うであろう文として書かれ、それがどの行為に存在するかも含みます。
• 完成したtell-someone文。 「それは___するサイトです」と、デバイス名ではなく体験で埋められます。
• 作成者の沈黙（デッドスクロールと区別できるようにするため）。

references/feel.mdは、これら4つすべての仕様です。

人間が本当に連絡不能で、実行が完全に自律的である場合は、自分でBRIEF.mdを書いてください。8つの質問すべてにブランドの声で回答し、ファイルの先頭に自己作成、インタビューなしとマークし、最終レポートでその旨を述べてください。委任なしの自己作成ブリーフはフォールバックです。上記の明示的な委任は通常のサポートされるワークフローであり、人間が連絡不能である必要はありません。

ブートストラップ

作業の段階ではなく、環境です。インタビューに回答し、ステップ1の前に1回実行します。

手動でチェックするのではなく、プリフライトを実行してください。 プリフライトは、後で誤解を招くエラーとして表面化する障害モード、主にffmpegが欠落している場合にコマンドの構文エラーとして欠落したフィルターを報告することを認識しています。

node <skill>/scripts/doctor.mjs

node、完全なffmpegビルド、playwrightとChrome、APIキー、解決されたワークスペースを報告します。必要な障害はnon-zeroで終了します。不足しているアイテムを静かに回避するのではなく、明確に述べてください。

ワークスペース

ビルドとフィンガープリントレジストリは1つのディレクトリに存在し、それは想定ではなく解決されます。

node <skill>/scripts/workspace.mjs --ensure     # パスを出力し、作成し、レジストリをシードします

解決順序（最初にヒットしたものが優先）。

1. SCROLLCRAFT_HOME
2. カレントワーキングディレクトリから上に向かって最も近い.scrollcraft.json、{ "workspace": "..." }
3. <プロジェクトルート>/scrollcraft。プロジェクトルートは.gitを保持する最も近い祖先

したがって、ビルドフォルダは<workspace>/builds/<name>/であり、レジストリは<workspace>/FINGERPRINTS.mdです。レジストリは空で始まります。ゲートはあなたが自分自身を繰り返すのを防ぐために存在するので、最初のビルドではクリアするものは何もありません。

すでにビルドを別の場所に保存している場合は、プロジェクトルートに.scrollcraft.jsonを配置してそれを指すようにすれば、何も移動する必要はありません。

その他

1. KIE_AI_API_KEY、アセットを生成する場合のみ。 ユーザー自身の写真や映像からのビルドはキーも費用も必要とせず、それはフォールバックではなくファーストクラスのルートです。node <skill>/scripts/kie.mjs probeで残高を確認してください。静止画は数セント、5秒のクリップはより高価です。6つの行為を持つページで2つのクリップがあれば、少しの出費であり、大きな出費ではありません。
2. ブランドキット（色、ロゴ、タイプ、既存のプロダクトショット）が存在する場合。ブランドがこのリポジトリにフォルダを持っている場合は、何かを生成する前にそれを読み、そのハードルールに従ってください。数字の捏造を禁止するブランドは、どれだけ見栄えが良くても統計カウンターを意味します。

engine/scrollcraft.jsとengine/scrollcraft.cssをビルドフォルダにコピーしてください。プロジェクトごとにエンジンを編集しないでください。それはメカニズムです。トークンでテーマを設定し、独自のマークアップを書いてください。

ステップ1：ブリーフ、ジャーニーを第一に

主題はユーザーが述べるものです。平易な散文で、決して捏造された産業の多肢選択リストとして尋ねないでください。捏造されたメニューは彼らにバイアスをかけ、あなたが彼らのビジネスを決定しているように読まれます。

ステップ0ですでに雰囲気、シーケンス、エネルギー、範囲をカバーしました。それらを再度尋ねないでください。あなたが合理的にデフォルト設定できないことだけを尋ねてください。

1. これは何で、誰のためのものか？ 彼らの言葉で1〜2文。
2. 訪問者は最後までに何を信じなければならないか？ ページがインストールするために存在する単一の文。機能リストではありません。彼らが3つ挙げた場合は、1つ選ばせてください。
3. 訪問者は次に何をするか？ 1つのアクション。ページ上のあらゆる場所で使用される、そのための1つのラベル。
4. あなたはすでに何を持っているか？ ロゴ、パレット、写真、プロダクトショット、映像、ブランド文書。実際のアセットは、生成されたものよりも常に優れています。
5. アートディレクション： references/worlds.mdの世界を実際の選択肢として提供し、彼らが独自の道を行くことができると言ってください。

次に、他の何よりも先にジャーニーを書いてください。訪問者が知っていることや感じていることの変化ごとに、4〜7のビート。

1  認識       彼らは自分の朝を見る
2  緊張       その代償、明確に名付けられる
3  転換       物事を変えるもの
4  実質       なぜそれが持続するか
5  範囲       彼らが選べるもの
6  コミットメント   1つのアクション

ビートが背骨です。セクションはビートに奉仕します。ビートに奉仕しないセクションは、ショットがどれほど素晴らしくてもカットされます。アセットを生成する前にジャーニーを解決してください。ユーザーの決定が必要な場合はユーザーに表示し、明示的なクリエイティブ委任の下では、選択されたジャーニーを記録し、許可された範囲内で進めてください。

ステップ2：文法、ゲート、そしてスコア

3つのことを順番に行います。最初の2つは、行為計画の前に行われます。詳細はreferences/uniqueness.mdにあります。

文法を選んでください。 8つの定義された文法とその制約から始めてください。新しい文法は、そのナビゲーション、シーケンス、エンディング、および明示的な禁止が異なる構造を説明する場合にのみ許可されます。新しいラベルだけではクレジットは得られません。フィルミックワンショットは、最初の4つのビルドすべてが使用したものです。そのため、再びそれを選択することは、レポートで他の7つがインタビューに適合しなかった理由を述べることを意味します。ナビ、ヒーロー、クローズはすべて文法に従います。それらは個別に決定されるわけではありません。

シグネチャームーブを発明してください。 このサイトだけに存在する、1つの特注のインタラクション。ページにコード化され、キットデバイスへのパラメータ変更ではありません。インタビューの質問5が種です。エンジンは変更されません。

フィンガープリントゲートを実行してください。 <workspace>/FINGERPRINTS.md（ブートストラップのワークスペースを参照。node <skill>/scripts/workspace.mjsを実行してパスを表示）にあるレジストリを読み取ってください。計画されたビルドは、6つの次元（文法、ナビゲーション処理、ヒーローデバイス、行為シーケンス形状、クローズパターン、シグネチャームーブ）のうち少なくとも4つにおいて、すべての既存の行と異なっていなければなりません。各行に対して個別に4つです。失敗した場合は、ログではなく計画を変更してください。

スコアテーブルの前に感情曲線を書いてください。 行為ごとに1行：感情、そしてそれを引き起こすもの。曲線が先、行為は後です。なぜなら、感情の前に選ばれたデバイスは、理由を探しているデバイスだからです。隣接する2つの行為が同じ感情を持つということは、一方がフィラーであることを意味し、アセットが存在した後よりもここでカットする方が安価です。同じパスでピークを指定し、ページ上で最大のスパンを与えてください。完全な方法はreferences/feel.mdにあります。

次に、各ビートにデバイスを割り当てます。意図的に行い、テーブルとして書き留めてください。

ビート	デバイス	なぜこれか
認識	scrub	カメラが読者の手の下で動くことは、可能な限り最強のオープンです
緊張	pin + キネティック	フレームが静止している間に、コピーが行ごとに組み立てられます
転換	reveal	…

[truncated for translation]