🚀

個人でSNSサービスをリリースしたけど、開発から集客までのリアリティを包み隠さずお話しします。

2023/05/09に公開
1

はじめに

株式会社マネーフォワードPdM。おうです。🙇‍♂️

この記事では、個人開発でSNSを作ろうとした際に

  • デザインや実装でこだわったこと
  • 集客のためにやったこと
  • 振り返って思ったこと
  • ちょっとした宣伝
  • ...

について、話していきます。

https://entaku.io/about

SNSを作るのはほんとに難しいことですが、スケールすれば、世の中には新たな情報共有の形を吹き込むことができる、非常に意味のあることだと思います。

自分の今までの行動の整理も含め、これからSNSで起業しようと思う方々に、少しでも参考になるような情報を残しいておきたく思います。

サービスの構想

私はQuoraユーザーですが、Quoraでは基本、QA形式でしかディスカッションを進められないです。もう少し、多彩なディスカッション形式がないのでは?って思った時に、下記のアイディアが浮かび上がりました。

【デュエルディスカッション】

対立的な選択肢から、自分の立場を発信する

ディスカッション例:

  • あなたはきのこ派? それともたけのこ派?
  • 漫才の面白さを引き立たせているのはボケ?それともツッコミ?
  • スタートアップが2023に選ぶとしたら、AWSとGCPどっち?

この機能の競合と呼べるものは、Twitter投票機能になると思いますが、Twitter投票ではまともにディスカッション進められないのが問題ですし、正直Twitterって最近無法地帯に近い雰囲気なのでww、有意義な情報を残すことがあまりないと感じています。

【多項選択ディスカッション】

複数の選択肢から選んで、その理由を発信する。

ディスカッション例:

  • 歴代コナン劇場版の中でトップ3を選ぶとしたら?
  • 言語を無視して、個人開発で最も効率の良いtech stackはどんな組み合わせになる?
  • 1億円あるとしたら、下記の選択肢の中で買いたいものを選んでみよう〜

この機能について、実はあまり競合と呼べるものがないです。一Surveymonkeyのようなアンケート調査プロダクトがあるが、その結果は非公開ですし、結果について透明なディスカッションはできないです。
2023/05/09の段階ではまだ実装途中ですが、そのうちリリースされるともいます。

【オープンディスカッション】

選択肢の制限から解き放され、自由に意見を発信する。

ディスカッション例:

  • 年収1000万に到達するために
  • スタートアップの世の中にあまり知られていないつらいこと・難しいこと・闇深いことは何かありますか?
  • 生成AIモデルは人類社会にどんな影響を与えていくのだろう?

この機能の競合は、そりゃ多いですね…🤔
Quora、Reddit、ヤフー知恵袋、(ある意味NewsPicksも)が考えられます。
特段競合より優れるところはなくて、強いて言えばデザインくらいです笑。

この三つのディスカッション形式を合体

これらを掛け合わさると、かつてない、ユニークな立ち位置になるサービスが生まれると思います。
entakuの多彩なディスカッションによって、世の中に有意義な情報が蓄積され、その情報がいつか誰かのために役立つ世界を目指しています。

というわけで、これはいいアイディアだなぁ!って思ったので、2022年6月ごろから開発に取り掛かりました。

技術スタック

私の経歴を少し補足しておきますと、
2021~2022では、立命館大学という大学にて、教員をやっておりました。
その後、2022年4月から、株式会社マネーフォワードへエンジニアとして転職しました。

つまり、開発を始めた時は、エンジニア歴2ヶ月程度だったので、正直何もわからなかったです。 なんなら、何がわかってないのかもわからなかったのかもしれないです笑。

まあ、色々初心者なりに調査して下記の技術スタックを採用しました
(参考にしたのは主にYouTube)

Frontend

  • Mantine 👉 emotion CSS-in-JS-based UI library
  • tailwindcss 👉 CSS framework (only a small part)
  • tiptap 👉 rich text editor
  • react-query,  axios 👉 data fetching
  • Next.js 👉 meta framework
  • tabler 👉 icons library
  • next-seo 👉 SEO
  • firebase 👉 authentication
  • day.js 👉 date time library
  • framer-motion 👉 animation
  • chart.js 👉 chart
  • recoil 👉 state management (only a small part)
  • react-lottie 👉 lottie animation
  • react-reward 👉 reward animation
  • jest 👉 javascript testing framework
  • testing-library 👉 react testing library
  • vercel/og 👉 open graph image generator (only a small part, it has some limitations)

Backend

  • nestjs 👉 backend framework

  • prisma 👉 ORM

  • firebase-admin 👉 authentication

  • passport 👉 authentication strategy

  • google-cloud/storage 👉 file upload

  • jest 👉 unit testing framework

  • pactum 👉 api testing framework

  • postgreSQL 👉 database

  • docker 👉 containerization

  • GCP Cloud Run 👉  managed k8s

  • react-email  👉  server-render HTML email

