landing

Landing — プレミアム HTML ランディングページジェネレーター

product-team/skills/landing-page-generator/ とは異なります。 そちらのスキルは、コンバージョン／リード獲得に最適化された Next.js TSX コンポーネントを出力します。このスキルは、GSAP アニメーションを使ったプレミアムなビジュアル体験に最適化された、自己完結型の .html ファイルを 1 つ出力します。用途に応じて選んでください。

テキストのプロンプトや概要から、洗練された自己完結型の .html ランディングページを生成します。出力は HTML ファイル 1 つです。すべての CSS は <style> 内に、すべての JS は <script> 内に記述し、外部依存関係は Google Fonts と CDN 経由の GSAP のみにします。ページは視覚的に際立ち、アニメーションを備えた、本番品質のものです。

呼び出しのきっかけ

• 「ランディングページを作成して」
• 「ランディングページを構築して」
• 「X のランディングページを作って」
• 「Y のウェブページが必要です」
• 「プロモーションページ」
• 「製品ページ」
• 「1 ページのサイト」
• 「ウェブサイト」
• 「販売ページ」
• 「X のランディングページ」

納品モード

Claude Code CLI では、指定されたパスにファイルを書き込みます。Claude.ai web では、同じ内容の HTML アーティファクトを作成します。

フェーズ 0：徹底的なヒアリング（回答を促す 4 つの質問を 1 つずつ）

依存関係の順に質問します。各質問には、尋ねる理由が明記されています。停止条件：最大 4 問。

Q1（最初の質問）— 製品／サービス

製品やサービスは何ですか？名前と 1～2 文のエレベーターピッチを教えてください。何をするもので、誰を対象にしていますか？

質問する理由： 見出し、補足テキスト、機能紹介の文言はすべて、ここから導き出されます。「生産性アプリ」ではありきたりな文章になりますが、「Zoom が嫌いなリモートエンジニアリングチーム向けの非同期スタンドアップツール」なら、コンバージョンにつながるランディングページを作れます。

曖昧な回答は受け付けません。 ピッチがなく名前だけが提示された場合は、1 度だけ聞き返します。「何をするものですか？誰を対象にしていますか？」聞き返してもピッチがなければ、「一般的なポジショニング」であることを明示したうえで作成します。

Q2（Q1 に依存）— 対象者に合わせた表現

対象者は誰ですか？次から 1 つ選んでください。

1. 技術系の購入者（エンジニア、運用、セキュリティ担当者）
2. ビジネス系の購入者（PM、経営幹部、運用責任者）
3. 消費者（一般の人々、趣味で利用する人）
4. 社内向け（従業員、パートナー — 一般販売向けではない）

質問する理由： 対象者によって、文章の語調、専門用語のレベル、社会的証明の選択、CTA の表現が変わります。技術系の購入者は具体性を求め、消費者はメリットを重視します。社内向けのページでは、説得を省けます。

必ず選択してください。

Q3（常に質問）— ブランドの上書き指定

デフォルト（ダークネイビー＋ティール＋Inter）を上書きするブランドカラー／フォントはありますか？次の形式で指定してください：メインカラーの HEX、アクセントカラーの HEX、任意で背景色の HEX。洗練されたデフォルトを使いたい場合は「デフォルト」と答えてください。

質問する理由： デフォルトは意図的に美しく仕上げていますが、ブランドに合わせると、既存サイトに自然になじむページになります。メインカラーだけを指定する場合でも、大きな効果があります。

「デフォルト」または一部のみの指定（例：メインカラーのみ）を受け付けます。メインカラーのみが指定された場合は、アルゴリズムに基づいてアクセントカラーを導き出します（明るくする／暗くする）。

Q4（Q1 に依存）— トーン

トーンを 1 つ選んでください。

1. プロフェッショナル — 自信があり、控えめで、B2B 向け
2. 遊び心のある — 親しみやすく、軽やかで、ときどきユーモアを交える
3. 権威ある — 専門的で、データを重視し、信頼を築く
4. ミニマル — 簡潔で、デザインを重視し、文章量を抑える

質問する理由： トーンは見出し、マイクロコピー、ボタンの文言、締めくくりの文章など、すべての文に影響します。最初に選ぶことで、セクション間のトーンのぶれを防げます。

