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

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


カベウチ

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

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

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


この記事をシェア

あなたの事業に成長を

集客に特化したWebflowサイトで自社マーケティングをより柔軟に、より効果的にします。制作依頼を送信したら、無料打ち合わせであなたのニーズをヒアリングして、最適なソリューションを提案します。

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

あなたもNoCodeのプロに

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

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

  • チャットサポート

  • 個別ビデオ通話相談