集中したいときに集中できる SNS「MOKMO」ってどんなサービス？

愛用者の多い集中法である、「ポモドーロ・テクニック」を、みんなで目標を共有しながら実践できるサービスです。

リリースしたWebサービス「MOKMO」の概要

リリースしたサービスの URL はこちら。

こんな悩みはありませんか？

Zenn をご利用の皆様の多くは、職業柄、高い集中力を必要とする作業が多いと思いますが、以下のような悩みはありませんか？

集中すべきタスクが目の前にあるのに、なぜかなかなか集中できない
とりあえず作業を始めてみたものの、ものの数分で気が散ってしまう

いかがでしょうか。

実は私自身、毎日のように頭を悩ましてきました。
集中すべきときに集中できないと、後からとてつもない後悔が襲ってきますし、「自分ってダメな人間かも…」といった負の感情が芽生えることもあります。

そこで、この問題について家族や友人に相談したのですが、みんな私と同じように「集中したいときに集中できない」悩みを抱えていることがわかりました。

この度は、そのような悩みを抱えた方に向けて、「集中したいときに集中できる」をコンセプトにサービスを開発、リリースいたしました。

MOKMO が目指す体験

一言でいうと「集中したい時に集中できることによって、ユーザーの生産性を向上させる」です。
調査の結果、多くの人がこのような生産性や集中力に関する悩みを抱えていることがわかりました。
自分の Web エンジニアとしてのスキルを生かして、「集中したいときに集中できる」体験を Web サービスとして提供したいと強く思うようになりました。

MOKMO を使うとなんで集中できるの？

「集中したいときに集中できる」をコンセプトに決めてからは、集中力や生産性に関する情報をかき集め、私自身も実践と効果測定を繰り返してきました。

その中で出会った集中法の 1 つにポモドーロ・テクニックというものがあります(正確には、もともと知ってたけど改めてちゃんと実践した)。
ポモドーロ・テクニックとは、25 分間の作業と 5 分間の休憩のサイクルを繰り返すテクニックのことです。

人間の集中力がそう長く続かないことはご存知かもしれません。
ポモドーロ・テクニックでは、こまめに休憩を挟みながら作業することで、集中力を維持でき、生産性の向上につながります。
これだけの、シンプルなテクニックですが、とても効果が高く、充実感も感じやすいため非常に人気の高いテクニックです。

ただ、ポモドーロ・テクニックを 1 人で実践していると、作業時間に休憩してしまったり逆に休憩時間にも関わらず作業してしまったりするなど、区切りが曖昧になってしまうことが多くありました。
しかし、Twitter のスペースやオンラインもくもく会のような場所で、皆でポモドーロ・テクニックを実践すると区切りが曖昧になることはありませんでしたし、いつもより集中できました。

生産性に関する論文や書籍の調査と、自分自身の経験から、MOKMO では以下のような方法で「集中したいときに集中できる」体験を提供できるのではないかと考え、機能を実装しています。

ポモドーロ・テクニックをみんなで実践できるサービスにする
- 休憩時間のみメッセージ投稿を可能にする => 作業時間と休憩時間のメリハリをつける
- 作業時間は誰からも新着メッセージが飛んでこないため、集中が邪魔されることはなく、逆に休憩時間中はメッセージでコミュニケーションを楽しむことができる
他のユーザーへの作業内容の宣言
- 頑張っている仲間がいる刺激
- 作業内容が近いユーザーの発見 => 有用な意見交換のきっかけ
いいね機能 => 頑張り褒められることでやる気アップ！

今はあえて実装していない機能

集中時間と休憩時間をカスタマイズする機能は今のところ実装していません。
MOKMO 全体で、00 分-25 分と 30 分-55 分が作業時間、25 分-30 分と 55 分-00 分が休憩時間に固定しています。

理由としては、MOKMO 全体で休憩時間を合わせたほうが、コミュニケーションが取りやすいのではないかと思ったからです。
MOKMO は、集中時間中に邪魔されないことを保証している一方で、コミュニケーションの取りやすさも重要視しています。
休憩時間に意見交換などのコミュニケーションを取ることでも、モチベーションが上がったり、効率的な方法が見つかったりして、生産性を向上できると考えているからです。

