NoteのクローンをWebflowで作れる?

2021-07-15
Web
CMS
API
システム連携
データベース
ノーコード
会員管理

皆さん、こんにちは!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サイトは、アカデミーの会員が作ったモデルと撮影会社のマッチングプラットフォームです。

モデルのポートフォリオや撮影案件を投稿したり、モデルと会社がチャットで話したり、機能の豊かなサイトです!


カベウチ

もう一つのサイトは、カベウチです。

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

皆さんも、チャレンジして見てください!


この記事を保存

メールアドレスを入力すれば、この記事のURLをメールで送ります。

フォーム送信することでプライバシーポリシーに同意するとみなされます。

ありがとうございます!フォームが送信されました。
送信中にエラーが発生しました

最近の記事

テキストが空でクリックできない時の対処法

テキストが空でクリックできない時の対処法

テキストを入力している際に、文字を全部消してしまい入力方法がわからなくなった経験はありませんか? この問題の解決策はとても簡単です。

ノウハウ
Webflowサイト公開前チェックリスト15選!

Webflowサイト公開前チェックリスト15選!

サイトを公開する前にチャックしないといけない忘れがちな項目の15選!説明付です!

豆知識
動画教材数が100本を達成

動画教材数が100本を達成

LikePay.dev Academyの動画教材数が100本を達成したことをお知らせします。

ニュース
LikePay × Webflow:日本コミュニティリーダーへ

LikePay × Webflow:日本コミュニティリーダーへ

LikePayは、Webflowから日本のコミュニティリーダーとして公式認定された話です。

ストーリー