コンテンツ管理として便利なNotion。ダッシュボードやカンバンとしても利用することができ、チームで利用するオールインワンツールとして人気です。 チームでNotionを利用するとき、一定のページ以下についてのみメンバー限定としたい、などの「会員制サイト」のようなニーズが生じてくることがあります。
本記事では、社内メンバーなどの決まったメンバーのみだけが利用、外部公開はしない「非公開」の会員制サイトとして運用していく方法と、NotionをWebサイトとして一般公開し、会員登録のある会員にのみコンテンツを公開するなどの「一般公開」の会員制サイト、それぞれの方法について解説します。
目次:
- 外部公開しない非公開の会員制サイトであれば、Notionそのままが便利
- ノーコードツールを組み合わせてNotionを一般公開の会員制サイトとして運用することも可能
- NotionのWebサイト化サービスと連携可能な3つの会員管理SaaS
- 決済機能・有料会員制を導入したい場合には追加でStripeの利用料が発生
- Notionをノーコードで会員サイトとして公開する場合の構成例
- 構成例1: Super.soまたはWraptasで公開して、MemberSpaceを会員管理システムとして利用
- MemberSpaceを採用する場合の注意
- 構成例2: Simple.inkで公開して、Memberstackを会員管理システムとして利用
- 会員ログイン機構+コンテンツ保護を独自開発する
- Super.soを利用して会員ログイン機構+コンテンツ保護をカスタマイズで追加
- Notionを軽量ヘッドレスCMSとして用いて、会員ログイン機構+フロント含めて独自開発
外部公開しない非公開の会員制サイトであれば、Notionそのままが便利
外部一般公開せず検索インデックスが必要ない、内輪メンバー・社内メンバー向けのみの会員制Webサイトを作る場合、Notionをそのまま会員制サイトとすることで十分かもしれません。
参考: Notionは会員サイトに最適なのでは? – Honey create
このような場合、以前はGoogleサイトでポータルサイトを構築することをおすすめしていました。
参考: googleサイトでの社内ポータル構築が小企業にピッタリだった|事例より | 魔法使いのWebマーケティング
しかし、Googleサイトは操作がやや分かりにくいこと、柔軟性が低いこと、パスワードを設定することができないことから、現在では自由度が高くかんたんに招待メンバーのみに限定公開が可能なNotionをおすすめしています。
Notionの場合、ページ階層ごとに権限管理ができたり、ワンクリックで共有リンクを発行できたりと、非公開会員制サイト・社内ポータルサイトとして 運用するのに十分な機能を有しています。
ただし、Notionの権限管理は緩めに設定されていることと、勘違いを起こしやすく少し複雑な部分があるので、メンバー限定会員サイトを作る場合にはNotionの権限管理について十分に知っておく必要があるでしょう。
参考: 6-6. Notionにおける権限の考え方
ノーコードツールを組み合わせてNotionを一般公開の会員制サイトとして運用することも可能
Notionで一般外部公開したい会員制Webサイトをノーコードで作りたい場合、Super.so, Wraptas, Simple.inkなどのWebサイト化サービスでNotionをWebサイトとして公開したうえ、ノーコードでの会員管理SaaSを組み合わせるという方法をとることになります。
参考: NotionをWebサイトとして公開する方法 : SuperとWraptas(Anotion)
NotionのWebサイト化サービスと連携可能な3つの会員管理SaaS
WraptasやSimple.ink等でも同様とは思いますが、Super.soの公式コミュニティにおいてはたとえば下記3つのノーコード会員管理サービスの利用が推奨されています。
- MemberStack
- MemberSpace
- Outseta
参考: Looking for Super dev to create a membership website | Super Community
いずれもSuper.soやWraptas, あるいはNotion専用のツールという訳ではなく、メインはWebflowやWordPressなどと連携させることを想定されているSaaSです。上記いずれかと連携することで、会員管理機能を実装できます。
参考タグ: Webflow | WordPress
Outsetaは機能はシンプルですが、手数料が比較的安いのが特徴です。ただ新興サービスのため、サービス継続性を考えると老舗のMemberStackやMemberSpaceのほうが安定感はあります。
決済機能・有料会員制を導入したい場合には追加でStripeの利用料が発生
いずれ会員管理ツールを利用する場合でも、有料会員の仕組みを導入したい場合にはStripeを利用することになります。
この場合、会員管理SaaSの利用料に加えて、Stripe手数料が別途発生します。
Notionをノーコードで会員サイトとして公開する場合の構成例
上で紹介したNotionのWebサイト化サービスと会員管理SaaSを組み合わせた構成例をご紹介します。
会員管理SaaSはJavaScriptコードを埋め込む形で会員管理の仕組みを実現しているので、いずれのNotionのWebサイト化サービスとも組み合わせることが可能です。
ただ公式が具体的にチュートリアルとして準備しているか、あるいは簡易的に組み込める方法を準備しているかが異なるポイントとなります。以下、各ツール公式が推奨している組み合わせをご紹介します。
構成例1: Super.soまたはWraptasで公開して、MemberSpaceを会員管理システムとして利用
Notionを高速かつカスタマイズ可能なWebサイトとして公開してくれるツール”Super.so” と、会員管理SaaSのMemberSpaceを連携する方法。
MemberSpace - Turn any part of your website into members-only with just a few clicks
👩💻 4. Everything happens on your website With MemberSpace, you have 100% control over the design and member experience because everything occurs on your website without your members having to leave. They can sign up, login, access your content, or manage their account - all seamlessly within your existing site.

www.memberspace.com