ユーザーの反応を見て慎重に実装を検討する予定です。

React(Next.js)と Firebase で作りました

ここまで、今回リリースしたサービスについて説明させていただきましたが、これを実現するために使用した、主なライブラリやサービスをまとめておきます。
後述しますが、このサービスのユーザーが少ないうちは無料で運用したかったので、無料枠があるサービスだけで構成しています。

なお、Next.js を使用していますが、バックエンドに Firebase の各種サービスを使用しているので、SPA として Firebase Hosting にてホスティングしています。
今回は、Next.js は高機能なビルドツールとして使用しています。

項目	使用技術・サービス
主な使用言語	TypeScript
フロントエンド	React, Next.js, Ionic Framework, Capacitor, Tailwind
バックエンド	Firebase
ホスティング	Firebase Hosting
ユニットテスト(フロント)	Jest, React Testing Library
Firestore セキュリティルールテスト	@firebase/rules-unit-testing
E2E テスト	Cypress
Linter/Formatter	ESlint, Prettier
CI/CD	GitHub Actions
テストカバレッジ計測	Codecov
検索	Algolia
課金	stripe

はじめての個人開発で気をつけたこと

今回、はじめて個人開発でサービスをリリースしたのですが、以下の点に気をつけてみました。

ユーザーが集まるまではできるだけ無料で運用できるようにする
- 個人開発ということで資金力がないため
集客にあまりお金をかけられない点を考慮する
- ウィルス型の成長エンジンを採用する
- クラウドファンディングに挑戦してみました
個人開発とはいえ、品質に妥協しない
- 自分はもちろん、同僚にも毎日使ってもらって、フィードバックを反映していく
- 限られたチェック時間でも品質を担保するため、ユニットテスト、E2E テストを徹底的に書く
基本的には使い慣れた言語、サービスを使用する
- 今回の開発はプログラミングの勉強目的ではなく、良いサービスを提供することにフォーカスしたかったため
- とはいえ、要件に合わせてどうしても初めてのサービスを使うことにはなりました

ユーザーが集まるまではできるだけ無料で運用できるようにする

サービスが失敗する大きな理由の 1 つに、「資金が底をつき、運営が続けられなくなる」というものがあると思います。
個人開発では、特に資金力がないため、サービスが成功するまで改善を続けるためにも、ユーザーが集まるまでは無料で運用できる必要があると考えました。

マーケティング費用を除けば、Web サービスの運用コストの大部分はサーバー費用だと思います。
しかし、Firebase の無料枠の設定はかなり良心的なおかげで、今のところほぼ無料(月 10 円程度)で運用ができています。
データストアについては主に Firestore を採用していますが、作業部屋の検索に Algolia を使うなど、機能的に足りない部分は他のサービスと組み合わせて使っています。
Algolia も無料枠が良心的で大変助かっています。

集客にあまりお金をかけられない点を考慮する

ウィルス型成長エンジンを採用する

サービスを成長させる上で、広告等に費用をかけて新しいユーザーを集めていく方法を「支出型成長エンジン」といったりしますが、個人開発のように資金力がない場合、採用できません。
そのため、SNS 等での拡散を狙う「ウィルス型成長エンジン」を採用することにしました。

MOKMO の場合は、作業を完了した際にツイートボタンを表示するなど、SNS への露出機会を増やしていく予定です。
MOKMO のユーザーが集中できたと感じ、SNS で自慢したいと思ってくれたときに、そこに MOKMO のリンクを差し込まれれば、そこからウィルスのように拡散していくことが期待できます。

もっとも、これはまだ仮説段階で、これから成長エンジンがうまく機能するか検証していく予定です。

クラウドファンディングに挑戦してみました

集客を行うためには、とにかくサービスの露出を増やし、リリース前でも出せる情報は出して認知してもらう必要があると考えました。
プレスリリースを打つとか色々な方法を考えたのですが、最終的にはクラウドファンディングがリリース前に認知を広めるのに最適なプラットフォームなのでは、という考えにいたり、実際に挑戦してみました。

