ShopifyストアでFramerのランディングページを運用する方法

キャンペーン用のランディングページはFramerで作り、カートと決済はShopifyのストアの中に残します。カートのパーマリンクが買い手を運び、カートの中身まで入れてくれます。この構成が壊れる原因は2つです。ドメインが2つになってアクセス解析が混乱すること、そして2か所の価格がずれていくことです。どちらも半日で直せます。

FramerのLPと、Shopifyのストアを分ける

Framerが受け持つのは、更新が多くてデザインの自由が欲しいページです。キャンペーンのランディングページ、記事広告、ブランドストーリー、ローンチページ、診断の結果ページ。Shopifyが持つのは、お金に関わるものすべてです。商品ページ、コレクション、カート、決済、会員アカウント、注文状況。決済は作り直さないでください。

この分け方がうまくいくのは、2つの役割が違い、更新の頻度もまったく違うからです。今月、ランディングページのバリエーションは4本出しても、決済には一度も触りません。

引き渡しはカートのパーマリンクで

Shopifyは、リンクから直接カートに商品を入れるURLの形式を公開しています。Framerのボタンのリンク先をyourstore.com/cart/VARIANT_ID:QUANTITYにします。割引を付けるなら?discount=CODEを足します。複数の商品を入れるならカンマでつなぎ、/cart/11111:1,22222:2のように書きます。決済画面へ直行させず、カートのページに着地させたいときは?storefront=trueを足します。

バリアントIDは、Shopifyの管理画面でバリアントを開いたときのURLに入っています。オファーごとにパーマリンクを1つ、共有メモにまとめておいてください。バリアントIDを1つ間違えると、買い手全員が違う容量の商品を買うことになります。しかも気づくのは、出荷レポートを見るときです。

広告に1ドル使う前に、計測を直す

FramerとShopifyの組み合わせが静かに壊れるのは、たいていここです。訪問者はFramerのドメインで始まり、Shopifyの決済で終わります。設定が正しくないと、GA4は1回のセッションを2回として数え、Metaはクリックと購入のつながりを見失います。

やることは4つです。GA4のクロスドメイン測定のリストに両方のドメインを登録するか、2つを同じルートドメインにそろえます。MetaのピクセルをFramerに入れ、Shopify Customer Events経由でもう一度入れます。UTMパラメータをパーマリンクに引き継がせて、流入元がドメインをまたいでも残るようにします。最後に、実際に1件テスト購入し、GA4に1回、Metaに1回だけ記録されることを確認します。2回でも0回でもいけません。

2つのシステムで価格を合わせ続ける

Framerのページに49ドルと書いてあるのにShopifyが54ドルを請求した時点で、返金依頼とレビューの問題が始まります。価格は1ページにつき1か所だけに書いてください。書き出した画像の中には絶対に入れない。2時間かけて作ったヒーローの画像の中にも入れないでください。

ランディングページが3本を超えたら、オファーをFramer CMSのコレクションに移します。フィールドは価格、比較対象価格、パーマリンク、在庫状況です。こうすれば1回の編集で全ページが更新されます。月に一度、公開中の各ページとShopifyの商品を並べて開き、価格が一致しているか確認するリマインダーを入れておきましょう。

せっかく手に入れた速さを守る

Framerのページは、最初は速いです。そこに誰かがチャットウィジェット、ヒートマップの録画ツール、ピクセルを2つ、レビューの埋め込みを足すと、4G回線でヒーローの表示に4秒かかるようになります。GoogleのLargest Contentful Paintの基準は、実際のモバイル訪問の75パーセンタイルで2.5秒です。それがページ全体に使える持ち時間です。

ヒーロー画像は、実際に表示されるサイズで配信します。この画像には遅延読み込みをかけません。レビューのウィジェットは、ファーストビューより下でだけ読み込みます。確認はオフィスのWi-Fiにつないだパソコンではなく、速度を絞ったモバイル回線の実機で行ってください。

Framerが向いていない場面

200SKUのカタログを、絞り込み、検索、毎日変わる在庫つきで扱うなら、それはShopifyの仕事です。Framerはキャンペーンページだけに使います。Framerが力を発揮するのは、デザインの質と改善の速さが結果を決める場面です。つまりカタログの閲覧ではなく、ランディングページです。

設定の手順

Framerのドメインをつなぎます。ランディングページを1本と、カートのパーマリンクを1つ作ります。両方のプラットフォームにピクセルを入れ、リンクにUTMパラメータを引き継がせます。実際に1件購入し、GA4、Meta、Shopifyの注文の3か所で追いかけます。そこまで済んでから、広告費を向けてください。

最初の1ページに1日、それ以降は1ページあたり1時間を見ておきます。この構成にする理由は速さそのものです。新しい切り口は、スプリントを組まずに半日で公開できるはずです。