landing-page-optimization

ランディングページの最適化

ワークスペースのコンテキスト

質問する前に、初期コンテキストを確認してください。ブランド、オーディエンス、オファー、チャネル、ツール、制約、指標については strategy/brand.md を、個人の語り口については about/me.md を、コンテンツの計画については content/ideas.md と content/calendar.md を参照してください。従来のプロダクトマーケティング関連のコンテキストファイルは、他に手段がない場合にのみ使用してください。作成したドラフトは content/<platform>/drafts/YYYY-MM-DD_short-topic-slug.md に保存し、長期的に活用できる学びは strategy/brand.md、about/me.md、または content/ideas.md に反映してください。

運用契約

このスキルは、フロントマターで定められた範囲について自己完結しています。ローカルの指示、参照資料、スクリプト、アセットを手順書として使用し、タスク固有の情報が不足している場合に限り質問し、範囲を広げずに関連するスキルへ引き継ぎ、実行可能な成果物、判断、計画、ドラフト、または診断を返してください。

実証済みのコピーライティングフレームワーク、11の必須要素から成る構成、明確な作成ワークフローを組み合わせて、コンバージョン率の高いランディングページを構築、執筆、最適化します。

---

1. コピーライティングのフレームワーク

執筆前に情報を集める

コピーを作成する前に、次の情報を収集してください。

• 製品／サービス名と中核となる価値提案
• ターゲットオーディエンスと主な悩み
• 代替案と比べた際の主な差別化要因
• 訪問者に求める行動（CTA の目標）
• 利用可能な社会的証明（お客様の声、統計、ロゴ）

フレームワークを選ぶ

フレームワーク	使用する場面
PAS（問題 → 掘り下げ → 解決策）	悩みが明確な場合、感情に訴える製品
AIDA（注意 → 興味 → 欲求 → 行動）	汎用的な用途、認知度向上キャンペーン
StoryBrand（主人公 → ガイド → 計画 → CTA → 成功）	ブランドの物語、関係性を重視した販売

セクション別コピーガイド

ヒーロー — 価値提案は10語以内にし、サブ見出しで具体性を加えます。ファーストビューに CTA と信頼を示す要素を1つ配置します。

見出しの定型：

• [成果を達成] without [悩み]
• The [形容詞] way to [望む結果]
• Stop [悪いこと]. Start [良いこと].

問題 — オーディエンス自身が使う言葉で悩みを示し、具体的な状況を2～3個挙げます。臨床的な表現ではなく、感情に訴える表現にします。

解決策 — 製品がどのように問題を解決するかを説明します。機能ではなくメリットとして、3～5個の特徴を書きます（「スケジュールを自動化」ではなく「1日あたり2時間を節約」）。

仕組み — それぞれを明確な動詞で始める3～4個のステップで説明し、最後に CTA を配置します。

社会的証明 — お客様の声のテンプレート："[具体的な成果]..." — 氏名、役職、会社名。お客様の声を4～6件掲載し、利用可能であれば統計やロゴも含めます。

価格 — おすすめのプランを強調し、保証に関するコピーを含めます。プランカードごとに CTA を1つ配置します。

FAQ — 異論に対処する質問を5～10個用意し、価格、返金、技術要件、代替案との比較を取り上げます。

最後の CTA — メインの CTA を繰り返し、緊急性を加えるか、リスクを軽減する文言（「いつでも解約可能」「30日間保証」）を加えます。ヒーローの CTA より大きく、強く目立たせます。

CTA コピーのルール

• 行動を表す動詞で始める
• 具体的にする：「送信」より「無料トライアルを始める」
• 一人称の表現はコンバージョン率を高めることがよくあります（「ガイドを受け取る」）
• 避ける表現：「ここをクリック」「詳細を見る」「送信」

コピー作成のベストプラクティス

• 能動態、現在形を使い、機能より先にメリットを伝える
• 曖昧な主張より具体的な数値を使う（「時間を節約」ではなく「2時間を節約」）
• 短い文を使い、見出しや箇条書きで読みやすくする
• 読者が疑問を口にする前に、懸念に対処する
• ページ全体で複数の CTA を配置する（同じ行動を促すものに限定し、競合する行動を複数提示しない）

---

2. デザイン原則（必須要素11項目）

すべてのランディングページに11項目すべてが必要です。各項目の詳細については、references/11-essential-elements.md を参照してください。

