# ECサイトのランディングページ：必要になるタイミング、載せるもの、テストすべきこと

> ランディングページは商品ページとは別物です。広告とのメッセージ一致、CTAは1つ、不安をその場で解消する構成、有料トラフィックに求められるスピード。具体的な12の施策と、本当にやる価値のあるテスト方法を紹介します。

Ryan Badger - 2024年11月9日 - 読了目安 10 分

## ランディングページとストアのほかのページの違い

ランディングページはトップページではありません。商品ページでもありません。特定の流入元（多くは有料広告）から来た特定のタイプのトラフィックを、特定のアクションにつなげるために作る単一目的のページです。ページ上のすべての要素はそのアクションのために存在し、貢献しないものは1ピクセルでもノイズになります。

多くのストアは、通常の商品ページをそのまま広告のランディングページに使っています。これは非効率です。商品ページは、ある程度の目的を持って見て回っている人向けに最適化されています。一方ランディングページは、広告をクリックしたばかりで前提知識がゼロの人を転換させなければなりません。役割が違えば、ページも違います。

この記事では、ECのコンバージョンを動かす具体的なランディングページの施策、やる価値のあるテストの進め方、そしてランディングページ特有の失敗を取り上げます。

## ランディングページが必要なとき（商品ページで済むとき）

**専用のランディングページを使うべきケース：**

- メッセージの一致が重要な有料広告（特定のセール、コレクション、訴求軸）
- キャンペーンの開始時（ブラックフライデー、新コレクションの発売）
- 全体像を伝える必要がある検討度の高い商品（客単価200ドル以上）
- コンバージョンを意識した構成が必要なSEO向けコンテンツ
- 紹介・パートナー・インフルエンサー経由のトラフィック

**既存の商品ページを使うべきケース：**

- ブランド名や一般的なキーワードでの流入など、閲覧して回ることが前提のトラフィック
- 検討度のとても低い購入（30ドル未満の衝動買い）
- 月間注文数が500件未満の場合（専用ページの費用対効果が下がります）

すべてのキャンペーンにランディングページが必要なわけではありません。ただし、1つのオーディエンスや訴求軸に月500ドル前後以上をかけているキャンペーンなら、専用ページを用意する価値があります。

## 0. 最高のランディングページは、その場で売る

施策に入る前に。ランディングページの成果を最も大きく改善できるのは、「欲しい」と「買った」の間にある余分なクリックをなくすことです。

ほとんどのランディングページ作成ツール（Unbounce、Leadpages、Klaviyo Pages、ClickFunnels）は、ランディングページをストアとは別物として扱います。購入者はページを読んで納得し、「今すぐ購入」をクリックして、別のURL（実際のストアの商品ページ）に移動します。そこでまた状況を把握し直し、読み直し、カートに入れ、チェックアウトへ進みます。ステップが増えるたびに、顧客は離脱していきます。

Shoprocketは違います。ランディングページそのものが購入の場になります。スクリプトタグ1つとdiv1つで、カート、購入ボタン、商品ブロック全体を、どんなランディングページにも直接埋め込めます（WordPress、Webflow、Framer、Carrd、手書きの静的HTMLでもかまいません）。訪問者が購入をクリックすると、カートはその場で開きます。チェックアウトもその場で開きます。コンバージョンは別のストアURLではなく、ランディングページ上で完結します。

**実際にこのブログ記事の中で動いているものがこちらです：**

ライブのカルーセル（このブログ記事内で動作中）

これと同じ仕組みを、作成中のどのランディングページにも置けます。必要なのはHTML3行だけ。リダイレクトも、別ドメインも、いま語ったストーリーから購入者を引き離すチェックアウトもありません。

**有料トラフィックでこれが重要な理由：**広告クリックから購入までの遷移が少ないほど、コンバージョンは上がります。購入がその場で完結するランディングページは、訪問者をストアに飛ばすページより大幅に高い成果を出します。ドメインをまたぐトラッキングの面倒もなくなり、計測もきれいに保てます。

以下の施策の多くは、そのまま当てはまります。ただ、ランディングページを「マーケティングの面」ではなく「購入の場」にするという土台の設計判断こそが、コンバージョン向上の大きな部分を占めています。そしてこれをここまできれいにやっているのは、Shoprocket以外にほとんどありません。