開発のこだわりポイント

codegenを活用

本業も副業もある中で、なかなか開発の時間が取れないです。
時間が取れないと何が問題かといいますと

  • スピードが落ちる
  • 久々に開発する時に、前回のコードスタイルを忘れて、実装自体にブレが生じる

この問題を解決するために、自分でcodegenのスクリプトを書きました。

FrontもBackendのコンポーネントはtemplateから生成して、中身を埋めていきます。Backendのテストもtemplate化して、中身だけ埋めるようにしています。

Pro向けのEditorを心かける

有意義な議論をするために、ハイエンドユーザーを集める必要があります。
ハイエンドユーザーがご自身の知見を共有するために、プロレベルのツールが必要です。

このことを信じて、工数が足りない中で、Editor機能をこだわってつくりました。

Editorの機能もデザインも完全なカスタマイズを目指しているので、Tiptapというheadlessなeditorを使って、隅々までカスタマイズしました。

Landing pageで遊べるので、ユーザー登録しなくてもぜひぜひ一度触れてみてください。

🔗 👉 https://entaku.io/about

architectureを自分の中で決めておく

コードスタイルがずれないように、しっかりarchitectureを決めて、それに従って買いていくことが大事です。

entakuの開発では

  • frontend:少し冗長かもしれないがatomicデザインにしたがって、フォルダ構造を決めています
  • backend:Nestjs公式ドキュメント通りに
    • 依存関係はすべてDI(Dependency Injection)に任せる
    • 役割に応じて、コンポーネントの位置とnamingを決める

工数計測のために、one man sprintを回す

自分が果たしてどれくらいの工数を使って、entakuを開発しているのかを可視化するために、Linearというツールを使って、プロジェクト管理を行って、one man sprintを回していました。

https://linear.app/

開発ロードマップはこんな感じです。

LinearやJIRAのようなツールはあくまでもツールであって、具体的な実行・気を付けるポイントは下記の通りです。

  • チケットを可能な限り小さく
  • PRを可能な限り細かく
  • チケットの見積もりは、自分が何時間必要そうなのかを入れる(時間見積もりというやつ)
  • まとまった時間でしか、作業しないように(時間計測の精度を上げる)

結論、ばらつきはありますが、毎月平均60時間くらいやっていました。
ただし、開発以外の、計測しにくいタスクや調査もあったりするので、プロダクトを作るという意味では、毎月平均80時間くらいですかね。

デザインのこだわりポイント

デザイン基調しっかり選ぶ

Medium, NewsPicks, Apple, SAMSUNG, …
様々なプロダクトデザインを参考にしたところ、「ハイエンドユーザー」に訴えかけるためには、やはりモノクロ一択です。

entakuは、徹底的にモノクロのデザインをベースにして

  • font color
  • shadow
  • border

全てのカラーを統一管理して、ThemeToken的なものから参照しています。

Home画面

新規登録

個人コンテンツのDashboard

投稿を促すCall to action

colorやspacing系は統一管理

padding, margin, 難しいですね。
私はサイコじゃないですけど、ちょっとだけpaddingやmarginが統一されていないと、気持ち悪く感じます。

entakuでは、それらの数値を徹底して、統一管理しています。

集中管理の様子

micro-interaction & motionを導入

ユーザーに興味を持ってもらうためには、動くもの、自分とインタラクションしてくれるものがいいと思っています。

entakuでは、それらを隅々まで導入しています。

Call to action

紙吹雪。新規登録時や、ディスカッションを主催時に出す。

slashコマンドでinteractiveな体験をもたらす。

点滅しているiconで、対立的な意見が戦っているような演出を実現。

遊び心を忘れず

遊び心大事ですよね。
いつまで経っても、遊びたいです。
私がこう思うなら、多くの人も同じように思うはずです。(私は、THE・一般peopleですから)

例が多すぎて、一箇所だけピックアップすると、他人の投稿を編集しようとする際に、こんな演出を実装しました。

他人の投稿を編集することを拒絶するUI

まあ、しょうもないですけど、これに気づいたユーザーさんが「むふふ」ってニヤって笑ってくれると思えば、やる気がでますね。

集客に向けての工夫

Wailtlistの導入

正式にリリースしたのは、2023年5月1日ですが、当時、リリースのインパクトを上げるために、色々施策を考えてみました。

いくつかのアイディアの中で、wailtlistを採用しました。

当時、こんなフォームを作ってました。

https://tally.so/r/mYPvOz

ここで登録すると、私がデザインした名刺を贈呈するようにしました。
欲しい方いれば、ユーザー登録して頂くと、画像だけメールを送信します。(ポケットマネーが持たないため、印刷して発送するのをやめたww)

日本語

英語

3番目のユーザー

結果的に、あまり効果はなかったのですが、名刺を送付したユーザー様は初期から大事に付き合ってくださった方々なので、別にもったいないことはしていないと思います。

