Ship Page — プロンプト→インタラクティブLP（1HTML）

Ship Page

インタラクティブでアニメーション豊かなランディングページを、ブラウザだけで動作する単一HTMLファイルとして作成します。

このスキルは、非デザイナーが「見せる、語らない」アプローチを通じてプロフェッショナルなプロダクトページを制作し、本番品質のランディングページを生成するのに役立ちます。静的モックアップではなく、実際のインタラクティブ性を備えています。

基本原則

• ゼロ依存 — CSS/JSをインラインに含む単一のHTMLファイル。npm、ビルドツール、フレームワークは不要。単一のHTMLファイルは、どんなReactプロジェクトよりも長持ちします。
• 見せる、語らない — 人々は欲しいものを言葉で説明できませんが、見ればわかります。ビジュアルプレビューを生成し、選択してもらいましょう。
• アンチAIスロップ — 白地に紫のグラデーションは禁止。汎用的なSaaSテンプレートも禁止。すべてのページは、プロダクトのためにカスタムメイドされたように感じられるべきです。
• デフォルトでインタラクティブ — ランディングページはスライドではありません。スクロールアニメーション、ホバー状態、データカウンター、パーティクルエフェクト、そして訪問者を引き留めるマイクロインタラクションを備えています。
• 出荷可能 — 出力はすぐに動作します。HTMLファイルをGitHub Pages、Vercel、Netlifyのどこにでも置くか、ブラウザで開くだけで使えます。

モード検出

• モードA: 新規ページ — ゼロから作成。フェーズ1へ。
• モードB: README変換 — GitHubのREADMEや製品説明をランディングページに変換。コンテンツを抽出後、フェーズ1のステップ2へ（内容に関する質問をスキップし、スタイルに直接進む）。
• モードC: 拡張 — 既存のHTMLランディングページを改善。読み込み、構造を理解し、コンテンツを保持しながら拡張。ビューポートとセクション密度のルールに従う。

---

フェーズ1: ディスカバリー

製品を理解し、コンテンツを収集します。すべての質問は1回のAskUserQuestion呼び出しで行ってください。

質問1 — プロダクトタイプ (ヘッダー: "Product"): 何を構築していますか？ 選択肢: SaaS / 開発者ツール / モバイルアプリ / オープンソースプロジェクト / 個人ブランド / その他

質問2 — コンテンツ (ヘッダー: "Content"): ページに何を含めるべきですか？ 選択肢: コンテンツを貼り付けます / READMEから取得 / 私の代わりに説明して / ドキュメントがあります

質問3 — 主要セクション (ヘッダー: "Sections", 複数選択可: true): どのセクションが必要ですか？ 選択肢: CTA付きヒーロー / 機能グリッド / 仕組み / 価格 / お客様の声 / FAQ / 統計と指標 / ニュースレター登録 / GitHub Starsバッジ

質問4 — 公開ターゲット (ヘッダー: "Launch"): このページはどこに公開されますか？ 選択肢: GitHub Pages / スタンドアロンウェブサイト / Product Huntで公開 / ただの探索

ユーザーがコンテンツ（README、説明、ドキュメント）を提供した場合、以下に進みます：

ステップ1.1: コンテンツ分析

提供されたコンテンツを解析し、以下を抽出します：

• 製品名と一行説明
• 主要機能（3～6個を目標）
• ターゲットオーディエンスのシグナル
• 言及されている指標/数字
• コールトゥアクション（訪問者は何をすべきか？）

AskUserQuestionで確認（ヘッダー: "Content Check"）: 「抽出した内容はこちらです — 問題ありませんか？」 選択肢: 問題ありません / 調整させてください

---

フェーズ2: スタイルディスカバリー

これが「見せる、語らない」フェーズです。ほとんどの人はデザインの好みを言葉で表現できません。

ステップ2.1: 雰囲気の選択

AskUserQuestionで質問（ヘッダー: "Vibe", 複数選択可: true, 最大2）: 訪問者にどのような印象を与えたいですか？ 選択肢: 未来的でテクノロジー / クリーンでミニマル / 大胆でエネルギッシュ / ダークでプレミアム / 遊び心とクリエイティブ / コーポレートで信頼感

ステップ2.2: スタイルプレビューの生成

雰囲気の選択に基づき、3つの異なる単一セクションHTMLプレビューを生成します。各プレビューには以下を含めます：

• タイポグラフィの選択（見出し+本文フォントの組み合わせ）
• カラーパレット（背景、テキスト、アクセント、CTA）
• プロダクト名を含むヒーローセクションのレイアウト
• 1つのマイクロインタラクションまたはアニメーション
• 全体的な雰囲気（背景の処理、余白）

各プレビューは完全で動作可能なHTMLファイルとし、ヒーローセクションのみを3つの全く異なる方法でスタイル設定します。プレビューは .ship-page/previews/ に保存します。

references/STYLE_PRESETS.md を読み、厳選されたプリセット定義を参照してください。プリセットを土台として使用し、特定のプロダクト向けにカスタマイズします。

AskUserQuestionで確認（ヘッダー: "Pick Your Style"）: 「どの方向性が響きますか？」 選択肢: スタイルA / スタイルB / スタイルC / 要素をミックス（説明）

ステップ2.3: 直接プリセット選択（代替）

ユーザーがすでに自分の望みを知っている場合、または「ダーク/ミニマル/テックにして」と言った場合：

• references/STYLE_PRESETS.md を読む
• 最も近いプリセットにマッチさせる
• プレビュー生成をスキップし、フェーズ3へ

---

フェーズ3: ランディングページの生成

フェーズ1のコンテンツとフェーズ2のスタイルを使用して、完全なランディングページを生成します。

構造ルール