必ず選択してください。推奨されるデフォルト： Q2 が技術系／ビジネス系ならプロフェッショナル、消費者なら遊び心のあるトーン、製品がデザイン重視ならミニマル。

停止条件： Q4 の後は内容を確定して生成します。生成中に追加の質問はしません。

コンテンツの抽出（フォールバック戦略を含む）

Q1 のエレベーターピッチから、以下を導き出します。

• ヒーロー見出し — 「何をするのか」を印象的に表現したもの（8～12 語）
• ヒーローの補足テキスト — 「誰向けか＋得られるメリット」を表現したもの（1～2 文）
• 3～6 個の機能箇条書き — ピッチ＋対象者（Q2）＋トーン（Q4）から要点を抽出
• CTA テキスト — 行動を促し、トーンに合ったもの
• 締めくくりのコピー — 短く、感情に訴え、トーンに合ったもの

入力が少ない場合のフォールバック： 製品名の意味と対象者の文体から、魅力的なコンテンツを考案します。推測した内容には、HTML ソース内のコメントで印を付けます（``）。追加情報を待って処理を止めないでください。

ブランドシステムの仕様

デフォルトのカラーパレット（ダークネイビー＋ティール）

:root {
  --navy:       #0A1628;
  --navy-mid:   #0D1F38;
  --teal:       #00D4AA;
  --teal-glow:  rgba(0, 212, 170, 0.12);
  --amber:      #F5A623;
  --off-white:  #F7F7F2;
  --text-muted: rgba(247, 247, 242, 0.68);
  --card-bg:    rgba(0, 212, 170, 0.06);
  --card-border:rgba(0, 212, 170, 0.15);
}

上書きパターン

Q3 でカスタムのブランド値が指定された場合、スキルはそれらを :root ブロックに反映します。

Brand override:
- primary: #FF6B35    →  --navy / hero bg
- accent:  #2EC4B6    →  --teal / CTA / highlights
- bg:      #011627    →  --navy-mid / section bg
- text:    #FDFFFC    →  --off-white

プライマリカラーのみが指定された場合、アルゴリズムでアクセントカラーを導出します（アクセントカラーは 15% 明るく、ネイビーミッドは 8% 暗くし、グローはアルファ値 0.12 の rgba に変換します）。決定論的な導出には scripts/brand_palette_validator.py を使用してください。

色彩理論、WCAG、アルゴリズムによるパレット導出の規範については、references/brand_system_design.md を参照してください。

タイポグラフィ

• フォントファミリー： Inter（Google Fonts 経由）
• ウェイトの段階： 400（本文）、500（アイブロウ）、600（リンク）、700（サブタイトル）、800（H1＋H2）
• サイズの段階：
  • ヒーロー H1：68～82px
  • セクション H2：52～62px
  • カードタイトル：22px
  • 本文：17～19px
  • アイブロウ：13px（大文字、文字間隔あり）
  • CTA ボタン：18px（ウェイト 500）

コンポーネント（CSS の指定必須）

• .btn-primary — ホバー状態（浮き上がり＋明るさ）を備えた CTA ボタン
• .feature-card — ホバー時に浮き上がるカード（translateY(-6px)＋ボーダーを明るくする）
• .eyebrow — 文字間隔（0.2em）を設けた大文字のカテゴリラベル

セクション 1：ヒーロー

• min-height: 100vh、コンテンツをフレックスで中央配置
• H1 の上に任意のアイブロウラベル
• H1（68～82px、ウェイト 800）
• サブタイトル（17～19px、1～2 文）
• CTA ボタン（.btn-primary）
• 下スクロールインジケーター（CSS のバウンスアニメーション付きシェブロン）
• 奥行きレイヤー（マウスパララックス）：
  • .hero-shapes-back — ぼかした大きな円を低い不透明度で絶対配置
  • .hero-shapes-mid — エッジがよりシャープな小さめのシェイプを、より高い不透明度で配置
  • コンテンツレイヤー（H1＋サブタイトル） — マウスと同じ方向にわずかに移動

セクション 2：機能

• デフォルトは 3 列（repeat(3, 1fr) グリッド）
• レスポンシブ：
  • 900px のブレークポイントで 2 列
  • 580px のブレークポイントで 1 列
