オープン率を高めるCTA配置のベストプラクティス

商品ページ上の Tangiblee のコールトゥアクション（CTA）の位置は、サイズ、色、アニメーション、文言よりもオープン率に大きな影響を与えます。この記事では、CTAをどこに配置し、どうデザインし、どうラベリングするかを、デバイスと商品カテゴリごとに説明します。各ガイドラインの根拠となるデータも掲載しています。

始める前に

• オープン率とは、Tangiblee の商品ページを訪れたユーザーのうち、Tangiblee の体験を開いたユーザーの割合です。CTAまでスクロールしないユーザーを含め、ページのすべてのユーザーをカウントします。
• データは、2026年7月から10月に実施した、2つの Tangiblee Analytics の商品ページ監査に基づいています。1つ目はジュエリーと腕時計、2つ目はバッグとラゲッジを対象としています。
• 結果は小売業者全体で集計しています。個別のサイトは特定できません。

注意: 監査では異なる小売業者を比較しています。カテゴリ、市場、価格帯、トラフィックは統制されていません。結果は証明された効果ではなく、信頼できる目安として扱い、大きな変更は展開する前にテストしてください。下の「CTAの変更をテストする」をご覧ください。

主なガイドライン

モバイルでのCTAの配置

モバイルでは、最初の画面内のCTAの方が、スクロールしないと見えない位置のCTAよりオープン率が高くなります。最も効果的な配置は、ギャラリーまたはメイン画像のすぐ下と、メイン画像の下部です。このエリアは親指の届く範囲にあり、購入者が商品の詳細に視線を移す道筋上にあります。

バッグとラゲッジのページでは、ギャラリーのすぐ下のCTAのオープン率の中央値は 17.4% です。スクロールしないと見えない位置にある購入ボックス内のCTAのオープン率の中央値は 10.6% です。

バッグとラゲッジ（オープン率の中央値、90日間）

ジュエリーと腕時計（オープン率の平均値、7日間）

トラフィックの少ない1社の小売業者は、CTAをメイン画像の下部に置き、オープン率 30.3% を達成しました。画像下部のゾーンを裏付けますが、正確な数値ではありません。

同じ小売業者をデバイス間で比較しても同じ傾向が見られます。モバイルのCTAがスクロールしないと見えない購入ボックス内にあるバッグとラゲッジの小売業者 13 社のうち 10 社では、モバイルのオープン率がデスクトップより低く、中央値で 3.6 ポイントの差があります。ギャラリーのすぐ下にCTAを置いている小売業者は、モバイルで中央値 2.1 ポイント上回っています。

注意: 2つの監査は期間も手法も異なります。配置の比較は、監査間ではなく、同じ監査の中で行ってください。

モバイルのガイドライン

• オーバーレイは画面ではなく画像に固定します。
• オーバーレイを画像の端から 16 〜 20 ピクセル内側に寄せます。
• 購入者がギャラリーをスワイプしている間も、オーバーレイを表示したままにします。
• CTAを画像の上部の角に置かないでください。パンくずリストやナビゲーションと競合します。
• CTAをサムネイルバーの下や購入ボックス内に置かないでください。これらのエリアは通常、スクロールしないと見えない位置にあります。
• チャットバブル、ロイヤリティバッジ、アクセシビリティボタン、固定表示の「カートに追加」バーなど、浮動要素を確認します。すべてのスクロール位置でCTAを確認し、要素が重なる場合はCTAを中央寄りに移動します。

デスクトップでのCTAの配置

デスクトップでは、購入ボックスは通常、スクロールせずに見えます。購入者がサイズ、色、スタイルを選ぶ場所である、バリエーションセレクターと「カートに追加」の間にCTAを配置することをおすすめします。レイアウト上それができない場合は、メイン画像のすぐ下に中央揃えで配置します。

メイン画像の上部のオーバーレイは、2つの監査のどちらでもオープン率が最も低くなっています。バッグとラゲッジの監査では、購入ボックス内の配置の中央値は、小さなリンクで 13.9%、幅いっぱいのボタンで 13.2% です。メイン画像上のCTAの中央値は 10.8% です。

バッグとラゲッジ（オープン率の中央値、90日間）

ジュエリーと腕時計（オープン率の平均値、7日間）

