# すでにお持ちのサイトに、コマースを追加。

> 非同期のスクリプトタグ一つで、どんなサイトもショップに変わります。WordPress、Webflow、Ghost、Carrd、Framer、静的HTML、React / Next.js / Vueで動作。作り直し、プラグイン、テーマの変更は不要です。

非同期のスクリプトタグ一つと、いくつかのHTMLコンテナを置くだけで、今のサイトがショップになります。WordPress、Webflow、Ghost、Carrd、Framer、素のHTML、スクリプトタグを貼り付けられるCMSならどれでも動作します。作り直しも、プラグインも、テーマの変更も不要です。

[無料トライアルを始める](https://app-v3.shoprocket.io/signup?lang=ja)[スニペットを見る](#the-snippet)

14日間の無料トライアル

クレジットカード不要

プラットフォーム手数料0%

どのプランでも利用可能

1

埋め込みのコードは1行

どんなサイトでも

ウェブサイト

フル機能

カートとチェックアウト

0%

プラットフォーム手数料

● 課題

## サイトはもうある。そこで販売したい。作り直したいわけではない。

多くのコマースプラットフォームは、今のサイトを自社のものに置き換えさせようとします。WordPressはWooCommerceを求めます。WixはWix Storesを求めます。SquarespaceはSquarespace Commerceを求めます。Shopifyは、すべてを自社のスタックに載せることを求めます。あなたが欲しかったのはショップであり、移行プロジェクトではないはずです。

01

### サイトはすでに機能しています。

ブランド、コンテンツ、ブログ、アニメーション、SEO。すでに積み上げてきた成果です。チェックアウトを追加するために、そのどれも変える必要はありません。

02

### CMSが問題なのではありません。

WordPressで問題ありません。Webflowは美しい。Ghostはコンテンツに最適です。Carrdは高速です。コマースをネイティブに扱えないからといって、どれも乗り換えを強いられるべきではありません。

03

### ストアは、サイトの中にあるべきです。

別のサブドメインでも、ホスト型カートへのリダイレクトでもありません。商品ページはあなたのもので、チェックアウトはその中で行われ、お客様がサイトを離れることはありません。

● 仕組み

## HTMLは3行。ウィジェットは4種類。

ローダースクリプトを一度貼り付けます。コマースを表示したい場所にHTMLコンテナを置きます。ウィジェットは、描画時に見つけたすべてのコンテナに自動でマウントされます。

インストール

### スクリプトタグ一つ。非同期。ブロックなし。

スクリプトタグは、サイトのhead内、閉じるbodyタグの直前、またはCMSのヘッダーテンプレートに置きます。非同期で読み込まれるため、ページの描画をブロックすることはありません。読み込まれると、ページ内のdata-shoprocket属性を持つすべてのHTML要素を探し、一致するウィジェットをそこにマウントします。ページにウィジェット要素がない場合でも、フローティングカートを初期化するため、サイト内のほかの場所にあるショップのボタンは動作し続けます。

- ✓ 非同期読み込みで、LCPやCLSへの影響なし
- ✓ ページ上のdata-shoprocket要素をすべて自動でマウント
- ✓ ウィジェットのないページでも、フローティングカートがサイト全体で初期化される

● ウィジェットの種類

## 四つの形、すべて同じページに。

必要な場所に、必要なものを選んで置けます。ホームページには注目商品のウィジェット、専用のショップページには完全なカタログ、記事には一つの商品のインライン埋め込み、といった具合です。すべて同じサイトで、すべて同じストアから提供されます。

01

### カタログ。

フィルター、カテゴリ、検索を備えた商品グリッド全体。/shopページに置けば、お客様はストア全体を閲覧できます。

02

### 商品。

価格、バリエーション、カートに追加ボタンを備えた単体の商品カード。記事の中や、紹介文の隣のランディングページにインラインで置けます。

03

### カート。

ページ用ウィジェットとしてのカート本体。または、フローティングカートにサイト全体を任せることもできます。スクリプトが自動で初期化します。

04

### チェックアウト。

カート、住所、配送、注文サマリーのすべてが、あなたのページの中で完結します。最後の決済のステップは、PCI準拠のため決済代行会社にリダイレクトされ、その後お客様はあなたのサイトに戻ります。

● 今お使いの環境で動きます

## スクリプトタグが使えるなら、Shoprocketは埋め込めます。

以下のビルダーで、動作確認とドキュメント化を行っています。実際には、HTMLを貼り付けられる場所ならどこでも動作します。

01

### WordPress。

セルフホストでもWordPress.comでも。どのテーマでも、どのページビルダー(Elementor、Gutenberg、Diviなど)でも動作します。WooCommerceは不要。保守するプラグインもありません。

02

### Webflow。

ショップを置きたい場所に、埋め込み要素を使います。Webflow CMSのプランはそのままで、Ecommerceへのアップグレードは不要です。

03

### Ghost。

どの投稿やページにも、HTMLカードを使えます。Ghostは、コンテンツと並行して商品を届けるクリエイターに最適です。

04

### Carrd、Framer、Notion。

1ページ完結型や、デザイン重視のビルダー。Carrd Pro Standardの埋め込み、Framerのコードコンポーネント、Super.so / HeyNotionのラッパー経由のNotionで動作します。

05

### 静的HTMLとJAMstack。

Cloudflare Pages、Netlify、Vercel、素の静的HTML、Jekyll / Hugo / Astro / 11tyのどのビルドでも。スニペットを貼り付ければ、すぐ始められます。

06

### React、Next.js、Vue、Svelte。

フレームワークとの緊密な統合には、npmパッケージ\`@shoprocket/widget\`をインストールします。コンポーネントをインポートし、ショップを置きたい場所にマウントします。

● パフォーマンス

## Core Web Vitalsは、グリーンのまま。

どこにでも埋め込めるコマースの要点は、サイトがこれまでどおりに動き続けることです。

数字で見ると

### 非同期スクリプト、キャッシュされた設定、高速なマウント。

ローダースクリプトは非同期で配信されるため、LCPには影響しません。ストアの設定は当社のAPIから取得され、エッジでキャッシュされる(TTLは1時間)ため、繰り返しのページ表示で再度問い合わせることはありません。ウィジェットは確保済みのコンテナに描画されるため、レイアウトのずれは発生しません。埋め込み前にLighthouseでグリーンだったサイトは、埋め込み後もグリーンのままです。

- ✓ 非同期のスクリプトタグ: LCPやCLSへの影響はゼロ
- ✓ ストアの設定はエッジでキャッシュされ、繰り返しの表示ではCDNから配信
- ✓ 確保済みのマウント用コンテナにより、累積レイアウトシフトなし

● よくあるご質問

## 埋め込みについてのご質問にお答えします。

スニペットを貼り付ける前に、よく尋ねられることです。

カートとチェックアウトは、実際にはどこで動いていますか? +

カート、住所、配送方法の選択は、すべてあなたのページ上の埋め込みの中で動作するため、閲覧と選択の間にサイトを離れる人はいません。最後の決済のステップは、PCI準拠のため、接続された決済代行会社(Stripe、PayPal)にリダイレクトされ、注文確認のためにお客様はあなたのサイトに戻ります。これは現代のあらゆる決済フローの仕組みであり、そうでないと言うのは不誠実でしょう。

同じページに複数のウィジェットを置けますか? +

はい。ローダーは、data-shoprocket属性を持つすべての要素を探して、それぞれをマウントします。一つのページに、注目商品のカルーセル、その下にカタログのグリッド、別の場所にインラインのチェックアウトを置くこともできます。すべて同じストアからです。

サイトが遅くなりませんか? +

意味のある影響はありません。ローダースクリプトは非同期なので、ページの描画をブロックしません。ストアの設定はエッジでキャッシュされるため、再訪問のユーザーが再度問い合わせることはありません。ウィジェットは確保済みのコンテナにマウントされるため、累積レイアウトシフトも発生しません。埋め込み前にCore Web Vitalsに合格していたサイトは、埋め込み後も合格します。

React / Next.js / Vueを使っている場合は? +

npmパッケージ\`@shoprocket/widget\`を直接インストールします。コンポーネントをインポートし、ショップが必要な場所にマウントし、設定用のpropsを渡します。スクリプトタグでの埋め込みにはない、きめ細かな制御ができます。

WixとSquarespaceはどうですか? +

Squarespaceは問題なく動作します。Coreプラン以上でコードブロック要素を使い、スニペットを貼り付ければ完了です。Wixはサードパーティの埋め込みをすべてiframeでサンドボックス化するためチェックアウトが壊れてしまい、おすすめしません。Wixをお使いの方への正直な答えは、Shoprocketのホスト型ストアフロントか、本物の埋め込みが使えるビルダーへの移行です。三つの進め方は、Wix専用のページをご覧ください。

独自ドメインを使えますか? +

はい。ウィジェットは、ホストページのドメインで動作します。商品、カート、チェックアウトのすべてが、your-site.comにあります。別のShoprocketのサブドメインも、リダイレクトもありません。お客様は、コマース層の裏にサードパーティがいることに気づきません。

ウィジェットの見た目は、どのようにカスタマイズしますか? +

ウィジェットは、レイアウトの文脈(コンテナの幅、タイポグラフィの基準)として、サイトのCSSを引き継ぎます。コマースのUI自体は、マウント要素のdata属性で、40以上のテーマとライト / ダークのカラースキームから選べます。さらに深くカスタマイズするには、サイトのスタイルシートでCSS変数を設定すれば、ウィジェットがそれを読み取ります。

ページごとに異なる複数の埋め込み設定を使えますか? +

Shoprocketのダッシュボードで、それぞれ固有のID、テーマ、機能セットを持つ複数の埋め込み設定を作成します。各HTMLコンテナを、適切な埋め込みIDに向けます。ホームページではコンパクトな注目商品の埋め込みを表示し、専用のショップページでは完全なカタログの埋め込みを使う、といったことが、同じストアでできます。

Shoprocketのプラットフォーム手数料は、本当に0%ですか? +

はい。決済代行会社(Stripe、PayPalなど)は引き続き標準の処理手数料を請求します。これはお金を動かすためのコストですが、Shoprocketはそこに何も上乗せしません。プラットフォーム手数料0%は、すべての埋め込みを含め、すべてのプランに適用されます。

## あなたのサイトに、コマースを。

14日間の無料トライアル。クレジットカードは不要です。スニペットを貼り付けて、ショップを開店。サイトはそのままで。

[無料トライアルを始める](https://app-v3.shoprocket.io/signup?lang=ja)[お問い合わせ](https://v3.shoprocket.io/ja/contact.md)

---

- HTML version: https://v3.shoprocket.io/ja/features/sell-on-any-website
- Language: 日本語 (ja)
- Also in: [العربية](https://v3.shoprocket.io/ar/features/sell-on-any-website.md), [Deutsch](https://v3.shoprocket.io/de/funktionen/auf-jeder-website-verkaufen.md), [Ελληνικά](https://v3.shoprocket.io/el/features/sell-on-any-website.md), [English](https://v3.shoprocket.io/features/sell-on-any-website.md), [Español](https://v3.shoprocket.io/es/funciones/vender-en-cualquier-sitio-web.md), [Français](https://v3.shoprocket.io/fr/fonctionnalites/vendre-sur-nimporte-quel-site.md), [עברית](https://v3.shoprocket.io/he/features/sell-on-any-website.md), [हिन्दी](https://v3.shoprocket.io/hi/features/sell-on-any-website.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/fitur/jual-di-situs-web-mana-pun.md), [Italiano](https://v3.shoprocket.io/it/funzionalita/vendere-su-qualsiasi-sito-web.md), [Lietuvių](https://v3.shoprocket.io/lt/funkcijos/pardavimas-bet-kurioje-svetaineje.md), [Norsk](https://v3.shoprocket.io/nb/funksjoner/selg-pa-hvilken-som-helst-nettside.md), [Nederlands](https://v3.shoprocket.io/nl/functies/verkopen-op-elke-website.md), [Polski](https://v3.shoprocket.io/pl/funkcje/sprzedaz-na-kazdej-stronie.md), [Português](https://v3.shoprocket.io/pt/funcionalidades/vender-em-qualquer-site.md), [Română](https://v3.shoprocket.io/ro/functionalitati/vinde-pe-orice-site.md), [Русский](https://v3.shoprocket.io/ru/features/sell-on-any-website.md), [ไทย](https://v3.shoprocket.io/th/features/sell-on-any-website.md), [Türkçe](https://v3.shoprocket.io/tr/ozellikler/her-web-sitesinde-satis.md), [中文](https://v3.shoprocket.io/zh/features/sell-on-any-website.md)