• 各カード：
  • SVG アイコン（28px、stroke=var(--teal)、塗りつぶしなし）
  • タイトル（22px、ウェイト 700）
  • 説明（15～16px、--text-muted）
• ホバー状態：
  • transform: translateY(-6px)
  • border-color: var(--teal)（--card-border から明るくする）
  • transition: 0.3s ease

セクション 3：締めくくりの CTA

• 全幅、background: var(--navy-mid)
• padding: 120px 24px、テキストを中央揃え
• 大きな締めくくりの見出し（52～62px、ウェイト 800）
• 短い補足テキスト（--text-muted、1～2 文）
• 背後に環境光の放射状グラデーションを配した CTA ボタン：

  background: radial-gradient(circle, var(--teal-glow) 0%, transparent 70%);
  

アニメーションパターン

規範については references/gsap_animation_patterns.md を参照してください。次の 5 つのパターンが必須です。

1. ヒーローの表示（GSAP タイムライン）

// MUST use gsap.set() FIRST to prevent FOUC
gsap.set([".eyebrow", ".hero h1", ".hero .subtitle", ".btn-primary", ".scroll-down"], {
  opacity: 0,
  y: 30
});

const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
tl.to(".eyebrow", { opacity: 1, y: 0, duration: 0.6 })
  .to(".hero h1", { opacity: 1, y: 0, duration: 0.8 }, "-=0.3")
  .to(".hero .subtitle", { opacity: 1, y: 0, duration: 0.6 }, "-=0.5")
  .to(".btn-primary", { opacity: 1, y: 0, duration: 0.5 }, "-=0.3")
  .to(".scroll-down", { opacity: 1, y: 0, duration: 0.4 }, "-=0.2");

2. マウスパララックス

const hero = document.querySelector(".hero");
hero.addEventListener("mousemove", (e) => {
  const x = (e.clientX / window.innerWidth - 0.5) * 2;
  const y = (e.clientY / window.innerHeight - 0.5) * 2;
  gsap.to(".hero-shapes-back", { x: x * 45, y: y * 22, duration: 0.8 });
  gsap.to(".hero-shapes-mid",  { x: x * 22, y: y * 11, duration: 0.8 });
  gsap.to(".hero .container",  { x: x * 8,  y: y * 5,  duration: 0.8 });
});

3. スクロールで表示される機能カード

gsap.set(".feature-card", { opacity: 0, y: 55, rotateX: 18 });

ScrollTrigger.batch(".feature-card", {
  start: "top 80%",
  onEnter: batch => gsap.to(batch, {
    opacity: 1, y: 0, rotateX: 0,
    duration: 0.8,
    stagger: 0.11,
    ease: "power2.out"
  })
});

4. 浮遊する装飾シェイプ（CSS キーフレーム — GSAP は使用しない）

CSS は、周囲の連続的な動きを処理します（無期限のアニメーションでは、GSAP より滑らかで負荷も軽くなります）。

@keyframes floatA {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(20px, -30px) rotate(8deg); }
}
@keyframes floatB { /* different duration + rotation */ }
@keyframes floatC { /* different duration + rotation */ }

.hero-shapes-back .shape-a { animation: floatA 12s ease-in-out infinite; }

5. スクロールインジケーター（CSS のバウンス）

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
.scroll-down { animation: bounce 2s ease-in-out infinite; }

必須の CDN 依存関係

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

その他の外部 CSS ファイルや JS ファイルは使用しないでください。カスタム CSS はすべて <style> に、カスタム JS はすべて同じ HTML ファイル内の <script> ブロックに記述してください。

インラインのみとする理由については references/single_file_html_discipline.md を参照してください。

レイアウトルール

• コンテナの最大幅： 1200px、中央揃え
• セクションのパディング： 120px 24px（垂直方向 120、水平方向 24。モバイルでは縮小）
• レスポンシブブレークポイント：
  • 900px → 機能グリッドを 3 列から 2 列に変更
  • 580px → すべてのグリッドを 1 列に変更。H1 を約 52px に縮小
• ビューポートメタ： <meta name="viewport" content="width=device-width, initial-scale=1">

出力仕様