目標額の 20 万円調達を達成し、支援いただいた皆様には感謝の思いでいっぱいです。
ただ、これは知人などの支援が中心で、全く私のことを使うべきではない言葉なので修正してください人にリーチできた人数は想定よりは少なかったです。

振り返ると、クラウドファンディングというプラットフォーム自体の集客力に期待しすぎた面がありました。
結局、クラウドファンディングも広告を打たない限りは、地道に SNS などで自分やプロジェクトを認知してもらう必要があり、集客における銀の弾丸ではありませんでした。

とはいえ、20 万円もの金額をいただくことができたので、これを元手に広告等の他の集客方法を試すことができるようになりました。
そういった意味でもクラウドファンディングをやって良かったと思っています。

個人開発とはいえ、品質に妥協しない

良いサービスをユーザーに届けたいという想いは、チーム開発でも、個人開発でも変わりません。
私自身も、使いづらいサービス、不具合が多いサービスは率直に言って使いたくありません。

サービスの使いやすさに関しては、同僚に毎日使ってもらったりして常にフィードバックを貰えるようにし、日々改善を続けることで担保しました。
改めて、フィードバックをたくさんくれた同僚たちには感謝します。

また、開発のスピードをなるべく落とさず、個人でも不具合を最小限に抑えるため、いつも以上にテストを積極的に書くようにしました。

例えばフロントエンドのユニットテストのテストカバレッジは 80％以上をキープしています。

フロントエンドのテストカバレッジ

E2E テストはアカウントのサインアップや部屋の作成、メッセージの投稿など、ユーザーが取れる行動をできるだけカバーできるように気をつけています。

基本的には使い慣れた言語、サービスを使用する

個人開発は技術選定も自由に行えるため、どうしても勉強も兼ねて新しい言語やサービスを使いたくなってしまうのがエンジニアの性だと思います。
今回は、その気持ちをグッと抑えて、よいサービスを作ることにフォーカスするため、できるだけ使い慣れたものを選定してサービス開発しました。
そのおかげで、手前味噌ではありますが、サービスは良いクオリティに仕上がっていると思いますし、機能拡張もしやすい形にできました。

また、結果的には必要に迫られて、新しいサービスを触れることになったり使い慣れていても使っていなかった機能を使ったりすることになり、とても勉強になりました。

その他技術的に頑張った点

他の技術的に頑張った点については箇条書きするにとどめますが、機会があれば別記事として詳細を投稿したいと思います。

追記:「作業部屋ごとにオンラインのユーザーを表示する」部分に関しては記事を投稿してみました！

作業部屋のメッセージ表示のウィンドウイング
- 何件投稿が表示されても描画が重くならないようにする
- react-window が有名だが、今回のケースでは react-virtuoso を使う必要があった
作業部屋ごとにオンラインのユーザーを表示する
- 部屋ごとにプレゼンスを分けて管理
- 公式のドキュメントの情報だけでは対応できない部分があった
メッセージ投稿のリッチエディタ
- Slate.js を使用して頑張った
SPA における動的 OGP の設定
- Cloud Run で Rendertron を動かして、ボットからのアクセスの場合は Rendertron をかませる実装をしていたがパフォーマンスに問題があった
- 今は一部のページのみ、ボットからのアクセスの場合のみ、OGP 関連のタグを SSR している
いつでもスマホアプリとしてもリリースできるようにする
- すぐにアプリ化ができるように Ionic/Capacitor を使用している

今回の開発で学んだこと

個人開発でもテストを書いておくと、開発スピードを落とさずに機能追加ができる
集客はやっぱり難しい

お願い m(__)m

私としては、自分自身も使いたいような最高なサービスを作れたと思っているのですが、全然集客ができていません...
使っていただいた方々からは、「本当に集中できる！」という前向きなフィードバックをいただけているので、サービス自体に自信はあるのですが..。

是非使ってみて、フィードバックをいただければ泣いて喜びます。
フィードバックやお問い合わせ先は、以下のうちのどこでも構いません！

Twitter
MOKMO 内の「MOKMO の運営・改善」部屋
この記事のコメント欄

感想や不具合報告など、なんでも構いません！
よろしくお願いいたします。

Discussion