具体的な実装方法: How to Build a Notion Membership Site
headタグにJavaScriptコードを埋め込む形での実装となるようです。未確認ですが、おそらくWraptasにおいても同様に可能でしょう。
MemberSpaceの設定方法が現在のものと若干異なりますが、設定方法をチュートリアル形式で紹介している動画がありました。(英語)
MemberSpaceを採用する場合の注意
MemberSpaceは特に簡単にログイン画面・会員情報管理画面を実装することができますが、下記の点に注意が必要です。
- 3サービスの中では最も手数料が高い
- ログイン保護するのは設定するページのみ。ディレクトリ単位ではない
- ログイン画面・管理画面の言語が英語のため、手動で日本語化していく必要がある
特に2つ目のログイン保護対象ページについては注意が必要でしょう。これは他サービスでも同様かもしれませんが、ログイン保護されるのはあくまで「MemberSpaceのJavaScriptを設置したページのみ」です。
より具体的に言うならば、設置したページにログインフォームが作成され、ログインに成功すると設定したログイン後ページへリダイレクトされることになります。
そのため、たとえばログイン後のページURLを公開・共有されてしまうと、ログインしていない一般ユーザーからもログインすることなく見られてしまいます。規約等で共有禁止にする、等の対策が必要となるかもしれません。
3つ目の言語設定については日本語など他言語へ設定変更が可能です。
How to change wording your members see - MemberSpace Help Docs
構成例2: Simple.inkで公開して、Memberstackを会員管理システムとして利用
Simple.inkは「10秒」でNotionをWebサイト化する、という触れ込みのNotionサイト化ツール。
Notion Website Maker: Create A Free Website Built In Notion
We're a completely bootstrapped, fiercely independent company. We're funding this with the revenue we make from customers. That's it. No VCs, no investors, or any other people decide the direction of Simple.ink - besides you and us. We're trying our best to make Simple.ink better day by day, without losing our way, just like many products out there have done.
www.simple.ink
Memberstackは会員限定コンテンツを設定することはもちろん、コンテンツ課金や入会課金、月額課金など幅広いことができる、有名なノーコード会員システムです。
一応、JavaScriptが動作する環境であればMemberstackが利用可能とあるようですが、Super.soやWraptasなどがどの程度の実行をサポートしているかは不明。
What are Memberstack's supported platforms & website builders? – Memberstack
このSimple.inkとMemberstackを連携させることで、Notionコンテンツを一般公開の会員制サイトとして公開することが可能なよう。
方法: How to Integrate Memberstack in Notion (free, step-by-step)
会員ログイン機構+コンテンツ保護を独自開発する
「Super.soでNotionをWebサイトとして公開させたうえで会員サイトとして運用していきたいが、料金の高さがネックになって採用できない。何とかなりませんか。」とのご相談をいただきました。
会員管理SaaSは決済ごとに決済料金の数%を手数料として課金するという形になるため、たとえば決済料金が高額な場合、積もり積もってかなりの金額になってしまうことがあります。
Super.soを利用して会員ログイン機構+コンテンツ保護をカスタマイズで追加
コストと機能・デザイン性のバランスをとった構成として、Super.soでNotionをWebサイト化し、会員ログイン機構+コンテンツ保護のみ独自開発する、という方法が考えられます。
現在、ご相談をいただいてテスト実装段階ですが、外部データベースを用いてMemberSpaceと同様の会員登録・ログイン・ログアウト機能が実現できることが確認できています。
ただしこの場合、あくまでJavaScriptを用いたログイン機構・コンテンツ保護の方法となるため、コンテンツ保護の強度はそこまで強くはありません。
Notionを軽量ヘッドレスCMSとして用いて、会員ログイン機構+フロント含めて独自開発
また、よりデザイン性やコンテンツ保護の完璧さを求める場合には、Super.soなどのWebサイト化ツールは利用せず、Notionを軽量ヘッドレスCMSとして用い、サイトのフロントも独自開発するという手法をとることも可能です。
参考: NotionをヘッドレスCMSとして活用。リッチなWebサイトを構築する方法
Notionを活用して会員サイトとして運用していきたいとお考えの方は、一度ご相談をいただけるとお力になれるかもしれません。ぜひお気軽にお問い合わせフォームよりご相談ください。
Webサイト制作とSEOの専門家 - Marketing Wizard
Webサイト制作とSEOの専門家 - Marketing Wizard
成果を上げるWebサイト制作と、ユーザーを呼び込むSEOによる両輪のデジタルマーケティングで小規模チームのビジネス成長をサポート。企画・戦略策定から実行・効果測定まで、貴社のWebパートナーとして伴走いたします。
yzard.jp
この記事の気になった箇所を読み返す:
- 外部公開しない非公開の会員制サイトであれば、Notionそのままが便利
- ノーコードツールを組み合わせてNotionを一般公開の会員制サイトとして運用することも可能
- NotionのWebサイト化サービスと連携可能な3つの会員管理SaaS
- 決済機能・有料会員制を導入したい場合には追加でStripeの利用料が発生
- Notionをノーコードで会員サイトとして公開する場合の構成例
- 構成例1: Super.soまたはWraptasで公開して、MemberSpaceを会員管理システムとして利用
- MemberSpaceを採用する場合の注意
- 構成例2: Simple.inkで公開して、Memberstackを会員管理システムとして利用
- 会員ログイン機構+コンテンツ保護を独自開発する
- Super.soを利用して会員ログイン機構+コンテンツ保護をカスタマイズで追加
- Notionを軽量ヘッドレスCMSとして用いて、会員ログイン機構+フロント含めて独自開発
Category: Notion
Tag: 会員制サイト | Notion | No-Code | SaaS | Super.so