注意: ジュエリーと腕時計の小売業者のうち、複数社は期間中のデスクトップユーザーが 600 人未満でした。ジュエリーと腕時計のデスクトップの数値は目安としてご覧ください。

ヒント: デスクトップの購入ボックスで効果的な配置を、そのままモバイルに当てはめないでください。モバイルでは、購入ボックスは通常、スクロールしないと見えない位置にあります。デバイスごとに配置を決めてください。

カテゴリ別の配置

一般的なガイドラインはすべてのカテゴリに適用されます。次の表は、データがカテゴリごとに補っている内容を示しています。

バッグとラゲッジ

バッグとラゲッジは、両方のデバイスで、すべてのカテゴリの中で最も強い根拠があります。モバイルでは、監査で最も高いオープン率は、メイン画像下部の2つのピル型ボタンでした。デスクトップでは、購入ボックスの方がメイン画像よりオープン率が高くなります。

サイズと容量は、バッグを購入するかどうかの判断を左右します。両方の体験がある場合は、2つのエントリーポイント（スケール用と容量用）をおすすめします。サイズのラベルと容量のラベルのオープン率はほぼ同じです。体験が示す内容に合うラベルを選んでください。

オープン率は、同じレイアウトでも市場によって変わります。1つのブランドでは、市場ごとのモバイルのオープン率が 8.6% から 13.8% までばらついています。配置の比較は、同じ市場の中で行ってください。

ジュエリー

ジュエリーのデータの大半は指輪のページから得たものです。ブレスレットとイヤリングのサンプルは小さいです。モバイルでは、メイン画像のすぐ下に中央揃えで置いたCTAの平均オープン率が最も高くなります（5社で 14.5%）。デスクトップでも、メイン画像のすぐ下の平均オープン率が最も高く（3社で 11.0%）、画像上部のオーバーレイが最も低くなっています。

カメラのアイコンは、このカテゴリでの試着の慣例です。文言はジュエリーでは分析されていないため、一般的なラベルのガイドラインを適用します。

腕時計

監査には2社の腕時計の小売業者が含まれ、モバイルのオープン率は 8.4% と 12.7% です。配置を区別するには不十分です。ジュエリーのガイドラインをおすすめします。モバイルの最初の画面内で、メイン画像の下部またはメイン画像のすぐ下に、カメラのアイコンを使った試着CTAを置く方法です。

CTAのデザイン

スタイル

CTAはアクションに見える必要がありますが、「カートに追加」よりは控えめにする必要があります。

• テキストリンクだけでは、本文やナビゲーションに見えます。
• 購入カラーの大きな塗りつぶしボタンは、「カートに追加」と混同されたり、そのように無視されたりすることがあります。
• アウトラインボタン、または枠線とアイコン付きの白いピル型ボタンがおすすめのパターンです。
• 画像上では、CTAが明るい商品写真と暗い商品写真の両方でコントラストを保てるか確認します。

バッグとラゲッジの監査では、最も大きなボタンは購入アクションに似た塗りつぶしボタンでした。このボタンは両デバイスで成績が低い部類でした。デスクトップの購入ボックス内の幅いっぱいのボタンと小さなリンクは、ほぼ同じ結果でした。

サイズ

サイズの影響は、位置より小さいです。

• モバイルでは、高さ 44 ピクセル以上にします。
• モバイルでは、画面幅の 35 〜 60% の幅にします。これは、ジュエリーと腕時計の監査で最も効果的だったモバイルCTAの範囲です。
• デスクトップでは、スウォッチ行または「カートに追加」列の幅に合わせます。

アイコン

内容が一目でわかるアイコンは、クリックしたときに何が起こるかを購入者に伝えます。試着にはカメラ、サイズには定規またはスケール、容量にはバッグの輪郭を使います。

ジュエリーと腕時計の小売業者 15 社のうち 11 社がカメラのアイコンを使っています。スキャン枠のような抽象的なアイコンは、購入者に推測を強います。テキストなしでアイコンのトグルのみを使っている小売業者は、モバイルで 27.7% を達成しています。

アニメーション

アニメーション付きのCTAと静的なCTAは、データ上で差がありません。ジュエリーと腕時計の小売業者 15 社のうち 5 社がアニメーション付きのCTAを使っています。

