【個人開発】1週間で約2,000人に使ってもらえたReactアプリをリリースするまでにしたこと

今回リリースしたアプリ

• Destiny2というマイナーなFPSゲームの診断ツール（スマホ専用）
  https://destiny-tolls.com/
  

使用技術

フロント

• React 17.0.2

バックエンド

• Ruby 2.7.5
• Rails 6.1.5

インフラ

• Heroku
• cloudflare

その他（数値計測）

• GoogleAnalytics（GA4）

このアプリを作った背景

• きっかけはReactの勉強でした。

• 勉強するなら何かアプリ作りながら勉強した方が楽しいので、私の好きなゲームのDestiny2に関するアプリ作ろうと思いました。

• Destiny2というゲームは、最初に職業を選択するのですが、どの職業を選んでもそこまで強さに序列はないため、どれにしようか迷ってしまうということがよくありました。

• なので、自分がどの職業に向いているのか、性格や価値観から導き出せるツールがあれば便利なのではと思い、ニーズ調査から始めました。

• 調査した結果、一定数のニーズがあったため作成するに至りました。

リリースして1週間の利用状況

• リリースしてから2日で利用者数はピークアウトしていますが、そもそもリピートして使うようなアプリではないのでこの挙動になるのは必然かなと思っています。
  

メインの流入

• ほとんどSNSからの流入です。
  

実装に関して

• React入門の基礎的なものを利用した内容での実装なので詳しくは割愛します。

• 診断部分のロジックは、3択の選択肢でどれか1つクリックされたら、その選択肢の状態管理しているstateのカウントが+1されて、最終的にカウント数が一番多いやつが適正クラスとして選ばれるロジックになっています。

• 仮に2個同じカウント数のものができた場合は、どちらか1つがランダムで選出されるようにロジックを組み込んでいます。

リリースまでにしたこと

事前リサーチ

• 開発する前に、SNSを活用して作成予定のアプリのニーズ調査をしました。

• 具体的には、figmaでモックを作成して、それの一部をTwitterに貼り付けて、こういう内容のアプリを作ったら需要あるかどうかいいねなどエンゲージメントを見て調査しました。

作成したFigmaのモック

ニーズ調査用のツイート

• インプレッション数「28,703」

• いいね数「285」

• エンゲージメント数「1,224」

• エンゲージメント率「4.26%」

• 調査した結果、エンゲージメント率は平均的な数値だったものの、エンゲージメント数はそこそこあったため、一定数のユーザーは興味を持ってくれていそうだということが分りました。

少しでもDestiny2の新規プレイヤーが増えてくれたら良いなと思い、これからDestiny2を始める方向けに、自分に合うクラスが分かる診断ツールを作ってみようかなと思っているのですが需要ありそうでしょうか？

(いいねの数見て需要ありそうでしたら試しに作ってみます)#Destiny2 pic.twitter.com/hXGdqeVIrm

— かっちゃん👾Right Guardiansの開発・運営者 (@kattyan1307) May 3, 2022

ユーザーにどう使ってもらいたいかイメージ

• ユーザーに使ってもらうイメージがないと、ユーザーにとっては使いにくい仕様になってしまい、結果全くユーザーに刺さらず使ってもらえないということになりそうだなと思ったので、ユーザーにどう使ってもらいたいかを考えました。（いわゆる「ユーザーストーリー」ですね）

• ここを考える際に、どれだけユーザーの気持ちや痛みなどを理解できているかで解像度がガラッと変わると思っていて、今回の場合は自分が好きでよりユーザーに近い目線で考えられるテーマだったのでまだ良かったのですが、全く知らないコンテンツになると、自分一人ではユーザー目線でイメージすることは難しいと思います。

• なのでそういう場合は、実際自分で経験するか、もしくはより詳しい人に話を聞くなりして解像度を上げる動きをする必要がありそうです。

直感的にアプリの使い方がわかるように配慮

• アクセスしてくれたユーザーがストレスなく次の動作に映ってもらえるように、なるべくシンプルな機能にしました。

• 意識したこと

  • まずアクセスした際に、何ができるアプリなのか一目で分かるようなUIになるように画像やテキストの使い方を気をつけました。
  • 次に質問が全部で何問あるのか分かるように「1/10」などのようなページ数を記載しました。
    • 全部で何問あるか分からないと、どれだけ答えれば良いのか予測できず、面倒で離脱してしまうユーザーが出てきそうと想定して、そのような離脱ユーザーを出さないようにするためにページ数を記載しました。
      

ユーザーにしっかり診断していると伝わるUXを意識

• 選択し終わった後にそのまま結果を表示してしまうと、少し簡易的すぎてしまい、本当に診断しているかどうか感じ難いUXになると感じました。

• なので本当に診断結果を解析しているかのような体験を提供するために、選択し終わった後に10秒時間を止めた後に診断結果の画面が表示されるように調整しました。
  

• 10秒にした理由は5秒・8秒・12秒など色々なパターンで設定して試して、一番ストレスが少なく、なおかつ診断解析しているような体験を感じれる時間が10秒だったのでこの時間にしました（100%個人的な主観で決めました）

