【個人開発】開発中だけどβテスターを募集してみた話
こんにちは。個人開発をやっている大学生です。
今回は、サービスの開発中にベータテスターを募集してみたので、開発背景や結果などを書いてみます。
開発中のサービス
翻訳×単語帳の言語学習サービス「LangLeaf」を開発しています。
利用の流れとしては、
- 表現を翻訳にかける
- ブックマークに保存する
- 自動で表現が単語帳にも保存される
- 学習ページから単語帳で復習する
といった感じになります。
詳しい機能などは下の記事に書いてます！
βテスターを募集するモチベーション
私はこれまで3つのアプリを開発したものの、全て失敗しました。
これらの失敗の共通点として、
- 需要をしっかり調査しなかった
- フィードバックを十分にもらえてなかった
がありました。
個人開発では、どうしても自分の基準で決める事が多くなってしまいます。
しかし、プロダクトを使うのはユーザーであり、ユーザーの意見が1番大事です。
今回のプロダクトは、外国語学習をがんばっている人、興味のある人をターゲットにしています。
なので、まずは外国語学習をやっている友達にフィードバックをもらうようにしました。
ただ、そういった友達がたくさんいるわけでもないので、
自分が知らない人にもフィードバックをもらいたいと思いました。
そこで思いついたのは、βテスターの募集です。
βテスターのメリットは以下の3点があると思っています。
- 需要が数値として可視化される
- 質の高いフィードバックをもらえる
- モチベーションを維持できる
需要が数値として可視化される
ビジネスを始めるにあたって、1番大事なのは需要を見つけることです。
需要があれば、多少質が低くても使ってもらえる可能性があります。
βテスターの数は需要を計れる指標になります。
ある程度集まれば、開発をもっと進めるべきですし、
あまり集まらなければ、もう一度考え直す必要があります。
そもそも、見知らぬサービスのβテストに参加する事自体、ハードルがあるため、
少しでも集まれば上出来なのかもしれません。
個人開発では、どうしても主観的な判断が多くなるため、
こういった指標は貴重だと思います。
質の高いフィードバックをもらえる
βテスターに募集してくれる方は、少なからずプロダクトを興味を持っているので、
質の高いフィードバックをもらえる可能性があります。
身内の人からフィードバックをもらうのもアリだと思いますが、
- 身内贔屓になってしまう
- ユーザーになる可能性が高いとは言えない
- 母数が限られる
といったことが言えるので、ネット上の興味を持ってくれる人に使ってもらい、
フィードバックをもらう方が効果的だと思います。
モチベーションを維持できる
個人開発の最大の敵はモチベーションです。
〇月の上旬/下旬にβテストやります！
と宣言するだけで、締切が決まり、計画が立てやすくなります。
LangLeafのβテスター募集サイトより
また、実際にユーザーになり得る人たちに使ってもらうので、
自分にプレッシャーをかけることができます。
「いつまでに、誰のために」 を決めるだけで挫折する確率がグッと下がると思います。
技術のあれこれ
技術選定
βテスター募集サイトの条件は、
- 参加ユーザーのメールアドレスを保存できる
- 高いパフォーマンス
- 堅牢なセキュリティ
- 開発中のプロダクトと親和性がある技術を使う
- 素早くイケてるデザインを作る
だったため、
フレームワーク
→ Next.js
データベース
→ FireStore
UIライブラリ
→ Tamagui
国際化
→ next-intl
となりました。
Next.js
Next.jsでは、Route Handlersを使ってAPIエンドポイントを定義できます。
API（サーバーサイド）でFireStoreの操作をするようにし、
安全性を高めるようにしました。
また、Next.jsはSSRに対応しているため、高いパフォーマンスのサイトが作れます。
その点も採用する理由になりました。
FireStore
今回は、複雑なデータ操作をしないため、無料で情報量も多いFireStoreにしました。
サーバーサイド側でFirebase Admin SDKを使って操作するようにしました。
これにより、第三者クライアントからのデータ取得を気にせずに済みました。
Tamagui
React / React Nativeの両方に対応したUIライブラリです。
開発中のプロダクトで使用しているため、それに合わせる形で選びました。
というのも、プロダクトのトップページにβテスター募集ページの一部を使い回す可能性があるからです。
TamaguiはCSS in JSですが、ビルド時にCSSを出力してくれるため、パフォーマンス面でも期待できます。（アニメーションもCSSとして出力されます🙌）
next-intl
日本語、英語の両方に対応するために、next-intlで国際化をしました。
next-intlの良いところは、
- Server Componentsに対応
- URLパスによる言語切り替えに対応
- セットアップが簡単
という感じです。
その他
カルーセル実装
→ embla-carousel-react
CSRF対策
→ @edge-csrf/nextjs
XSS対策
→ xss
Bot対策
→ @hcaptcha/react-hcaptcha
デザイン
今回は、とにかくスピード命で開発したので、Figmaのドラフト無しで作りました。
（なんだかんだ5日間かけちゃったけど、、）
とはいえ、参考なしではクソみたいなデザインになってしまうので、Screen StudioのLPを参考にしました。
（Screen Studioは個人開発のプロダクトらしいです。すごい、、）
Screen Studioより
特に、動画でサービスを紹介している点にインスパイアされて、
紹介動画のカルーセルを実装しました。
LPはアニメーションを使うのが必要不可欠だと思います。
また、ちょっとした文字の崩れにも気をつけました。
細かい点をこだわるかどうかで受けての印象も変わります。
さらに、テーマ切り替えにも対応し、なるべく個人開発っぽいイメージを払拭するようにしました。
実際に募集してみて
10/28に募集を開始したのですが、1週間ほどで5名の方が申し込んでくださいました🎉
リリース後に投稿したXのポストとZennの記事が伸びたことが功を奏しました。
（このプロダクトとは全く関係のない内容ですが、、）
やっぱりSNSの力は偉大だと感じますし、もっとSNSや記事の投稿をしていかないとなと思いました。
今後の方針
βテストに5名の方が応募してくれたことで、モチベーションを持って開発できています。
11月下旬のβテストに向けて、SNSの発信などもやりつつ、ガンガン開発していこうと思っています。
外国語の学習をしている方は、ぜひLangLeafのβテストに参加してみてください！！
Discussion