ポートフォリオ

OTOMAP:音楽ゲーム特化のマップ検索サービス:ポートフォリオ紹介

「OTOMAP」はRUNTEQ(ランテック)修了生の吉川さんが制作した「どの音楽ゲームの筐体がどのゲームセンターにあるかをマップから検索できる音ゲーマー向けサービス」です。自身も音ゲームヘビーユーザーだからこそ気がついた筐体が探しにくいという課題をスクレイピングを用いて情報を集約、UIUXやデザインにもこだわり親しみやすいアプリにした結果リリース1日でUU3000弱・PV2万弱の大反響に。好きなジャンルでWebサービスをつくってみたい!と考える未経験エンジニアの方が制作で意識すべきポイントが詰まった内容です。【卒業生ポートフォリオ紹介vol.27】

音楽ゲームに特化した今までにないマップ検索サービス

吉川さん、本日は宜しくお願いします!

早速ですが「OTOMAP」とは、どのようなサービスですか?

吉川さん
吉川さん
音楽ゲームに特化した、ゲームセンター探しを手助けするマップ検索サービスです。

らんてくん
らんてくん
いわゆる「音ゲー」ってやつだな!

吉川さんは、子供の頃から音楽ゲームがとてもお好きだったそうです。

大人になられても音楽ゲームに対する想いは変わらず、多い時期ではゲームセンターで年間2000プレイするほどの音楽ゲームプレイヤーだったそうです!

らんてくん
らんてくん
音楽ゲームのヘビーユーザーだったんだな!

そんな吉川さんですが、様々なゲームセンターで音楽ゲームをプレイする中で、少し不自由さを感じるポイントがあったようです。

好きだからこそ見えてきた「こんなサービスがあったらいいな」を実現させたのが、今回ご紹介する「OTOMAP」です。

( サービスへ )

それでは気になる「OTOMAP」の使い方を見ていきましょう。

らんてくん
らんてくん
最初にチュートリアルが表示されるから使い方はすぐに理解できるぞ!

サービスを開くと「おとまるくん」という可愛らしいキャラクターが「OTOMAP」のチュートリアルを案内してくれます。

最初に使われるときは、ぜひこちらの「おとまるくん」のチュートリアルも楽しまれてください!

では、チュートリアルに沿う形で、操作方法について説明をしていきます。

らんてくん
らんてくん
おとまるくん…!すごく可愛いぞ…!

「OTOMAP」で検索されたゲームセンターは、マップ上にピン表示されます。

利用するユーザーのエリアで検索したい場合は、下記画像にあるボタンで現在地を指定できます。

次に虫眼鏡マークをクリックすることで、現在地にあるゲームセンターを検索することができます。

検索窓でゲームセンター名を入力してフリーワードでの検索も可能。

さらに検索窓の左側にあるボタンで、音楽ゲームの種類ごとにフィルターをかけて検索することもできます。

らんてくん
らんてくん
音楽ゲームが好きな人に刺さりそうなサービスだな!

見えていなかった盲点に気づき多くのユーザーから支持を得るサービスへと昇華

音楽ゲームが大好きだという吉川さんですが、いつ頃からゲームセンターで音楽ゲームを楽しまれるようになったのですか?

吉川さん
吉川さん
学生の頃なので、10年ほど前からです。

最近はさすがに違いますが、ハマっていた時期は毎日ゲームセンターに通っていましたね。

吉川さんは、特に高校専門学校時代に音楽ゲームに没頭した時期があったそうで、多い時では年間2000プレイ以上もされていたとのこと。

らんてくん
らんてくん
筋金入りの音ゲーマーだな!

では、最初から今回の「OTOMAP」のようなサービスを作ろうと考えられていたのですか?

吉川さん
吉川さん
「OTOMAP」に行き着くまでには、他にも音楽ゲームのスコア管理などのサービスも考えていました。

しかし、既に出ているサービスもあったので、アイディアを固めるまでは色々なイメージを転々とさせていましたね。

「音楽ゲーム」に特化したため、ニッチな部分への挑戦でもあり、どうすればユーザーに刺さるのかで思い悩んだ時期があったと語ってくださった吉川さん。

そのような中、最終的に「OTOMAP」のようなサービスを作ろうと決断された時は、どのような思いがありましたか?

吉川さん
吉川さん
まずは、好きだからこそユーザーが求めていることがわかるという思いが1番にありました。

音楽ゲームは同じ機種でも筐体によって差があるそうですが、どのゲームセンターにどの筐体が置かれているのかはとても分かりにくい状態だったとのこと。

吉川さん
吉川さん
公式のホームページで設置店舗を探すという方法もありましたが、メーカーやゲームセンターごとに表記方法の違いもあり探し出すのに手間がかかっていました。

