ランディングページ

ランディングページ は何をしますか？

アートディレクションされていて、生成物らしくない、自己完結型のHTMLファイルを1つ作成します。 examples/ 内の例（pulse-landing.html）が品質の基準です。それと同等の具体性（リアルなコピー、意図的なスペーシング、一つのアクセント）を目指します。

構築前の準備

以下の5つの入力を収集するか、考案（そして一貫性を保つこと）します。

1. 製品の一言説明: 製品が何で、何をするのか。
2. オーディエンス: 「みんな」ではなく、特定の個人。
3. 単一のメインアクション: サインアップ、購入、ダウンロード、ウェイトリスト参加。
4. 一つの証明ポイント: 数字、引用、または具体的な結果。ユーザーにない場合は、メカニズム（「オフラインで動作」「アカウント不要」）を使用します。決して testimonial や統計をでっち上げてはいけません。
5. トーン: 静か/プレミアム、大胆/ラウド、温かみがある/人間らしい、技術的/正確 から一つ選択します。

ユーザーが製品とオーディエンスを提供した場合、それ以上質問してはいけません。合理的な選択を行い、最後に1行でそれを記述します。

デザイントークン（デフォルトシステム — "Ink & Citrus"）

ユーザーがブランドカラーを提供しない限り、これらを使用します。すべての値は :root ブロック内の一箇所で変更します。

:root{
  --bg:#0F1013;        /* ページ背景 */
  --panel:#17181D;     /* 浮き出たサーフェス */
  --line:#26272E;      /* ヘアライン、ボーダー */
  --ink:#F4F2EA;       /* プライマリテキスト */
  --muted:#9BA0A6;     /* セカンダリテキスト */
  --accent:#D9F24F;    /* 一つのアクセント — ボタン、ハイライト */
  --radius:14px;
  --font:"Inter","Helvetica Neue",Arial,sans-serif;
}

デザインされたように見せるためのルール:

• 一つのアクセントカラー。 クリック可能または重要なものはすべてそれを使用し、他の色は競合しません。虹色グラデーションや紫青の「AIグラデーション」は禁止。
• タイポグラフィが仕事をする。 見出しは56～72px、ウェイト800、字間は若干ネガティブ（-0.02em）。本文は17～18px、行間1.6。見出しの上にスモールキャプスのラベル（12px、字間0.12em、大文字、muted色）。
• スペースは8の倍数。 デスクトップでのセクションパディングは上下96px。隙間が恣意的に見えると、生成物らしく見えます。
• シャドウよりもヘアライン。 セクションの区切りにはドロップシャドウや色付き背景の浮かんだカードではなく、1pxの --line ボーダーを使用します。
• 数字をデザインとして使用。 大きな統計数字（48px以上）はアクセントカラーまたはインク色で、小さなmuted色のラベルを付けます。最大3つの統計を1行に並べます。

ページレシピ（この順序で）

1. トップバー — 左にワードマーク、2～3つのプレーンテキストリンク、1つのアクセントボタン（メインアクション）。下部に細いボーダー。
2. ヒーロー — スモールキャプスラベル（カテゴリ）、見出し、最大22語のサポート文、プライマリボタン+1つの控えめなセカンダリリンク。右側または下に：CSSで作られたプロダクトビジュアル（モックウィンドウ、統計カード群、タイポグラフィ構成）。空のグレーのプレースホルダーボックスは絶対に使用しません。
3. ロゴ/証明ストリップ — 1行：「Used by …」とテキストワードマーク、または証明統計行。正直な証明がない場合は、このセクションを完全にスキップします。
4. 問題→シフト — 2カラム：旧来の方法（muted色、取り消し線の印象） vs 製品の方法。短い行、3行を超える段落は不可。
5. 機能 — 正確に3つまたは4つ。各機能：スモールキャプス番号（01～04）、タイトル、2行の説明。同一のアイコンカード6つではなく、ヘアライン区切りのグリッド。
6. 使い方 — 番号付きの3つのステップ、各1行。
7. 価格またはオファー — ユーザーが価格を指定した場合：強調表示された1つのプラン、チェックリスト形式の含まれるもの、メインアクションボタン。価格がない場合：代わりにウェイトリスト/CTAバンド。
8. FAQ — 最大4つの質問。実際の反論（価格、労力、乗り換え、「これは自分向けか」）に対して書かれていること。
9. 最終CTAバンド — アクセントカラーの背景ブロック、インク色のテキスト、見出しでメインの約束を別の言葉で繰り返し、1つのボタン。
10. フッター — ワードマーク、1行のポジショニング文、小さなリンク。サイトマップの羅列は禁止。

コピールール

• 見出しの公式：[具体的な成果]のための[特定の人物]、または製品が裏付けられる具体的な主張。「ランナーの皆さん、夜の時間を取り戻しましょう」 — 「生産性の未来へようこそ」ではありません。
• すべてのセクションには、少なくとも1つの具体的な名詞と1つの数字または名前が含まれている必要があります。曖昧な形容詞（「シームレス」「パワフル」「革新的」「最先端」「次世代」）は禁止です。
• ボタンは何が起こるかを示します：「無料で始める」「テンプレートを入手」「ウェイトリストに参加」。プライマリアクションとして「もっと詳しく」は決して使用しません。
• 製品の作り手のように書き、一人称複数形（「私たちがこれを構築した理由は…」）は控えめに使用し、企業の「ソリューション」言語は使用しません。

アンチパターン（「AIルック」 — 絶対にしないこと）

• 紫/青のグラデーションのヒーロー背景またはグラデーションテキスト。
• 絵文字や一般的なSVGアイコンを円で囲んだ3つの同一カード。
• 「🚀 ワークフローを強化」スタイルのコピー、見出しの感嘆符。
• Lorem ipsum、「機能1 / 機能2」、ストックフォトのプレースホルダー。
• すべて中央揃え。左揃えのテキストブロックとオフセットビジュアルを混在させます。
• 2つ以上のフォントウェイト/ファミリー、または2つ以上のアクセントカラー。
• 偽の testimonial、偽のロゴ、でっち上げの統計。絶対に。

技術ルール

• 1つのHTMLファイル、CSSは<style>内、Google Fontsリンク（Interまたはユーザーのブランドフォント）以外の外部アセットはなし。JavaScriptはオプションのFAQトグル以外不要。
• セマンティックタグ：header、main、section、footer。実際の<h1>は1度だけ。
• レスポンシブ：760px未満でシングルカラム、ヒーロービジュアルはコピーの下、タップターゲットは少なくとも44px。
• ファイルは約700行未満に保ちます。それ以上必要な場合、ページがやりすぎです — セクションを削除します。

QAチェックリスト（納品前に実行）

• 一つのアクセントカラーが一貫して使用されている。微妙な同一色相の背景フェード以外のグラデーションはない。
• 見出しには具体的な成果と特定のオーディエンスまたはメカニズムが含まれている。
• ページ上のすべての数字は、ユーザーまたは製品の実際のメカニズムから来ている。
• 禁止ワードがない：シームレス、強化、革新、最先端、次世代、可能性を解き放つ。
• 390px幅で水平スクロールなしで正しく読める。
• メインアクションが少なくとも3回（トップバー、ヒーロー、最終バンド）表示されている。