landing-page-vercel

ランディングページ（Vercel）

以下を含む静的なランディングページを作成します。

契約

入力：

• 製品名、タグライン、対象ユーザー、オファー、CTA
• 出力先ディレクトリ
• フォームプロバイダーとアナリティクスの設定

出力：

• 静的なランディングページのファイル
• フォーム／アナリティクスの設定メモ
• デプロイ手順

作成／変更するもの：

• ローカルのランディングページファイルと Vercel の設定
• 明示的に依頼されない限り、本番環境にはデプロイしません

外部への副作用：

• 足場作成中はありません
• 明示的なデプロイ依頼があった場合に限り、Vercel にデプロイすることがあります

確認が必要な操作：

• 外部のフォーム／アナリティクス識別子を使用する前
• Vercel のデプロイコマンドを実行する前
• 既存のランディングページディレクトリを上書きする前

委任先：

• 完全な Shipshit.dev 製品リポジトリには project-init-orchestrator ／ npx @shipshitdev/v0

• カスタムのビジュアルデザインには frontend-design

• デプロイには deployment-composer または deploy-app

• 構成： セマンティック HTML5 + モダン CSS + Vanilla JS

• フォーム： 動作するメールアドレス登録フォーム（Formspree またはカスタムエンドポイント）

• アナリティクス： Plausible／Fathom をすぐに利用できる状態

• デザイン： レスポンシブ、アクセシブル、高パフォーマンス

• デプロイ： ワンクリックで Vercel にデプロイ

このスキルの特徴

このスキルが生成するのは、空のテンプレートではなく、実際に動作するランディングページです。

• 実際に送信できるメールアドレス登録フォーム
• 有効化する準備が整ったアナリティクス連携
• モバイルでテスト済みのレスポンシブデザイン
• アクセシビリティの基本要件（WCAG 2.1 AA）
• PRD ブリーフに基づくコンテンツ

---

ワークフロー

フェーズ 1：PRD ブリーフの確認

ユーザーに製品の詳細を尋ね、製品名、タグライン、ヒーローの見出し／サブ見出し／CTA、説明付きの機能 3～5 件、CTA の種類（ウェイトリスト／サインアップ／デモ依頼／お問い合わせ）、ソーシャルプルーフの希望（お客様の声／ロゴ／統計／なし）を抽出して確認します。確認メッセージの形式については、references/full-guide.md（§ PRD Brief Intake Template）を参照してください。

フェーズ 2：コンテンツの生成

次のセクションを含む、ランディングページの完全なコンテンツを生成します。

1. ヒーロー - 見出し、サブ見出し、CTA ボタン、任意のヒーロー画像
2. 機能 - アイコン付きの機能カード 3～5 件
3. 仕組み - 3 ステップのプロセス（任意）
4. ソーシャルプルーフ - お客様の声またはロゴ（任意）
5. FAQ - よくある質問 4～6 件（任意）
6. CTA - フォーム付きの最後の行動喚起
7. フッター - リンク、著作権表記、ソーシャルアイコン

フェーズ 3：フォーム連携

メールアドレスの登録方法を選択します。

1. Formspree（推奨 - 無料プランあり） - バックエンド不要、すぐに設定可能、メール通知あり
2. カスタムエンドポイント - 独自の API を使用、完全に制御可能、バックエンドが必要
3. ウェイトリストサービス - Waitlist.email、Loops.so、ConvertKit

フェーズ 4：品質確認

引き渡し前に次の項目を確認します。

• HTML が検証に合格する（W3C）
• モバイルでレスポンシブに表示される
• フォームが正常に送信される
• アナリティクスのプレースホルダーが存在する
• Lighthouse スコアが 90 以上

---

使用方法

# Create landing page with PRD
python3 scripts/scaffold.py \
  --out ./my-landing-page \
  --name "ProductName" \
  --tagline "Your compelling value proposition" \
  --features "Feature1,Feature2,Feature3"

# Interactive mode
python3 scripts/scaffold.py --out ./my-landing-page --interactive

index.html、styles.css、script.js、data.json、vercel.json、および assets/ ディレクトリを生成します。完全なファイルツリーについては、references/full-guide.md（§ Generated Structure）を参照してください。

---

主なパターン

フォーム送信では、フォームの action URL に対する fetch を使い、読み込み中／成功／エラーの各状態を処理します。コンテンツは data.json（ヒーロー、機能、FAQ）に置くため、コピーを編集してもマークアップを変更する必要はありません。完全な実装については、references/full-guide.md（§ Form Handling (JavaScript)、§ Data Structure (data.json)）を参照してください。

---

フォーム連携ガイド

Formspree（推奨）： formspree.io で無料アカウントを作成し、フォームを作成して、HTML 内の YOUR_FORM_ID を生成されたフォーム ID に置き換えます。

カスタムエンドポイント： { email } を JSON としてセルフホストの API に POST し、レスポンスを処理します。完全なコードスニペットについては、references/full-guide.md（§ Option 2: Custom Endpoint）を参照してください。

---

アナリティクスの設定

ページの head にスクリプトタグを 1 つ追加します。プライバシーに配慮したアナリティクスには Plausible（data-domain + plausible.io/js/script.js）、または Fathom（cdn.usefathom.com/script.js + data-site）を使用します。両方のタグについては、references/full-guide.md（§ Analytics Setup）を参照してください。

---

デプロイ

cd my-landing-page
bunx vercel          # Deploy (no global install needed)
bunx vercel --prod   # Production deploy

vercel.json は、すべての静的アセットを @vercel/static 経由でマッピングし、すべてのリクエストを index.html にルーティングして、基本的なセキュリティヘッダー（X-Content-Type-Options、X-Frame-Options、X-XSS-Protection）を設定します。設定の全容については、references/full-guide.md（§ Vercel Configuration (vercel.json)）を参照してください。

---

CSS 変数

テーマトークン（--color-primary、--color-bg、--font-sans、--spacing-*、--max-width）がスタイルシート全体を制御します。 :root ブロックの全容については、references/full-guide.md（§ CSS Variables）を参照してください。

---

アクセシビリティチェックリスト

• セマンティックな HTML 構造
• 適切な見出し階層（h1 → h2 → h3）
• 画像の代替テキスト
• インタラクティブな要素のフォーカス状態
• 色のコントラスト比は最低 4.5:1
• フォームのラベルとエラーメッセージ
• キーボード操作用のスキップリンク
• レスポンシブなテキストサイズ（本文テキストに固定 px を使用しない）

---

パフォーマンスチェックリスト

• 外部 CSS フレームワークを使用しない
• JavaScript を最小限にする
• 画像を最適化する（WebP とフォールバック）
• システムフォントを使用する（Web フォントの読み込みなし）
• ファーストビューより下の画像を遅延読み込みする
• 外部リソースに対して事前接続する

---

参考資料

• scripts/scaffold.py - 生成スクリプト（テンプレートはインライン）
• references/full-guide.md - PRD テンプレート全文、生成されるファイルツリー、フォーム／分析／デプロイ設定のダンプ、CSS 変数セット