プレミアムランディングページ
ランディングページは、3つのチェックをクリアして初めて完成します。リファレンスまたはブリーフに一致していること、320から1920までのすべての幅で崩れないこと、そして要素が偶然に配置されていないことです。作業の大部分は3つ目のチェックに費やされます。
最初にモードを決める
リファレンスモード — ユーザーがスクリーンショット、PDF、URL、「これを複製して」と指定した場合。正確さが目標であり、「大体合っている」は失敗です。CSSを書く前にリファレンスを数値で計測してください。reference-replication をロードします。
ブリーフモード — ユーザーがビジネス、ターゲット層、または雰囲気を説明し、画像がない場合。構成はあなたが選びます。ハウスルールとセクションライブラリが品質の下限を設定します。
両方が存在する場合、リファレンスがカバーする部分はそれを優先し、ブリーフで残りのギャップを埋めます。どちらも明確でない場合は、質問してください。間違ったモードで構築されたランディングページは無駄になります。
ビルドに影響を与える項目のみ質問する
詮索しないでください。実際に出力を変更するのは以下の4項目です。
- スタック — HTML / React / Next / Astro。
templates/<stack>/からスキャフォールドします。 - ブランドの基本情報 — 名前、およびパレットまたは「リファレンスから取得」の指示。
- ロケール — 通貨、日付形式、イギリス英語とアメリカ英語のスペルを決定します。一度質問し、一貫性を保ちます。
- セクション — リファレンスも明確なページタイプもセクションを示唆しない場合のみ質問します。
その他すべては、説明可能なデフォルトがあります。それを使用し、仮定した内容を伝えてください。
ビルド順序
順序を間違えると手戻りが発生します。ヒーローの高さがファーストビューのすべてを制約し、デザイントークンがすべてのセクションを制約するからです。
- トークン — サーフェス、インク、線、アクセント、角丸、イージング、1つの流動的なタイプスケール。
references/design-system.mdを参照。 - ヒーロー — すべてのビルドで最も修正される要素。
100svh、リズムはvhで指定。references/house-rules.mdを参照。 - セクション（リファレンスの順序で）。
references/sections.mdを参照。 写真が必要なスロットは、今すぐ調達してください。グレーのボックスを残さないでください。 —../stock-imagery/SKILL.mdを参照。 - フッター、次に下記の仕上げシーケンス。
- 検証。省略不可 — 下記参照。
落とし穴
グリッド、マーキー、SVGアイコン、フルブリード画像のコードを書く前に references/traps.md を読んでください。そこには6つの静かな失敗が含まれています。CSSは有効、エラーなし、しかしどこか別の場所でレイアウトが壊れます。初回はそれぞれに何時間もかかりますが、リファレンスを開いていれば数分で解決します。
検証はビルドの一部です
実際の幅でスクリーンショットを撮っていないランディングページは、完成していません。バンドルされたハーネスを実行してください：
scripts/verify.sh <url> --sweep # 320→1920 のオーバーフロー + ヒーローフィット
scripts/verify.sh <url> --shot 390x844 # 単一のビューポート
これは、macOSの500pxウィンドウクランプ（すべてのモバイルスクリーンショットを静かに偽装する）を処理します。詳細と手動フォールバックは references/verification.md を参照してください。
3つのチェックをパスする必要があります：
- 水平オーバーフローなし 320から1920までのすべての幅で。
- ヒーローが1画面に収まる 390×844、414×896、1600×900で、または意図的に拡大されていること。
- 動きを減らす設定でも すべてのセクションがレンダリングされること。アニメーション途中の要素がないこと。
仕上げシーケンス
実際のビルドでは常に要求されます。これは「完了」の定義であり、あれば良いものではありません：
lenis-smooth-scrollpremium-mobile-menusocial-share-faviconsbuild-credit- ページについての
README.md— セクション、トークン、ブレークポイント、デプロイ手順。作成に使用したツールについてではありません。 .gitignore；コミットメッセージには、特に要求がない限りAI共著者行を入れない。- デプロイに関する注意（GitHub Pagesでは、パスが
_で始まる場合に.nojekyllが必要）。
ここで「プレミアム」が実際に意味すること
グラデーションやガラス効果ではありません。それは、ブレークポイントでジャンプせずに流動的にスケールするタイポグラフィ、transform と opacity のみに触れるモーション、配置されている軸に対して測定されたスペーシング、デッドバンドがないこと、そしてデスクトップから継承されるのではなく設計されたモバイルレイアウトです。これらのすべてはチェック可能であり、だからこそ基準となっています。
リファレンス
| ファイル | 読むタイミング |
|---|---|
references/house-rules.md | 常に — すべてのビルドで繰り返される修正事項 |
references/traps.md | グリッド、マーキー、SVGアイコン、フルブリード画像の前 |
references/design-system.md | トークンとタイプスケールの設定時 |
references/sections.md | ヒーロー、マーキー、アコーディオン、カードレール、フッターの構築時 |
references/verification.md | 検証時、またはスクリーンショットがおかしい場合 |
../reference-replication/SKILL.md | リファレンス画像またはURLが提供された場合 |
../stock-imagery/SKILL.md | ページに写真が必要で、提供されていない場合 |