ship-page

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：内容の確認

製品を理解し、内容を集めます。AskUserQuestion の 1 回の呼び出しで、すべての質問をします。

質問 1 — 製品の種類（ヘッダー：「Product」）： 何を作っていますか？ 選択肢：SaaS / 開発者向けツール / モバイルアプリ / オープンソースプロジェクト / パーソナルブランド / その他

質問 2 — 内容（ヘッダー：「Content」）： ページには何を含めますか？ 選択肢：内容を貼り付ける / README から取得する / 内容を説明してほしい / ドキュメントがある

質問 3 — 主なセクション（ヘッダー：「Sections」、複数選択可）： どのセクションが必要ですか？ 選択肢：CTA 付きヒーロー / 機能グリッド / 仕組み / 料金 / お客様の声 / FAQ / 統計・指標 / ニュースレター登録 / GitHub スター数バッジ

質問 4 — 公開先（ヘッダー：「Launch」）： このページはどこで公開しますか？ 選択肢：GitHub Pages / 単独のウェブサイト / Product Hunt での公開 / まずは試してみる

ユーザーが内容（README、説明、ドキュメント）を提供した場合は、次に進みます。

ステップ 1.1：内容の分析

提供された内容を解析して、以下を抽出します。

• 製品名と一文での説明
• 主な機能（3～6 個を目安）
• 想定対象者を示す情報
• 記載されている指標や数値
• 行動喚起（訪問者にしてもらいたいこと）

AskUserQuestion（ヘッダー：「Content Check」）で確認します。 「抽出した内容はこちらです。これでよさそうですか？」 選択肢：問題ありません / 修正したい

---

フェーズ 2：スタイルの確認

ここでは「見せて伝える」ことを重視します。多くの人は、デザインの好みを言葉で表現できません。

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

AskUserQuestion（ヘッダー：「Vibe」、複数選択可、最大 2 つ）で尋ねます。 訪問者にどのような印象を持ってもらいたいですか？ 選択肢：未来的でテック感のある / クリーンでミニマルな / 大胆でエネルギッシュな / ダークで高級感のある / 遊び心がありクリエイティブな / 企業向けで信頼感のある

Step 2.2: スタイルのプレビューを生成する

雰囲気の選択に基づいて、以下を示す異なるデザインの単一セクション HTML プレビューを 3 種類生成します。

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

各プレビューは、ヒーローセクションだけをまったく異なる 3 種類のスタイルで表示する、完全に動作する HTML ファイルにしてください。プレビューは .ship-page/previews/ に保存します。

プリセットの定義については references/STYLE_PRESETS.md を読みます。プリセットを土台として、特定の製品に合わせてカスタマイズします。

AskUserQuestion で確認します（ヘッダー：「スタイルを選択」）。 「どの方向性が気に入りましたか？」 選択肢：スタイル A / スタイル B / スタイル C / 要素を組み合わせる（説明）

Step 2.3: プリセットを直接選択する（代替）

ユーザーがすでに希望を把握している場合や、「ダーク／ミニマル／テックにして」と言った場合：

• references/STYLE_PRESETS.md を読む
• 最も近いプリセットを選ぶ
• プレビューの生成をスキップし、Phase 3 に進む

---

Phase 3: ランディングページを生成する

Phase 1 のコンテンツと Phase 2 のスタイルを使って、ランディングページ全体を生成します。

構成ルール

すべてのランディングページは、次の構成に従います。

<!DOCTYPE html>
<html lang="en">
<head>
  
  
</head>
<body>
  <nav></nav>
  
  <section class="hero"></section>
  <section class="features"></section>
  <section class="social-proof"></section>
  
  <section class="cta-final"></section>
  <footer></footer>

  <script>
    // Scroll animations, counters, interactions — all inline
  </script>
</body>
</html>

必須の技術要件

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

セクションの密度制限

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

• ヒーロー：見出し 1 つ（最大 8 語）、サブ見出し 1 つ（最大 20 語）、CTA 1〜2 個、任意で背景エフェクト
• 機能：カードは最大 6 枚。各カードにはアイコン、タイトル（3〜4 語）、説明（最大 15 語）
• 統計／指標：カウンターは最大 4 個
• 推薦の声：引用は最大 3 件
• 料金：プランは最大 3 つ
• FAQ：項目は最大 6 件（アコーディオン／折りたたみを使用）

1 つのセクションに収めるにはコンテンツが多すぎますか？セクションの間に視覚的な区切りを入れ、2 つに分けます。

CSS アーキテクチャ

:root {
  /* Typography — always use 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);
  
  /* Colors — define full palette */
  --bg-primary: #...;
  --bg-secondary: #...;
  --text-primary: #...;
  --text-secondary: #...;
  --accent: #...;
  --accent-hover: #...;
  --cta-gradient: linear-gradient(...);
  
  /* Spacing */
  --section-padding: clamp(3rem, 8vw, 8rem);
  --content-width: min(90vw, 1200px);
  
  /* Animation */
  --transition-fast: 0.3s ease;
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scroll reveal base class */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

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

JavaScript の基本事項

以下のパターンを必ず含めます。

// Scroll reveal with 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));

// Animated counters (for stats sections)
function animateCounter(el, target, duration = 2000) { ... }

// Smooth scroll for nav links
document.querySelectorAll('a[href^="#"]').forEach(anchor => { ... });

各セクションタイプの HTML、CSS、JS パターンを含む完全なセクションテンプレートについては、references/SECTION_LIBRARY.md を読みます。

AI っぽさを避けるためのチェックリスト

生成前に、次の項目を確認します。

• フォントに Inter、Roboto、Arial、またはシステムのデフォルトフォントを使っていない
• 配色が白地に紫のグラデーションではない
• ヒーローに「Revolutionize」や「Supercharge」という単語を使っていない
• CTA ボタンに、色の変更だけでなくホバーアニメーションがある
• 背景にテクスチャや奥行きがある。単色のベタ塗りではない
• 予想外のデザイン上の工夫が少なくとも 1 つある（非対称なレイアウト、大胆なタイポグラフィ、独創的なセクション区切りなど）

納品

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

---

Phase 4: 反復

最初の生成後、AskUserQuestion で質問します（ヘッダー：「フィードバック」）。 「見た目はいかがですか？」 選択肢：これで公開！ / 色・フォントを調整 / レイアウトを変更 / セクションを追加・削除 / 新しいスタイルでやり直す

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

• コンテンツの追加：まずセクションの密度制限を確認します。上限を超える場合は、セクションを分割します。
• スタイルの変更：構成を書き換えず、CSS 変数を更新します。
• セクションの追加：セクションのテンプレートについて references/SECTION_LIBRARY.md を読み、適切な順序で挿入します。
• セクションの削除：きれいに削除し、参照先がなくなった JavaScript が残らないことを確認します。

---

参考資料（段階的な開示）

このスキルでは、必要なときにだけ参考ファイルを読み込む段階的な開示を採用しています。

ファイル	読み込むタイミング	内容
references/STYLE_PRESETS.md	フェーズ 2（スタイルの調査）	CSS 変数、フォントの組み合わせ、背景の処理を含む、厳選された 5 種類のスタイルプリセット
references/SECTION_LIBRARY.md	フェーズ 3（生成）	すべてのセクションタイプ（ヒーロー、機能、料金など）に対応する、HTML/CSS/JS テンプレート一式