【組み方】StudioでECサイト・ネットショップを作るには｜決済の外部サービスと選び方

「Studioでネットショップを作りたい」と編集画面を探しても、カートや決済の設定は見つかりません。そこで手が止まる方は多いはずです。この記事では、Studioで物販をしたいときに、どの外部サービスをどう組み合わせればよいかを整理します。150名以上が参加するノーコードサロンを運営する立場から、公式ヘルプで確かめられた内容だけでまとめました。サービスの仕様や料金は変わるため、この記事では料金の数字は扱いません（確認日：2026年9月24日）。

結論：Studio単体では売れない。販売は外部サービスに任せる

Studio公式ヘルプでは、Studioはカート・決済機能を提供していないと明記されています。そのため、Studio単体でECサイトは作れません。

ただし、外部サービスと組み合わせれば物販はできます。公式ヘルプが示すのは、ECプラットフォーム側で商品を管理する方法です。その購入ボタンなどを、StudioのEmbedボックスやカスタムコードで表示します。

Studio公式の小売・EC向けページでも、この分け方が紹介されています。Studioで世界観を伝えるサイトやLPを作ります。そして「購入する」「商品を見る」ボタンから、Shopify・BASE・STORESなどの外部ECサイトへリンクする運用です。Studioは「見せる場所」、販売は「EC側」と役割を分けるのが基本です。

Studioで苦手なことの全体像はStudioでできること・できないことにまとめています。この記事では、物販に絞って組み方と選び方を見ていきます。

Studioで物販するときの組み方4通り

組み合わせ方は、Studio側で何をするかで4つに分かれます。まず全体像を表で見てください。

組み方	Studio側でやること	向いている販売
1. リンクで送る	ボタンに外部ショップのURLを設定する	商品数が多い、すでにショップがある
2. 購入ボタンを埋め込む	Embedボックスにサービスのコードを貼る	ページの中で商品を見せて買ってもらいたい
3. 決済リンクだけ使う	ボタンにStripeの決済リンクを設定する	商品が少ない、講座やサービスの申込
4. APIで商品を表示する	API連携でShopifyの商品情報を読み込む	デザインを作り込みたい、コードを書ける

1. リンクで送る（Shopify・BASE・STORESなど）

いちばん手軽なのが、Studioのボタンやテキストに外部ショップのURLを設定する方法です。Studio側は通常のリンク設定だけで済みます。

カート、在庫、決済、注文の管理はすべてEC側で行います。すでにBASEやSTORESでショップを開いている方が、ブランドサイトをStudioで作り直すときにも使いやすい形です。

弱点は、商品を選ぶ場面で別サイトへ移ることです。ページの見た目が切り替わるので、ショップ側のデザインもブランドに寄せておくと違和感が減ります。

2. 購入ボタンや商品枠を埋め込む

各ECサービスには、外部サイトに商品を置くための機能があります。発行されたコードを、StudioのEmbed（埋め込み）ボックスに貼って使います。

• Shopify：購入ボタン（Buy Button）チャネルで、商品またはコレクションのボタンを作れます。クリック時の動作は「カートに追加」「チェックアウトに直接」「商品詳細を開く」から選べます。
• BASE：商品詳細ページのURLの末尾に「/widget」を付けた商品ウィジェットを、iframeで表示できます。ショップのトップページをiframeで表示することはできません。
• STORES：外部のページに設置できるショップボタン（STORES BUTTON）が用意されています。
• Stripe：Payment Linksの画面から購入ボタンのコードを作れます。

複数の商品をまとめて買ってもらいたいなら、カートに追加できるShopifyの購入ボタンが候補になります。1商品ずつの販売でよければ、BASEの商品ウィジェットやSTORES BUTTONでも足ります。

3. 決済リンクだけ使う（Stripe Payment Links）

ショップを持たずに、決済だけを外部に任せる方法です。StripeのPayment Linksは、コードを書かずに決済用のリンクを作れる機能です。できたリンクを、Studioのボタンに設定します。

Studio公式ヘルプでも、公式YouTube動画でこの方法を紹介していると案内されています。Stripeの公式ドキュメントによると、顧客が数量を変えられるほか、住所の収集や配送料の請求もノーコードで設定できます。

一方で、ショップのような商品一覧やカートの仕組みはありません。商品が数点の物販や、講座・サービスの申込ページに向いた組み方です。

4. APIで商品を表示する（Shopify）

Studio公式ブログでは、ShopifyのStorefront APIを使う例が紹介されています。商品管理と決済はShopifyで行い、商品名や価格、画像はStudioのデザインで表示する形です。購入ボタンを押すと、Shopifyの決済画面に移ります。

商品情報の読み込みにはStudioのAPI連携、購入ボタンの表示にはカスタムコードを使います。2026年9月時点の公式ヘルプでは、API連携の対象はBusinessプラン以上です。公式ブログの手順は、2026年4月に新規利用を終えたAPI連携（Beta）の時期に書かれたものなので、画面が今と異なる場合があります。コードを書く前提なので、ノーコードで進めたい方は、まず1〜3のどれかから始めるのが現実的です。

