スタートアップランディングスキル
カテゴリー: SaaS / スタートアップ 高コンバージョンのシングルページスタートアップランディングページを生成: ヒーロー、機能、ソーシャルプルーフ、料金、CTA。30秒で価値を伝え、メールアドレスを取得することを目的としています。
メタデータ
名前: startup-landing 説明: シングルページスタートアップランディングページ: ヒーロー、機能、ソーシャルプルーフ、料金、CTA。 トリガーキーワード: "スタートアップランディング", "マーケティングページ", "製品ローンチ", "SaaSランディング", "ランディングページ"
入力とパラメータ
| パラメータ | 型 | 必須 | デフォルト |
|---|---|---|---|
product_name | string | ✓ | — |
tagline | string | ✓ | — |
description | string | ✓ | — |
has_pricing | boolean | ✓ | true |
has_testimonials | boolean | — | true |
proof_count | integer | — | 4 |
pricing_tiers | array | — | [3つのデフォルト階層] |
primary_color | string | — | DESIGN.md アクセントカラー |
料金階層:
{ name: string; price: string; period: string; features: string[]; cta: string; highlighted?: boolean }
必須セクション（順序通り）
- ナビゲーション — ロゴ + ナビゲーションリンク + 「始める」CTAボタン
- ヒーロー — 製品名、タグライン、説明、2つのCTA（プライマリ: 「無料で始める」、セカンダリ: 「デモを見る」）、オプションで製品スクリーンショット/モックアップ
- ソーシャルプルーフストリップ — ロゴ行（グレースケール、最大6つ）
- 機能 — 3列グリッド、アイコン + タイトル + 説明
- 使い方 — 番号付きステップによる3ステップ水平フロー
- 料金 — 3つの階層カード（スターター / プロ / エンタープライズ）
- お客様の声 — 名前、役職、会社、アバター付きの2～3つの引用
- CTAバンド — ダークセクション: 見出し + メール入力 + ボタン
- フッター — リンク + 著作権表記
デザインルール
- モバイルファーストレスポンシブ
- すべてのCTAは機能するhrefまたはフォームアクションを持つこと
- 料金カード: ハイライトされたカードは異なるボーダーとシャドウを持つ
- お客様の声のアバター: 一貫性のあるプレースホルダーとして
https://i.pravatar.cc/60?img=[n]を使用 - 外部JSなし
- すべてのCSSは
<style>ブロック内にインライン - 独自の色は使用不可 — DESIGN.mdのトークンのみ使用
出力
単一ファイル: index.html（自己完結型）
自己チェック
- どこにもlorem ipsumがないこと
- 少なくとも4つの機能がリストされていること
- 料金階層の高さが一貫していること
- すべてのCTAが明確にラベル付けされスタイル設定されていること
- モバイル: シングルカラムに折りたたまれること
- CTAバンドのメール入力に
type="email"とrequiredがあること