特に、ご友人と一緒にゲームセンターに行く際に、ご自身とご友人それぞれの好きな音楽ゲーム筐体がどちらも揃っている店舗を探すのに苦労されることがあったそうです。

しかし、そのような不便な状況がいつの間にか「当たり前」になり、ご自身の中でも「そういうもの」だと思い込んでしまっていたとのこと。

吉川さん
吉川さん
そんななか、たまたま同じ音楽ゲームユーザーの方と話している時に「自分の求める筐体が置いてあるゲームセンター探すのって難しいよね」という話題が出たんです。
その時に「確かにそうだった!」と気づいたんです。

音楽ゲーム仲間との会話がきっかけで「OTOMAP」のアイディアが生まれたのですね。

らんてくん
らんてくん
あまりにもあたりまえすぎて気づけなかった「盲点」に気づくことができたんだな!
吉川さん
吉川さん
はい。情報がひとつにまとまったサービスがあれば、すごく便利だと思いました。

仲間との会話がきっかけとはいえ、音楽ゲームが好きだからこそ触れることのできたユーザーの生の声を、あたりまえだと流さずに「盲点」に気づかれたことが素晴らしいです。

そうして「OTOMAP」はユーザーのお悩みを解決できる、今までにない画期的なサービスになっていったのですね。

提供データやサービスのクオリティを高める手間は惜しまない

続きまして、「OTOMAP」の制作にはどのぐらいの期間がかかりましたか?

吉川さん
吉川さん
3ヶ月弱くらいですね。

卒業をしてからの制作でした。

公式サイトや既存サービスでは、目的の音楽ゲームの店舗設置情報を検索しても、リスト表示でしか情報を得ることができず分かりにくさを感じていたとのこと。

その点を解決させるため「OTOMAP」では、検索結果をマップ表示させることにこだわったそうです。

他にはどのような部分にこだわりましたか?

吉川さん
吉川さん
なるべく正しい情報を表示させたかったので、各メーカーのホームページからスクレイピングという技術を用いて情報を収集し、データベースを作成するようにしました。

より確かな情報を反映させるために、リリース後も月に一度程度スクレイピングしたデータを目視で確認されているとのこと。

らんてくん
らんてくん
ひんぱんに確認を入れているんだな

吉川さん
吉川さん
自動で反映させたかったのですが、正確性を高めるために念の為目視で確認をしています。

ゆくゆくは完全に自動化できればと考えています。

リリースされた後も、クオリティを保つために手をかけ続けていらっしゃるのですね。

ひとつ気づいたのですが「OTOMAP」で使われているMAPは、よく皆さんが使われているGoogle Mapではないのですね?

吉川さん
吉川さん
はい。多くのユーザーに長く愛用していただくことを想定してのサービス開発だったので、費用面においても持続可能な手段を選びました。

Google Mapは、サービス上である一定回数以上のマップ表示をさせると、どんどん費用が加算されていくそうです。

そこで今回のサービスでは、費用面での心配がないOpenStreetMapを使用されたとのこと。

らんてくん
らんてくん
費用面にも目を向けて、総合的に将来を見据えるという視点がすばらしい!

吉川さん
吉川さん
他にはデザインの部分にもこだわりました。

吉川さんは、なんと小学生の頃に、ご自身のホームページを制作するという素晴らしい経験をお持ちでした。

その経験からcssを書くことは自然なことだったそうで、css込みのデザイン設計をされたそうです。

吉川さん
吉川さん
XDを使ってデザインしたのですが、丸みを強調したりポップな色合にすることで、使っていて楽しくなるようなデザインを心がけました。

おっしゃるとおりキャラクターもすごく可愛いらしく、素敵な色合いで、とても親しみやすさを感じますね。

吉川さんは「OTOMAP」を正式リリースされる前に、実際に音楽ゲームをやられているユーザーにサービスを使ってもらい、使用感などのフィードバックをもらいながらサービスの構築を行われたそうです。

細部にもこだわりをつめこんだ「OTOMAP」ですが、実装の段階で苦労したところはありましたか?

吉川さん
吉川さん
スクレイピングで、最初のデータベースを作成する部分には苦労しました。

自力で調べながら行いましたが、2週間くらいかかってしまいました。

音楽ゲームのメーカーは多数あるので、メーカーごとに筐体の設置店舗データを抽出するという作業を行ったそうです。

ところが、同じゲームセンターでも、メーカーごとに店舗名の表記のブレがあり、それらを同一店舗と認識するようにデータベースを修正していくのにかなり時間がかかったとのこと。

吉川さん
吉川さん
最初は手作業で修正しようとしたのですが、数量的に自力では無理があったので、Google MapのAPIを使うことにしました。