## 1. 広告とのメッセージ一致

広告が「オーガニックコットンTシャツ50%オフ」なら、ランディングページの見出しもそれに呼応させます。「オーガニックコットンTシャツ50%オフ、日曜まで」のように。「Acme Clothingへようこそ」ではありません。

メッセージの不一致は、有料トラフィックで最もよくある失敗です。広告はXを約束し、ページはYを届ける。訪問者の頭の中のイメージが崩れ、離脱します。メッセージが合っていないランディングページの直帰率は、80%を超えることも珍しくありません。

**ルール：**ランディングページの最初の画面は、広告からの方向転換ではなく、広告の続きに感じられるべきです。

## 2. 主要なアクションは1つだけ

ランディングページ1つにつき、アクションは1つ。「これを買う、またはニュースレターに登録、またはブログを読む、またはInstagramをフォロー」ではありません。競合するCTAはコンバージョンを薄めます。

主要なアクションは、たいてい次のいずれかです。

- カートに追加／今すぐ購入（商品を軸にしたランディングページの場合）
- フォームの送信（「送料ガイド」のダウンロードなど、リード獲得の場合）
- ローンチ待機リストへの登録（プレローンチのページの場合）

副次的なアクションは、はっきり副次的だとわかる扱い（小さく、階層が下で、主要CTAと競合しない）であれば問題ありません。副次的な位置づけの「ご質問はチャットで」は大丈夫です。

## 3. 最初の画面の仕事はひとつ：スクロールしてもらうこと

ページを開いたときに見える領域（ファーストビュー）で、売り切る必要はありません。スクロールする価値があると思ってもらえれば十分です。

置くべきもの：

- **見出し：** 具体的な約束をひとつ
- **サブ見出し：** 裏付けとなる根拠をひとつ
- **メインビジュアル：** ストック写真ではなく、使用中の商品や得られる結果が伝わるもの
- **主要CTA：** スクロールせずに見えて、タップできる位置に
- **信頼の証：** 評価とレビュー件数、メディア掲載、著名な顧客のいずれか

置くべきでないもの：

- ブランドストーリー
- ほかのカテゴリへのナビゲーション（この商品のために来た人の気をそらさない）
- 商品のあらゆる機能
- カルーセル（CROの記事を参照：カルーセルは静的なヒーローに劣ります）

## 4. ソーシャルプルーフの置き場所

ソーシャルプルーフ（レビュー、評価、メディア掲載、お客様の声、顧客数）は、不安が高まる場所に置く必要があります。

- 主要CTAの近く（クリックする前の安心材料）
- 重要な主張の直後（主張をすぐに裏付ける根拠）
- 専用のレビューセクション（じっくり検討する人向けの、より深い根拠）

悪いパターン：

- 誰もスクロールしない最下部に、お客様の声をまとめて置く
- 出典のない、ありきたりな「★★★★★ 私たちは最高です」バッジ
- 差し替えられないまま残った「誰かの本物のお客様の声」というプレースホルダー（実際によくあります）

良いパターン：

- カートに追加ボタンの近くに「3,400件以上のレビューで評価4.8/5」
- 実際のお客様の写真と名前（名のみ）、そして具体的な使用場面についての具体的なコメント
- 知られた名前（Forbes、NYTなど）のメディアロゴ。無名のロゴを15個並べない

## 5. 不安をその場で解消する

購入者にはそれぞれ具体的な不安があります。「その価格に見合うのか」「うたい文句どおりに効くのか」「間に合うように届くのか」「返品できるのか」。これらに答えないと、購入者は自分で「たぶんダメだろう」と埋めてしまいます。

優れたランディングページは、上位3つの不安にその場で答えます。

- **価格への不安：**「79ドルは高く感じる」→ 耐久性、年8ドル相当という所有コストの計算、2年保証を説明する段落
- **品質への不安：**「本当に良いものなのか」→ 写真付きレビュー、素材リスト、「製造地」の詳細
- **配送への不安：**「間に合うのか」→ 「午後3時までのご注文は当日発送、お届けは2〜5日、お気に召さなければ返品無料」
- **フィット／サイズへの不安：**「測り方」付きのサイズガイドをその場に配置

