• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / WooCommerce / サブスクECサイトをノーコードでサクッと構築してみた

サブスクECサイトをノーコードでサクッと構築してみた

池田祐太郎 | 2021年4月5日 公開 コメントを書く

近年の流行りの「サブスク」。

「自社で販売しているサービスを、定期自動購入の仕組みを導入できないか」
「1ヶ月、3週間ごとなど決まったサイクルに商品をお届けしたい」
「お客様が解約するまで自動的にクレジットカード決済したい」

一定期間決まった金額を支払い続けるというサブスクリプション方式は買い切りモデルにはない魅力があります。

一方、サブスクサービスを提供するためのプラットフォームやECサイト、ASPなどは多くあり、実現したい内容によってどのような手法を選択するか複雑で、余力のある企業はいいでしょうが小規模事業者や個人事業主にとって初期費用+ランニングコスト相場は手軽にスタートできる費用ではないところも悩みどころです。

また、サブスクシステムの構築には一般的に高度なプログラミングが必要です。ASP提供のものであれば不要ですが、カスタマイズができない or 範囲が小さいのが一般的。

そこで、多少の知識は必要とはなりますが、ある程度自由にカスタムしたサブスク機能をノンプログラマーでも構築できるノーコードを前提とし、まずは立ち上げてみることを目標としてサブスクEC構築の概要をご紹介します。

注:
基本的に管理画面からの作業がメインでコードをかかずに設定可能ですが、最低限の設定となり、前提知識を端折っているためかなりおおまかです。私の場合はStripeのアカウントが作成済みの状態でローカル環境への構築で1時間弱でしたが、実際は自社でもクライアントワークの場合でも要件に合わせて作成するためこの通りにはいきません。ただ構築するだけの目安として記事を書いています。
サブスク化の際にASPを利用するのか or 自社で構築するかによって大きくわかれますが、後者を選択した際の選択の指標として参考になれば幸いです。

目次

  • 1 利用するツール
  • 2 完成イメージ
  • 3 ノーコードのサブスクEC構築はWooCommerce Subscriptionsを使う
  • 4 おおまかな構築の流れ

利用するツール

  • WordPress : CMS
  • WooCommerce : EC機能の無料プラグイン
  • WooCommerce Subscriptions : サブスク機能拡張の有料プラグイン(詳細は後述)
  • Stripe : 初期費用・月額費用無料のクレジットカード決済機能
  • WooCommerce Stripe ゲートウェイ : Stipeを連携する無料プラグイン

上記の通りですが、WordPress + WooCommerceを選択することでCMSとEC機能は無料で利用できます。1ヶ月や2週間といった定期的に自動で決済・購入させるサブスク機能のためにWooCommerce Subscriptionsを導入します。これは年間$199の有料プラグインです(後述しますがテスト利用であれば無料で利用可能)。決済周りはStripeを採用することで決済手数料のみで済みますし、購入側が新しく決済用にアカウントを作る必要もありません。

完成イメージ

今回設定した仮条件:

  • 実商品を1ヶ月毎に配送
  • 商品価格: ¥1200、配送料: ¥500円、別途消費税
  • クレジットカード決済による自動更新
  • 初期費用無し、月額課金のみ
  • 無料利用期間無し

上記プログラミング無しの管理画面からの設定のみ。細かい部分の調整はもちろん必要ですが、以下が完成した各画面等です。

1ヶ月1200円としたサブスク商品例。
カート画面。初回決済後、次回課金が5月4日に設定されているのがわかる。所々英語のため翻訳は必須。
注文画面。先程のカートに加え、住所やメールアドレスの入力、クレジットカード決済など。
決済完了画面。サブスクに関する情報も別で表示されている。
マイページの注文詳細画面。自分が注文したサブスク商品についての情報が見れたり、サブスクをキャンセル(できないようにも可)、住所変更、クレジットカード情報変更など。
管理画面側の注文一覧画面。先程の注文が確認できる。
注文詳細画面。
こちらはクレジットカードのStripeの管理画面。支払いが成功しているのがわかる。

上記画面はStorefrontテーマを設定しています。一例のため、もちろん表示やデザイン等自由にカスタマイズ可能です。

ノーコードのサブスクEC構築はWooCommerce Subscriptionsを使う

WooCommerce Subscriptionsは年間$199の有料プラグイン

