皆さん、こんにちは!LikePay.dev Academyのイーゴリです。
今回は、Noteのようなサービスをノーコードで作れるか?ということについてお話したいと思います。
Noteは、誰でも、少なくても一回見たことある記事を投稿できるwebサイトです。自由に投稿できるので、様々な有益な情報が集まっています。

自分もたまにNoteに記事を投稿しています。例えば、このWebflowの使い方についての記事を書きました。
では、Noteのようなサイトを作ることに戻りましょう。
このようなサイトを作って、皆さんもメディアビジネスを始められます。
もちろん、ビジネスでは、如何に効率的に集客できるかということが一番大事ですが、そもそもサイトがなければ、何も始まりません。
Webflowと他のノーコードツールのおかげで、Noteの簡単なバージョンを土日で作ることができます!
その方法を、今から見ていきましょう🚀
Webページの制作、データベース
まずは、サイトの各ページを作る必要があります。
例えば、ホームページ、サービスについて等ですね。
そのwebサイトの全てのページをWebflowで綺麗に、簡単に作れます!
使い方が分からない方は、まずは「Webflow入門」のコースから学ぶのは、オススメです。
基本のページを制作したら、複雑なデザインを「高度なスタイリング」のコースを参考にしながら、実装できます。
次は、記事のデータベースですね!
WebflowのCMS機能を使って、テンプレートページを作って、各投稿のデータを入れ替えされる形で、それぞれのユニックな投稿ペースを作ることができます。
テキスト、画像、URLと他のデータテーブルとの紐づけも、様々なデータ構成を実装できます。詳しい設定方法は、「高度なCMS」のコースで学ぶことができます。
このような、記事の下に執筆者の情報や他の記事を表示することも、WebflowのCMSフィルターや並び順設定を使って、簡単に実装できます。

ユーザーアカウント機能
ユーザーがwebサイト上でログインして、記事を投稿できるようにするには、Memberstackを使います。
Memberstackは、ノーコードで使える会員システムです。Webflowと完璧に連携できます。
詳しい使い方については、「会員サイトの作り方」のコースを見るのはオススメです。
Memberstackでやることを簡単にまとめると、こうなります:
1)ユーザーのログイン/ログアウト機能を実装(15分)
2)ユーザーのマイページを作成(20分)
3)ユーザーが投稿できる機能の実装(40分)
4)自分の投稿を更新できる機能(20分)
バックエンドの処理は、Zapierを使いますが、Integromatに置き換えても大丈夫です。

投稿文の作成機能
Noteですと、投稿文は、太文字やURLや画像が入っています。それはRich Textというテキストのフォーマットです。

同じフォーマットのテキストをWebflowフォームで作成するには、Tiny CloudをWebflowに連携できます。そのやり方は少し複雑ですが、このレッスンで詳しく説明されています。
いいね!や検索機能
最後は、他の人の記事を検索して、お気に入りに入れられるのは、Noteの便利な機能ですね!
同じ機能をJetboostを連携することで、Webflowでも実装できます。そのやり方は、こちらの動画から始まる数レッスンで詳しく説明されています。
このように、皆さんも、少しだけWebflowとその連携ツールを勉強すれば、簡単にNoteのような会員サイトを作ることができます。
会員サイトの事例
ちなみに、Webflowで会員サイトを作って、ビジネスとして走っている事例は、日本国内でも出始めています。
Gil Match
例えば、Gil Matchです!

このwebサイトは、アカデミーの会員が作ったモデルと撮影会社のマッチングプラットフォームです。
モデルのポートフォリオや撮影案件を投稿したり、モデルと会社がチャットで話したり、機能の豊かなサイトです!
カベウチ
もう一つのサイトは、カベウチです。

こちらのサイトも、アカデミーの会員が運営・開発しています。ビジネス専門家と相談したり、求人を投稿したりすることができる高機能なサイトです!
皆さんも、チャレンジして見てください!