#	要素	コンバージョンの目的	デザイン上の注意点
1	URL	キーワードを含むSEO向けスラッグ	—
2	ヘッダー／ロゴ	ブランドへの信頼、ナビゲーション	スクロール時にぼかしを加えて固定
3	ヒーロータイトル＋サブタイトル	明確な価値提案、キーワードを含むH1	個性のあるディスプレイフォント、4～6rem
4	主要CTA	ヒーローからのコンバージョン	コントラストの高い色、ホバー時のマイクロインタラクション
5	ソーシャルプルーフ	信頼性を高め、ためらいを軽減	数値をアニメーション表示、アバターを重ねて表示
6	画像／動画	製品のデモンストレーション	デバイスのモックアップまたはデモ動画。ストック写真は使用しない
7	メリット／機能	購入の理由を示す	アイコン付きの項目を3～6個。メリットを優先したコピー
8	お客様の声	同じ立場の人からの評価	写真＋名前＋役職を添えた4～6件。具体的な成果を記載
9	FAQ	懸念事項の解消	アコーディオン形式。質問を5～10個
10	最終CTA	2回目のコンバージョン機会	全幅のセクション。緊急性を促す要素
11	フッター	信頼性＋法的情報	連絡先、プライバシーポリシー、ソーシャルリンク

美的方向性

方向性を1つ選び、一貫して表現してください。

方向性	印象	適した分野
ミニマリスト	すっきりとした余白、モノクローム	プレミアムSaaS、専門サービス
大胆／マキシマリスト	豊かなレイヤー、鮮やかな色	クリエイティブエージェンシー、消費者向けブランド
レトロフューチャー	幾何学模様、ネオン、等幅フォント	開発ツール、ゲーム、テック系スタートアップ
オーガニック	柔らかな形、アースカラー	ウェルネス、食品、サステナビリティ
エディトリアル	明確なタイポグラフィの階層、非対称グリッド	メディア、コンテンツプラットフォーム

避けるもの：白地に紫のグラデーション（使い古されたAI風デザイン）、すべてのセクションで完全に左右対称なレイアウト、ノートパソコンを指さす人物のストック写真、デフォルトの黄色い星。

技術スタック（構築時）

Next.js 14+ · TypeScript · Tailwind CSS · ShadCN UI

構築順序：デザインシステム → SEOメタデータ → ヘッダー → ヒーロー（アニメーション付き） → メディア → メリット → お客様の声 → FAQ → 最終CTA → フッター。

本番環境ですぐに使えるShadCNコンポーネントの実装例については、references/component-examples.md を参照してください。

---

3. 制作ワークフロー

ランディングページのプロジェクトでは、次の手順に従ってください。

ステップ1 — 目標を定める

• コンバージョンにつながる行動を1つに絞る（CTAの遷移先は1つ）
• このページの対象となるオーディエンスのセグメント
• トラフィックの流入元（広告、メール、オーガニック）— トーンや想定される文脈を左右します

ステップ2 — まず構成を決める 11項目すべてを含む構成を使用します。近道をしないでください。ソーシャルプルーフやFAQがないページは、安定して成果が低くなります。

ステップ3 — コピーを書く コピーのフレームワーク（§1）を適用します。まずヒーローコピーを書いてください。10語で価値提案が明確に伝わらない場合は、先にオファーを明確にしてから続けます。

ステップ4 — デザインする 美的方向性を選び、デザインシステム（フォント、色、モーション）を定義してから、セクションごとに構築します。

ステップ5 — 最適化する

• ファーストビュー：スクロールせずに価値提案＋CTA＋信頼を示す要素1つが見える
• 複数のCTAは同じ行動を促す（目標を競合させない）
• フォーム項目を最小限にし、あらゆる摩擦要因を減らす
• モバイルファーストにし、実機でテストする
• パフォーマンス：LCP <2.5s、CLS <0.1、レイアウトシフトなし

ステップ6 — 公開前チェックリスト

• 見出しはメリットを中心に具体的に記述し、10語以内
• ページ全体で主要CTAを1つに統一
• 具体的なソーシャルプルーフを掲載
• モバイル対応
• ページの読み込みが3秒未満
• ファーストビューに信頼を示す要素が見える
• FAQで主な懸念事項の上位5つを網羅
• アナリティクスのトラッキングを設定済み

---

参考資料

• references/11-essential-elements.md — 各要素の詳細な解説、実装ガイダンス、良い例／悪い例
• references/component-examples.md — ヒーロー、メリット、お客様の声、FAQ、最終CTA、フッターの各セクション向けの、本番環境ですぐに使えるShadCN UIコンポーネント