WooCommerce SubscriptionsはWordPressを開発しているAutomattic社が提供するプラグイン。EC機能を提供するWooCommerceを利用する前提となっており、インストールすることでサブスクリプション機能が拡張されます。

本来は有料プラグインのため購入しないとインストールができませんが、今回は記事執筆のため構築テストなのでGitに公開されているバージョンをインストールします。GPLライセンスのため問題有りません。(記事執筆時点でのバージョンは3.0.9)

GitHub – wp-premium/woocommerce-subscriptions

WooCommerce Subscriptionsの主な特徴です。

  • 実商品・サービス等のサブスクリプションに利用可能
  • 1ヶ月毎や隔週など、柔軟な課金サイクルが設定可能
  • クレジットカードエラー等で自動更新できなかった場合は自動的に再請求される&更新支払いURLのメールが送られる
  • サブスク終了日、初期費用、無料試用期間、セール価格と期間予約等の設定が可能
  • 顧客がマイページからプラン変更可能
  • サブスク商品用のクーポンの設定が可能(初期費用無料、初期費用割引、月額費用無料、月額費用割引等)
  • 初回決済時、サブスク更新時、失敗時等、メール送信の有無と内容を設定可能

このように細かい設定ができます。デフォルトのままだと一部日本語訳されていますがほとんど英語になっているため、翻訳ファイルを作成するか、販売されている日本語訳キット(販売終了しているようでした)を購入するなどして日本語訳の設定は必須です。

おおまかな構築の流れ

今回は概要のため詳細説明は省きます。(サーバーやドメイン、Stripe等に関しても同様)

  1. Stripeのアカウントを作成しておく
  2. WordPressをインストール
  3. WooCommerceプラグインをインストールし、インストールステップに沿って初期設定を行う。ここでStripeの設定を有効にすることでWooCommerce Stripe ゲートウェイプラグインもインストールされる。
  4. WooCommerce Subscriptionsプラグインをインストール
  5. サブスクリプション商品やサービスを商品登録。更新サイクルや初期費用、月額費用等を設定して完了。
  6. 必要に応じて、サブスク商品のマイページに表示される項目の設定可否、送信されるメールの設定、デザイン、その他カスタマイズ等を行います。(カスタマイズの際は子テーマを作成が推奨)

Stripeは初期費用・月額費用は無料となり決済毎に3.6%の費用がかかります。(ビジネス用別途アカウントは諸条件にて有り)アカウント作成すると本番・テスト環境が提供されるため、まずはテスト環境で動かすことができます。(本番環境には申請が必要)
サブスクリプションで利用しなくとも、WooCommerceを使ったECサイトでのクレジットカード決済手段として第一候補に上がってくるので、アカウント作成しておいて損はないでしょう。

WordPressはおなじみのオープンソースCMSです。説明不要かと思いますので特にここでは取り上げません。

WooCommerceはWooCommerce Subscriptions同様Automattic社提供のプラグイン。WooCommerceを使ってどんなECサイトが作ることができるのかは、以下をご参考ください。

WooCommerceで作られた国内ECサイト一覧まとめ – ハイファイブクリエイト

サブスクリプションシステムを構築したいと思っても、オープンソースを使った場合でも相場は数十万〜数百万(外部開発の場合)、ランニングコストも数万〜数十万が一般的です。

基本的には無料で試せるため、サブスクECサイトの構築の一つとして気になる方はぜひ試してみてください。

メールコンサルティング
WordPress保守管理サービス

Filed Under: WooCommerce 関連タグ:サブスクリプション

池田祐太郎

WordPressの導入を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在はWordPressの保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

Stripe のサブスクリプション課金失敗時にクレジットカード情報を更新する場合は Billing Scale へのアップグレードが必要
2022年11月9日
タグ: stripe, サブスクリプション
カテゴリー: 仕事のこと
Shopifyで構築されたサブスクサービス「BASE BREAD」を契約してみた(後編)
2021年4月20日
タグ: shopify, サブスクリプション
カテゴリー: 雑感
Shopifyで構築されたサブスクサービス「BASE BREAD」を契約してみた(前編)
2021年4月19日
タグ: shopify, サブスクリプション
カテゴリー: 雑感

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. WordPress において PHP 8.1 に更新していいかどうか検証
  6. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上
  • メールフォームプラグイン MW WP Form を使いながら WP Rocket を使う場合にエラー回避する設定

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS ssh SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.