Google Mapでの緯度経度の位置情報と、店舗名称の文字情報とをGoogle側に渡すと、「示しているのはこの店舗です」という情報を返してくるため、その手法を使うことで全国の店舗情報を取りまとめることができたと語ってくださいました。

潜在ユーザーの発掘に成功し驚くほどの反響を得る

吉川さんは今まで盲点だったニーズを掘り起こし、サービスへの落とし込みに成功されましたが、リリース後にはどのような反応がありましたか?

吉川さん
吉川さん
「BATTLE OF RUNTEQ」の前日に本番リリースして、1日でUU2,850、PV1.9万でした。

らんてくん
らんてくん
その数値、すごすぎるぞ!

わずか1日でものすごい反応でしたね!
ちなみに、リリースから本日までの数値はどれくらいでしょうか?

吉川さん
吉川さん
UU5,587、4万PVです。

らんてくん
らんてくん
リリース後はTwitterでもバズって1000RT以上達成していたな!

吉川さん
吉川さん
はい。色んな人にリツイートしていただけて、ものすごく嬉しかったです!

数値が大きすぎて、ただただ驚くばかりです!とても大きな反響でしたね!

実際に使用されたユーザーさんから、嬉しい声はありましたか?

吉川さん
吉川さん
「こんなサービスが欲しかった!」という声をたくさんいただきました。

ほかにも「こんな機能も欲しい」や「応援してます」などの声をいただけて本当に嬉しかったです。

らんてくん
らんてくん
ユーザーの満足度も期待値も高いということだな!

「OTOMAP」は単なるポートフォリオとしてではなく、立派なサービスとしてユーザーに受け入れられ、応援されているということなのですね。

ユーザーからの声を参考にして、サービスを改善された部分などはありますか?

吉川さん
吉川さん
ユーザーさんからサービス内のデータを編集したいとのお声を頂きましたので、現在ではユーザー登録していただいた方に限り、情報を編集できるように改善しました。

らんてくん
らんてくん
登録ユーザーのみであれば、何かあった際に連絡ができるから安心だな!

ユーザーさんからの生の声をサービスに反映させることで、サービスがより活性化していきそうですよね。

今後もユーザーと一緒にサービスを進化させていきたい

驚くほどの反響があった「OTOMAP」ですが、今後はこのサービスについてはどのようにしていきたいですか?

吉川さん
吉川さん
まだまだユーザー登録が少ないので、サービスを充実して発展させていきたいと考えています。

現在はユーザー登録しなくてもサービスを利用することができるそうですが、運営側としては登録ユーザーを増やしたいとの思いがあるとのこと。

今後はユーザー登録で得られるメリットや機能などを実装させ、より良いサービスの実現を追求したいと語ってくださいました。

らんてくん
らんてくん
「OTOMAP」はまだまだこれからも進化していきそうだな!

今回初めてサービスの企画から開発・運用まで行ってみていかがでしたか?

吉川さん
吉川さん
企画はポンポン頭に浮かび、ユーザーからのフィードバックで実現したいことはどんどん出てくるのですが、実際に実装するとなるとやはり大変で時間がかかりました。

らんてくん
らんてくん
初めはどうしても時間はかかるものだよな

吉川さん
吉川さん
けれども使ってくださるユーザーがいるというのはとても嬉しいことです。

ユーザーからの要望をいただけるのはサービスがもっと進化してほしいという気持ちの現われでもあると思うので、本当にありがたいと思っています。

「こうしてほしい!」というユーザーの声は、サービスへの期待値が高いからこそ出てくるものなのでしょうね。

ユーザーの気持ちに寄り添い、ユーザーと一緒にサービスをより良い物にして行こうとされている過程がとっても素敵ですね。

「OTOMAP」がこれから先、どのように進化していくのか、今後もぜひ見せていただきたいです。

吉川さん、本日はありがとうございました!

編集後記

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

吉川さんは、今まで見えていなかった「盲点」に気づき、ご自身の好きな音楽ゲームに特化した検索サービスを制作されました。

あまりにも身近すぎる不便さはどうしても「あたりまえ」に捉えがちですが、立ち止まって視点を変えることに成功すれば、新たなサービスの需要が見えてくることも。

誰かにとっての「盲点」を見つけることができたら、サービスへと繋げていけるかもしれません。

RUNTEQで、ユーザーから「こういうものがほしかった!」という声が集まるようなサービス作りに挑戦してみませんか?

現役エンジニアが、企画段階から開発・運用までしっかりサポートしますのでご安心ください。

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

皆さまのご状況にあわせて経験豊富なキャリアアドバイザーがエンジニアまでの道のりを一緒に考えます。ご予約はこちらから! https://runteq.jp/