ポートフォリオ

FGO-Calculator:スマホゲーム計算サービス:ポートフォリオ紹介

「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」はどのようなサービスですか?

Shotarooo
Shotarooo
FGO-CalculatorはスマホアプリゲームFate Grand Order(以下FGO)」で使える計算サービスですね。

サービスへ

「FGO-Calculator」には大きく分けて2つの機能があります。

1つ目は宝具のダメージ計算機能です。

FGOには宝具と呼ばれる武器があります。

宝具の威力は、スキルや敵との相性などによって大きく変化します

プレイヤーであれば高い威力が出せる組み合わせを知っておきたいもの。

「FGO-Calculator」は表示されている項目を入力するだけで、ダメージを簡単に計算することができます!

2つ目は宝具NP計算機能です。

FGOの宝具は何度でもすぐにでも使えるわけではありません。

NPというポイントが100%になれば使えるようになりますが、ポイントの貯まり方もスキルなどで大きく変化します。

効率良くポイントを貯める組み合わせを探すには、複雑な計算が必要ですが……

このように「FGO-Calculator」を使えば簡単に出すことができます

らんてくん
らんてくん
本当に便利だな!!!

FGOプレイヤーなら必須になること間違い無しの「FGO-Calculator」。

Shotaroooさんはなぜ「FGO-Calculator」の制作に至ったのでしょうか?

Shotarooo
Shotarooo
自分自身もFGOが好きで、本格的にプレイしたい!と思った時に計算サービスの必要性を感じ、色々既存サービスを調べてみたんです。

すでに色々なサービスがありましたが、あまりUIが好みのものがなく使いづらさを感じて、じゃあ僕は見た目で差別化を図って作ってみようと思いました。

すでにレッドオーシャンなジャンルに見えながらも、差別化が図れそうな点がデザイン性であったということですね。

実際、見た目の部分ではどのようにこだわりを工夫しましたか?

Shotarooo
Shotarooo
ココナラというサービスを利用して、FGOのゲームに出てくるキャラクターのイラストを絵師さんに描いていただきました

本家のゲームに出てくるキャラクターがいることで、ユーザーの方にも「おっ!」と思わせるUXを狙っています。

らんてくん
らんてくん
他のサービスではやっていないことなのかな?
Shotarooo
Shotarooo
やっていなかったですね。

また、キャラクターを用意したもうひとつの理由は、著作権関係で本家のイラストが使用できないからでした。

スマートフォンのアプリゲームには大手の攻略サイトがあり、そこでは本家のイラストをたくさん使っていますよね。

しかしガイドラインによると個人サービスはなかなか難しそうです。

Shotarooo
Shotarooo
ガイドラインを見た時に、本家のイラストをそのまま使用するのは著作権に引っかかるんじゃないのかなと思って、本家のイラストが使えないのであれば依頼して描いてもらおうと思いました。
らんてくん
らんてくん
しっかりガイドラインもチェックしたんだな!流石だ!
Shotarooo
Shotarooo
本家のガイドラインはしっかり見ました

他の受講生さんからも質問を受けることもありますが、二次創作系のアプリを作る場合はまずは本家のガイドラインをしっかり見てほしいなと思います。

ガイドラインを参考にすることで、本家のゲームに対するリスペクトも生まれます。

しっかりと参考にすることが大事ですね!

好きなものをポートフォリオに!

企画の期間はどのくらいとりましたか?

Shotarooo
Shotarooo
けっこう悩んでましたね、カリキュラムやりながらずっと考えていたのでかなり長かったと思います。

「FGO-Calculator」のアイデアにたどり着く前に、他に検討していたアプリがあったのでしょうか?

Shotarooo
Shotarooo
かわいい二次元キャラに褒めてもらえるTodoアプリを用意していて、このアイデアについては色々な人に相談しましたね(笑)

らんてくん
らんてくん
そのアプリも十分魅力的に思えるぞ……?

Shotarooo
Shotarooo
しかし誰に相談しても「ターゲットは誰? 何を狙っているか分からない」と言われて。

今考えると確かに誰に向けてのサービスか全然分からないですね。

当初のアイデアが頓挫してから、どのようにして「FGO-Calculator」のアイデアを思いつかれたのでしょうか?

Shotarooo
Shotarooo
周りの受講生さんのポートフォリオを見て、好きなものと紐付けている人多いなと思いました。

だったら自分も趣味と紐付けられるサービスをつくっちゃえばいいじゃん!と思って作り始めましたね。

当時一番やりこんでいるゲームがFGOだったというShotaroooさん。

好きなものでサービスを作るとしたらFGO一択だったそうです。

Shotarooo
Shotarooo
あとは、自分のアプリを就活のためだけの道具にしたくないという思いも強かったんです。

らんてくん
らんてくん
大事な視点だな!

Shotarooo
Shotarooo
アイデアで悩んでいる時、未経験者がつくるアプリは拡散力もないのにどうやってユーザーに使ってもらえばいいのか?とすごく考えていて……

万が一誰にも使ってもらえなかった場合、就活でアピールするだけのものになってしまいますよね。それが嫌だったんです。