• パス： ${OUTPUT_DIR}/<product-name-kebab>.html
• ${OUTPUT_DIR} のデフォルト： ./landing-pages/
• ファイル名： 製品名から小文字の kebab-case を生成します（「Quill AI」→ quill-ai.html）。決定的なスラッグ生成と重複検出には scripts/kebab_slug_generator.py を使用します。
• 自己完結型： すべての CSS は <style> に、すべての JS は <script> に記述します。外部 CDN は Google Fonts と GSAP のみです。

検証（生成後）

生成後に scripts/html_validator.py --file ${OUTPUT_DIR}/<slug>.html を実行します。以下を確認します。

• 必須セクション 3 つ（.hero、.features、.closing-cta）がすべて存在する
• CDN 依存関係（Inter + GSAP + ScrollTrigger）が存在する
• gsap.set() の初期状態が、すべての gsap.timeline または gsap.to より前に設定されている（FOUC 防止）
• 900px と 580px のレスポンシブブレークポイントがある
• Google Fonts 以外の外部 <link rel="stylesheet"> がない
• GSAP CDN 以外の外部 <script src=> がない
• <meta name="viewport"> がある
• アニメーション対象のすべての要素に初期状態の宣言がある

エラー処理

状況	動作
入力が、コンテキストのない名前だけの場合	名前の意味と対象読者の文体から魅力的な内容を考案し、HTML ソース内で `` として示します
入力ファイルが大きい、または PDF の場合	生成前に最後まで読み込み、省略しません
ブランドカラーが不十分（HEX が 1 つだけ指定されている）	それをプライマリカラーとして使い、brand_palette_validator.py を使ってアルゴリズムで明るさや暗さを調整し、セカンダリカラーとアクセントカラーを導出します
機能数が指定されていない場合	デフォルトは 4 です
出力ディレクトリが存在しない場合	作成します
出力先に既存のファイルがある場合	タイムスタンプのサフィックスを追加するか、ユーザーに確認します（kebab_slug_generator.py が重複を検出します）
html_validator が FAIL を返す場合	失敗したセクションのみを対象に、1 回で再生成します。ファイルを破棄してはいけません

移植性

• Claude Code CLI： ネイティブ対応 — HTML ファイルをファイルシステムに直接書き込みます。
• Claude.ai web： ネイティブ対応 — ファイルではなく、アーティファクトとして HTML を生成します。

ツール

スクリプト	役割
scripts/brand_palette_validator.py	HEX 形式を検証し、WCAG AA のコントラストを確認し、プライマリカラーから派生パレットをアルゴリズムで生成します（明度・暗度の調整）。
scripts/kebab_slug_generator.py	製品名から kebab-case のファイル名を生成し、出力ディレクトリ内の重複を検出します。
scripts/html_validator.py	生成後の構造を確認します。3 つのセクション、CDN 依存関係、gsap.set() の初期状態、レスポンシブブレークポイント、外部ファイルがないことを検証します。

参考資料

• references/brand_system_design.md — 色彩理論 + WCAG + アルゴリズムによるパレット導出（7 つ以上のソース）
• references/gsap_animation_patterns.md — エントランスタイムライン + ScrollTrigger による表示 + マウス視差効果 + CSS フロート + スクロールインジケーター（7 つ以上のソース）
• references/single_file_html_discipline.md — インライン記述の理由 + CDN のみの外部依存 + アクセシビリティの最低要件 + ビルド不要の理由（7 つ以上のソース）

拒否すべきアンチパターン

• 出力ディレクトリにハードコードされた絶対パスを指定する
• オーバーライドに関する説明なしで、ブランドパレットを 1 つに固定する
• 書き始める前にアウトラインを作成する — 1 回で書き上げます
• 外部 CSS または JS ファイルを使う（インラインで記述する必要があります。Google Fonts と GSAP CDN のみ使用できます）
• gsap.set() の初期状態の設定を省略する（FOUC の原因になります）
• デフォルトのグリッドで機能を 6 つより多くする（一覧性が損なわれます）
• このスキル自体にブランド固有の内容を含める

---

バージョン： 1.0.0 ソース仕様： megaprompts/04-landing-megaprompt.md（メンテナーのローカル草案仕様 — gitignore 対象のため、公開リポジトリには含まれていません） ビルドパターン： パス B（直接変換）。product-team/skills/landing-page-generator/ とは異なります。