ランディングページビルダー は何をしますか？
簡単な概要から、高速でレスポンシブな自己完結型のランディングページを作成します。GitHub Pages、Netlify、または任意の静的ホストにすぐにデプロイできます。
1. 概要を収集する
記述を始める前に、以下の情報を確認してください。不足しているものだけを、1回のメッセージで質問してください。
| フィールド | 例 |
|---|---|
| 製品 / オファー | 「LearnMizo – オンラインでミゾ語を学ぶ」 |
| 対象者 | 「子供にミゾ語を話させたい在外親」 |
| 訪問者の主な成果 | 「30日間で簡単な会話ができるようになる」 |
| プライマリコールトゥアクション | 「無料レッスンを始める」 + 遷移先URL |
| 実際に持っている証拠 | 実際の数字、実際の引用、ロゴ（または「まだなし」） |
| ブランド | 色、フォント、トーン（または「私の代わりに選んでください」） |
ユーザーが「とにかく作って」と言った場合、賢明な前提を立て、返信の先頭にそれらを列挙してください。
2. 最初にコピーを書く（HTMLの前に）
references/page-structure.md の構造に従ってください。ルール：
- 見出し = 成果、機能ではない。 最大約10語。テスト：対象者は「そう、それが欲しい」と言うか？
- サブ見出し は 方法 を一文で説明します。
- プライマリCTAは1つ、繰り返し（ヒーローセクション、ページ中央、フッター）。毎回同じ文言。
- ベネフィットは「あなたは〜できる」または「もう〜しない」と書き、機能リストとして書かない。
- 決して証拠を捏造しない。 偽の感想文、ユーザー数、評価、ロゴは使用禁止。証拠がない場合は、明確にマークされたプレースホルダー
<!-- TODO: 実際の顧客の引用を追加 -->と、ドラフト内にのみ表示される「ここにあなたの感想文」を使用する。 - 読みやすさはシンプルに（小学校6～8年生レベルを目標）。
3. ページを構築する
assets/template.html を開始点として、{{プレースホルダー}} を置き換えます。
技術要件：
- 単一ファイル、すべてのCSSは
<style>タグ内にインライン；フレームワークは使用しない。JavaScriptは必要な場合のみ（例：FAQトグル）。 - モバイルファースト；幅360px、768px、1280pxでテスト。
- セマンティックHTML：1つの
<h1>、<h2>を使ったセクション、<main>、<footer>。 <title>（60文字以内）、meta description（155文字以内）、Open Graphタグを設定する。- カラーコントラストは少なくともWCAG AA（本文テキストは4.5:1）を満たすこと。
- ボタンの高さは44px以上；モバイルでスクロールせずにCTAが見えること。
- 画像：
loading="lazy"を使用、width/heightを設定、説明的なalt。
4. 納品前の品質チェック
references/checklist.md を実行し、不合格項目を修正します。その後、以下を納品します。
- HTMLファイル。
- 3行の要約：選んだ見出し、CTA、行った前提。
- A/Bテスト用の代替見出し2つ。