whicencer/product-landing

プロダクトランディングページ

単一製品向けのワンページマーケティングサイトを、一貫した視覚スタイルで構築します。 各セクションの詳細ルールは references/ 内のファイルに、ワークフローと全セクション共通ルールはこのファイルに記載されています。

ワークフロー

ステップ 1 — 質問（コードを書く前の1メッセージのみ）

以下の必須情報を1つのメッセージで収集します。ユーザーの言語で質問してください。

• ユーザーがすでにリクエストで提供した項目はスキップします。
• 不足している項目がない場合は、このステップを完全にスキップします。
• 各項目にデフォルト値を提示し、ユーザーが簡潔に答えられるようにします。

項目	スキップ時のデフォルト値
製品名＋1文での説明	—（必須、スキップ不可）
4～8の主要機能	製品説明から導出
プライマリアクション：ボタンラベル＋リンク	「始める」→ #
料金プラン：プラン、価格、通貨、または「料金セクションなし」	料金セクションなし
ブランドカラー	#229ED9

法人名、住所、連絡先、リーガルページリンクについては質問しないでください。プレースホルダーを使用します（ステップ5参照）。 追加の質問ラウンドは行わないでください。回答後、すぐにビルドを開始します。

ステップ 2 — 計画

質問せずに、以下の事項を決定します。

• 機能表示モード（agent / command / search / task）— references/features.md を参照。
• 機能あたり1～3の具体例、「使い方」の3～4ステップ、すべての見出しとコピー。

ステップ 3 — セクションルールを読む

各ファイルは、そのセクションを構築する直前に、ページ順に読みます。

1. references/hero.md — ナビゲーションバー＋ヒーロー
2. references/features.md — 機能紹介＋テーブル（assets/feature-showcase.js を使用）
3. references/how-it-works.md
4. references/pricing.md — 料金セクションがない場合はスキップ
5. references/final-cta.md
6. references/footer.md

ステップ 4 — ビルド

以下のファイル構造を出力します（ユーザーがフレームワークを指定した場合を除く）。

• index.html

• css/styles.css

• js/main.js

• js/feature-showcase.js

• index.html — マークアップのみ。<style>ブロック、style=""属性（スクリプトが設定する場合を除く）、インラインJSは禁止。許可される唯一のインライン<script>は、機能セクションのJSON例ブロックのみ。

• css/styles.css — すべてのスタイル。:rootのデザイントークンで始まり、ページ順にセクションごとにコメントヘッダー（/* ===== ヒーロー ===== */）で区切ります。

• js/main.js — ページの動作（ナビゲーションバーの状態、モバイルメニュー、フッターの年号など）を記述します。

• js/feature-showcase.js — assets/feature-showcase.js をバイト単位でコピーします。main.js にマージしたり、編集したりしないでください。

• ファイルは以下のようにインクルードします。

  • <link rel="stylesheet" href="css/styles.css"> を <head> 内に。
  • <script src="js/feature-showcase.js" defer></script> と <script src="js/main.js" defer></script> を <head> の末尾に。

• プレーンなスクリプトのみ — type="module" は禁止、importも禁止。ページはディスクから直接開いても動作する必要があります（file://）。

• 相対パスのみ使用。フォルダをそのまま任意のホストにアップロードできるようにします。

ステップ 5 — チェックとレポート

1. 各セクションファイルのチェックリストと以下のグローバルチェックリストを確認し、不合格項目を修正します。
2. ユーザーに対して、埋める必要のあるすべてのプレースホルダー（法人名、住所、連絡先、リーガルページリンク、#リンク、$XXの価格）を短いリストで報告します。

グローバルルール

事実

ビジネスに関する事実を捏造しないでください：価格、プラン、数値、顧客名、お客様の声、法人名、住所、メールアドレス、ハンドル、URL。明白なプレースホルダーを使用し、ステップ5でリストアップしてください。

デザイントークン

これらを :root のCSS変数として定義し、それらのみを使用します。

:root {
  --brand: #229ED9;              /* ユーザーのブランドカラーで置き換え */
  --brand-tint: color-mix(in srgb, var(--brand) 12%, white);
  --text: #0A0A0A;
  --text-muted: #6B6B70;
  --surface: #EEEEF1;            /* カード、プレート */
  --bg: #FFFFFF;
  --hairline: rgba(0, 0, 0, 0.08);
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --container: 1040px;
}

• ライトテーマのみ。アクセントカラーは1色（--brand）。それ以外は黒、グレー、白。
• フォント：Google FontsのInter（ウェイト400、500、600、700、800）。
• アイコン：Phosphor Icons（https://unpkg.com/@phosphor-icons/[email protected]、バージョン固定）。

セクションヘッダー（特徴、使い方、料金で共通）

• H2：clamp(32px, 5vw, 48px)、ウェイト800、letter-spacing: -0.03em、line-height: 1.05、--text、左揃え。
• オプションのサブタイトル：18px、標準ウェイト、--text-muted、最大幅約540px、下に12pxのマージン。

スペーシングとリズム

• コンテンツコンテナ：max-width: var(--container)、サイドパディング24px（モバイルでは16px）。
• セクション間の垂直間隔：clamp(80px, 12vw, 140px)。
• 重めのセクションと軽めのセクションを交互に配置します。インタラクティブなセクションを連続して配置しないでください。

コピー

• 平易で具体的、人間らしく。短い文章。実際の名詞と数字を使用します。
• 禁止ワード：シームレス、パワフル、革新的、アンロック、スーパーチャージ、エフォートレス、最先端。
• ページのすべてのコピーは、ユーザーが指定した言語で記述します（デフォルト：製品説明の言語）。

モーション

• 控えめにのみ：ホバー時の浮き上がり、150～250msのトランジション、オプションのスクロール時1回限りのフェードイン。
• すべて prefers-reduced-motion を尊重します。
• ページ上で唯一のループアニメーションは、ヒーローのブランドマークの脈動のみです（references/hero.md参照）。その他の無限アニメーションは禁止。

グローバルチェックリスト

• ステップ3にリストされたセクションのみを、その順序で配置。
• トークンの色のみ使用、アクセントカラーは1色。
• ビジネス事実の捏造なし、すべてのプレースホルダーをユーザーに報告。
• ヒーローCTA、ナビバーCTA、ファイナルCTAは同一アクション。
• 375pxで水平スクロールが発生しない、モバイルですべて読める。
• キーボードとスクリーンリーダーの基本を満たす：実際のボタン、altテキスト、可視フォーカス状態。
• すべてのインライン<script>は、実際の終了タグでのみ終了：JSコード、コメント、文字列内に</scriptを含まない。
• ファイル：index.html、css/styles.css、js/main.js、js/feature-showcase.js — それ以外はなし、インラインCSS/JSもなし。
• js/feature-showcase.js は assets/feature-showcase.js と同一。
• JSON例ブロックに</scriptテキストが含まれていない。
• index.html をディスクから直接開いたときにページが動作する。