CTAのラベル

バッグとラゲッジの監査では、配置と市場を考慮すると、文言とオープン率の間に一貫した関係は見られませんでした。ラベルは品質の基準であり、成長を左右する要因ではありません。購入者の言語で、短く具体的なラベルをおすすめします。

注意: 文言はジュエリー、腕時計、家具とホームデコレでは分析されていません。これらのラベルは例であり、測定した結果ではありません。

次のラベルは避けてください。

• 「サイズ情報」のような一般的なラベル。静的なサイズ表に見えます。
• カテゴリで意味が明確ではない言葉。バッグでは、「フィット」だけを使うのを避けます。
• サイトの標準のサイズガイドや寸法セクションの名前。同じ名前の標準のアコーディオンは、CTAと競合します。

文言に関するデータが示す内容

• サイズのラベルと容量のラベルのオープン率はほぼ同じです。モバイルでは 12.3% と 11.5%、デスクトップでは 13.7% と 13.1% です。
• 動詞で始まるラベルはデスクトップでは上回り（14.3% 対 12.9%）、モバイルでは下回ります（10.5% 対 12.7%）。一貫した傾向はありません。
• ラベルの長さとオープン率に明確な関係はありません。英語やその他のラテン文字の言語の 14 個のラベルで、順位相関はモバイルで -0.19、デスクトップで 0.11 です。どちらの値も 0 に近いです。
• 同じラベルを同じ位置に置いても、市場によって結果が変わります。1つのブランドは、英語サイトで同じ購入ボックスの位置に同じラベルを使い、デスクトップのオープン率は 10.9% から 16.8% までばらつきます。別のブランドは、すべてのドイツ語サイトで同じラベルを使い、デスクトップのオープン率は 12.9% から 16.6% までばらつきます。
• ほぼ同じラベルでも、配置によって結果が異なります。「サイズを見る」は、モバイルでギャラリーのすぐ下に置くと 18.8% に達します。「バッグのサイズを見る」は、スクロールしないと見えない購入ボックス内で 10.6% です。

オープン率は、クリック後に何が起こるかを示しません。わかりやすいラベルは、オープン数は少なくても、より質の高いオープンをもたらす可能性があります。どちらの監査もこれを測定していません。確かめるには、トラフィックの多い小売業者で1社を選び、デザインと位置を同じにしてラベルだけを変えるテストを実施します。オープン率と Interacted CVR（Tangiblee の体験を開いたユーザーのCVR）を確認してください。

エントリーポイント

エントリーポイントとは、Tangiblee の体験を開く、ページ上のあらゆる要素です。1つのページに複数あってもかまいません。

• ページのゾーンごとに1つのエントリーポイントを使います。
• 別のエントリーポイントを追加するのは、異なる結果につながる場合だけにします。たとえば、サイズ用と容量用です。
• 同じCTAを同じラベルで、多くの場所に繰り返し置かないでください。到達率ではなく、ノイズが増えます。
• 各エントリーポイントを個別にタグ付けし、それぞれがオープン率にどれだけ貢献しているかを測定します。

在庫切れページ

購入できない商品や在庫切れの商品のページでも、CTAを残してください。購入者は、購入できない商品でもサイズや見た目を確認したいと考えています。バッグとラゲッジの監査では、デスクトップで最も高いオープン率のうち 2 つが、購入できない商品のページから得られました。

CTAの到達率

読み込まれない、または読み込みが遅いCTAは、デザインに関係なくオープンを失います。監査では次の事例が見つかりました。

• 表示されるまで 25 〜 40 秒かかったCTA。
• スクロールした後に初めて表示されたCTA。
• クッキーやデータ共有を拒否した訪問者にとって非表示になっていたCTA。

CTAのデザインを変更する前に、CTAが次の条件を満たしているか確認してください。

1. すばやく表示される。
2. ユーザーの操作なしで表示される。
3. サイトが許可するすべての同意状態で表示される。

CTAの変更をテストする

大きなCTAの変更には、B/B テストをおすすめします。B/B テストでは、両方のグループに Tangiblee を表示します。コントロールグループは現在のCTAをそのまま使い、バリエーショングループは新しいCTAを使います。