Landing Page Skill
本スキルは エージェント非依存 です——Claude Code、Codex CLI、Cursor、Trae、OpenClaw、Hermes Agent、またはマークダウンベースのスキルをサポートする任意のエージェントで使用できます。 すべてのファイル参照は、本スキルのルートディレクトリからの相対パス で記述されています。
アクティベーション条件
ユーザーの入力に以下のトリガーワードのいずれかが含まれている場合にアクティベートされます：landing page、落地页、产品页、营销页、主页设计、single page website、着陆頁。
誠実な境界（適用条件）
適用：
- 単一ページのコンバージョン重視ランディングページ（リード収集、登録誘導、購入促進）
- 製品/サービス紹介ページ（SaaS、EC単品、コンサルティングサービス、コース）
- 技術スタックが Next.js 14/15 + Tailwind CSS（MVP 段階）
- 明確なコンバージョン目標（CTA）があるページ
非適用：
- 複数ページのWebサイトやブログシステム（単一ページの範囲を超える）
- バックエンドAPI、データベース、ユーザー認証が必要な完全なアプリケーション
- 複雑なインタラクション（リアルタイムコラボレーション、データ可視化ダッシュボード、ゲーム）
- 非Webプラットフォーム（ミニアプリ、ネイティブアプリ、デスクトップアプリケーション）
境界声明： 本スキルは高品質なスタートコードを生成しますが、コピーライティングの細部やブランドアセットの調整は手作業が必要です。「ワンクリック完璧」を保証するものではありません。
5 段階操作プロトコル
Phase 1: 要件収集
以下の情報をユーザーに順番に確認します（ユーザーが既に提供している場合はスキップ）：
- 製品/サービス：何ですか？ 中核的なバリュープロポジションは？
- ターゲットオーディエンス：誰が使いますか？ どんな課題がありますか？
- コンバージョン目標：ユーザーに何をしてほしいですか？（登録/購入/ダウンロード/予約）
- 技術スタック：Next.js 14/15 + Tailwind CSS を使用することを確認
- ブランドスタイルの好み：
references/aesthetic-styles.mdの 6 つのスタイルから選択 - 競合参考：好きなランディングページの参考例はありますか？（任意）
出力：要件サマリードキュメント（Markdown リスト）、Phase 2 で使用。
Phase 2: 戦略計画
- 業界テンプレートのロード：製品タイプに応じて
references/page-templates/からテンプレートを選択：- SaaS 製品 →
references/page-templates/saas-product.md - EC単品 →
references/page-templates/ecommerce.md - その他 → 共通構造（Hero → Features → Benefits → Social Proof → CTA → Footer）
- SaaS 製品 →
- 美学方向の選択：
references/aesthetic-styles.mdからスタイルを選択し、配色の方向性を確認 - コピー構造：
references/copy-formulas/を使用して計画：- Hero タイトル：
references/copy-formulas/hero-headlines.mdの「結果 + オーディエンス + メカニズム」の公式 - CTA コピー：
references/copy-formulas/cta-patterns.mdの「動詞 + 利益」の形式 - 異議処理：
references/copy-formulas/objection-handling.mdの 5 つの異議テンプレート
- Hero タイトル：
- コンバージョンフレームワークのマッピング：7 段階のコピーを DESIGNNAS 11 要素にマッピング（
references/conversion-framework.md参照）
出力：戦略ドキュメント（スタイル選択、配色方向、コピーアウトライン、要素マッピングテーブルを含む）。
Phase 3: デザインシステム
references/design-system.md に基づいてデザイントークンを生成：
- Typography Token：Display フォント、Body フォント、heading のフォントサイズ段階
- Color Token：Primary / Secondary / Accent / Neutral / Background / Text（hex + CSS 変数）
- Motion Token：PageLoad アニメーション、Scroll トリガーアニメーション、Hover インタラクション（タイプ + 持続時間）
- Layout Token：Grid タイプ、Spacing 段階、Section 幅、非対称レイアウトルール
出力：デザイントークンドキュメント（tailwind.config.ts に直接コピー可能）。
Phase 4: コード生成
references/tech-adapters/nextjs-tailwind.md に従ってコードを生成：
- プロジェクト構造：app/page.tsx、app/layout.tsx、components/、lib/utils.ts、tailwind.config.ts
- コンポーネント化：各 DESIGNNAS 要素を独立したコンポーネント（HeroSection、FeaturesSection など）
- Tailwind 設定：デザインシステムトークンを拡張（colors、fonts、animations）
- レスポンシブ：sm:/md:/lg:/xl: ブレークポイントを使用
- アクセシビリティ：セマンティックHTML、alt テキスト、コントラスト、focus-visible
出力：完全に実行可能な Next.js プロジェクトコード。
Phase 5: 品質検証（クローズドループ保証）
5.1 コンバージョンチェック
- 11 要素カバレッジ：Hero、Social Proof、Features、Benefits、How It Works、Testimonials、Pricing/CTA、FAQ、Scarcity、Footer が含まれているか確認（最低 7 つ以上カバー）
- CTA の明確さ：CTA テキストが「動詞 + 利益」の形式か
- Hero タイトル：「結果 + オーディエンス + メカニズム」の公式に従っているか
5.2 アンチパターン検出（項目ごとにチェック、詳細は references/anti-patterns.md 参照）
| # | ルール | 検出ロジック | 重大度 |
|---|---|---|---|
| 1 | 過剰なフォント | Display フォントに Inter/Roboto/Arial を使用 | ブロッキング |
| 2 | テンプレート化された配色 | 紫色のグラデーション + 白背景のテンプレート組み合わせ | ブロッキング |
| 3 | CTA があいまい | CTA が Submit/Learn More/Click Here | ブロッキング |
| 4 | 社会的証明の欠如 | Hero の下に Social Proof 要素がない | ブロッキング |
| 5 | Hero タイトルが弱い | Welcome/ブランド名で始まり、単なる説明 | ブロッキング |
| 6 | モバイル対応の欠如 | sm:/md:/lg: レスポンシブブレークポイントがない | 警告 |
| 7 | アクセシビリティのベースライン | alt/aria/セマンティックHTML がない | 警告 |
| 8 | SEO の基本の欠如 | meta/title/OG タグがない | 警告 |
| 9 | パフォーマンスリスク | 大きな画像が最適化されていない、lazy load がない | 警告 |
| 10 | Token の一貫性 | ハードコードされた色/標準外のスペーシング | 警告 |
5.3 自動修復ループ（ブロッキングルール）
ブロッキングルール（1-5）が不合格の場合、自動で修復ループを実行：
- 不合格となった各ブロッキングルールに対して、具体的な修復コードを生成
- ルールをトリガーするセクションのコードのみを置き換える（関係のないセクションは変更しない）
- そのルールの検出を再実行
- 上記の手順を繰り返し、最大 3 回
- 3 回後も不合格 → 失敗理由を報告し、ユーザーの判断に委ねる
5.4 ポジティブパターン検証（推奨、詳細は references/positive-patterns.md 参照）
| # | パターン | 検出ロジック |
|---|---|---|
| P1 | CTA 動詞+利益 | CTA テキストが「動詞 + 具体的な利益」の形式に一致 |
| P2 | Hero 結果+オーディエンス | タイトルに定量化可能な結果 + ターゲットオーディエンスが含まれる |
| P3 | 社会的証明要素 | ページに 1 つ以上の社会的証明タイプが含まれる |
| P4 | 緊迫感/希少性 | 枠/時間/価格の緊迫感要素が存在する |
ポジティブパターンは自動修復をトリガーせず、レポートで最適化の提案のみを提供します。
出力：検出レポート（アンチパターン + ポジティブパターンの Markdown テーブル）+ 自動修復サマリー（修復があった場合）。
Phase 5.5: 反復最適化（任意）
Phase 5 完了後、ユーザーに 3 つのオプションを提供：
A) 受け入れ — 最終的な完全なプロジェクトコードを出力 B) 指定セクションの修正 — ユーザーが修正するセクションと修正要件を説明 C) 指定セクションの再生成 — ユーザーが指定したセクションを最初から再生成
反復ルール：
- 修正/再生成はユーザーが指定したセクションのみに影響する（セクション粒度）
- 修正ごとに、そのセクションに関連するアンチパターンルールを再検出
- 最大 3 回の反復、超過後は現在のバージョンを出力
- 各ラウンドで変更ログを出力：「Round N: Modified [Sections], Re-checked [Rules]」
索引
技術スタックアダプタ
- Next.js 14/15 + Tailwind CSS →
references/tech-adapters/nextjs-tailwind.md
業界テンプレート
- SaaS 製品ページ →
references/page-templates/saas-product.md - EC 製品ページ →
references/page-templates/ecommerce.md
コピーライティング公式ライブラリ
- Hero タイトル →
references/copy-formulas/hero-headlines.md - CTA パターン →
references/copy-formulas/cta-patterns.md - 異議処理 →
references/copy-formulas/objection-handling.md
デザイン参考
- コンバージョンフレームワーク →
references/conversion-framework.md - デザインシステム →
references/design-system.md - 美学スタイル →
references/aesthetic-styles.md - アンチパターン検出 →
references/anti-patterns.md - ポジティブパターン検出 →
references/positive-patterns.md
クロスエージェント環境適応の説明
本スキルは エージェント非依存 であり、以下のランタイムと互換性があります：
| ランタイム | サポート方法 | 備考 |
|---|---|---|
| Claude Code | ネイティブサポート | 推奨、/agent またはトリガーワードでアクティベート |
| Codex CLI | 互換 | SKILL.md を直接ロード |
| Cursor | 互換 | .cursorrules にコピーするか Composer を使用 |
| Trae | 互換 | SKILL.md を直接ロード |
| OpenClaw | 互換 | skills.sh プロトコルに従う |
| Hermes Agent | 互換 | SKILL.md を直接ロード |
| その他のマークダウンベースのスキルランタイム | 互換 | YAML frontmatter + Markdown をサポートする任意のランタイム |
パス仕様
すべてのファイル参照は、本スキルのルートディレクトリからの相対パス を使用します：
references/xxx.mdassets/xxx.svgscripts/xxx.py
エージェントまたはユーザーは、自身のインストール場所に基づいて解釈し、絶対パスには依存しません。
自己完結の原則
SKILL.md には必要な情報がすべて含まれており、直接コピーして使用できます。references/ 内のファイルは深い知識の補足であり、必要に応じてロードしてください。
本スキルは Agent Skills オープンプロトコルに従います。