ECサイトのインフラを月3,000円に|Shopifyから卒業するための具体手順

Shopifyの管理画面を開くたびに、少しだけ気持ちが沈む。そういう個人EC運営者は、たぶん少なくない。売上が立っているわけではない月も、月額8,000円ちょっとは淡々と引き落とされていく。決済手数料もそこに乗る。アプリを2つ3つ足すと、あっという間に月1万5,000円を超える。

そのコストが事業規模に見合っているうちは、何も問題ない。問題は、注文数が伸び悩んでいるのに固定費だけが重くのしかかってくるときだ。月に30注文しか入らないのに、インフラに月1万円以上払っている。この状態がしばらく続くと、多くの人は店を畳もうかと考え始める。

でも、畳む前にもうひとつ選択肢がある。それが、自作ECへの乗り換えだ。Next.js(ウェブサイトを作るための仕組み)とSupabase(データベースを提供するサービス)とStripe(決済代行サービス)を組み合わせると、月3,000円前後でECサイトを回せる。この記事では、その具体的な手順を書いていきたい。

この記事の前提

この記事を読んでほしいのは、Shopifyの月額を重く感じている個人EC運営者だ。月の注文数が100件前後、商品点数が50点以下、ひとりか、せいぜい2人で店を回している。そういう規模の人を想定している。

大前提として言っておきたいのは、Shopifyから卒業することが常に正解ではない、ということだ。月の注文が500件を超えてくるなら、Shopifyの月額は安い買い物になる。在庫管理、配送連携、マーケティング機能、アプリ連携、そのすべてを自分で作ろうとしたら、月8,000円では到底足りない。人件費に換算すれば月20万円では済まない。

分かれ道は、月の注文数で決まる。おおむね100件以下なら、自作したほうが安い。100件から300件の間はどちらもあり得る。300件を超えるなら、Shopifyに残ったほうがいい。この記事は、一番左の領域にいる人のためのものだ。

そしてもうひとつ。この記事で紹介する構成は、完璧なECシステムではない。Shopifyに比べれば機能は圧倒的に少ないし、デザインテンプレートも自分で整える必要がある。そのかわり、月額を3,000円まで落とせる。ここで取る選択は、高機能を捨てて固定費を取り戻す、というトレードオフだと理解してほしい。

Shopifyの月額8,000円は、何の対価なのか

Shopify継続 vs 自作EC乗り換え

図: Shopify継続 vs 自作EC乗り換え

自作に踏み切る前に、まず自分が何にお金を払っているのかを整理してほしい。Shopifyのベーシックプランは月額33ドル、日本円で約5,000円から始まる。日本の運営者が多く使うスタンダードプランは月額92ドル、約1万3,000円。さらに決済ごとに3.4%から4.15%の手数料が引かれる。

ここに、外部アプリの月額が乗る。定期購入機能で2,000円、レビュー表示で1,500円、メール配信で3,000円。気づいたら月に1万5,000円から2万円を払っている人は珍しくない。

ではShopifyは、月2万円分の何を提供しているのか。大きく分けると、商品管理、カート、決済、在庫、配送連携、マーケティング、テーマ、アプリエコシステム、サポート、この9つだ。

重要なのは、このうちの半分は、個人EC運営者がほとんど使っていない、ということだ。私が知っているある個人事業主は、Shopifyのマーケティング機能をほぼ触っておらず、アプリも使わず、ただ決済と在庫管理のためだけに月1万円払っていた。彼は自作に切り替えた結果、月3,200円まで下げられた。年間で8万円以上の節約になる。

あなたが本当に必要としている機能は、意外と少ない。そこを見極めることが、卒業の第一歩だ。

月3,000円構成の全体像

月3,000円ECの構成要素

図: 月3,000円ECの構成要素

具体的な構成を先に書いておく。

・Vercel(ウェブサイトを公開するサービス)のHobbyプラン: 0円 ・Supabase(データベースサービス)の無料プラン: 0円 ・Stripe(決済サービス): 決済ごとに3.6%、月額は0円 ・ドメイン(独自のアドレス): 年1,500円ほど、月換算で約125円 ・配送連携(ヤマトB2クラウド等): 月約1,000円 ・トランザクションメール(注文確認メールの送信): 月0円から2,000円

