# プラットフォームを乗り換えずに、どんなサイトにもECを追加する方法
> すでにあるサイトにコマースを追加する3つの連携パターン。それぞれが適する場面、サイト側で何が変わるのか、そして本当にプラットフォームを乗り換える価値があるのはいつかを解説します。
Ryan Badger - 2023年6月2日 - 読了目安 4 分
## 「ECを連携する」が実際に意味すること
あなたにはウェブサイトがあります。コーポレートサイト、ポートフォリオ、ブログ、あるいはWebflowやSquarespaceで作ったものかもしれません。きちんと動いています。見た目も思いどおりです。でも今、そこから何かを売る必要が出てきました。
間違った選択は、それを捨ててShopifyで作り直すことです。正しい選択は、次の3つによって変わります。
1. **何を売るのか。** 商品は1つか、カタログか。物理的な商品かデジタルか。定期購入か単発か。
2. **サイトは何で動いているのか。** スクリプトタグを貼れるものなら何でも、選択肢が開けます。
3. **チェックアウトの体験を、どこまで自分で握りたいか。**
この記事では、これら3つの軸それぞれについて、2026年の「連携」が実際にどんな姿をしているかを順に見ていきます。正しく選べば、プラットフォームの乗り換えは必要ありません。
## 本当の連携パターン3つ
### パターン1：ホスト型チェックアウトへのリダイレクト
いちばん簡単な方法です。サイトに購入ボタンを置きます。ボタンをクリックすると、顧客はあなたのサイトを離れてチェックアウトへ移動します（Stripe Payment Links、Gumroad、Payhip、Lemonsqueezy）。支払いは相手のドメインで行われ、そのあと、あなたのサンクスページに戻ってきます。
**長所：** JSの連携は不要、文字どおりどんなサイトでも動き、保守の手間も小さい。 **短所：** （サイトを離れる）UXの断絶がコンバージョンを下げます。ブランドの見え方が統一されません。カゴ落ちのフローや分析も難しくなります。
向いているのは、単品販売のクリエイター、低い取引量、何かを埋め込むことに技術的な抵抗がある場合です。
### パターン2：ページ内にウィジェットを埋め込む
埋め込みウィジェットは、あなたのサイトの中で動きます。顧客がサイトを離れることはありません。カート、商品詳細、チェックアウトのすべてが、あなたのページの中に表示されます。
Shoprocket、Snipcart、Ecwidなどのプラットフォームが提供しているのは、この方式です。
典型的な連携は次のとおりです。
```
```
1行を貼るだけで完了です。ウィジェットはダッシュボードと自動で同期します。商品、価格、画像、税のルール、配送オプション、支払い方法のすべてです。顧客は「閲覧」から「ご注文ありがとうございます」まで、あなたのドメインにとどまります。
**長所：** 統一されたUX、ブランドの管理、コンバージョンの漏れが少ない。 **短所：** サイトにJSへの依存が加わります。ほとんどは軽量（~20-50KB）ですが、ゼロではありません。
向いているのは、プラットフォームを乗り換えずに本格的なショップを持ちたいサイトすべてです。
### パターン3：ヘッドレス（API）連携
UIは自分で作り、コマースの仕組みにはコマースAPI（Stripe API、Shopify Storefront API、BigCommerce、Commercetools）を呼び出します。完全にカスタムで、完全に自分のものです。
**長所：** 完全な制御、見た目の妥協なし、独自のフローにも拡張できる。 **短所：** 本格的なエンジニアリングの作業が必要です。チェックアウト、カートの状態、税計算、在庫同期、Webhookを自分で作ることになります。かかるのは数分ではなく、数か月です。
向いているのは、コマースに専任の開発者をつけられるチーム、または既製のウィジェットには収まらない製品です。
## 判断のフローチャート
まず「顧客があなたのサイトを離れてもいいか」から始めましょう。
- **はい**：パターン1（ホスト型チェックアウトのリンク）。Stripe Payment LinksかGumroadで、設定は10分です。
- **いいえ**：次の質問へ。
カスタムコードを書きたいですか？
- **はい、開発の余力がある**：パターン3（ヘッドレス）。
- **いいえ、既製のものがいい**：パターン2（埋め込みウィジェット）。ほとんどのサイトはここに行き着きます。
パターン2の次の判断は、プラットフォームの選択です。それは別の記事で扱っています。[埋め込み型カートプラットフォームの比較](https://v3.shoprocket.io/ja/blog/embeddable-shopping-cart-platforms-compared-snipcart-ecwid-gumroad-payhip-shoprocket.md)です。
## 主なプラットフォームでのパターン2の連携は実際どうなるか
### WordPress
埋め込みスニペットを、カスタムHTMLブロック（ブロックエディタ）かテキストウィジェット（クラシックのサイドバー）に入れます。プラグインのインストールは不要です。
### Squarespace
任意のページにコードブロックを追加して貼り付けます。ウィジェットは、Squarespaceのテーマの幅と余白に従います。
### Webflow
Embed要素に貼り付けます。Webflowの静的エクスポートでも、公開時に埋め込みが含まれます。
### Framer
Embed要素に貼り付けます。Framerの開発ツールを使えば、特定のセクションにスニペットを簡単に置けます。
### Carrd
カスタムコードコンポーネント（有料プランの機能）。ショップのタブがあるシングルページのサイトなら、簡単です。
### Notion
公開したNotionのページをサイトとして使い、SuperやPotionのようなサービスで埋め込み、スニペットを貼り付けます。本物のストアになります。
### 静的HTML／Jekyll／Hugo／11ty
ショップページを描画するテンプレートに、スニペットを貼り付けます。それだけです。
## 連携後、サイトで何が変わるのか
思っているより、少ないです。
- 既存のページはそのままです。テーマの編集は不要です。
- スクリプトは非同期で読み込まれるため、ページの速度は実質的に変わりません（Lighthouseのスコアも安定しています）。
- 商品、価格、在庫は、CMSではなく、コマースのダッシュボードにあります。
- 顧客データ（注文、メール、住所）は、コマースプラットフォームに流れます。CMSがそれを扱う必要はありません。
やる必要がないこと：
- サイトの作り直し
- CMSプラグインのインストール
- コンテンツの移行
- 開発者の採用
- 新しいドメインの購入
> **ヒント：** まず、ステージング用のページでウィジェットをテストしましょう。何かと衝突することはないはずですが、本番のショップページに反映する前に、自分のテーマで確認する価値があります。
## 本当にプラットフォームを乗り換えるべきとき
答えが「本格的なコマースプラットフォームへ移行すること」になる場合もあります。サインは次のとおりです。
- 月に$100k+を売り上げていて、サイトの中心的な役割が、ブランドではなく販売になっている。
- POS連携が必要（実店舗＋オンライン）。
- 商品カタログが>1,000 SKUで、常に更新されている。
その規模になると、Shopify Plusなどが元を取り始めます。その水準を下回るほとんどの独立したサイトでは、埋め込みのほうが安く、速く、今のサイトをそのまま活かせます。
## 要点まとめ
- **ホスト型チェックアウトのリンク**：最速ですが、支払いでUXが途切れます。単品販売に向いています。
- **埋め込みウィジェット**：顧客を自社サイトにとどめ、プラットフォームの乗り換えも不要。まず選ぶべき標準です。
- **ヘッドレスAPI**：自分で作る方式で、数か月の作業が必要です。規模があって初めて価値が出ます。
[既存のサイトでShoprocketの埋め込みを試す](https://app-v3.shoprocket.io/signup)。無料トライアル、カード不要。料金は[$29から](https://v3.shoprocket.io/ja/pricing.md)、全プランで取引手数料ゼロです。
---
- HTML version: https://v3.shoprocket.io/ja/blog/how-to-add-ecommerce-to-any-website-without-replatforming
- Language: 日本語 (ja)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-zu-jeder-website-hinzufuegen-ohne-plattformwechsel.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [English](https://v3.shoprocket.io/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Español](https://v3.shoprocket.io/es/blog/anadir-ecommerce-a-cualquier-web-sin-cambiar-de-plataforma.md), [Français](https://v3.shoprocket.io/fr/blog/ajouter-ecommerce-a-un-site-sans-changer-de-plateforme.md), [עברית](https://v3.shoprocket.io/he/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/cara-menambahkan-ecommerce-ke-situs-web-mana-pun-tanpa-ganti-platform.md), [Italiano](https://v3.shoprocket.io/it/blog/aggiungere-ecommerce-a-qualsiasi-sito-senza-cambiare-piattaforma.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/kaip-prideti-el-prekyba-prie-bet-kurios-svetaines-nekeiciant-platformos.md), [Norsk](https://v3.shoprocket.io/nb/blogg/legg-nettbutikk-til-et-hvilket-som-helst-nettsted-uten-a-bytte-plattform.md), [Nederlands](https://v3.shoprocket.io/nl/blog/webshop-toevoegen-aan-elke-website-zonder-te-verhuizen.md), [Polski](https://v3.shoprocket.io/pl/blog/jak-dodac-e-commerce-do-dowolnej-strony-bez-zmiany-platformy.md), [Português](https://v3.shoprocket.io/pt/blog/como-adicionar-ecommerce-a-qualquer-site-sem-trocar-de-plataforma.md), [Română](https://v3.shoprocket.io/ro/blog/cum-adaugi-ecommerce-pe-orice-site-fara-sa-schimbi-platforma.md), [Русский](https://v3.shoprocket.io/ru/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [ไทย](https://v3.shoprocket.io/th/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Türkçe](https://v3.shoprocket.io/tr/blog/platform-degistirmeden-web-sitesine-eticaret-ekleme.md), [中文](https://v3.shoprocket.io/zh/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md)