ユーザーが必ずつく保証はないと考えた時に、自分の好きなものに紐付けたアプリを作れば、必ず自分だけはユーザーになる

だから好きなものをサービスにしようと思いました。この考え方に至れたのがすごい良かったです。

確かに自分の好きなものをベースにサービスを開発すれば、確実にユーザーを1人確保できたことになります。

また、気持ちの乗ったサービスになるので挫折もしにくいですし、就活でもパーソナルな部分を押し出しやすくなります。良いことばかりですね!

Shotarooo
Shotarooo
開発中にユーザーに使ってもらえるか不安に思うことがあると思います。

でも自分が使うから大丈夫という気持ちでいれば、精神衛生上も良いと思います。

利便性を考え、Railsを使わずNuxt.jsとFirebaseで実装

「FGO-Calculator」を作ると決めてからは、どのくらいで実装しましたか?

Shotarooo
Shotarooo
実装期間は2か月ぐらいですかね。

Nuxt.jsのキャッチアップを含めるともう少しかかっていると思います。

ポートフォリオの制作前に、Nuxt.jsのキャッチアップをしていたのですか?

Shotarooo
Shotarooo
ポートフォリオから逃げてキャッチアップしてました(笑)

アイデア思い浮かばない!でも手を止めるわけにはいかない!と思い、RUNTEQのVue.jsカリキュラムに挑戦してみるか、って感じで始めました。

ちょうどRUNTEQVueのカリキュラムが追加されたタイミングだったのも相まってちょっと逃げましたね。のちのち活きてよかったです。

ちなみに技術構成部分でRailsを使っていないという噂が……

Shotarooo
Shotarooo
はい、Railsは使っていないですね。
らんてくん
らんてくん
なんと!!
Shotarooo
Shotarooo
Nuxt.jsとFirebaseを使って作りました。

Railsを使わなかった理由はありますか?

Shotarooo
Shotarooo
以下の要因が大きくNuxt.js とFirebaseの組み合わせにしました!

・計算のUI・UXを提供するにはJavaScriptをメインで使うことになる

・Firebaseのコンソール画面は管理画面的な扱いもできるので便利。
コンソール画面からキャラクターなどのデータを追加すると、アプリ側の画面に即反映することができる

MVPとしてはキャラクターのデータを用意するだけだったり、Firebaseの方がデプロイなども楽なため、Railsを使わなかったというShotaroooさん。

Railsを使わないポートフォリオで就活に挑むことに、不安はなかったか気になります。

Shotarooo
Shotarooo
不安はあんまりなかったですね。

就活時にRubyやRailsなどの質問に答えられれば問題ないのではと思っていました。

逆にスクールでやってこなかった別の技術を使って何かを作ることが、評価に繋がるかも?という淡い期待は抱いてました(笑)

スクールで学んだこと以外の技術を取り入れることは、自走力やキャッチアップ力のアピールにもなりますね!

らんてくん
らんてくん
ちなみに技術選定については講師にも相談したのかな?
Shotarooo
Shotarooo
卒業前ギリギリで少し相談しました。

実装面で苦労した点などはありますか?

Shotarooo
Shotarooo
やっぱり見た目の部分ですね、正解が分からないので。

僕のアプリはPCよりスマートフォンで使う人が多いと思うので、スマホの見た目は一番こだわりました。

レスポンシブ対応に一番時間をかけたと思います。

スマートフォンで開いてもデザインが崩れることなく綺麗に表示されます。

また、「FGO-Calculator」の見た目の特徴は、なんと言ってもテーマカラーがダークなところ!
このテーマカラーを採用したのにも、もちろん理由があります。

Shotarooo
Shotarooo
「FGO-Calculator」ではキャラクターを2人用意していて、2人ともイメージカラーが黒なんです。

世界観を意識してテーマカラーも合わせたという感じですね。

サービスの世界観を深める方法は色々とあります。

その中でもテーマカラーはサービスそのもののイメージに直結するものなので、ぜひ慎重に考えてみるのが良さそうですね!

2割がリピーターの検索にも強いサービスに

満を持してリリースされた「FGO-Calculator」ですが、リリース後のユーザーの反応はいかがでしたか?

Shotarooo
Shotarooo
現時点でユニークユーザーが6,000人リピーターが1,200人です。

ユーザー数ももちろん嬉しいですが、リピーターが多いのもありがたいです。

Shotarooo
Shotarooo
大手攻略サイトさんが出てくる前は検索順位で一時期1位とっていたこともあったんですが、途中で攻略サイトさんが台頭して一気に抜かれましたね。

Shotaroooさんは悔しそうに語りつつも、企業ドメインに負けたのはいい経験できたと言います。

とはいえ「FGO-Calculator」は現在も検索順位の3~4位あたりをキープしています。

検索にも強いサービスにするために何か工夫されていますか?

Shotarooo
Shotarooo
技術的にちょっと工夫したことがあります。

最初はアプリをSingle Page Application(SPA)として運用していました。

