Aston1690/ランディングページスキル

ランディングページビルダー

プロンプト、ワイヤーフレーム、ムードボード、または部分的なサンプルではなく、完成したページを構築します。実際のブラウザQAに裏打ちされた動作するコードを提供します。プレミアム品質とは、ブランド固有の意思決定、優れたタイポグラフィ/構成/イメージ、コンバージョンの明瞭さ、レスポンシブな職人技、目的を持ったモーション、アクセシビリティ、パフォーマンス、そして事実の整合性を意味します。

呼び出し時に、上記の metadata.version を読み取り、プロジェクトブリーフに landing-page v<バージョン> を記録します。完了レポートにもその正確なバージョンを記載し、生成されたすべてのランディングページがそれを生成したスキルリリースにトレース可能であることを保証します。

ハードアウトプット契約

以下を提供します：

• 新しいプロジェクト、または明示的に承認された既存プロジェクトへの完全なレスポンシブ実装。
• ユーザーが提供したコピーを一字一句そのまま保存。ユーザーが明示的に要求した場合を除き、コピーの作成、編集、再構成は行いません。
• 動作するブランドシステム、アセットマニフェスト/出典注釈、統合ノート。
• 画像生成または承認されたアセットが利用可能な場合、プレースホルダーではなく本番品質の画像。
• 完全ビルドではデフォルトで、目的を持ったGSAPアニメーション、スクロールトリガーによるセクションの動き、コントロールのマイクロインタラクション。ただし、文書化されたモード例外に従います。
• SEO/OGメタデータ、セマンティック構造、アクセシビリティ状態、最適化されたメディア。
• ブラウザでテストされたユーザービューポート、ブレークポイント境界、タブレット、狭いモバイル、および一般的なモバイル状態。
• デフォルトでVercelデプロイ、続いてライブでのデスクトップ/モバイル確認。認証やその他の実際の障害によってデプロイが妨げられる場合にのみ質問します。

主張、指標、資格情報、推薦文、顧客ロゴ、規制対象の表現、製品、スクリーンショット、連絡先詳細、またはフォームの成功を決して捏造してはなりません。

必要なスキルルーティング

構築前に以下をロードします：

1. frontend-design：ブランド固有のアートディレクションとビジュアルテーゼ。
2. design-taste-frontend：アンチスロップ実装とレスポンシブ事前チェック。
3. imagegen-frontend-web：権威モードマトリックスが次の理由で解決する場合のみ：ビジュアルの曖昧さ、画像主導の方向性、要求されたコンセプト、または承認されたアセットの不足。
4. この landing-page スキル：オーケストレーション、構築、QA、デリバリー。
5. 利用可能な本番画像生成機能、または media-use：公式/提供されたアセットインベントリが承認されたビジュアルディレクションをサポートできない場合。
6. imagegen-frontend-mobile：明確にラベル付けされたコンセプトアプリ画面メディア、またはモバイルアプリマーケティングページ上の承認された製品画面コンセプトにのみ使用します。レスポンシブモバイルWebをデザインしたり、生成された画面が検証済みの製品機能であることを示唆したりするために使用しないでください。

スタック競合ルールについては references/frontend-skill-stack.md を参照してください。

プロジェクトモード決定

references/policy-matrix.md を読んでください。これは、画像生成、GSAP、保存、承認、統合の安全性、ビューポートカバレッジ、品質ゲートルーティングに関する単一の権威ある情報源です。その6つのモードから正確に1つを選択し、決定事項とその根拠を記録します。他の場所の散文はマトリックスを上書きできません。

ユーザーが「スクラッチから」または「以前のビルドに触れないで」と言った場合、一意の名前のプロジェクトを作成し、以前の作業を決して編集しないでください。

フェーズ1：呼び出し情報収集

一度に1つの短い質問をします。複数のフィールドを段落やアンケートにまとめないでください。次の本当に必要な質問をする前に、回答を待ちます。

この順序を使用し、すでに提供されているか安全に推測できるものはスキップします：

1. これはどの会社/製品、公式ウェブサイト向けですか？
2. ユーザー承認済みのコピーはどこにありますか？コピーは必須であり、正確に保存されます。
3. ブランドガイド、ロゴ、承認済みアセット（存在する場合）はどこにありますか？
4. これは新しい個別のビルドですか、それとも既存プロジェクトの編集ですか？
5. 提供されたサイト/コピーが答えず、実装を実質的にブロックする場合にのみ、オーディエンス、CTA宛先、統合、またはコンプライアンスについて質問します。

