StudioでECサイトを作る方法｜決済機能2選を紹介！

Studioは有名なノーコードWeb制作プラットフォームですが、どのようなサイトでも万能に作れるという訳ではありません。

例えば、ECサイトはStudioが苦手とする分野です。Studio自体にカート機能がなかったり、レビュー機能がなかったりなど、ECに関する機能には力を入れていないからです。

ですが中には、Studioのデザイン性の高さに惚れているので、多少デメリットがあってもStudioでECサイトを制作したいと考えている方もいるはずです。

そこで今回は、Studioで作ったサイトに決済機能を導入する方法について解説します。

Studioの長所・短所がまだわかっていない方は、ぜひ以下の記事もチェックしてみてください。

Studioで作ったサイトに決済機能を導入する方法

Studioで作ったサイトに決済機能を導入する方法は、大きく2パターンあります。

それぞれ具体的に説明します。

BASEと連携する

BASEとは、誰でも簡単にネットショップを作れるECサイト作成ツールです。

実装の難易度	（比較的簡単）
おすすめな人の特徴	・とにかく早く決済機能を導入したい ・カート機能を持たせたい ・初心者でも操作しやすい

UI/UXの観点で優れているため、BASEは初心者でも使いやすいという最大のメリットがあります。

またアカウント作成〜商品登録までのスピードが圧倒的に早く、初心者でも挫折することなくサイトに決済機能を追加できるはずです。

「あまりパソコンは得意じゃない」という方は、まずBASEでの連携を検討するようにしましょう。

Stripeと連携する

Stripeとは、オンライン決済を簡単に導入できるプラットフォームです。

Stripeで決済機能を導入すると、下記のように「購入ボタンクリック→決済画面に遷移」という流れでスムーズに購入まで促せます。

実装の難易度	（登録手続きが面倒くさい）
おすすめな人の特徴	・商品数が少ない ・サブスク商品を取り揃えたい

Stripeではサブスク商品を簡単に作れるメリットがあります。例えば、コーヒーの定期便、ペット用品の定期配送、オンライン英会話、有料コミュニティ、ファンクラブなどがサブスク商品として向いています。

Stripeは登録無料で月額費用もないので、小規模事業者にも優しいプラットフォームです。

最初のアカウント作成までが手間ですが、非常に便利なツールなのでぜひ検討してみてください！

Studio×BASEで決済機能を導入する手順

Studio×BASEで決済機能を導入する手順は、下記のとおりです。

それぞれ具体的に説明します。

①決済ボタンを作成する【Studio側】

Studio×BASEで決済機能を導入する場合、下記のような仕様になります。

• Studioで作った購入ボタンをクリックする
• ボタンをクリックするとBASEの購入ページに飛ぶ
• BASEの購入ページでお客さんが商品を購入する

つまり、最初に「Studioで作ったサイト→BASEの購入ページ」へ飛ばす決済ボタンを作らなければなりません。

下記のようなイメージで、最低でも商品写真＋タイトル＋決済ボタンを用意します。

②：商品登録してリンクを取得する【BASE側】

BASEのアカウント登録が済んでいない方は、まずアカウント作成を行います。

>>「BASE」の公式サイトへ

「商品管理」を開いて、「＋商品を登録する」をクリックします。

商品名、商品画像、商品説明、価格、在庫数などを入力して、「登録する」ボタンをクリックします。

商品が登録できれば、商品詳細ページにアクセスして、URL（リンク）をコピーします。

③：決済ボタンにリンクを設定する【Studio側】

決済ボタンを選択した状態で右側メニューを開いて、先ほどのリンクを貼り付けます。

これで決済ボタンをクリックした時に、BASEの商品詳細ページに飛ぶように設定できました。

下記のようになっていれば実装完了です！

Studio×Stripeで決済機能を導入する手順

Studio×Stripeで決済機能を導入する手順は、下記のとおりです。

それぞれ具体的に説明します。

①決済ボタンを作成する【Studio側】

