イベント

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

みなさん、こんにちは。RUNTEQです。

エンジニアへ転職するには、ポートフォリオが重要な武器のひとつです。
しかし、他の方がどのようなポートフォリオを作っているのかを知る機会はあまりありません。

そこで、RUNTEQ受講生のポートフォリオをわいわいがやがやしながらオンラインでレビューするイベントを実施しました。

当日の参加者は初学者から現役のエンジニアを含め35人ほどでした。本記事は、その様子をイベントレポートという形でお届けします。

RUNTEQ校長の菊本よりポートフォリオ作成のポイントについての解説があり、続いて発表者の自己紹介、サービスの説明、コードレビューという流れになりました。

発表者のShotaroooさん

Twitter: @destino591211

21歳。RUNTEQ卒業生。

浪人後、エンジニアのかっこよさに憧れ思いきってプログラミングの道に進むことに。
プログラミングの楽しさはもちろん、アプリにどんなUI/UXや機能を持たせたらユーザーに使って貰えるかを試行錯誤することに充実感を得ています。

アニメFateが大好き!

FGO-Calculator (Wオルタと一緒に計算)

Shotaroooさんが作ったサービスはFGO-Calculatorです。スマホアプリ 「Fate/Grand Order」で使える計算アプリです。

サービスこちら

サービス作成の原体験、課題設定、解決方法などをShotaroooさんは次のように説明してくれました。

Shotarooo
Shotarooo
既存のダメージ計算などのサービスでは機能が十分ではなく、UIも整っておらず、何度も使いたいとは思えませんでした。

そこで、見た目と機能を十分に考慮した計算アプリを作成することにしました。

楽しく使えてすぐにアクセスできるような計算アプリがあれば、ゲームユーザーはさらに「FGO」を楽しむことができます。

ユーザーファーストのサービス作り

FGO-Calculatorを作成する上でこだわった点を説明してくれました。

PC画面
スマホ画面

Shotarooo
Shotarooo
1つ目は、見やすくて繰り返し使いたくなるUIです。

PCやスマホでも入力項目がひと目でわかるようにデザインしました。

また、数値によってキャラのセリフが変わります。30パターンほどあります。404ページやフィードバック送信後の画面にもこだわりました。

 

スマホのホーム画面

Shotarooo
Shotarooo
2つ目は、PWAを導入してネイティブアプリのように使えるようにしたことです。

スマホ画面にアプリのように保存できるので、ユーザーは気軽にアクセスできます。プッシュ通知も実装しました。

Shotarooo
Shotarooo
3つ目は、RUNTEQのカリキュラムにない技術を使用してサービスを作りきれたことです。

認証やデータベースで複雑な管理が必要ないので、サーバーサイドではRailsではなく、Firebaseを選びアプリ開発に専念しました。

フロントエンドではPWAと相性のよいNuxt.jsを採用しました。エンジニアとしての自走力が身についたと思います。

質疑応答

サービスを説明する際に参加者の方からチャット・口頭で多くの質問が寄せられ、その後のコードレビューは盛り上がりました。 ここの実装はどんなコードを書いてるの? このデザインは? などなどいろいろな観点からの質問があったので、一部を抜粋します。

製作期間はどのくらいでしたか?

Shotarooo
Shotarooo
約二ヶ月です。Firebaseの実装が効率よくいけばもう1、2週間縮められたかもしれません。また画面のモックを用意せずに作ったので、修正に時間がかかりました。

利用規約とプライバシーポリシーがトップページにしかないのは理由がありますか?

Shotarooo
Shotarooo
計算画面などに記載するとユーザーの目に余計な情報が触れてしまうので、トップページのみにしました。

お知らせ機能はどういうときに使いますか?

Shotarooo
Shotarooo
新しいキャラが追加されたり、アプリの機能追加の概要を記載する予定です。

今後の開発の予定を教えてください。

Shotarooo
Shotarooo
ユーザー獲得のための施策のひとつであるOGP画像の実装をしたいです。

 

この他にも現役のエンジニア・デザイナーの方たちが、現場目線でのアドバイスがたくさんありました。

  • キャラの名前によってセリフが変わる機能のコードは、キャラの追加頻度が高いのであれば設計を変えたほうがよいかも
  • キャラ選択が現状2ステップになっているので入力補完機能があるといい
  • PWA起動時にSplash Screen(起動画面)を追加するとよりアプリ感が増します
  • キャラ選択はテキストだけでなくアイコンや色を使うとよりわかりやすい 
  • キャラ選択にはページングを導入してもよいかも
  • 現状のFirebaseのセキュリティールールだと脆弱性がある

など

参加者の声

参加してくださった方からたくさんの感想をいただけました。一部抜粋します。

  • ユーザー体験の向上という理念をサービスの隅々まで浸透させているのがすごい!
  • 自分が欲しいから、という作成動機に納得できるこだわりの強さを感じました。サービスや実装を説明するときの楽しそうな姿が印象的でした。
  • RUNTEQで教えていない技術メインのアプリを作り上げたところに自走力の向上を感じました!しみじみ!

Shotarooo
Shotarooo
緊張しましたが、楽しく発表できてよかったです。貴重なフィードバックをたくさんもらえてうれしいです。改善し続けていきます!

RUNTEQに入って自走力を高めよう

今回のポートフォリオレビュー会も発表者、参加者共に満足していただけたようでよかったです。

他のRUNTEQ受講生に懇親会で話を伺うと、刺激を受けてモチベーションが上がっているとの感想をいただけました。

ShotaroooさんはRailsを学ぶスクールを卒業して、ポートフォリオにRailsを使用しない判断をしました!

サービスの要件から適切な技術選定を行いサービスにまで落とし込めているところに、RUNTEQで身につけた自走力を感じることができます。
この自走力があれば現場でのキャッチアップも時間がかからないはずです。

RUNTEQでは学習段階に合わせてカリキュラムを準備しているため、初心者の方でも中級者の方でも自走力を高められる環境をご用意しています。

ポートフォリオレビュー会は今後の開催も予定していますので、RUNTEQ生のポートフォリオの内容やレベルが知りたい方は、Twitter等をフォローしていただきぜひご参加ください。

RUNTEQにご興味のある方は、下記リンクより、お気軽に説明会へご参加ください。 https://runteq.jp/

2021/8/12追記 再インタビュー!

Shotaroooさんの制作した「FGO-Calculator」について、なんと再度制作秘話を伺うことができました!

リリース後の運用方法についても詳しく聞きましたので、合わせてお楽しみくださいね♪

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

「FGO-Calculator」を読んだあなたにおすすめ!オタクなポートフォリオ例

ジロリアス:二郎系ラーメン検索サービス

Proteindex:プロテイン口コミアプリ

この記事を読んだ方にオススメ