landing-page-craft

ランディングページの制作

流行のセクションを積み重ねるのではなく、実際の意思決定を軸にページを作成します。見栄えを整える前に、オファーを分かりやすく、信頼でき、行動につながるものにします。

ワークフロー

1. 既存のブランド、製品、対象者、トラフィックの流入元、コンテンツ、分析要件、技術的制約を確認します。
2. コンバージョンの概要を1行でまとめます。
   • 対象者；
   • 状況または意図；
   • オファーと具体的な成果；
   • 主なアクション；
   • 最大の懸念事項。
3. 利用可能な証拠を洗い出します。製品 UI、事例、顧客の声、指標、創業者の専門知識、ポリシー、連携、セキュリティ、プロセスなどです。証拠を捏造してはいけません。
4. ページの論旨を決めます。対象者が自分ごととして認識し、信頼し、行動するまでに必要なセクションだけを順序立てて配置します。
5. ファーストビューで、次の問いに答えられるようにします。
   • これは何ですか？
   • 自分に合っていますか？
   • うまくいけば何が変わりますか？
   • 次に何をすればよいですか？
6. レイアウトを調整する前に、具体的なコピーを書きます。見出しは情報を伝え、CTA は遷移先を意識したものにし、主張は証拠に見合ったものにします。
7. オファーにふさわしいビジュアルの方向性を選びます。汎用的な雰囲気に頼るのではなく、製品 UI、実際の作業、関連する画像、データ、インタラクションを証拠として使います。
8. プロジェクトで既に採用されているスタックを使い、セマンティックでレスポンシブかつ高パフォーマンスな UI を実装します。重要な読み込み、エラー、フォーム、成功の状態も含めます。
9. 証拠とリスク軽減策は、それが意思決定を支える場所の近くに配置します。信頼につながる要素をすべてロゴの一覧にまとめてはいけません。
10. モバイルとデスクトップで、キーボード操作、フォームのバリデーション、遷移先、トラッキング用フックがある場合はその動作も含め、アクションの流れ全体を確認します。

ページのルール

• H1 ではオファーまたは成果を伝えます。ブランド名を繰り返す必要はありません。
• 意思決定の各ポイントで、主なアクションは1つにします。副次的なアクションは不確実性を減らすものにします。
• レイアウトの問題が見つかるよう、早い段階から実際のコンテンツと現実的な長さのテキストを使います。
• セクション数を増やすだけの演出、繰り返しの機能カードグリッド、偽の推薦文、偽の希少性、裏付けのない最上級表現は避けます。
• 価格、更新、プライバシー、利用資格、解約に関する重要な情報を隠してはいけません。
• 装飾的なアニメーションがなくても、重要なコンテンツを利用できるようにします。
• パフォーマンス、アクセシビリティ、レスポンシブな動作もコンバージョンにつながる機能として扱います。

成果物の要件

次を提示または実装します。

1. コンバージョンの概要 - 対象者、オファー、アクション、懸念事項。
2. ページの論旨 - セクションの順序と各セクションが答える問い。
3. 証拠マップ - 主張 -> 近くに配置する証拠。
4. CTA マップ - ラベル -> 遷移先 -> 成功時の動作。
5. 実装済みページ - コード変更が依頼されている場合。
6. 検証 - モバイル／デスクトップのスクリーンショットまたは確認結果、キーボード操作の流れ、フォームの状態、リンクの確認。

参考資料

ページ構成、証拠の配置、CTA の文言、リスク軽減策を決める際は、references/conversion-flow.md をお読みください。