ここまでで、固定費は月1,000円から3,000円の間に収まる。注文が100件あった場合、決済手数料としてだいたい売上の3.6%が引かれるので、客単価5,000円なら月1万8,000円ほど。これはShopifyでも同じだけかかる費用なので、純粋な固定費削減として月7,000円から1万円が浮く計算になる。

それぞれのサービスが何をやっているのか、もう少し噛み砕いておきたい。

VercelとNext.jsは、商品ページやカートやチェックアウト画面を表示する役割を担う。Shopifyのテーマにあたる部分だ。Supabaseは、商品データ、在庫数、注文履歴、顧客情報を保存する倉庫のようなもの。Stripeはお金のやり取りを安全に処理する窓口。この3つが連携して、1つのECサイトになる。

Shopifyが1つのパッケージで全部やってくれていたことを、3つのサービスに分解する、と理解してほしい。分解するからこそ、必要な部分だけに課金を絞れる。

参考になる事例

Medusa.js という選択肢

自作ECの世界には、Medusa.jsというオープンソースのフレームワークがある。読者の中には、これを聞いたことがある人もいるかもしれない。Medusaは、Shopifyの機能を丸ごとオープンソースで再現しようとしているプロジェクトだ。在庫管理、商品カタログ、カート、決済、配送、全部入っている。無料で使える。

ただ、個人EC運営者にMedusaを勧めるかというと、私は慎重だ。Medusaは機能が豊富なぶん、セットアップも運用も重い。サーバーを自前で立てる必要があるし、アップデートの追従も自分でやらなければならない。月100件の注文規模には、正直オーバースペックだ。

それでも、一度GitHubでMedusaのリポジトリを眺めてみてほしい。ECサイトに必要な機能が何なのか、体系的に理解できる。自作する側の立場で言えば、Medusaは教科書として最高の資料になる。

国内の小さなEC事例

国内でも、Shopifyから自作に切り替えた個人事業主の話をちらほら聞く。ある焙煎コーヒーの個人店は、月80件ほどの定期購入を回している。Shopifyの定期購入アプリに月4,000円払っていたのがきつくて、Next.jsとStripeの定期決済機能を使って自作に切り替えた。現在は月額3,500円ほどで回している、と聞いた。

この人が面白いのは、切り替えに3週間しかかけなかったことだ。デザインはシンプルな1ページ構成、決済はStripe Checkout(Stripeが用意している決済ページをそのまま使う機能)、在庫管理はGoogleスプレッドシートと連携させた、と話していた。全部自作する必要はない。使える部品は使い倒す、という発想だ。

具体的な手順

Shopifyから自作ECへの移行フロー

図: Shopifyから自作ECへの移行フロー

ここから、実際の乗り換え手順を書いていく。技術に詳しくない人でも、Claude Codeのような生成AIコーディングツールを使えば、3週間から6週間で移行できる範囲の話だ。

ステップ1 現状の棚卸し

最初にやるのは、今のShopifyで使っている機能をすべてリストアップすることだ。管理画面を開いて、インストールしているアプリ、使っている設定、独自に追加したコードスニペット、全部書き出す。A4の紙1枚に収まる程度でいい。

この棚卸しをせずに自作に突入すると、移行後に「あの機能がない」と気づいて手戻りが発生する。事前にリスト化しておけば、自作するもの、捨てるもの、別サービスに外注するもの、の3つに仕分けできる。

仕分けの基準は、月の利用頻度だ。週に1回も触らない機能は、いったん捨てる候補に入れていい。捨てて困ったらあとで足せばいい。

ステップ2 商品データの書き出し

次に、Shopifyから商品データと顧客データを書き出す。Shopifyの管理画面にはエクスポート機能があって、商品、顧客、注文履歴をCSV(表形式のファイル)でダウンロードできる。この3つを必ず先にローカルに保存しておく。

注意点は、画像だけは別途ダウンロードが必要なことだ。Shopifyの画像はShopifyのサーバーにあるので、自作サイトに移すならすべて手元に落として、新しい保存先にアップロードし直す必要がある。Supabase Storage(画像などを置ける保管庫)を使えば、月5GBまで無料で置ける。商品点数50点、1商品5枚の画像なら、十分収まる。

ステップ3 Supabaseのテーブル設計

Supabaseに次のテーブル(表)を作る。最低限これだけあればECは回る。