VCに相談

私は中国出身で、今日本における在留資格的にそもそも法人設立できないです。
できるようにするために、色々活動してはいるが、かなり時間がかかります。
なので、会社すらないから資金調達ができるわけがないです。

ただし、ご縁があって、二つのVCの投資家と繋がりがあって(かろうじ)、なんとかおねだりして、壁打ちや相談に乗って頂きました。

内容は公開できないが、ビジネスにおいても、人生においても、とても助かりました。

私からのアドバイスとしては、とりあえず繋がれる人に頼むことを恐れず、アタックしに行けば、意外と話聞いていただける人が多いので、迷わずに行動してみてもいいかなぁと思いました。

友人や職場の同僚におねだり

マネフォの同僚の皆さんにもユーザー登録の宣伝等をお願いしました。

協力的な方がほとんどですが、一部いささか感じ悪い対応をした方もいたのも事実です。

同僚とはいえ、必ずしも協力して頂けるわけではないので、めげずに、興味を持つ方をひたすら探していくの良いかと!

アライアンス形成

ディスカッションを主催してくれるユーザーを探すためには、共通の興味を持つコミニティーに打診して、コミニティーのトップ?運営者?がコミニティーをより活発になるために、entakuを通じて、みんなでディスカッションを進めていく作戦を練っています。

現在、いくつかのコミニティーの運営者と交渉していて、結果はまだわからないですが、entakuはいいプロダクトなので、使い方次第でコミニティーのコミュニケーションを活発にできると思いますので、ぜひ前向きに検討して頂きたいなぁって思ってます。

たとえば、スクラムマスターのコミュニティーが、プロダクト開発について色々共通して興味を持つトピックがあると思いますので、entakuでディスカッションできたりしますね。

ちょっとした広告

Twitter広告を打ってみました。

もちろん、赤裸々に、ユーザー登録してみてよ〜 ではなく、どちらかと言えば、ユーザーはどんなディスカッションに興味を持つのか、どんな文案が人の興味をひけるのかをA/Bテストする意味合いで、数千円程度で、Twitter広告を打ちました。

その結果がこちら、

Impression: 3万
Like: 100
(2023/05/09)

https://twitter.com/whn19951114/status/1655583833750745090

Impression: 19万
Like: 1500
retweet: 100
(2023/05/09)
(誤字は許して〜 恥ずかしすぎる🙈)

https://twitter.com/whn19951114/status/1654697030214885378

この二つのツイートのおかげで、4名程度のユーザー様を獲得できたと思われます。

今回の施策からわかることとして

  • 面白いトピックについては、皆さんが興味を持ってくれる
  • 興味を持ってくれるだけでは、コンバージョンまでいかないので、Call to actionやincentiveが必要

まあ、マーケとか全くわからないので、手探りでやっていくしかないですね。

振り替えてみると?

かなりメンタルにきます

2023/05/09時点では、ありがたいことに約20名のユーザー様が登録して頂けたのですが、スケールするまで、まだ道のりが長いです。

5月1日リリースから一週間の間に、毎日5回くらい
「なんとためにやってんやろう…」
と自分に問いかける瞬間があって、かなりメンタルに対するダメージが大きいです。

私は比較的にしぶとい人なはずなのですが、この様なので、起業はほとんどの人にそもそも向いていないことがわかりました。

ただ、その辛さと共存しながら、前に進めていく行動力とマインドを持っていれば、引き続き頑張って欲しいなぁと思います。

自分も、辛い思いと一緒に、これからも頑張っていきたいです。

2023年5月15日(月)追記

ユーザー様から頂いた嬉しいフィードバック1

ユーザー様から頂いた嬉しいフィードバック2

2023年5月28日追記

ジャフコベンチャーキャピタルと日本経済広告社の方からentakuについてお問い合わせを頂いて、色々とお話しをして大変勉強になりました。

むずび

このサービスの未来を信じて頂ける方、一緒に面白い未来を作って行きたい方を募集しています。
給料は払えませんが、co-founderとして、頑張りましょう〜
📤 hello@entaku.io

このサービスが面白い、自分の友人やコミニティーで、共通の話題についてわいわいディスカッションしていきたいと思う方は、アクセスして、ユーザー登録してみましょう〜

https://entaku.io/about

うちの彼女が作ってくれたスタンプです。
私の名前は王(ワン)なので、わんさん🐶をモチーフにしています笑。
よかったら買ってください〜
https://store.line.me/stickershop/product/21895747/ja
https://store.line.me/stickershop/product/22388523/ja
https://store.line.me/emojishop/product/6448be1ea2e3b1049529e5af/ja

Discussion

hato-codehato-code

エンジニア初めて1年でアプリをリリースするなんて、尊敬します!!
私は、2年目ですが、個人開発が全然できていないので参考にさせていただきます!