「FGO-Calculator」はRUNTEQ（ランテック）卒業生のShotaroooさんが制作した「スマホアプリゲーム『Fate Grand Order』の計算サービス」です。趣味をポートフォリオのアイデアとして採用。既存サービスが多くある中、見た目での差別化に成功し累計6,000ユーザーを獲得しました！リピーター率20％を誇る細やかな運用方法は必見です！【卒業生ポートフォリオ紹介vol.12】
本記事ではRUNTEQ卒業生のポートフォリオをご紹介していきます！
今回取り上げるのはスマホアプリゲーム「Fate Grand Order」の計算サービス「FGO-Calculator」です！
FGOプレイヤーなら必須の宝具ダメージ計算や、宝具のNP計算が簡単に行える本アプリ。
アプリ開発に至った理由、実装で苦労したこと、運用で心がけていることなど、気になることが盛りだくさん！
制作者のShotaroooさんをお招きして、「FGO-Calculator」についてお聞きしました！
既存サービスとはデザインで差別化を図る
さっそくサービス概要からインタビューしたいと思います！
Shotaroooさん、「FGO-Calculator」はどのようなサービスですか？
（サービスへ）
「FGO-Calculator」には大きく分けて2つの機能があります。
1つ目は宝具のダメージ計算機能です。
FGOには宝具と呼ばれる武器があります。
宝具の威力は、スキルや敵との相性などによって大きく変化します
プレイヤーであれば高い威力が出せる組み合わせを知っておきたいもの。
「FGO-Calculator」は表示されている項目を入力するだけで、ダメージを簡単に計算することができます！
2つ目は宝具NP計算機能です。
FGOの宝具は何度でもすぐにでも使えるわけではありません。
NPというポイントが100％になれば使えるようになりますが、ポイントの貯まり方もスキルなどで大きく変化します。
効率良くポイントを貯める組み合わせを探すには、複雑な計算が必要ですが……
このように「FGO-Calculator」を使えば簡単に出すことができます！
FGOプレイヤーなら必須になること間違い無しの「FGO-Calculator」。
Shotaroooさんはなぜ「FGO-Calculator」の制作に至ったのでしょうか？
すでに色々なサービスがありましたが、あまりUIが好みのものがなく使いづらさを感じて、じゃあ僕は見た目で差別化を図って作ってみようと思いました。
すでにレッドオーシャンなジャンルに見えながらも、差別化が図れそうな点がデザイン性であったということですね。
実際、見た目の部分ではどのようにこだわりを工夫しましたか？
本家のゲームに出てくるキャラクターがいることで、ユーザーの方にも「おっ！」と思わせるUXを狙っています。
また、キャラクターを用意したもうひとつの理由は、著作権関係で本家のイラストが使用できないからでした。
スマートフォンのアプリゲームには大手の攻略サイトがあり、そこでは本家のイラストをたくさん使っていますよね。
しかしガイドラインによると個人サービスはなかなか難しそうです。
他の受講生さんからも質問を受けることもありますが、二次創作系のアプリを作る場合はまずは本家のガイドラインをしっかり見てほしいなと思います。
ガイドラインを参考にすることで、本家のゲームに対するリスペクトも生まれます。
しっかりと参考にすることが大事ですね！
好きなものをポートフォリオに！
企画の期間はどのくらいとりましたか？
「FGO-Calculator」のアイデアにたどり着く前に、他に検討していたアプリがあったのでしょうか？
今考えると確かに誰に向けてのサービスか全然分からないですね。
当初のアイデアが頓挫してから、どのようにして「FGO-Calculator」のアイデアを思いつかれたのでしょうか？
だったら自分も趣味と紐付けられるサービスをつくっちゃえばいいじゃん！と思って作り始めましたね。
当時一番やりこんでいるゲームがFGOだったというShotaroooさん。
好きなものでサービスを作るとしたらFGO一択だったそうです。
万が一誰にも使ってもらえなかった場合、就活でアピールするだけのものになってしまいますよね。それが嫌だったんです。
ユーザーが必ずつく保証はないと考えた時に、自分の好きなものに紐付けたアプリを作れば、必ず自分だけはユーザーになる。
だから好きなものをサービスにしようと思いました。この考え方に至れたのがすごい良かったです。
確かに自分の好きなものをベースにサービスを開発すれば、確実にユーザーを1人確保できたことになります。
また、気持ちの乗ったサービスになるので挫折もしにくいですし、就活でもパーソナルな部分を押し出しやすくなります。良いことばかりですね！
でも自分が使うから大丈夫という気持ちでいれば、精神衛生上も良いと思います。
利便性を考え、Railsを使わずNuxt.jsとFirebaseで実装
「FGO-Calculator」を作ると決めてからは、どのくらいで実装しましたか？
Nuxt.jsのキャッチアップを含めるともう少しかかっていると思います。
ポートフォリオの制作前に、Nuxt.jsのキャッチアップをしていたのですか？
アイデア思い浮かばない！でも手を止めるわけにはいかない！と思い、RUNTEQのVue.jsカリキュラムに挑戦してみるか、って感じで始めました。
ちょうどRUNTEQVueのカリキュラムが追加されたタイミングだったのも相まってちょっと逃げましたね。のちのち活きてよかったです。
ちなみに技術構成部分でRailsを使っていないという噂が……
Railsを使わなかった理由はありますか？
・計算のUI・UXを提供するにはJavaScriptをメインで使うことになる
・Firebaseのコンソール画面は管理画面的な扱いもできるので便利。
コンソール画面からキャラクターなどのデータを追加すると、アプリ側の画面に即反映することができる
MVPとしてはキャラクターのデータを用意するだけだったり、Firebaseの方がデプロイなども楽なため、Railsを使わなかったというShotaroooさん。
Railsを使わないポートフォリオで就活に挑むことに、不安はなかったか気になります。
就活時にRubyやRailsなどの質問に答えられれば問題ないのではと思っていました。
逆にスクールでやってこなかった別の技術を使って何かを作ることが、評価に繋がるかも？という淡い期待は抱いてました（笑）
スクールで学んだこと以外の技術を取り入れることは、自走力やキャッチアップ力のアピールにもなりますね！
実装面で苦労した点などはありますか？
僕のアプリはPCよりスマートフォンで使う人が多いと思うので、スマホの見た目は一番こだわりました。
レスポンシブ対応に一番時間をかけたと思います。
スマートフォンで開いてもデザインが崩れることなく綺麗に表示されます。
また、「FGO-Calculator」の見た目の特徴は、なんと言ってもテーマカラーがダークなところ！
このテーマカラーを採用したのにも、もちろん理由があります。
世界観を意識してテーマカラーも合わせたという感じですね。
サービスの世界観を深める方法は色々とあります。
その中でもテーマカラーはサービスそのもののイメージに直結するものなので、ぜひ慎重に考えてみるのが良さそうですね！
2割がリピーターの検索にも強いサービスに
満を持してリリースされた「FGO-Calculator」ですが、リリース後のユーザーの反応はいかがでしたか？
ユーザー数ももちろん嬉しいですが、リピーターが多いのもありがたいです。
Shotaroooさんは悔しそうに語りつつも、企業ドメインに負けたのはいい経験できたと言います。
とはいえ「FGO-Calculator」は現在も検索順位の3~4位あたりをキープしています。
検索にも強いサービスにするために何か工夫されていますか？
最初はアプリをSingle Page Application（SPA）として運用していました。
SPAではHTMLヘッダは意図的に変更しない限りは変更されないので、ページ毎のmetaタグの設定ができませんでした。
タイトルやディスクリプションを1つしか設定できないと、1つの検索順位でしか勝負できない。SPAじゃそこが弱いんです。
Shotaroooさんはその後、検索に強い技術を求めてServer Side Rendering（SSR）も試してみたところ、初期表示がすごく遅く感じ、最終的にStatic Site Generation（SSG）にたどり着きました。
去年の大晦日から元旦の夜にかけて実装をしたので今年はあけましておめでとうができなかったです（笑）
リリース後に頂いた声はサービス改善に活かされていますか？
何件か頂いているんですが、その意見を基にアプリを改善していますね。
お知らせには直近の更新についての記載がずらり……！
ユーザーから見ても日々アップデートされていることが分かるのは嬉しいですね♪
キャラクターが追加されたらなるべく他のサイトに遅れを取らないように、その日のうちか翌日までにはデータを実装するようにしています。
アクセス数も増えるので欠かせません。
一方でリリース前後で想定してたものと違う反応は何かありましたか？
LogRocketはサイトに訪れたユーザーさんがどんな動きをしているのかを画面上で見ることができるんです。
結果を見ると、実際に自分が予期していない動きをするユーザーさんが意外といて、そこも改善施策を打たないといけないなと思いました。
サービス開発に本気で向き合っているからこその行動ですね…！流石です！
個人サービス開発は運用こそが醍醐味とも言えます。
実際に運用まで行ってみていかがでしたか？
ユーザー目線に立って改善していくのはやはり楽しいですね！
今後、「FGO-Calculator」をどのように展開させていきたいですか？
現在はのShotaroooさんのエンジニア用アカウントでしかアプリのアップデートのことなどをつぶやいていない状況だそう。
また、ユーザーの声はアプリのフィードバック送信機能からしか取れていません。
今後より多くのFGOプレイヤーに「FGO-Calculator」を届け、より広くユーザーの声を集めるには、専用アカウントの設置は良い施策かもしれませんね……！
今まではサービスリリース後にどれくらい使って頂けるか分からず、出しづらかったんですよ。
挑戦という意味でもストアに出して、実際ダウンロードしてくれる人はどれくらいいるのか試したいと思っています。
これからの展開にも期待がかかる「FGO-Calculator」、ぜひShotaroooさんのご活躍を応援したいと思います…！！
編集後記
いかがでしたでしょうか？
Shotaroooさんの制作した「FGO-Calculator」は、ご自身の大好きなゲームに関連するサービスとして開発されました。
ポートフォリオは就活目的で制作される方も多いと思います。
しかしぜひShotaroooさんのように、何よりも自分が楽しんで開発できるアイデアを採用してみてください。きっとサービス開発そのものの面白さを体感することが出来ますよ♪
RUNTEQでは、個性豊かなあなただけのポートフォリオを制作することが出来ます。
技術的なサポートはもちろん、アイデア出しの段階からサポートいたします！
RUNTEQに少しでもご興味のある方、未経験からWebエンジニアを目指そうとお考えの方は、まずは一度無料キャリア相談会へお越しください！ https://runteq.jp/
「FGO-Calculator」を読んだあなたにおすすめ！趣味関連のポートフォリオ例