すべてのランディングページは、次のアーキテクチャに従います：

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- フォント、CSS変数、すべてのスタイルをインラインで -->
  <!-- Google Fonts + Font Awesome CDN以外の外部依存はなし -->
</head>
<body>
  <nav><!-- 製品名 + CTA付き固定ナビ --></nav>
  
  <section class="hero"><!-- ファーストビュー：ヘッドライン、サブヘッドライン、CTA --></section>
  <section class="features"><!-- 機能グリッドまたはショーケース --></section>
  <section class="social-proof"><!-- 統計、お客様の声、ロゴ --></section>
  <!-- ... 必要に応じて追加セクション ... -->
  <section class="cta-final"><!-- 最終的なコールトゥアクション --></section>
  <footer><!-- リンク、著作権 --></footer>

  <script>
    // スクロールアニメーション、カウンター、インタラクション — すべてインライン
  </script>
</body>
</html>

必須技術要件

1. ビューポートフィッティング — 各セクションは「フル」に感じるべきですが、オーバーフローしてはいけません。ヒーローには min-height: 100vh を使用し、その他のセクションには比例した高さを使用します。
2. レスポンシブ — モバイルでも動作する必要があります。すべてのフォントサイズに clamp() を使用し、スペーシングにはビューポート相対単位を使用します。
3. スクロールアニメーション — スクロールに応じた表示にIntersectionObserverを使用します。ユーザーがスクロールするにつれて要素がアニメーション表示されるようにします。
4. パフォーマンス — JSよりもCSSアニメーションが推奨されます。アニメーション要素には will-change を設定します。スクロールハンドラーはデバウンスします。
5. アクセシビリティ — セマンティックHTML、十分なコントラスト、すべてのアニメーションに prefers-reduced-motion メディアクエリ。

セクション密度制限

セクションごとに（過密を防ぐため）：

• ヒーロー: 1ヘッドライン（最大8語）、1サブヘッドライン（最大20語）、1-2 CTA、オプションの背景エフェクト
• 機能: 最大6カード。各カード: アイコン + タイトル（3-4語）+ 説明（最大15語）
• 統計/指標: 最大4カウンター
• お客様の声: 最大3引用
• 価格: 最大3プラン
• FAQ: 最大6項目（アコーディオン/折りたたみを使用）

1つのセクションにコンテンツが多すぎる？ 視覚的な区切りを入れて2つのセクションに分割します。

CSSアーキテクチャ

:root {
  /* タイポグラフィ — 常にclamp()を使用 */
  --font-display: 'YOUR_CHOICE', sans-serif;
  --font-body: 'YOUR_CHOICE', sans-serif;
  --heading-size: clamp(2rem, 5vw, 4.5rem);
  --body-size: clamp(0.875rem, 1.5vw, 1.125rem);
  
  /* カラー — 完全なパレットを定義 */
  --bg-primary: #...;
  --bg-secondary: #...;
  --text-primary: #...;
  --text-secondary: #...;
  --accent: #...;
  --accent-hover: #...;
  --cta-gradient: linear-gradient(...);
  
  /* スペーシング */
  --section-padding: clamp(3rem, 8vw, 8rem);
  --content-width: min(90vw, 1200px);
  
  /* アニメーション */
  --transition-fast: 0.3s ease;
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* スクロール表示ベースクラス */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 動きの低減 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

JavaScriptの必須要素

常に以下のパターンを含めます：

// IntersectionObserverによるスクロール表示
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// アニメーションカウンター（統計セクション用）
function animateCounter(el, target, duration = 2000) { ... }

// ナビリンクのスムーズスクロール
document.querySelectorAll('a[href^="#"]').forEach(anchor => { ... });

references/SECTION_LIBRARY.md を読み、各セクションタイプのHTML、CSS、JSパターンを含む完全なセクションテンプレートを参照してください。

アンチAIスロップチェックリスト

生成前に以下を確認：

• フォントがInter、Roboto、Arial、またはシステムデフォルトではない
• カラースキームが白地に紫のグラデーションではない
• ヒーローが「革命」や「加速」という言葉を使っていない
• CTAボタンに色変更だけでなくホバーアニメーションがある
• 背景にテクスチャ/奥行きがある — フラットな単色ではない
• 少なくとも1つの予想外のデザイン選択（非対称レイアウト、大胆なタイポグラフィ、クリエイティブなセクション区切り）

納品

1. 説明的な名前でHTMLファイルを保存：{product-name}-landing.html
2. ブラウザで開く：open {product-name}-landing.html
3. ユーザーに提示し、フィードバックを求める

---

フェーズ4: 反復

初期生成後、AskUserQuestionで質問（ヘッダー: "Feedback"）: 「どのように見えますか？」 選択肢: 出荷します！ / 色・フォントを調整 / レイアウトを変更 / セクションを追加・削除 / 新しいスタイルで最初からやり直す

変更時は以下のルールに従います：

• コンテンツの追加: まずセクション密度制限を確認。超えた場合はセクションを分割。
• スタイルの変更: CSS変数を更新。構造を書き換えない。
• セクションの追加: references/SECTION_LIBRARY.md を読み、セクションテンプレートを論理的な順序で挿入。
• セクションの削除: クリーンに削除し、JS参照が壊れていないことを確認。

---

参考文献（段階的開示）

このスキルは段階的開示を使用します — 必要なときにのみリファレンスファイルを読み込みます：

ファイル	いつ読むか	内容
references/STYLE_PRESETS.md	フェーズ2（スタイルディスカバリー）	完全なCSS変数、フォントの組み合わせ、背景処理を含む5つの厳選されたスタイルプリセット
references/SECTION_LIBRARY.md	フェーズ3（生成）	すべてのセクションタイプ（ヒーロー、機能、価格など）の完全なHTML/CSS/JSテンプレート