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

Noteのような、記事を投稿できる会員サイトをWebflowとその関連なノーコードツールを使った実装方法の紹介

ヴォロシオフ イーゴリ
2021
4
14

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

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


カベウチ

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

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

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


この記事をシェア

Accelerate your growth on web

We build websites which empower your team to grow rapidly. Submit your project request and we will be in touch shortly to discuss how we can help.

Our customers
株式会社リコー凸版印刷株式会社株式会社NTTドコモフォースタートアップス株式会社株式会社ニジボックス株式会社E-Housing株式会社ファンディオBooko株式会社unique onTerackathon株式会社ココウリE-Three

あなたもNoCodeのプロに

充実したサポートであなたも、最短3ヶ月間でノーコードWeb制作のプロになれます。

  • 300以上のノーコード動画教材

  • チャットサポート

  • 個別ビデオ通話相談