free-shipping-thresholds

送料無料のしきい値

概要

送料無料のしきい値を設定すると、送料の支払いを避けるために、顧客はカートに商品を追加するようになります。これは、平均注文額を増やすうえで最もコンバージョン率の高い施策の1つです。重要なのは、商品が追加されるたびに更新される動的な進捗バー（「あと $12 で送料無料」）を表示することです。ほとんどのプラットフォームでは、この機能を標準で利用できるか、コードを書かずにアプリで追加できます。

このスキルを使うタイミング

• 平均注文額を増やすために、送料無料バナーやカートの進捗バーを追加するとき
• 顧客の会員ランクごとに異なる送料無料のしきい値を設定するとき
• 平均注文額（AOV）を最適化できる金額を見つけるため、異なるしきい値をA/Bテストするとき
• 「あと $X で送料無料」といったメッセージを動的に表示したいとき
• 配送地域（国内と海外）ごとに送料無料のルールを変えるとき

基本的な手順

手順 1：プラットフォームを特定して、適切なツールを選ぶ

プラットフォーム	推奨ツール	理由
Shopify	標準の配送設定 + Hextom Free Shipping Bar アプリ	Shopify でルールを設定し、Hextom などのアプリで進捗バーを表示できます
WooCommerce	WooCommerce Shipping（標準の送料無料方法）+ WooCommerce Free Shipping Bar プラグイン	WooCommerce には標準の送料無料ルールがあり、プラグインでバーの UI を追加できます
BigCommerce	標準の送料無料プロモーション + 送料無料バーアプリ	BigCommerce には、送料無料のしきい値に対応した標準のプロモーションルールがあります
カスタム／ヘッドレス	ルールリゾルバー + 進捗バーコンポーネントを構築	しきい値のロジック、顧客セグメント別のルール、UI を完全に制御できます

手順 2：送料無料ルールを設定する

Shopify

送料無料の配送レートを作成する（先に必ず設定）：

1. Settings → Shipping and delivery → Manage rates に移動します
2. 配送地域の下にある Add rate をクリックします
3. 名前を「Free Shipping」にして、価格を $0.00 に設定します
4. Conditions で「Only available if order meets conditions」にチェックを入れ、Based on order price を選択して、最低注文金額（例：$75）を設定します
5. 保存します

進捗バーを追加する（Hextom Free Shipping Bar アプリ — 無料プランあり）：

1. Shopify App Store から Hextom: Free Shipping Bar をインストールします
2. アプリが Shopify の設定から送料無料のしきい値を自動的に検出します
3. バーのテキストをカスタマイズします。例：「送料無料まであと {{amount}} です！」。{{amount}} は動的に置き換えられます
4. アプリのテーマエディターから、カートページやミニカートにバーを配置します
5. 段階的なしきい値（例：ロイヤルティ会員にはより低いしきい値を適用）の場合は、顧客タグに基づく条件に対応した Hextom の有料プランを使います

代替案 — Shopify Plus：セグメントごとのしきい値に Scripts を使う：

• Shopify Scripts（Plus 専用）を使うと、顧客タグに応じて異なる配送レートを適用する、Ruby に似たコードを記述できます
• Online Store → Scripts → Shipping に移動し、セグメントごとの送料無料ルールを設定します

WooCommerce

送料無料の配送方法を作成する：

1. WooCommerce → Settings → Shipping → [Your shipping zone] → Add shipping method に移動します
2. Free Shipping を選択し、Add shipping method をクリックします
3. Free Shipping をクリックして設定します
4. 「Free shipping requires...」を A minimum order amount に設定し、しきい値（例：$75）を入力します
5. 必要に応じて Coupon にチェックを入れると、送料無料クーポンでもこのルールが適用されます
6. 変更を保存します

プログレスバーを追加する：

• WPFactory の WooCommerce Free Shipping Bar（WordPress.org で無料）または Iconic WooCommerce Free Gifts（有料、バー機能付き）をインストールします
• WPFactory のプラグインは送料無料のしきい値を自動で読み取り、カートにバーを表示します
• プラグインの設定でバーのメッセージを設定します：「送料無料にするには、あと {{amount_remaining}} 分お買い上げください！」

顧客のランクに応じてしきい値を設定する場合：

• WooCommerce Role-Based Pricing プラグインをインストールするか、Advanced Shipping プラグインの条件付きロジックを使って、ユーザーロールごとに異なるしきい値を適用します
• よく使われる方法として、「Wholesale」ユーザーロールを作成し、より低い最低注文金額で適用されるカスタム送料無料方法を設定します

BigCommerce

送料無料プロモーションを作成する：

1. Marketing → Promotions → Create a promotion に移動します
2. プロモーションの種類として Shipping を選択します
3. 条件を設定します：「カートの小計が [金額] 以上」
4. アクションを設定します：「送料無料」
5. プロモーションを有効にし、一時的なプロモーションの場合は開始日と終了日を設定します

プログレスバーを追加する：

• BigCommerce App Marketplace から送料無料バーのアプリをインストールします（「free shipping bar」で検索してください）
• Rebolt ‑ Free Shipping Bar は BigCommerce で利用でき、プロモーションの設定を自動で読み取ります

地域ごとに変える場合（国内と海外）：

