🔎

【個人開発】開発中だけどβテスターを募集してみた話

2024/11/08に公開

こんにちは。個人開発をやっている大学生です。
今回は、サービスの開発中にベータテスターを募集してみたので、開発背景や結果などを書いてみます。

開発中のサービス

翻訳×単語帳の言語学習サービス「LangLeaf」を開発しています。
利用の流れとしては、

  1. 表現を翻訳にかける
  2. ブックマークに保存する
  3. 自動で表現が単語帳にも保存される
  4. 学習ページから単語帳で復習する

といった感じになります。

詳しい機能などは下の記事に書いてます!
https://zenn.dev/kamo_tomoki/articles/b3353064001bd1

βテスターを募集するモチベーション

私はこれまで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はアニメーションを使うのが必要不可欠だと思います。

https://youtu.be/qcOieryYc9Y


また、ちょっとした文字の崩れにも気をつけました。
細かい点をこだわるかどうかで受けての印象も変わります
https://x.com/ducker_tech/status/1850888323335938375


さらに、テーマ切り替えにも対応し、なるべく個人開発っぽいイメージを払拭するようにしました。
https://youtu.be/NdDmWuFiASQ

実際に募集してみて

10/28に募集を開始したのですが、1週間ほどで5名の方が申し込んでくださいました🎉
リリース後に投稿したXのポストとZennの記事が伸びたことが功を奏しました。
(このプロダクトとは全く関係のない内容ですが、、)

https://zenn.dev/kamo_tomoki/articles/ad5ece9bd3540b
https://x.com/ducker_tech/status/1851844331365372210

やっぱりSNSの力は偉大だと感じますし、もっとSNSや記事の投稿をしていかないとなと思いました。

今後の方針

βテストに5名の方が応募してくれたことで、モチベーションを持って開発できています。
11月下旬のβテストに向けて、SNSの発信などもやりつつ、ガンガン開発していこうと思っています。
外国語の学習をしている方は、ぜひLangLeafのβテストに参加してみてください!!

https://x.com/ducker_tech/status/1850833427928350963
https://langleaf.vercel.app/ja

Discussion