サポートチケットのつもりで考えてください。この商品についてサポートに届くすべての質問は、あなたのランディングページが答えていない不安です。

## 6. 長さ：売れるだけ長く、読めるだけ短く

ランディングページの長さをめぐる議論は、論点がずれています。長さは価格と検討度で決まります。

- **50ドル未満の衝動買い：** 短いページ。ヒーロー、根拠、レビュー、CTA。モバイルで2〜3画面に収まる
- **50〜200ドルの検討購入：** 中程度の長さ。機能、ソーシャルプルーフ、比較、FAQを追加。4〜6画面
- **200ドル以上の検討度が高い商品：** 長め。ストーリー全体、充実したレビュー、動画、比較表、保証の詳細、FAQ。すべてのセクションに存在意義があるなら、8〜12画面でも問題なし

あらゆる不安に答える長いランディングページは、不安を宙に浮かせたままの短いページよりコンバージョンします。ただし、水増しで長くしたページは、引き締まった短いページより悪い結果になります。

## 7. 動画は合うところに使う

ランディングページの商品動画は、一般にコンバージョンを10〜30%押し上げます。ただし、次の点に注意してください。

- 動画はミュートの自動再生にする（クリックして再生する方式は成果が落ちます）
- ほとんどの場合は60秒以内、できれば30秒以内
- 作り込んだブランド広告ではなく、商品を使っている様子を見せる
- 埋め込みのYouTubeではなく、自社サイトでホスティングする（YouTubeの埋め込みは読み込みが遅く、気をそらす関連動画も表示される）
- 字幕は常にオン（モバイルユーザーの多くは音を消して見ています）

## 8. FAQセクション（ただし本物の質問に答えるものだけ）

ランディングページのFAQが役立つのは、次のようなときです。

- 購入者が抱きがちな不安が予測でき、答えが具体的である
- ざっと見て探せる（アコーディオン形式で6〜10問）
- 各回答が3文以内

ランディングページのFAQが逆効果になるのは、次のようなときです。

- 購入者の本当の質問に答えず、ページの水増しになっている
- 回答がありきたりなマーケティングの美辞麗句
- 質問が30個もある（そんなに読む人はいません）

**テスト：**サポートの受信箱を開いてください。この商品についての購入前の質問の上位5〜8件が、あなたのFAQです。顧客が使っている言葉をそのまま写しましょう。

## 9. CTA：具体的に、繰り返し、見える位置に

主要CTAは1種類にして、スクロールに合わせてページ内に2〜4回繰り返します。

- ヒーローの近く（メイン）
- 主要なメリットのセクションの後
- 不安の解消やソーシャルプルーフの後
- 最下部

CTAの文言は重要です。「今すぐ購入」は一般的です。「無料の送料パックを受け取る」「14日間の無料トライアルを始める」「カートに追加 - £49」のほうが具体的です。

モバイル特有の注意点：ヒーローがスクロールで画面外に出たら、画面下部に固定表示される追従CTAを出します。モバイルのトラフィックには必須です。

## 10. ランディングページの速度

ランディングページは、作り込みすぎのせいで商品ページより遅くなりがちです。カスタムフォント、ヒーロー動画、埋め込みのSNSウィジェット、A/Bテスト用スクリプト、ヒートマップ用スクリプト、アナリティクス用スクリプトなどが原因です。