Studio×Stripeで決済機能を導入する場合、下記のような仕様になります。

• Studioで作った購入ボタンをクリックする
• ボタンをクリックするとStripeの購入ページに飛ぶ
• Stripeの購入ページでお客さんが商品を購入する

つまり、最初に「Studioで作ったサイト→Stripeの購入ページ」へ飛ばす決済ボタンを作らなければなりません。

下記のようなイメージで、最低でも商品写真＋タイトル＋決済ボタンを用意します。

②：Payment Linksのリンクを発行する【Stripe側】

Stripeのアカウント登録が済んでいない方は、まずStripeのアカウント作成を済ませましょう。

アカウント登録が完了すれば、StripeでPayment Linksを作成していきます。

左メニュー欄の「Payment Links」をクリックして、右上にある「＋新規」のボタンをクリックします。

「＋新しい商品を追加」をクリックします。

商品タイトル、商品説明、画像、金額などを記入して、「商品を追加」をクリックします。

「リンクを作成」をクリックします。

リンクをコピーします。

Payment Linksのリンク発行、リンクをコピーが完了しました。

③：決済ボタンにリンクを設定する【Studio側】

決済ボタンを選択した状態で右側メニューを開いて、先ほどのリンクを貼り付けます。

これで決済ボタンをクリックした時に、Stripeの決済画面に飛ぶように設定できました。

下記のようになっていれば実装完了です！

StudioでECサイトを制作するデメリット

これまでStudioでECサイトを作る方法について解説してきました。

ただし、Studioは「ECサイト」に不向きであり、どちらかと言えば「コーポレートサイト・LP・ポートフォリオサイト・採用サイト」などのサイト作成に向いています。

最後に、なぜStudioはECサイトにあまり向いてないのかについて解説します。

それぞれ具体的に説明します。

カート機能が外部依存になる

STUDIOにはカート機能や決済機能が標準搭載されていないため、商品販売を行う場合は外部サービスとの連携が必須です。

たとえば、StripeやBASEなどを活用して「購入ボタン」を埋め込む形になります。

しかしこれにより、複数商品をまとめてカートに入れて一括で購入するといった、一般的なECサイトで見られる機能は使えません。

また決済完了後の画面遷移や購入体験の流れも制御しづらいというデメリットがあり、ユーザーの離脱リスクにつながることもあります。そのため、STUDIOは単品販売やLP形式の販売に向いていますが、本格的なECサイト運営には課題が残るといえます。

Studioはカート機能が持たせられないこと以外に、できないことが複数あります。まだしっかり把握していない方は、ぜひ以下の記事もチェックしてみてください。

デザインが統制しにくい

Studioで制作したサイトは自由度が高く、デザイン性に優れている一方で、EC機能を外部サービスに頼るとデザインを統一するのが難しくなります。

たとえば、Studioで作ったトップページと、BASEやShopifyなどで作られた商品ページではレイアウトやフォント、配色が一致しない場合が多く、世界観が崩れてしまう可能性があります。

また、Studioと外部ECサービスはカスタマイズ方法がまったく異なるため、技術的な制約により思い通りのビジュアルが再現できないこともあります。

結果として、ブランドイメージを重視するサイトではユーザー体験を損なうリスクがあります。

デザインの一貫性を持たせたいなら、ECサイト専門の制作ツールのみを利用するのがおすすめです。

まとめ

今回は、StudioでECサイトを作る方法について解説してきました。

StudioはECサイトの要である「決済機能」や「カート機能」を提供していないため、必然的に外部サービスと併用することになります。

外部サービスとの併用を踏まえた時に、候補として挙げられるのが下記2つです。

Studioで作ったサイトにEC機能を付け加えたいとなった時は、まず「BASE」を検討するようにしましょう。BASEは初心者でも扱いやすいツールであるため、挫折することなくEC機能を付け加えられるはずです。

もし本格的にECサイトを運用したいとなった場合は、「Shopify」のようなECサイト専門ツールで作るのがおすすめです。