• BigCommerce で配送ゾーンごとに別々の配送プロモーションを作成します
• 各プロモーションは特定の配送ゾーンに限定できます

ステップ 3：プログレスバーのメッセージとアップセルの動作を設定する

プラットフォームにかかわらず、次のメッセージ作成のベストプラクティスが当てはまります。

1. しきい値に達する前：「送料無料にするには、あと $12.50 分お買い上げください！」—パーセンテージではなく、具体的な金額を必ず表示します
2. **しきい値の直前（あと $5～$15）：**不足分を埋める商品の提案を表示することを検討します —「人気商品を追加すると条件を満たせます」（多くのアプリがこの機能に対応しています）
3. しきい値に到達したとき：「送料無料になりました！」と、お祝いを表すスタイルで表示します — 緑色、チェックマークのアイコン
4. カートページとミニカートのドロワーの両方にバーを配置します — ミニカートでバーを見る顧客は、平均注文額（AOV）が高くなります

カスタム／ヘッドレス

// Server-side: resolve free shipping status for a cart
function resolveShippingThreshold(params: {
  cartSubtotalCents: number;
  shippingCountry: string;
  customerTags: string[];
  thresholdRules: ShippingThresholdRule[];
}): { isFree: boolean; thresholdCents: number; amountNeededCents: number; progressPct: number } {
  // Find the highest-priority matching rule
  const rule = params.thresholdRules
    .filter(r => r.isActive)
    .filter(r => !r.countries?.length || r.countries.includes(params.shippingCountry))
    .filter(r => !r.customerTags?.length || r.customerTags.some(t => params.customerTags.includes(t)))
    .sort((a, b) => b.priority - a.priority)[0];

  if (!rule) return { isFree: false, thresholdCents: 0, amountNeededCents: 0, progressPct: 0 };

  const isFree = params.cartSubtotalCents >= rule.thresholdCents;
  const amountNeededCents = Math.max(0, rule.thresholdCents - params.cartSubtotalCents);
  const progressPct = Math.min(100, Math.round((params.cartSubtotalCents / rule.thresholdCents) * 100));

  return { isFree, thresholdCents: rule.thresholdCents, amountNeededCents, progressPct };
}

// React component for the progress bar
function FreeShippingBar({ amountNeededCents, progressPct, isFree }: {
  amountNeededCents: number; progressPct: number; isFree: boolean;
}) {
  const formatted = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
    .format(amountNeededCents / 100);

  return (
    <div className="free-shipping-bar">
      {isFree ? (
        <p>You've unlocked FREE shipping!</p>
      ) : (
        <p>Add <strong>{formatted}</strong> more for FREE shipping</p>
      )}
      <div className="progress-track">
        <div className="progress-fill" style={{ width: `${progressPct}%` }} />
      </div>
    </div>
  );
}

ステップ 4：適切なしきい値を設定する

しきい値は平均注文額（AOV）より高く、かつ達成可能な金額にします。

• **目安：**送料無料のしきい値を現在の AOV より 20～30％高く設定します
• **採算性を確認する：**平均配送コストが $8、粗利益率が 40％の場合、アップセルによる追加収益で $8 の配送コストを補う必要があります
• **A/B テスト：**Google Optimize（現在は GA4 Experiments）などのツールや Shopify 組み込みのテーマ A/B テストを使って、異なるしきい値をテストできます

ベストプラクティス

• カートページとミニカートの両方にプログレスバーを表示します — ミニカートでプログレスバーを見る顧客は、チェックアウト画面で初めて見る顧客よりも頻繁に商品を追加します
• リアルタイムで更新します — 商品が追加されたらバーをすぐに更新します。古い値は信頼を損ないます
• クーポンコードではなく、送料無料を標準の特典にします — コードの入力を求めると手間が増えます。自動適用されるしきい値のほうがコンバージョンにつながります
• デフォルトで海外注文に送料無料を適用しないでください — 海外配送コストが利益全体を上回る場合があります。最初から地域制限を設定してください
• ヘッダーやサイト全体のバナーにしきい値を表示します — 上部のバーに「$75 以上のご注文で送料無料」と表示すれば、顧客が買い物を始める前に条件を伝えられます

よくある問題

問題	解決方法
プログレスバーに「送料無料」と表示されるのに、チェックアウト時に送料が請求される	プラットフォームの配送設定で送料無料の配送方法が有効になっていること、また、ほかのルールによって上書きされていないことを確認してください
クーポンによってカートの金額がしきい値を下回っても、送料無料が適用される	WooCommerce では、送料無料の配送方法に「割引適用後の最低注文金額」を設定してください。Shopify では、配送方法の料金が割引適用後の小計を使用していることを確認してください
海外の顧客にも送料無料のバーが表示される	配送方法を国内の配送ゾーンのみに設定し、アプリで国内の訪問者にのみバーを表示するように設定してください
プログレスバーに 100% と表示されるのに、注文金額がしきい値を下回っている	進捗の計算で、配送方法のルールと同じ小計（割引適用後、対象外商品を除く）が使用されていることを確認してください

関連スキル

• @shipping-rate-calculator
• @coupon-management
• @discount-engine
• @loyalty-points-system
• @checkout-flow-optimization