• 時間が長すぎてもいつまで待てば良いかわからず、アプリが重くなったのか？と感じました。

• 逆に時間が短すぎてもちゃんと解析しているような体験を感じれませんでした。

SNSで拡散してもらえるように意識した

• SEOからの流入は序盤は相当難しいと思っていたので、ターゲットユーザーに向けて発信しやすいSNSから直接集客するアプローチが一番最適解かなと考えました。

• なのでSNSからの流入を増やすために自分の診断結果をSNS上へシェアしてもらいたかったので、react-shareというプラグインを利用して、Twitterシェアボタンを設置しました。
  https://github.com/nygardk/react-share

• シェアする際は、入力の手間をなるべく減らして、シェアするハードルを下げるように、ハッシュタグや、診断結果によって変わる結果内容をデフォルトでTwitterシェア文に反映されるように設定しました。

• あとは拡散してもらう際に、他のユーザーの目に留まりやすくするためにOGPも設定しました。
  

• OGPは、Railsにあるgemの「meta-tags」を使えば簡単に実装できるのでおすすめです。

• 計測に関しては、「#適性クラス診断」というタグであれば、まだ誰も使用していなかったので、このタグをシェア時にデフォルトで設定してツイートしてもらう様にして計測しました。

• 結果として、リリースしてから2日で「79件」もTwitterの方でシェアしていただけました。（一部抜粋↓）
  

• その他に、YouTubeで初心者向けの解説動画で影響力のある方を巻き込んで、拡散してもらうような働きかけも行いました。
  

SSL化

• セキュリティ的にSSL化は必須になってきているので特別なことではないかもですが、SSL化していないとURLのフォームに「安全ではありません」と表示されてしまうので、ユーザー側からしてもSSL化されていないと、そのページを閲覧するのに戸惑ってしまう懸念があったためSSL化しました。

• 今回はHerokuの無料プランを使ってデプロイしているので、SSL化をするには有料プランにしないとできませんが、CloudFlareを利用することで無料プランでもSSL化することができます。

• 独自ドメインはひとまずお名前.comで1円のドメインを取得しました。

• Herokuの無料プランでSSL化する方法についてはこちらの記事などをご覧ください。
  https://qiita.com/healing_code/items/0e334606709fb9deae87

Herokuのスリープモード回避

• Herokuは30分以上アクセスがないとスリープモードになってしまい、再度起動するまで数十秒以上待たないと起動してくれません。

• 再起動しないとページにはアクセスできないので、ユーザーがアクセスした際にもしスリープモードになってしまっていたら、読み込み時間がすごく長い感じになってしまい、離脱率が大幅に上がってしまいそうな懸念があったので、スリープモードを回避するように設定しました。

• Heroku Schedulerを使って、10分ごとにアクセスさせればスリープモードになることなく24時間常時稼働させることが可能になります。

• ただし、Herokuの無料枠で使用できる時間は、月に1,000時間までなので、無料の枠の中で常時稼働できるアプリは1つが限界ですのでご注意ください。

• 詳しくはこちらをご覧ください。
  https://miyabi-lab.space/blog/23

GA4導入

• リリース後にどれくらいの人に利用してもらえたか数値計測したかったのと、UAが2023年7月に計測終了して、それ以降はGA4を利用しないといけなくなるため、勉強も兼ねてGA4を導入することにしました。

• 参考記事
  https://zenn.dev/sakurawi/articles/1c533fe7c5335175bda1

ゲーム開発会社に画像使用許可と拡散協力を依頼

• UX向上のために少しでもDestiny2の世界観をアプリ内に取り入れたかったので、Destiny2を開発しているBungieというゲーム開発会社へ画像などコンテンツの使用許可を求める動きを取りました。

• その結果、無事に使用許可をいただけたので、公式のコンテンツを少し利用させていただきました。

• またそれと同時に、公式の日本向けTwitterアカウントがあったため、そちらで拡散していただけないかもお願いし、そちらのアカウントでRTして拡散協力もしていただきました。

• 拡散の手法はRTのみでしたが、それでもその拡散のおかげで200人以上の流入が増えましたので、頑張ってお願いした効果はあったのかなと思います。

• 拡散協力いただいたアカウントはこちら↓
  Destiny2 JP
  

追記 （Heroku→Railwayへ移行）

• この記事を書いている途中でHerokuの無料プランが11月に終了してしまうことが、決まってしまったため、急遽HerokuからRailwayへ移行することにしました。（移行先→https://destiny-tolls.up.railway.app ）

• 一応まだHerokuからもアクセスできますが、今月中にはHerokuの方は終了させてRailwayへ完全移行する予定です。

• Railwayは無料で簡単にデプロイできて、なおかつHerokuにあるスリープモードもない為、結果的にこちらの方が便利かもと思っています。

• 使い方はこちらの記事が参考になったので、ご興味のある方はぜひ参考にしてみてください↓
  https://blog.railway.app/p/railway-heroku-rails

おわり

以上が僕がリリースまでに行ってきたことのまとめになります。
最後まで読んでいただきありがとうございました！
何か1つでもお役に立てる内容があれば幸いです。