コピーを書き換えられるかどうか質問しないでください。コピーを作成または変更することを提案しないでください。作成、編集、再構成は、明示的なユーザー要求によってのみ有効になります。デプロイするかどうか質問しないでください。Vercelデプロイがデフォルトです。

references/intake-brand-assets.md を読み、そのソース階層、ロゴ復元、ブランドガイドフォールバック、コンプライアンス、統合、出典ルールに従ってください。

フェーズ2：証拠とブランド監査

情報収集後：

1. プロジェクトの指示、承認されたブリーフ/コンテンツ、事前承認、提供されたリファレンスを読みます。
2. 公式ウェブサイトが存在する場合は実際のブラウザで開きます。それ以外の場合は、新しいブランド/サイトなしの状態を記録し、提供されたコンテキストから続行します。
3. 計算されたフォント/色、ロゴバリエーション、スペーシング、グリッド、半径、ボタン、アイコン、画像、ナビゲーション、フォーム、フッター、レスポンシブ動作、モーションを抽出します。
4. 公式のSVGまたは透明な高解像度PNGロゴを復元し、視覚的に確認します。既存のロゴがない場合は、ユーザーに尋ねます。ロゴが存在しない場合は、プレーンテキストの製品名処理が許容されるかどうかを確認し、ロゴデザインは範囲外であることを記録します。クライアントのロゴを再描画または生成しないでください。
5. ドキュメントのテキストと画像を一緒に抽出し、画像とコピーの関係を維持します。
6. 検証済みのアセットマニフェストを作成します。
7. ブランドガイドが存在しない場合は、コンパクトなエージェント作成のプロジェクトガイドを作成し、正直にラベル付けします。

規制/信頼に敏感な作業の場合、編集が明示的に許可されていない限り、提供された免責事項、ライセンス、賞の文言、適格性、同意、資格情報を保存します。

フェーズ3：コンテンツとコンバージョンアーキテクチャ

デザインの前にコンテンツマニフェストを作成します：

• 各セクションのソースに基づく見出し/本文/CTA/主張。
• セクションの役割：惹きつける、説明する、証明する、差別化する、答える、またはコンバージョンさせる。
• 証拠ソースまたは未解決のプレースホルダー。
• 意図されたビジュアル/メディアとアセットステータス。
• 主要なコンバージョンパスとCTA宛先。
• 事実に基づく主張、推薦文、指標、資格情報、規制対象の表現について、approval_status と verification_status を別々に追跡します。

デフォルトのコンテンツポリシーは、ユーザー提供のコピーを正確に保存することです。authorized_editing または agent_draft_unapproved は、ユーザーが明示的に編集または作成を要求した場合にのみ選択できます。エージェントドラフトは未承認のままであり、根拠のない主張を含めることはできません。

実際のコンバージョン上の質問に答えるセクションのみを使用します。ヒーロー + 信頼 + 3枚のカード + 推薦文 + FAQ を機械的に含めないでください。セクションごとに1つの主要なアイデア。変更が承認されていない限り、既存プロジェクトの承認された情報アーキテクチャを保存します。

フェーズ4：デザインブリーフと画像生成

コード前のブリーフを作成します：

• オーディエンス、コンバージョン目標、信頼できる情報源、プロジェクトモード。
• 1つの主題固有のビジュアルテーゼとナラティブの核。
• パレット、タイポグラフィの役割、グリッド/スペーシング、形状/コンポーネントの文法。
• 画像グレード、アセットマップ、画像生成計画、特徴的な要素。
• デスクトップ/タブレット/モバイルのファーストフォールドと複雑なセクションの動作。
• 各シーケンスに目的のあるモーションストーリーボード。
• 明示的な回避リストと合格基準。

無関係なブランドに変更せずに再利用できる方向性は拒否します。

ポリシーマトリックスが画像生成をオンに解決した場合、references/imagegen-production.md を読みます：

