会員制Webサイト・会員コミュニティ構築のためのモバイルアプリをノーコードやCMSを用いて自身で開発できる方法についてご紹介します。自前でなく、SaaSを利用して枠組みの中で会員制サイト・コミュニティサイト・コミュニティアプリを運営する場合には オンラインサロン・会員コミュニティアプリ構築SaaS7つを比較【個人・スモールビジネス向け】 を参考にしてください。
基本的にはSaaSに乗っかる形のほうが構築コストもかからず、十分な機能を要していることが多いのでSaaS形式での会員制サイト・コミュニティアプリを利用することがおすすめです。
「独自のカスタマイズが必要だ」「SaaSの提供する枠を超えた柔軟なサイト・アプリを開発したい」という場合にのみ、以下で紹介するノーコードツール・CMSを活用するようにしましょう。
マッチングサイトなど、機能が定型化しており一定の市場ニーズがある場合、制作会社・構築会社がパッケージとして構築プランを提供しています。機能が一般的なものの場合、比較的安価に依頼できる場合もあり、マッチングサイトなどの場合はパッケージ構築を依頼するのが良いでしょう。
目次：
- ノーコードで自由度の高いWebサイト設計を。Webflowネイティブ機能で会員制サイト・コミュニティサイトを制作
- Webflowのネイティブ機能: メンバーシップ機能（会員機能）がオープンベータとして公開されました！
- Webflowメンバーシップ機能で会員制サイトとしてできること
- 今後、柔軟な権限管理や会員ユーザーデータの取り扱いを改善させていく
- Webflow × Memberstackで会員ログイン・有料会員機能を実装可能
- WebflowはAPIフレンドリーなため、他の様々なノーコード・ローコードツールと連携可能
- Webflowがおすすめできる場合・できない場合
- モバイルアプリ・デスクトップWebアプリで会員コミュニティ構築。Adalo
- 社内ポータルの強みをコミュニティサイトとして。Concrete CMS
- 何でもできる万能WebサイトCMS: WordPress
- マッチングサイトを制作したい場合はパッケージで構築依頼するのがおすすめ
- 成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
ノーコードで自由度の高いWebサイト設計を。Webflowネイティブ機能で会員制サイト・コミュニティサイトを制作
Webflow: The no-code platform for web design and development
"Webflow helped our brand team create a platform that enables all Zendesk employees to accurately and consistently represent the company in an easy, efficient and scalable way." Erin PinkleyExecutive Creative Director Bring your design vision to life in clean, semantic HTML5, CSS, and JavaScript - with the Webflow Designer.
webflow.com
ブラウザベース・Webサイトの形でコミュニティサイトを独自構築したいなら、ノーコードでのWeb制作ツール”Webflow”がおすすめ。
たとえばバックエンドをAirtableと組み合わせるなどして、ノーコードでのWeb制作ツールの中では最も自由度が高い設計ができる。
ユーザーからの投稿に対応させるには、たとえばTypeformを活用するなどの手段も考えられます。
Webflowのネイティブ機能: メンバーシップ機能（会員機能）がオープンベータとして公開されました！
Webflow自体の機能（ネイティブ機能）として、メンバーシップ機能・会員制機能が公開されました！
2022/04/21現在、まだ準備中。β版にて一部ユーザーにのみ招待。
2022年11月のWebflow Conf 2022にて、Webflowの新機能とあわせて会員機能がオープンベータ版となり一般ユーザーにおいても申請不要で利用できるようになりました。
Today, we are excited to announce that Memberships is now in public beta, available to all Webflow customers right in the Designer. Additionally, thanks to our CMS scalability work, we’re raising the limit on the number of members per site to 20,000, so you can scale your communities even further.
Memberships now in open beta — with increased limits | What we announced at Webflow Conf 2022
上記から、会員数20,000人までの会員制サイト・コミュニティサイトを構築することができるようになることが分かります。
Webflowメンバーシップ機能で会員制サイトとしてできること
Build a business from your online audience | Webflow Memberships
Turn up the dial on your content with free, paid, or tiered memberships - all without custom code, all in Webflow.
webflow.com
上記ページをみる限り、下記の機能が実装可能とみられます。
- 会員登録・ログイン機能
- パスワードリセット・パスワード更新
- 会員の権限設計・管理（アクセスグループの設定・管理）
- 特定のグループにのみアクセスできる階層を設定可能
- 複数のグループを作成でき、それらのグループごとに権限管理が可能。
- キックアウトも可能？
- 有料会員機能（決済・月額課金機能）
- マイページ機能？
上記はWebflowネイティブ機能なので、ユーザー登録画面やログイン画面はGUIでデザイン変更が可能。
招待メールのカスタマイズも可能とのこと。
今後、柔軟な権限管理や会員ユーザーデータの取り扱いを改善させていく
WebflowのMembership機能はオープンになったとはいえまだベータ版であり、たとえば権限管理についてはそれほど柔軟に・細かく設定することはできないようです。
柔軟な権限管理や詳細なワークフロー設定を行いたい場合は、現時点においては後述する Concrete CMS がおすすめです。Concrete CMSはもともと社内用イントラネットから生まれた経緯があり、会員制サイトの制作に強みがあります。
しかし、WebflowはMembership機能を今後さらに充実させていくとのこと。
Over the coming months and leading up to general availability we are focused on adding features that allow more granular control of the end user experience — such as gating visibility of individual elements and user data binding — as well as improvements that make user data more flexible and robust, like reference fields.
Memberships beta | Webflow Features
上記によると、権限管理をより柔軟にしていくことと、メンバー情報をメンバー自身で閲覧・コントロールできるようにしていくなど、会員ユーザーデータの紐付けに関する部分について改善に取り組んでいくとのこと。
Webflow × Memberstackで会員ログイン・有料会員機能を実装可能
WebflowとAPI連携させ、Memberstackを利用する形でも会員制ログイン機能を実装可能です。
Memberstackは「会員管理に特化したノーコードツール」であり、会員管理のためのダッシュボード、決済・支払い管理など、会員管理に必要なバックエンド機能をひと通り提供してくれる有料のノーコードツールです。
Memberstack単体ではフロント画面の提供はないため、会員登録させるため、会員情報を自身で閲覧できるようにさせるためにWebflowと連携させます。
Tutorial: Webflow + Memberstack
A walkthrough of how to install Memberstack on a Webflow website.
support.memberstack.com
Memberstackを導入したうえで、MemberchatというWebflowサードパーティプラグインを導入すれば会員同士でのDM,メッセージ、グループチャットを実装することができます。
またMemberstackは現在Memberstack 2.0という新バージョンを準備中。大きくパワーアップする予定とのこと。
開発者は下記からベータ版の利用申請が可能。
Memberstack - Developer Beta Program
We believe that adding authentication & payments functionality to web applications is still not as easy as it should be. We've worked with over 15,000 web developers and designers in the past year, and we know how painful, complicated, redundant and boring it can be to build or maintain this functionality.
www.memberstack.com
WebflowはAPIフレンドリーなため、他の様々なノーコード・ローコードツールと連携可能
WebflowはAPIが公開され、APIドキュメントが整備されています。上記Memberstackとの連携もAPIを介したものです。
CMS API Reference
developers.webflow.com
たとえばバックエンドとしてFirebaseやSupabaseを活用すると、更に幅が広がりそう。
Webflowがおすすめできる場合・できない場合
コミュニティサイトという文脈に限定していませんが、Webflowがおすすめできる場合とできない場合を事例つきで下記の記事にまとめています。
Webflowの事例+3つのおすすめな場合と検討すべきケース | まほウェブ
Webflowの事例+3つのおすすめな場合と検討すべきケース
ノーコードのWebサイト制作ツール・CMSである Webflow に関するYouTube動画で、"Webflowを使うべき場合と使わないほうがよい場合" について説明されていました。 大変興味深い内容であり、実際 "WordPressやWix, Studioなど他CMSと比べた際に、Webflowをどう棲み分けて利用すればよいか？" というのはなかなか悩むシーンではあると思います。 ...
marketing-wizard.biz
関連タグ: Webflow
モバイルアプリ・デスクトップWebアプリで会員コミュニティ構築。Adalo
Adalo - Build Your Own No Code App
After hiring designers and developers, most entrepreneurs don't have any money left to iterate on their products, so they cross their fingers and hope. With Adalo, you're in complete control to add, adjust, or even build a new app.
www.adalo.com
上記ご紹介したWebflowは「会員制Webサイト」でしたが、Adaloは「モバイルアプリ」または「デスクトップWebアプリ」の制作をノーコードで行えるツールです。
一応PCでも閲覧可能ですが、PC画面上にモックが表示されるモバイル最適化表示となります。（PCからの利用は原則ないもの、として考えましょう。）
AdaloではモバイルアプリまたはデスクトップWebアプリのどちらを制作するか、最初に選択してアプリケーションをノーコードで開発していくことができます。
デスクトップWebアプリはPC・Macローカルにダウンロードするデスクトップアプリのことではなく、PCブラウザから閲覧したときに動作させるWebアプリケーションのことを指します。
また、複数のモバイルアプリまたはデスクトップアプリのあいだでデータベースを共通して利用することが可能のため、Web（PC）・モバイルアプリの両開発として利用することも可能。
無料プランだとPWA方式のみ、有料プランだとネイティブアプリ化することが可能です。
実際にAdaloからネイティブアプリとしてiOSおよびAndroidで会員制アプリを公開させました。ネイティブアプリ申請の手続きは自身で行う必要があります。
Adaloをネイティブアプリとしてストア申請するための3つの下準備
Adaloをネイティブアプリとしてストア申請: Google Play Store編
Adaloをネイティブアプリとしてストア申請: Apple App Store編
Adaloではユーザーによる投稿が可能で、標準でログイン機能を実装できます。 自動的にログイン機能が実装された状態でノーコード制作がスタート。
初心者にもおすすめできるノーコードアプリ開発ツールといえるでしょう。 【ノーコード分科会】No-Codeの「DB設計」について語ろう！～Bubble会～ においても、Adaloは初心者〜中級者まで幅広くおすすめできるノーコードツールとして紹介されました。
書き起こし【ノーコード分科会】No-Codeの「DB設計」について語ろう！～Bubble会～ | 魔法使いのWebマーケティング
タイトルのとおり、Zoomにて開催された「【ノーコード分科会】No-Codeの「DB設計」について語ろう！～Bubble会～」に出席しました。 【ノーコード分科会】No-Codeの「DB設計」について語ろう！ ～Bubble会～ No-Codeツールは多種多様なものが世に出てきました。しかし初心者が必ずと言っていいほどぶつかる壁が「データベース（DB）設計」の部分であるとのこと。このBubble会では、データベース設計の話を中心に、初心者がNo-Codeツール（特にBubble）利用時につまずきやすいポイント・おすすめの解決方法などをざっくばらんに語られました。 Bubbleとは、No-Codeツールの中でも最も汎用性の高いwebアプリケーション制作ツールです。 Visual Programming | Bubble ※ 用語等、正確でない記載がある場合があります。（私自身DB設計弱いです...） 本記事にて書き起こしを行いましたZoomセミナーの録画動画が公開されました。ノーカット版にて約2時間30分ほどの長編となりますので、本記事の書き起こしをご参考にしていただくか、YouTubeの目次リンクを活用して必要な箇所をご覧ください。 以下はこちらの動画の書き起こしになります。 No-Code初心者の方がNo-Code開発ツールを選定する場合は Glide（シンプル） → Adalo（中間） → Bubble（少し複雑） の順番に進んでいくのがおすすめ。 * AdaloのDBは、独自のデータベースシステムが用意されている* 1対多、1対1、等をあまり考えなくてよい* Glideで物足りなくなった人が、Adaloへ、その後Bubbleへ進んでいくイメージ Create an App from a Google Sheet in Minutes · Glide 関連記事: Glideでログインユーザーごとに表示切り替えできるアプリは作れるか | まほウェブ Glideでログイン機能・ユーザーごとに表示切り替えできるアプリは作れるか 直感的に開発できるUIとシンプルな使いやすさを持ちつつ、会員登録・ログイン機能のある汎用性の高いアプリを開発できるのが"Adalo"です。 Adalo - Build Your Own No Code App Adalo では、コードを書くことなしに、簡単にアプリを作ることができました。ただし、この「簡単」は、ある程度アプリ作成（少なくともデータテーブル間の関係を理解できる）に馴染みがある方にとっての「簡単」です。全くの素人が Adalo を使用してアプリを作成するには、少しハードルが高いかもしれません。しかし逆に言えば、ある程度の素養があって、アプリのアイディアがある。かつコードを自分で書くのは難しい・・・という方にとっては非常に強力なツールになります。このブログで良く紹介している bubble よりは扱いが簡単だと感じましたので、テンプレートの改変程度で十分、と感じる方は試してみてはいかがでしょうか？ ノーコードでウェブアプリ、ネイティブモバイルアプリが作れる！Adalo の使い方 - ノーコード ラボ 有料プランに加入すれば、AdaloをネイティブアプリとしてApple App Store, Google App Storeに公開させることが可能です。 参考記事: Adaloをネイティブアプリとしてストア申請するための3つの下準備 参考記事: Adaloをネイティブアプリとしてストア申請: Google Play Store編 参考記事: Adaloをネイティブアプリとしてストア申請: Apple App Store編 ノーコードツールでのモバイルアプリ開発は「遅い」「速度・パフォーマンスが不十分」と言われることが多いのですが、Adaloは2022年パフォーマンス改善に取り組み、十分実用にも耐えられるレベルになってきています。 参考: Adalo's Performance Updates LIBRIS大道さん:本来データベース設計は難しい。Sier業務では、テーブル設計書を書いてエンジニアに指示していた。* 桁数をどうするか* nullを許すか等、要件定義段階で考える必要があることが多く、難しい印象。 その点、Bubbleはあまり気にしなくてよい。* 0や空白でも動いたりする* データ型* 小数点等* 他のテーブル参照* リスト型で復数持たせたりもできる ただし、Glideよりは時間はかかってしまう。 NoCode ...
marketing-wizard.biz
ただし、Adaloはコミュニティアプリ専用のノーコードツールという訳ではないので、コミュニティアプリを構築するのに一定の工数がかかることには注意が必要です。
コミュニティアプリに特化したSaaSについては、 オンラインサロン・会員コミュニティアプリ構築SaaS7つを比較【個人・スモールビジネス向け】 をご確認ください。
関連タグ: Adalo
社内ポータルの強みをコミュニティサイトとして。Concrete CMS
Concrete CMS - 最高のウェブサイト運営を実現するCMS 【日本語公式サイト】
直感的に操作できるオープンソースCMS「Concrete CMS（コンクリートCMS）」の日本語コミュニティによる公式サイトです。日本語版のダウンロード、ヘルプ、フォーラムなど。旧名「concrete5 (コンクリートファイブ) 」
concrete5-japan.org
Concrete CMSはもともと社内ポータル向けCMSとして開発されたという経緯があり、コミュニティサイトとしての構築には適しています。
ご紹介したWebflowやAdaloとは異なり、Concrete CMSは自身でサーバーへのインストール・ホスティングが必要となります。導入ハードルは高くなるといえるでしょう。
セキュリティ対策も自身で行う必要があります。
Concrete CMSの強みは柔軟な会員管理と、詳細なワークフローが組めること。コンテンツ公開前に人によるチェックを入れたいなど、運営に緻密さ・コンプライアンスを求める場合には有用です。
また、個人的には後述するWordPressのブロックエディタよりもConcrete CMSのほうが直感的な操作に感じます。Wixのように「見たまま」編集できる”WYSISYG”な操作が使いやすさにつながっているのだと思います。
ただし、投稿時のフォームに癖があったり、標準機能以上にカスタマイズする場合に工数が大きくかかります。管理画面においてもUI, UXとして微妙に感じる部分があり、またフロント構築においてデザイン要求が高い場合には問題点が出てくるかもしれません。
Concrete CMSを検討する場合は、コンテンツとコミュニティ、会員データベースをWeb上で一元管理・連携させたい場合や柔軟な会員管理・ワークフローが必要な場合には選択肢に入りそうです。
何でもできる万能WebサイトCMS: WordPress
Blog Tool, Publishing Platform, and CMS - WordPress.org
Watch State of the Word 2022 to find out what's been happening in WordPress, and what's next, from project co-founder Matt Mullenweg. Create a place for your business, your interests, or anything else-with the open source platform that powers the web. That's the beauty of using blocks.
wordpress.org
WordPressは世界で最もインストールされているCMS。Concrete CMSと同様、ノーコードではなく自身でのインストール・ホスティングが必要です。
ただし、インストール・ホスティングを行ってくれる WordPress.com という有料サービスもあります。ホスティング代行は各社さまざまなプランを出しているため、導入・保守・セキュリティに不安がある方は有料ホスティングサービスを利用するのも一手でしょう。
WordPressは何でもできるでしょうが、プラグインを盛り盛りにして、デザインやフロントを自由に触りたい場合にはカスタマイズ工数がかかるイメージ。
WordPressにおいては、会員サイト制作は基本的にはプラグインによって実現されます。いくつかのプラグインを組み合わせて構築されることがほとんどのため、プラグインがいつまでサポートされるか？という点に不安が残ります。
サポート切れのプラグインを残したままだと、脆弱性となりハッキングされる可能性が高くなります。WordPressは世界一メジャーなCMSであるぶん、攻撃の標的になりやすいこともデメリットです。
このあたりのプラグイン事情・セキュリティ事情から、会員制作を可能にするホスティング型CMSとしては、本体機能として会員機能をもつConcrete CMSのほうに軍配が明るでしょう。
ただしフロント構築において、WordPressのメジャーアップデートによりFull Site Editing機能やブロックエディタ、高機能なサイトビルダープラグインが台頭してきています。上記リスクを考慮したうえでWordPressで構築する、というのも一手かもしれません。
関連カテゴリ: WordPress
マッチングサイトを制作したい場合はパッケージで構築依頼するのがおすすめ
上記は会員制サイト・コミュニティサイトを構築する場合のおすすめですが、その中でも例外的なのがマッチングサイトです。
マッチングサイトは機能がある程度決まっており、パッケージ化されやすい傾向にあります。その反面、自身でイチから構築しようとすると大変骨の折れる作業となります。
マッチングサイトにおいては、マッチングサイトのパッケージを構築している実績ある制作会社・開発会社に依頼するのが良いでしょう。
たとえば、管理人の知人が経営するメディアボックス株式会社様によるマッチングサイト構築パッケージは、機能が豊富でかつ他制作会社・開発会社と比べても比較的手頃な価格帯から構築依頼が可能となっています。（特にパッケージ機能内で完結でき、追加機能が不要の場合はお手頃になります）
マッチングサイト構築パッケージ（LP）
マッチングサイトパッケージとなります。メッセージ機能、複雑な検索項目、決済機能、独自の機能も開発し追加出来ます。オリジナルデザインの組み込みも可能です。PHPでの開発はお任せください。セキュリティや高負荷に対応したシステムをご提供します。
mediaboxcp.com
マッチングサイト構築時において、WordPress上にプラグインを利用してマッチングサイトを構築することも可能ですが、上述したとおり、セキュリティ上の懸念が大きいため辞めましょう。
WordPressはシェアが世界一であると同時に、世界一狙われやすいCMSとなります。（WordPressで構築している時点で攻撃対象となりやすい）
マッチングサイトは通常の会員サイトに加えて、「会員同士の会話・メッセージ」というセンシティブな情報が含まれる場合がほとんどです。
このように個人情報やセキュリティが重要となる種類のサイト構築において、WordPress構築はおすすめできません。適切なプラグインを組み合わせた保守・管理をこなせる制作会社ならまだしも（ほとんどない認識ですが）、特に自身で構築することは辞めておきましょう。
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています。 SEOを意識した制作や、制作後の運用・成果を見据えたWebサイトづくりが得意です。
🍀 Webサイト制作とSEOの専門家 - Marketing Wizard
上リンクには私のプロフィール・実績を掲載しています。ご確認のうえ、お気軽にご相談ください。
この記事の気になる箇所を読み返す：
- ノーコードで自由度の高いWebサイト設計を。Webflowネイティブ機能で会員制サイト・コミュニティサイトを制作
- Webflowのネイティブ機能: メンバーシップ機能（会員機能）がオープンベータとして公開されました！
- Webflowメンバーシップ機能で会員制サイトとしてできること
- 今後、柔軟な権限管理や会員ユーザーデータの取り扱いを改善させていく
- Webflow × Memberstackで会員ログイン・有料会員機能を実装可能
- WebflowはAPIフレンドリーなため、他の様々なノーコード・ローコードツールと連携可能
- Webflowがおすすめできる場合・できない場合
- モバイルアプリ・デスクトップWebアプリで会員コミュニティ構築。Adalo
- 社内ポータルの強みをコミュニティサイトとして。Concrete CMS
- 何でもできる万能WebサイトCMS: WordPress
- マッチングサイトを制作したい場合はパッケージで構築依頼するのがおすすめ
- 成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
Category: No-Code | ノーコード
Tags: Webマーケティング全般 | No-Code | CMS一般 | WordPress | Webflow | Adalo
