一番簡単にSTUDIOに決済機能をつける方法！BASEと連携する簡単手順を解説

無料から使えるWEBサイト制作プラットフォーム「STUDIO・スタジオ」に、一番簡単に決済機能を追加する方法についてご紹介します。

これから紹介する方法は、導入費用、固定費などは一切かかりません。初心者でも簡単にできるので、ぜひ挑戦してみてください。

STUDIOに決済機能は搭載されていません

STUDIOの公式ヘルプより抜粋しました

この記事を書いている、2024年3月時点、STUDIOに決済機能はありません。以下に、公式ヘルプへの問い合わせと返答を掲載しました。

STUDIOでカート・決済機能は作れますか？
STUDIOではECサイトなどで利用されるカート・決済機能は提供していません。外部サービスとSTUDIOのカスタムコード機能やEmbedボックスでのコード埋め込みのご利用を検討してください。
https://help.studio.design/ja/articles/4185079

公式ヘルプには、代替え案として、外部サービスとSTUDIOのカスタムコード機能やEmbedボックスでのコード埋め込みのご利用を検討してくださいと記載されています。

今時店長

というわけで、STUDIOに決済機能はありません。そこで、一番簡単に決済機能をつけられる一番おすすめの方法をご紹介します。

１番簡単にSTUDIO決済機能をつける方法をご紹介

ズバリその方法とは？STUDIOにBASEの商品を埋め込む

いくつかのサービスをためして、一番簡単だったのが「BASE」でした。

そもそもBASEとは

7年連続ネットショップ開設数第一位のサービス

BASEは、7年連続でネットショップ開設数第一位を獲得している、初期費用、月額無料から利用できるネットショップ作成サービスです。過去には「ネットでお店を開くなら・ベ・イ・ス」というテレビＣＭなども放送していました。

BASEは事前審査もなくカード決済などを導入できる

BASEの支払い方法は、フリマアプリなどで採用されているエスクロー決済（仲介）です。この決済は、事前審査もなくクレジットカードを含む複数の決済方法を一括で導入可能です。つまり、今すぐお店をオープンして販売をスタートできます。

BASE（無料ではじめる）

実際に買い物までの流れを動画でチェックする

驚くほど違和感もありません

実際に、STUDIOで作成したページに、BASEの商品を埋め込み、ユーザーがクリックしたと想定したと想定した動画を撮影してみました。

STUDIOに掲載された商品はカーソルをのせると「詳しくみる」というボタンが表示されて「画像をクリック」すると、BASEの商品ページに飛んで買い物ができます。

BASEの商品価格を変更すると、STUDIO上の価格も変更されます

商品を掲載したあとのメンテナンスについて確認しておきましょう。

商品の販売価格を変えたい場合には、BASEの商品価格を変更すれば、STUDIO側に表示されている商品の価格も変更されてます。

つまり、一度貼り付けてしまえば、商品価格のメンテナンスは不要です。

掲載した商品が在庫切れの場合には非表示にすればOK

商品の在庫が切れた場合には、BASE側の商品設定を非表示にしましょう。「商品が見つかりません」と表示されて、商品ページへは飛べなくなります。

商品の販売が終了したときには、STUDIOの商品掲載コードも削除しましょう。※「他の商品ページを見る」を掲載したい場合には、そのままで問題ありません。

BASE（無料ではじめる）

今時店長

外部カートが使えるECカートであれば、ほかのサービスでも構いません、初期費用、月額無料で、実際にためして違和感がなかったのが「BASE」でした。ぜひ、ためしてみてください。

STUDIOとBASEを連携して販売する簡単手順

BASEに登録した商品をSTUDIOで呼び出しをする

それでは、具体的にBASEに登録した商品を、STUDIOのページに呼び出して掲載する手順を解説します。

BASEでショップを開設して商品を登録する

BASEでショップを出店する：BASE

まずは、上のリンクから、BASEにお店を出店して商品を登録してください。BASEは、5分程度あればお店を開設して商品を登録も可能です。

BASE側のソースコードを作成する

赤線部分をBASEの商品ページのURLに書き換えてください。

中サイズ（220x380）はこちら。

小サイズ（160x220）はこちら。

大サイズ(320x480)はこちら。

特別な理由がなけければ大サイズがオススメです。

STUDIOにソースコードを貼り付ける

STUDIOにて、掲載するページに移動して、ツールバーの一番下「右矢印」をクリックする。

上の一番右にある、追加というタブをクリックして「Embed」→「Blank」とクリックしてください。

「iframe」というボックスが表示されるので、右の上「ボックス」タブにある「Custom」をクリックして、先ほどコピーしたソースコードをそのまま貼り付けてください。※最初に入っているテキストは上書きして消して問題ありません。

あとは、ボックスの端などを掴んで、ドラッグ&ドロップをしてサイズなどを調整して、右のスクロールバーを消しましょう。

BASE（無料ではじめる）

今時店長

STUDIOで、大量の商品を販売するような使い方には向いていません。STUDIOに注目商品を一品、二品、掲載するのに最適です。BASEは、予約販売、定期販売、など、とにかく多機能です。

まとめ

無料から使えるWEBサイト制作プラットフォーム「STUDIO・スタジオ」に、一番簡単に決済機能をつくれる方法をご紹介しました。

「STUDIO」には、決済機能はついていません。「BASE」など、外部カートを作成できるサービスなどを活用して、「STUDIO」でネット販売をはじめましょう。

あわせて読みたい

BASEに関するメリットはこちら。

無料ネットショップ作成サービスに関する比較はこちら。

無形商品の販売には「STORES」が一押しです。

下にジンドゥーとSTORESを連携した、ネットでサービスなどを販売する方法について解説しています。※STUDIOは、STORESのボタンは動作しませんでした。

最後まで読んで頂きありがとうございました。
また新しい情報などあれば更新していきます。