目標：モバイルの4G回線でLargest Contentful Paintを2.5秒未満に。Core Web Vitalsの詳細は[モバイル最適化の記事](https://v3.shoprocket.io/ja/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md)を参照してください。

速度を落とす要因のリスト：

- フル解像度のヒーロー画像（100〜300KBに圧縮する）
- ポスター画像のない自動再生動画（LCPを悪化させる）
- 複数のフォント（見出し用と本文用を1つずつに絞る）
- すべてのアナリティクスやリターゲティングのピクセルを同期読み込みすること

1クリック2〜10ドルを払っているランディングページは、速く読み込まれて当然です。CPC 5ドルのキャンペーンで1秒の遅延があると、広告費の10〜20%が直帰に消えます。

## 11. テスト：やる価値があるもの、ないもの

少ないトラフィックで行うランディングページのA/Bテストの多くは、ノイズしか生みません。サンプルサイズの計算は[CROの記事](https://v3.shoprocket.io/ja/blog/conversion-rate-optimisation-for-ecommerce-the-honest-sequence-that-actually-moves-the-number.md)を参照してください。

**テストする価値があるもの（トラフィックが十分あれば）：**

- ヒーロー見出しのバリエーション
- 主要CTAの文言
- 価格の見せ方（月額と年額、99ドルと99.99ドル）
- ソーシャルプルーフの形式（お客様の声、レビューの引用、数字）
- ヒーロー画像（商品、得られる結果、ライフスタイル）

**めったにテストする価値がないもの：**

- ボタンの色（せいぜい0.1〜0.5%の向上で、膨大なトラフィックが必要）
- わずかな文言の違い（5語違い、2文字違い）
- フッターの内容
- ナビゲーション項目

月間訪問者が5,000人未満のランディングページでは、定性調査（セッション録画、ヒートマップ）のほうがA/Bテストより役に立ちます。

## 12. ランディングページのよくある失敗

### 広告をトップページに飛ばす

広告は「レザーのノートパソコンバッグ」を狙っています。クリックすると、無関係な商品が200点並ぶトップページに着地します。訪問者はバッグを見つけられず、離脱します。ランディングページを作りましょう。

### どの広告オーディエンスにも同じランディングページを使う

Metaのコールドなトラフィックと、ウォームなリターゲティングでは、必要なメッセージが違います。コールドには、自分たちが何者で、商品が何かを証明します。ウォームには、前回買わなかった具体的な理由に応えます。

### 価格を隠す

ランディングページで価格を出し惜しみすると逆効果です。価格はファーストビューにはっきり表示しましょう。価格に怖気づく顧客は、どのみち離脱します。価格に魅力を感じた顧客は、より早くコンバージョンします。

### フォーム項目が多すぎる

ランディングページのフォームは、項目が1つ増えるごとに完了率が5〜10%下がります。必要なものだけを聞いてください。メールでガイドを送るのに電話番号は不要です。

### 広告とブランディングが食い違っている

広告は明るい色とカジュアルな口調。ランディングページは企業サイト風でグレー。すり替えられたような感覚になり、訪問者は離脱します。

## Shoprocketでできること

- **あらゆるランディングページにコマースを埋め込み**：カタログ、購入ボタン、カート、ストアフロント全体を、スクリプトタグ1つでどんなHTMLページにも設置できます。ランディングページそのものが購入の場になり、訪問者をストアに飛ばす別のマーケティングページにはなりません
- ホスト型のストアフロントのランディングページが必要な場合に使える、40種類以上のテーマを備えた**柔軟なページビルダー**
- キャンペーン用URLのための**カスタムドメイン＋サブドメイン** 対応
- メタ情報を細かく制御できる、SEO向けランディングコンテンツのための**ブログ／CMS**
- 高速なランディングページのための**自動画像最適化** とWebP配信
- ホスト型ストアフロントは**Core Web Vitals最適化済み**。埋め込みウィジェットは遅延読み込みされるので、手作りのランディングページも速いまま保てます
- カタログから個別の商品を指定して広告トラフィックを送れる**商品フィード**
- どのランディングページがコンバージョンしているかを測る**リアルタイム分析** とUTMトラッキング
- ダッシュボードのトグルで使える**トラッキングピクセル**（Meta、Google、TikTok）で、広告の成果を正しく計測

Shoprocketが標準では備えていないもの：ランディングページ単位の本格的なA/Bテスト（VWOやOptimizelyを併用してください）、ヒートマップ（HotjarやMicrosoft Clarityを使ってください。Clarityは無料です）。

> **ヒント：**有料キャンペーンを運用するなら、ランディングページはまず1つだけ作りましょう。最初から10パターンも作らないでください。そのページにキャンペーンを2〜4週間流し、セッション録画を見て、見えたことをもとにページを改善していきます。きちんと磨き込んだ1ページは、放置した5ページに勝ります。

## TL;DR

- **最高のランディングページ＝購入の場そのもの。** Shoprocketはカートとチェックアウトをどんなランディングページにも直接埋め込めますが、多くのプラットフォームは訪問者を別のストアURLに飛ばします
- **ランディングページは単一目的** であり、汎用の商品ページではありません
- **広告とのメッセージ一致** が、最大のコンバージョン施策です
- **主要CTAは1つ**。具体的な行動を示す文言で、2〜4回繰り返します
- **最初の画面で得るのはスクロールであって、購入ではありません**
- **ソーシャルプルーフはCTAや主張の近くに** 置き、最下部に埋もれさせない
- **不安はその場で解消する**（価格、品質、配送、フィット）
- **長さは検討度に比例** させ、適当に決めない
- **速度は通常のページ以上にランディングページで重要**（有料トラフィックは無駄にするには高すぎます）
- トラフィックがあるなら**ヒーロー、CTA、価格の見せ方をA/Bテスト**。なければ定性調査を
- **よくある失敗：** 広告をトップページに飛ばす、全オーディエンスに1ページで対応する、価格を隠す、フォーム項目が多すぎる

[無料トライアルを始めて](https://app-v3.shoprocket.io/signup)、テーマ付きストアフロント、フィード、ピクセルトラッキングを標準で備えたランディングページを作りましょう。14日間、カード不要。

---

- HTML version: https://v3.shoprocket.io/ja/blog/landing-pages-for-ecommerce-when-you-need-one-what-to-put-on-it-what-to-test
- Language: 日本語 (ja)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/landing-pages-for-ecommerce-when-you-need-one-what-to-put-on-it-what-to-test.md), [Deutsch](https://v3.shoprocket.io/de/blog/landingpages-ecommerce-wann-noetig-inhalt-testen.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/landing-pages-for-ecommerce-when-you-need-one-what-to-put-on-it-what-to-test.md), [English](https://v3.shoprocket.io/blog/landing-pages-for-ecommerce-when-you-need-one-what-to-put-on-it-what-to-test.md), [Español](https://v3.shoprocket.io/es/blog/landing-pages-ecommerce-cuando-necesitas-una-que-poner-que-probar.md), [Français](https://v3.shoprocket.io/fr/blog/pages-atterrissage-e-commerce-quoi-mettre-quoi-tester.md), [עברית](https://v3.shoprocket.io/he/blog/landing-pages-for-ecommerce-when-you-need-one-what-to-put-on-it-what-to-test.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/landing-pages-for-ecommerce-when-you-need-one-what-to-put-on-it-what-to-test.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/landing-page-ecommerce-kapan-perlu-isi-dan-cara-uji.md), [Italiano](https://v3.shoprocket.io/it/blog/landing-page-ecommerce-quando-servono-cosa-inserire-cosa-testare.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/nusileidimo-puslapiai-el-prekybai-kada-reikalingi-ka-deti-ir-ka-testuoti.md), [Norsk](https://v3.shoprocket.io/nb/blogg/landingssider-for-nettbutikk.md), [Nederlands](https://v3.shoprocket.io/nl/blog/landingspagina-ecommerce-wanneer-wat-testen.md), [Polski](https://v3.shoprocket.io/pl/blog/landing-page-dla-ecommerce-kiedy-potrzebujesz-co-umiescic-co-testowac.md), [Português](https://v3.shoprocket.io/pt/blog/landing-pages-para-ecommerce-quando-usar-o-que-colocar-o-que-testar.md), [Română](https://v3.shoprocket.io/ro/blog/pagini-de-destinatie-ecommerce-ce-pui-pe-ele-ce-testezi.md), [Русский](https://v3.shoprocket.io/ru/blog/landing-pages-for-ecommerce-when-you-need-one-what-to-put-on-it-what-to-test.md), [ไทย](https://v3.shoprocket.io/th/blog/landing-pages-for-ecommerce-when-you-need-one-what-to-put-on-it-what-to-test.md), [Türkçe](https://v3.shoprocket.io/tr/blog/e-ticaret-acilis-sayfalari-ne-zaman-ne-konur-ne-test-edilir.md), [中文](https://v3.shoprocket.io/zh/blog/landing-pages-for-ecommerce-when-you-need-one-what-to-put-on-it-what-to-test.md)