・products: 商品情報(名前、価格、説明、在庫数、画像URL) ・customers: 顧客情報(名前、メール、住所) ・orders: 注文情報(顧客ID、商品ID、数量、金額、ステータス) ・order_items: 注文明細(1注文に複数商品が入る場合の内訳)

このテーブル設計を、Claude Codeに投げてしまうのが早い。「Next.jsで個人ECを作りたい。Supabaseのテーブル設計を提案してほしい。商品50点、月100注文規模、定期購入は不要」と伝えれば、SQL(データベースに命令を出す言葉)を書いてくれる。自分で1から書こうとしなくていい。

ステップ4 商品ページとカートの実装

商品一覧ページ、商品詳細ページ、カートページ、この3つを作る。Next.jsのApp Router(ページの作り方の仕組み)を使えば、ファイルを作るだけでルーティング(URLの振り分け)が完成する。

ここで大事なのは、いきなりかっこいいデザインを目指さないことだ。最初は真っ白な背景に、商品画像とタイトルと価格だけ並べる状態で構わない。デザインは後回しにする。動くものを先に作って、そこから育てていく。

実装をClaude Codeに任せるときのプロンプト例を書いておく。

Next.js 15のApp Routerで商品一覧ページを作ってほしい。
データはSupabaseのproductsテーブルから取得する。
サーバーコンポーネントで書いて、クライアント側のJavaScriptは最小限にしたい。
Tailwind CSSでシンプルなカード型レイアウトにする。

このくらいの粒度で伝えると、動くコードがほぼ一発で返ってくる。返ってきたコードを貼り付けて、動作確認する。動かなければエラー文をそのままClaude Codeに投げ返す。これを繰り返すだけで、ECの骨組みができる。

ステップ5 Stripe Checkoutでの決済

決済はStripe Checkoutを使う。これは、Stripeが用意している決済ページに飛ばすだけで決済が完結する仕組みで、自作する手間がほぼない。セキュリティの責任もStripe側が大半を負ってくれる。

カートページで「購入する」を押したら、Stripeのサーバーにセッションを作るリクエストを送り、返ってきたURLに画面を飛ばす。これだけで決済画面が立ち上がる。購入が終わったら、Stripeから自分のサイトに戻ってきて、注文完了ページを表示する。

決済が成功したことをSupabaseのordersテーブルに記録するには、Stripeのwebhook(決済完了を通知してくれる仕組み)を受け取るエンドポイントを作る必要がある。ここは少し複雑なので、慎重に作りたい部分だ。それでもClaude Codeに頼めば、テンプレートコードは1時間以内に用意できる。

ステップ6 在庫管理の最小版

在庫管理は、最初はシンプルにしておく。productsテーブルにstockという列を作り、注文が入るたびに数量を引く。それだけだ。

在庫切れの場合に購入ボタンを押せないようにする、という処理は必要だが、Shopifyにあるような倉庫管理、ロット管理、複数拠点対応、このあたりはいったん無視していい。月100注文規模なら、在庫は目視で数えられる。Supabaseの管理画面から直接数字を書き換えるのでも回る。

凝った在庫システムを自作しようとすると、そこで時間を溶かす。ECの本質は在庫管理ではなく売ることだ、と割り切る。

ステップ7 注文フローの自動化

注文が入ったら、自動で次の処理が走るようにする。

  1. Supabaseのordersテーブルに注文を記録
  2. 在庫を引く
  3. 購入者に注文確認メールを送る
  4. 自分の管理画面に通知が来る

メール送信はResend(メール配信サービス)が便利で、月3,000通まで無料だ。月100注文なら余裕で収まる。注文確認メールのテンプレートもReact Email(メール用のデザイン部品)で書ける。

管理画面への通知は、SlackのWebhook(通知を送る窓口)を使うのが最も早い。新規注文が入ったらSlackにメッセージが飛ぶようにしておけば、専用の管理画面を作らなくても、スマホで注文に気づける。

ステップ8 発送連携

発送は、ヤマト運輸のB2クラウドか、日本郵便のゆうパックプリントRを使うのが現実的だ。どちらもCSVで送り状データを取り込める。

自作サイトのordersテーブルから、未発送の注文をCSVで書き出すボタンを作る。そのCSVをB2クラウドにアップロードすると、送り状が印刷できる。発送が終わったら、追跡番号を購入者にメールで送る。