1. imagegen-frontend-web を使用し、選択したリファレンス数をアナウンスします。
2. 選択したすべてのセクションに対して、1つの独立した水平リファレンスを生成し検査します。
3. 構成と密度を変えながら、1つのブランド世界を維持します。
4. ユーザーチェックポイント（要求された/結果として生じるトレードオフ）またはエージェント受け入れゲート（自律的、可逆的、ソースに基づく）のいずれかを通じて方向性を確定します。どちらの承認モードが使用されたかを記録します。
5. テキスト、ロゴ、主張、透かしを焼き付けずに、実際のアスペクト比で本番アセットを個別に生成/解決します。ポリシーでルーティングされ、明確にラベル付けされたコンセプトアプリ画面の場合を除き、UIは除外されます。
6. 検査、クロップ、最適化、altテキストの追加、出典の記録を行います。

画像は、割当数ではなく、ナラティブの有用性、目に見える繰り返し、ブランド特異性、アセット品質で判断します。意図的にタイポグラフィ主導またはアセット豊富なページは、記録された理由とともに生成をスキップする場合があります。偶然テキストが多い、またはストック画像のようなページは不合格です。

フェーズ5：静的実装と承認

ブリーフを満たす最もシンプルなスタックを選択します：

• 既存のリポジトリのフレームワーク、スタイリング、ルーティング、コンポーネント、アナリティクス、アセットパイプラインを保存します。
• 本当に静的なページには、セマンティックHTML、外部CSS、外部JSを使用します。
• 既存のアーキテクチャ、再利用可能なコンポーネント、統合、状態、または複雑なインタラクションがそれを正当化する場合にのみ、React/Vite/Nextを使用します。
• インポートする前に依存関係を確認します。

モーションの前に静的なページを完成させます。すでに以下が必要です：

• 正しいコピー、確認済みのロゴ/アセット、実際のCTA宛先。
• 一貫性のあるトークンとコンポーネントの文法。
• ユーザーのビューポートで制御されたタイポグラフィと改行。
• 目に見える繰り返しを避けるのに十分な構成の多様性（数値的なレイアウト割当なし）。
• 意図的な画像のトリミングと予約された寸法。
• 動作するナビゲーション、フォーム/リンク、フォーカスとインタラクション状態。
• 偶然のスタッキングではなく、意図的なレスポンシブリフロー。
• 壊れたメディア、オーバーフロー、クリッピング、偽のUI、プレースホルダー、ソースの残骸がないこと。

GSAPを開始する前に、スクリーンショットQAを実行し、静的な構成を修正します。

フェーズ6：GSAPプロダクションパス

すべての完全ビルドと実質的なリニューアルについては、references/gsap-motion.md を読みます。ブリーフでモーションを計画し、静的な構成QAの後に実装します。

モーションは、ポリシーマトリックスの下での完全ビルドではデフォルトでオンです。ヒーローのコレオグラフィ、コンテンツ固有のセクションの動き、既存のインタラクティブコントロールへのフィードバックを提供します。強度をブランドに適応させます。有効な静的/ランタイム/保存制約がこれを変更する場合があります。明示的なアニメーションリクエストがないことはスキップする理由にはなりません。ランタイム観測結果を QA/motion-review.md に記録します。スクリーンショットだけではモーション受け入れを通過できません。

スクリプトが失敗したり読み込みが遅い場合に備えて、重要なコンテンツを表示したままにします。生のウィンドウスクロールリスナーを使用しないでください。アクティブタブのアニメーションを確認します。バックグラウンドタブはタイマーを抑制するためです。

フェーズ7：ブラウザQA

ページをローカルで実行し、実際のスクリーンショットと状態を検査します：

• ユーザーの実際のビューポート、すべてのレイアウトブレークポイント境界、1つのタブレット、1つの狭いモバイル、1つの一般的なモバイル。375px/390pxは普遍的な要件ではなくデフォルトです。
• ファーストフォールド、複数の中間セクション、最終CTA/フッター。
• アクティブおよび静止状態のモーション、およびモーション削減設定。
• メニュー、アンカー、フォーム、アコーディオン、タブ、カルーセル、キーボード操作。
• タイポグラフィが重要な場合の計算されたフォントファミリー/ウェイト。
• 画像の読み込み/自然な寸法、トリミング、altテキスト。
• 水平方向のオーバーフロー、クリッピング、コンソール/ネットワークエラー、CLSリスク。
• フォーム/CTAの宛先と成功/エラー動作。サンドボックス/テストエンドポイントと合成データを使用します。明示的な承認なしに、ライブのリード、CRMレコード、支払い、メール、アナリティクスイベントを送信しないでください。

ハンドオフ前に欠陥を修正します。ビルドが通ることはデザインQAではありません。

フェーズ8：プレミアム品質ゲート