自分に合う組み方の選び方

4通りのどれにするかは、次の3つの問いで絞れます。上から順に答えていくと迷いにくくなります。

商品数とカートが要るかで決める

商品が多く、まとめ買いをしてほしいならカートが必要です。この場合は、ショップへのリンク（組み方1）か、Shopifyの購入ボタン（組み方2）を選びます。

商品が数点で、1つずつ買ってもらえればよいなら、決済リンク（組み方3）や商品ウィジェットで足ります。カートが要らないのに大きな仕組みを入れると、管理の手間だけが増えます。

誰が商品を更新するかで決める

商品の追加や価格の変更をお店の方が自分で行うなら、ふだん使う管理画面はEC側に1つあるほうが迷いません。

組み方1と2なら、商品の情報はEC側の管理画面で直します。Studio側を毎回触らなくてよい形にしておくと、納品後の運用が楽になります。

Studioのプランで使える機能を確かめる

Studio公式ヘルプでは、Embedボックスは無料プランで外部サービスを使う手段として案内されています。一方で、カスタムコードとApps連携は有料プランの機能です。

組み方4を選ぶなら、API連携を使うためBusinessプラン以上が前提になります。プランごとの違いはStudioの料金プランで確認してください。なお、2026年9月24日時点のApps連携の一覧に、EC・決済のサービスは見当たりませんでした。

組むときに気をつけたいこと

外部サービスとつなぐときは、Studioの埋め込みの仕様を知っておくと失敗が減ります。どれも公式ヘルプに書かれている内容です。

埋め込みの中のリンクは遷移先を指定する

Studioのヘルプでは、埋め込みコード内のリンクにtarget属性を付けるよう案内されています。付けないと、Embedボックスの中だけで画面が切り替わります。

自分でボタンのコードを書くなら、target="_blank" か target="_top" などを指定します。

コードによって動き方が変わる

Embedボックスは、貼ったコードに応じて「iframe」か「sandbox」のどちらかの種類に自動で切り替わります。iframeタグだけで構成されたコードなどはiframe、それ以外はsandboxとして扱われます。

sandboxでは、設定したスタイルがボックスの中だけに効きます。セキュリティ上の制限で、一部の機能が動かない場合もあります。購入ボタンがボックスの枠に収まっているか、公開後に確かめてください。

購入の流れは公開サイトで最後まで試す

カスタムコードは、デザインエディタやライブプレビューでは動きません。Stripeの購入ボタンも、表示にはWebサイトのドメインが必要とされています。

公開したサイトで、ボタンを押してから決済画面に進むまでを一通り試しましょう。また、外部サービスのコードの内容や動作は、Studioのチャット窓口のサポート対象外になる可能性があります。困ったときは各サービスのヘルプも合わせて確認します。

埋め込みと設定連携の違いをもう少し整理したい方は、Studioで使える外部連携（Apps）まとめも参考にしてください。

よくある質問

Q1Studioだけで決済まで完結できますか？

できません。Studio公式ヘルプで、カート・決済機能は提供していないと明記されています。決済は、ShopifyやBASE、STORES、StripeなどのEC・決済サービスに任せる形になります。

Q2BASEのショップをまるごとStudioに埋め込めますか？

できません。BASEの公式ヘルプによると、2025年10月15日から制限されています。対象は、外部サイトへショップページをiframeで埋め込むことです。特定の商品ページなら、商品ウィジェットを使って表示できます。

Q3無料プランでも商品を売るページは作れますか？

外部ショップへのリンクと、Embedボックスでの埋め込みなら、無料プランの範囲で組めます。カスタムコードを使う組み方は有料プランが必要です。独自ドメインなど、公開するうえで必要な機能もあわせて確認してください。

Q4商品数が多いショップでもStudioを使うべきですか？

商品ページや在庫の管理はEC側で行うので、Studioはブランドサイトやキャンペーンページに絞る分け方が向いています。サイト全体をひとつのツールでまかないたい場合は、StudioとWordPressの比較も判断材料になります。

まとめ

Studioにはカート・決済機能がないため、物販は外部サービスと組み合わせて行います。組み方は、リンクで送る、購入ボタンを埋め込む、決済リンクだけ使う、APIで商品を表示する、の4通りです。商品数とカートの要否、そして誰が商品を更新するかで選ぶと、後から作り直さずに済みます。まずはStudioで世界観を伝えるページを作り、販売はEC側に任せるところから始めてみてください。

ノーコードサロンでは、Studioの制作に加えて、外部サービスとのつなぎ方もチャットで質問・相談できます。勉強会やウェビナーで、ほかのメンバーの作り方にふれる機会もあります。物販の組み方を、ひとりで決めずに相談しながら進めたい方に向いています。