この一連の流れを完全自動化するのは、月100注文の規模ならやりすぎだ。1日分の注文を、決まった時間に手動でCSV書き出し、送り状印刷、梱包、発送、という流れを5日に分けて回す。これで十分に回る。完全自動化は、月500注文を超えてから考えればいい。

よくある失敗と落とし穴

乗り換えで失敗する人のパターンを、いくつか書いておきたい。

最初から完璧を目指す

自作ECで一番よくある失敗が、最初から機能てんこ盛りを目指すことだ。会員機能、ポイント、レビュー、定期購入、クーポン、全部入れようとすると、3ヶ月たっても公開できない。

最初に作るのは、商品ページとカートと決済、この3つだけでいい。それ以外は、公開してから必要に応じて足す。足さないまま1年経ったら、それはもともと不要だった機能だったということだ。

ドメイン切り替えを軽く見る

Shopifyで運営しているドメインを、自作サイトに切り替えるときが一番神経を使う。ここでミスると、数時間から数日、サイトが表示されない状態になる。

対策は、切り替えの前に自作サイトを別のドメインで完全に動作確認しておくことだ。決済まで通ることを自分で確かめる。それから、Shopifyの管理画面でドメインを解除し、Vercelに切り替える。作業時間は深夜帯、できればアクセスが一番少ない日曜の朝3時あたりを狙う。

決済テストを本番でやる

Stripeには、テスト環境と本番環境が別々に用意されている。開発中は必ずテスト環境で動作確認をして、本番の公開直前に本番キーに差し替える。これを混同して、開発中のテスト注文が本番に入ってしまう事故を、初心者はときどきやらかす。

環境変数(設定値を外部ファイルに逃がす仕組み)にテスト用キーと本番用キーを分けて書いておき、デプロイ環境ごとに使い分ける。この作法を最初から守ると、事故が減る。

自作後の運用負荷を見落とす

自作ECは月額を下げられるが、運用は自分の責任になる。Shopifyならサーバーが落ちたら向こうが直してくれるが、自作だと自分で対応する必要がある。

とはいえ、VercelとSupabaseとStripeはいずれも可用性(サービスが落ちずに動き続けている割合)が高く、月100注文規模の個人ECで障害に直面することは滅多にない。私の知る範囲でも、自作切り替え後に障害で困ったという話は1年に1度聞くかどうかだ。過度に恐れる必要はない。

サポート体制の欠落

Shopifyには日本語サポートがあるが、自作だと誰にも助けを求められない。これは本当のデメリットだ。

ただ、ここはClaude Codeのような生成AIコーディングツールがほぼカバーしてくれる。エラーが出たら、エラー文をそのまま投げれば、原因と対処法を返してくれる。サポート担当者の代わりに、AIを使い倒す覚悟を持てるかどうかが、自作を選ぶ分かれ目になる。

明日からやる3つのこと

長い記事になった。最後に、明日から始められる具体的な行動を3つにまとめておきたい。

  1. Shopifyの請求書を3ヶ月分、全部並べてみる

ShopifyプランとアプリとSMS、メール配信、ここまでの合計を月ごとに出す。この数字を見て、本当に月8,000円以上の価値が自分にあるのかを冷静に判断してほしい。判断材料は数字でしかない。感覚で決めないこと。

  1. StripeとSupabaseとVercelのアカウントを作る

全部無料で作れる。クレジットカードの登録すら要らないものもある。触ってみるだけでも、自作ECが現実的な選択肢なのか、自分の肌で掴める。触る前から「難しそう」と決めつけないでほしい。Claude Codeを横に置いて30分触れば、もう半分は分かるようになる。

  1. 捨てる機能のリストを書き出す

Shopifyで今使っている機能のうち、自作したら捨てるものを紙に書く。レビュー機能、クーポン、ポイント、会員ランク、こういった機能を捨てられるか。捨てて問題ないなら、自作に踏み切れる証拠だ。捨てられないと感じたら、Shopifyに残るのが正解だ。

月3,000円で回るECは、すべての人に合う選択肢ではない。ただ、月8,000円のShopifyを払い続けることだけが唯一の道ではない、ということは知っておいてほしい。選択肢を知っているかどうかが、個人事業の体力を決めることがある。あなたの事業にとっての正解を、数字で判断してほしい。