references/premium-quality-gate.md を読み、証拠に基づいてスコアリングします：

1. ブランド特異性
2. コンバージョンとナラティブ
3. タイポグラフィ
4. 構成とスペーシング
5. イメージとアートディレクション
6. コンポーネントの職人技
7. レスポンシブデザイン
8. モーション
9. アクセシビリティと整合性
10. パフォーマンスとプロダクション readiness

バイナリのクリティカルチェックと、証拠に基づく0/5/8/10のアンカーを使用します。該当するカテゴリは8/10未満であってはなりません。目標は全体で9+です。N/A は、書面による理由（意図的に静的なページでのモーションを含む）がある場合のみ許可されます。すべてのスコアについて、スクリーンショット、DOM、監査、またはテストの証拠を引用します。いずれかのクリティカルな拒否基準は、平均とは無関係にページを不合格にします。最も弱い該当カテゴリを修正し、証拠を再実行し、再スコアリングします。

ユーザーが作品を基本的、汎用的、または悪いと呼んだ場合、現在のアートディレクションを無効にします。微調整を停止し、体系的な原因を特定し、テーゼ/リファレンス/ファーストフォールドをリセットし、再構築し、再QAします。

フェーズ9：SEO、パフォーマンス、デプロイ

デリバリー前：

• 1つのH1、論理的な見出し構造、タイトル、説明、カノニカル、OGメタデータ、ファビコン。
• レスポンシブで最適化された画像、適切な場合はヒーローの優先/プリロード、ファーストビュー以下のメディアは遅延読み込み。
• 最大2つの正当化されたフォントファミリーと必要なウェイトのみ。
• セマンティック要素、ラベル、altテキスト、コントラスト、フォーカス、キーボード、モーション削減のサポート。
• 偽の統合、未確認の主張、コンソールエラー、壊れたリンク、未解決のシークレットがないこと。
• コピー/アセット/ロゴ/画像生成/統合の出典に関するソースノート。

完成したすべてのランディングページを、プロジェクトの既存のVercel設定または分離された新しいプロジェクト名を使用して、デフォルトでVercelにデプロイします。認証、所有権、シークレット、またはその他の実際の障害によってデプロイが妨げられる場合は、その障害についてのみ質問します。ライブのエイリアスを実際のブラウザでデスクトップとモバイルの両方で確認します。タイトル/コンテンツマーカー、アセット、ナビゲーション、フォーム、オーバーフロー、コンソール、モーション、エイリアスの所有権をチェックします。CLIの成功やHTTP 200だけでは証明になりません。

アンチスロップ拒否リスト

以下を拒否します：

• 汎用的な紫/青のAIグラデーション、ブロブ、無意味なガラスカード、浮遊する3Dフィラー。
• 無関係なストックの握手、偽のダッシュボード、捏造されたチャート/KPI、偽のソーシャルプルーフ。
• ブランド上の理由なく、大きすぎる、または凝縮された見出し、小さな本文、不格好な改行。
• 同一の3カード行、繰り返されるレイアウトファミリー、過剰なピル/半径/シャドウ。
• 「革命」、「解き放つ」、「次世代」、「シームレス」などのコピー、または曖昧なCTAラベル。
• 本番画像内に生成された単語/ロゴ/UI。
• デスクトップを単に縦に積み重ねただけのモバイル。
• 弱い静的なデザインを隠すために使用されるアニメーション。
• 唯一の役割がスペースを埋めることである装飾要素。

確認済みのブランドアセット、主題固有の画像、制御されたタイポグラフィ、多様だが一貫性のある構成、1つの記憶に残る特徴、目的のあるネガティブスペース、明確な証拠、および1つの決定的なコンバージョンパスを優先します。

リファレンスマップ

必要なもの	読むもの
権威あるプロジェクトモードルーティング	references/policy-matrix.md
情報収集、サイト/ブランド/ロゴ/コンテンツ/アセット/統合	references/intake-brand-assets.md
フロントエンドスタックルーティング/競合	references/frontend-skill-stack.md
画像生成ワークフロー	references/imagegen-production.md
GSAPモーション標準	references/gsap-motion.md
品質ゲートスコアリング	references/premium-quality-gate.md

バージョン追跡

このスキルのバージョンは、プロジェクトブリーフと完了レポートの両方に記録されます。常に metadata.version を確認して、正確なバージョン文字列を取得し、それを landing-page v<バージョン> として記録します。