SPAではHTMLヘッダは意図的に変更しない限りは変更されないので、ページ毎のmetaタグの設定ができませんでした。

らんてくん
らんてくん
それだとどうして困るんだ?
Shotarooo
Shotarooo
「FGO-Calculator」はメインの計算が2つあり、どちらでも検索順位を上げて行きたかったんですね。

タイトルやディスクリプションを1つしか設定できないと、1つの検索順位でしか勝負できない。SPAじゃそこが弱いんです。

Shotaroooさんはその後、検索に強い技術を求めてServer Side Rendering(SSR)も試してみたところ、初期表示がすごく遅く感じ、最終的にStatic Site Generation(SSG)にたどり着きました。

Shotarooo
Shotarooo
SSGではページ毎にタイトルとデスクリプションの設定ができるので、SPAでの懸念点を解消することができました。

去年の大晦日から元旦の夜にかけて実装をしたので今年はあけましておめでとうができなかったです(笑)

リリース後に頂いた声はサービス改善に活かされていますか?

Shotarooo
Shotarooo
サービスを運用する上でユーザーさんの生の声を反映することが大事だと思っていて、フィードバック送信機能を実装しています。

何件か頂いているんですが、その意見を基にアプリを改善していますね。

らんてくん
らんてくん
「FGO-Calculator」には「お知らせ」があるのもいいよな!

お知らせには直近の更新についての記載がずらり……!

ユーザーから見ても日々アップデートされていることが分かるのは嬉しいですね♪

Shotarooo
Shotarooo
FGOには定期的に新しいキャラクターが追加されます。

キャラクターが追加されたらなるべく他のサイトに遅れを取らないように、その日のうちか翌日までにはデータを実装するようにしています。

アクセス数も増えるので欠かせません。

一方でリリース前後で想定してたものと違う反応は何かありましたか?

Shotarooo
Shotarooo
「FGO-Calculator」にはLogRocketを導入しています。

LogRocketはサイトに訪れたユーザーさんがどんな動きをしているのかを画面上で見ることができるんです。

結果を見ると、実際に自分が予期していない動きをするユーザーさんが意外といて、そこも改善施策を打たないといけないなと思いました。

らんてくん
らんてくん
ユーザーの声以外にも、改善点を見つける方法があるんだな!
Shotarooo
Shotarooo
「開発者が期待するユーザーの動き」と「実際のユーザーがアプリ上でする動き」に差が出ることは多くあると思うので、うまく活用してUXの改善に繋げたいです。 

サービス開発に本気で向き合っているからこその行動ですね…!流石です!

個人サービス開発は運用こそが醍醐味とも言えます。
実際に運用まで行ってみていかがでしたか?

Shotarooo
Shotarooo
改善していくために自分でどう手を打っていくか?という目線は個人サービスならではだと思います。

ユーザー目線に立って改善していくのはやはり楽しいですね!

今後、「FGO-Calculator」をどのように展開させていきたいですか?

Shotarooo
Shotarooo
FGO専用のTwitterアカウントを使って宣伝してみたいですね。いっぱい使って頂きたいので!

現在はのShotaroooさんのエンジニア用アカウントでしかアプリのアップデートのことなどをつぶやいていない状況だそう。

また、ユーザーの声はアプリのフィードバック送信機能からしか取れていません。

今後より多くのFGOプレイヤーに「FGO-Calculator」を届け、より広くユーザーの声を集めるには、専用アカウントの設置は良い施策かもしれませんね……!

Shotarooo
Shotarooo
あとはユーザーさんの声を聞いてみて評判がよかったらApple Storeに出したいですね。

今まではサービスリリース後にどれくらい使って頂けるか分からず、出しづらかったんですよ。

挑戦という意味でもストアに出して、実際ダウンロードしてくれる人はどれくらいいるのか試したいと思っています。

らんてくん
らんてくん
ぜひ挑戦してみてほしいぞ!!
Shotarooo
Shotarooo
FGOがサービス終了するまで運用し続けることが目標なので、これからも頑張ります!

これからの展開にも期待がかかる「FGO-Calculator」、ぜひShotaroooさんのご活躍を応援したいと思います…!!

編集後記

いかがでしたでしょうか?

Shotaroooさんの制作した「FGO-Calculator」は、ご自身の大好きなゲームに関連するサービスとして開発されました。

ポートフォリオは就活目的で制作される方も多いと思います。

しかしぜひShotaroooさんのように、何よりも自分が楽しんで開発できるアイデアを採用してみてください。きっとサービス開発そのものの面白さを体感することが出来ますよ♪

RUNTEQでは、個性豊かなあなただけのポートフォリオを制作することが出来ます。
技術的なサポートはもちろん、アイデア出しの段階からサポートいたします!

RUNTEQに少しでもご興味のある方、未経験からWebエンジニアを目指そうとお考えの方は、まずは一度無料キャリア相談会へお越しください! https://runteq.jp/

「FGO-Calculator」を読んだあなたにおすすめ!趣味関連のポートフォリオ例

さけぐらむ:性格診断×日本酒おすすめサービス

みんなの家計簿:家計簿公開サービス