landing-page-optimization について
マーケターやプロダクトチーム向けのランディングページ最適化スキルです。ページ構成、コピーのフレームワーク、デザインパターン、信頼要素、価格設定、テストを扱い、コンバージョンを重視したページの改善に役立ちます。
主な機能
- 01ファーストビューの指針
- 02PAS、AIDA、FAB などのコピー手法
- 03レイアウトとデザインパターン
- 04ソーシャルプルーフと信頼要素
- 05価格ページの構成
- 06コンバージョンテストのチェックリスト
活用シーン
- 01ランディングページの見出しと CTA の見直し
- 02価格ページの計画
- 03モバイルレイアウトとページ遷移の確認
- 04見出し、CTA、ビジュアルのテスト設計
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/landing-page-optimizationを入力して読み込まれたか確認します。
同梱ファイルreferences/examples.md
詳細
ランディングページの最適化
SaaS、テクノロジー、Web3、金融、ヘルスケア業界の1,000以上のランディングページを分析して得られた、調査に基づく知見です。
基本原則
ランディングページは、24時間365日働く営業チームです。ユーザーは3秒でページにとどまるかどうかを判断します。明快さと、すぐに伝わる価値を重視しましょう。
1. ヒーローセクション（最初の3秒）
ヒーローセクションによって、訪問者がページにとどまるかが決まります。曖昧なヒーローは、コンバージョン率を40～60％低下させます。
要件
| 要素 | ガイドライン |
|---|---|
| 価値提案 | 何なのか？誰向けなのか？なぜ重要なのか？に答える |
| 見出し | メリットを中心にし、感情に訴える |
| サブ見出し | 根拠や具体性を加える |
| ビジュアル | 製品デモ、イラスト、または課題を視覚化したものを使用します。ストックフォトは使用しません。 |
| CTA | 2種類用意します。1つは気軽に始められるもの（「3分で始める」）、もう1つは価値の高いもの（「デモを予約」）です。 |
避けること
- 流行語：「AI搭載」「革新的」「次世代」「シームレス」「破壊的」
- ありきたりな画像（抽象的な球体、無関係なストックフォト）
- 曖昧なCTAを1つだけ置くこと
変換例
Before: "Innovative AI Platform" + bland orb visual
After: "The Only Platform for Continuous Offensive Pentests -
Catch SOC2 Violations Before Hackers Do" + vulnerability icons
結果：ページ滞在時間が2倍、クリック率が35％向上。
2. コピーライティングのフレームワーク
優れたコピーは平凡なデザインを引き立てます。悪いコピーは優れたデザインの価値を損ないます。すべての言葉は、ざっと読めて、感情に訴え、メリットを伝えるものでなければなりません。
主なフレームワーク
PAS（問題・問題の深掘り・解決策） — コンバージョン率が25～40％向上した事例があります
- 悩みを提示：「コンバージョン率の低さにうんざりしていませんか？」
- 問題を深掘り：「訪問者の78％が数秒で離脱しています。」
- 解決策を提示：「当社のテンプレートなら、コンバージョン率が3倍になります。」
AIDA（注意・関心・欲求・行動）
- 注意を引く印象的な一文で始めます
- ストーリーや関連性のある情報で関心を高めます
- 明確なメリットで欲求を生み出します
- 具体的なCTAで締めくくります
FAB（機能・優位性・メリット）
- 機能：「AIチャットボット」
- 優位性：「24時間365日のサポート」
- メリット：「カスタマーサービス担当者の採用コストを年間1万ドル削減」
ビフォー・アフター・ブリッジ
- ビフォー：苦労している状態
- アフター：成功した状態
- ブリッジ：自社製品
コピーのルール
- 具体的にする：「売上を47％伸ばす」＞「収益を増やす」
- 力強い言葉を使う：「解き放つ」「変革する」「圧倒する」
- 短い文を使います。能動態にします。
- 社会的証明を盛り込みます：「リードを2倍にした500人以上の創業者に加わりましょう」
3. デザインパターン
ユーザーが求めるのはシンプルさです。複雑なデザインでは直帰率が70％に達する一方、ミニマルなデザインでは30％です。
効果的なもの
| パターン | 用途 |
|---|---|
| ミニマリズム | すっきりしたレイアウト、主役となる配色、意図的な余白 |
| 弁当箱グリッド | 機能やお客様の声に使用します。インタラクティブにするには、フリップカードを追加します |
| iOS風 | 角丸、控えめな影、遊び心のある料金カード |
| 1ページ構成 | スタートアップ、迅速な構築、高いコンバージョン |
効果がないもの
- スクロールの乗っ取り
- 過剰なアニメーション
- 2秒を超える読み込み時間
- 紫色の使いすぎや無秩序なエフェクト
- デスクトップ優先のデザイン（トラフィックの60％はモバイル）
目標指標
- 読み込み時間：1秒未満
- 直帰率：35％未満
- 直線的で予測しやすいスクロールの流れ
4. 社会的証明と信頼
コンバージョン率に満足している企業は、わずか22％です。その差を生むのは、多くの場合、信頼のシグナルです。
効果的な証明要素
| 種類 | 実装方法 |
|---|---|
| お客様の声 2.0 | 重要なフレーズを強調し、プロフィールを目立たせ、ニッチに合わせます（「SaaS創業者として……」など） |
| ロゴ＋実績指標 | 認知度の高い顧客ロゴとともに「1万人以上のユーザーに信頼されています」と表示します |
| 導入事例 | 短く、メリットを中心にします：「2週間でコンバージョン率が10％から45％に」 |
| 緊急性を生む要素 | カウントダウン、残り枠の限定、「ウェイティングリストに登録した500人に加わりましょう」 |
強力な社会的証明によって、コンバージョン数が2～3倍に増える可能性があります。
5. 料金ページのデザイン
料金はユーザーが最も知りたいことです。料金を隠すと訪問者を逃します。
構成（最大3段階）
| プラン | 料金 | 位置づけ |
|---|---|---|
| スターター／無料 | 月額0～29ドル | 入門プラン、基本機能 |
| Pro（強調表示） | 月額49～149ドル | 「最も人気」バッジ、最高の価値 |
| エンタープライズ | 個別見積もり | 「お問い合わせ」、専任サポート |
ベストプラクティス
- 機能だけでなく、メリットを示す
- 月額／年額の切り替えを用意する（年額では節約額を表示）
- CTAを改善する：「今すぐ購入」より「始める」
- 自信があるなら返金保証は省き、成果に焦点を当てる
この構成により、アップセルが30％増加しました。
6. コンバージョン最適化チェックリスト
ページの99％はコンテンツが多すぎます。ユーザーの集中力が続くのは8秒です。
シンプル化のルール
- ランディングページではナビゲーションメニューを削除する
- すべての要素を1つのコンバージョン目標につなげる
- 気を散らす二次リンクや選択肢を置かない
- ファーストビューのコンテンツで「何を？」「誰に？」「なぜ？」に答える
テスト要件
- 見出しをA/Bテストする（最も効果が大きい）
- CTAをA/Bテストする（文言、色、配置）
- ビジュアルをA/Bテストする（製品、ライフスタイル、抽象的な表現）
- モバイルでテストする（トラフィックの60％）
緊急性を促す要素
- カウントダウンタイマー（控えめに使用）
- 数量限定のメッセージ
- 期限付きの特典
シンプル化後の成果：コンバージョン率が50〜100％向上。
クイックリファレンス：避けるべきパターン
| 避けること | 理由 |
|---|---|
| 「革新的なAIプラットフォーム」 | 具体的なことが何も伝わらない |
| 笑顔の人物のストック写真 | ありきたりで、信頼感に欠ける |
| 価格を隠す | ユーザーの不満第1位 |
| 文字の壁 | ユーザーは流し読みし、熟読しない |
| 競合する複数のCTA | 意思決定ができなくなる |
| 読み込みの遅さ | 1秒ごとにコンバージョンが7％減少 |
| モバイルを後回しにする | トラフィックの大半はモバイル |
フレームワーク選択ガイド
| 目標 | フレームワーク |
|---|---|
| 具体的な課題に対処する | PAS |
| 変化のストーリーを伝える | Before-After-Bridge |
| 複雑な機能を説明する | FAB |
| ファネル全体のストーリーを伝える | AIDA |
| 見込み客を見極めてコンバージョンにつなげる | QUEST |
詳細な例とケーススタディについては、references/examples.mdを参照してください。