ランディングページ
このスキルは、見た目が良いだけでなく、コンバージョンを生むランディングページを構築します。実証済みのセクション構成と実際のコピー、そしてプロダクション対応のコードを組み合わせます。
たとえ話：ランディングページは決して眠らないセールスマンです。優れたセールスマンは順序を守ります——注意を引き、痛みを特定し、解決策を示し、効果を証明し、販売を依頼する。以下のセクション構成は、まさにそのスクリプトです。
ワークフロー
ステップ1 — 最大3つの質問をする（それ以上はしない）
- 何を売っていますか？（プロダクト、サービス、SaaS、コンサルティング）
- 理想の顧客は誰ですか？（具体的なペルソナ）
- 訪問者に取ってもらいたい単一のメインアクションは何ですか？（購入、通話予約、サインアップ、ウェイトリスト参加）
メッセージにこれらの答えがすでに含まれている場合は、スキップします。
ステップ2 — セクション構成を構築する（実証済みの心理的順序）
- ヒーロー — 明確なバリュープロポジション + プライマリCTA。訪問者は5秒以内にこれが何であり、なぜ重要かを理解する必要があります。
- 問題 — 顧客の痛みをあおり、解決しないことによるコストを感じさせます。
- 解決策 — 製品/サービスがその痛みをどのように解決するか。
- 機能 — 3〜6個の主要項目を仕様ではなくメリットとして記述（「Xフレームワークで構築」ではなく「週末に出荷可能」）。
- 社会的証明 — お客様の声、ロゴ、数字、実績。
- 価格 — 該当する場合。明確なティア、1つはハイライト表示。
- FAQ — 販売を妨げる最大の反論を事前に排除します。
- 最終CTA — 価値を再確認し、メインアクションを繰り返します。
ステップ3 — 視覚システムのためにui-designを起動する
コンポーネントを書く前に、ui-designスキルにデザインシステム（スタイル、パレット、タイポグラフィ、スペーシング、ダークモード）を生成させるために引き継ぎます。ここで視覚的な選択を独自に発明しないでください。
委任： デザインシステム自体は利用可能性に応じて調達されます。ui-ux-pro-maxがインストールされていれば、それにシステムを生成させます（オプションでtaste-skillが洗練します）。どちらもインストールされていない場合は、ui-designに組み込まれた原則にフォールバックします。ランディングページはどちらの場合でも機能します。オリジナルがあればより洗練されるだけです。不足している依存関係があっても処理をブロックしないでください。
ステップ4 — コードだけでなく、コピーも生成する
このスキルは、すべてのセクションのベースコピー（見出し、サブヘッド、本文、CTAラベル）を、オファーとペルソナに合わせて作成します。コピーのないコードは、ランディングページの半分にすぎません。
ステップ5 — スタックとオプションのアドオン
デフォルトスタック：React + Vite + Tailwind。ビルド前に、ページに以下が必要かどうかを尋ねます。
- アニメーション → Framer Motion
- フォーム → React Hook Form
- 分析 → どのプロバイダーか（例：Plausible、GA、PostHog）
ユーザーが希望する場合のみ追加し、デフォルトで肥大化させないでください。
ステップ6 — 出力
プロトタイプではなく、すぐに使えるコンポーネントを提供します。各セクションは、デザイントークンに結びつけられ、生成されたコピーが配置され、関連する箇所（例：フォーム）では空状態、ローディング状態、エラー状態が処理された実際のコンポーネントとして出力されます。