ポートフォリオ

TaskQuest:ゲーム風タスク管理サービス:ポートフォリオ紹介

「TaskQuest」はRUNTEQ修了生のうおくんさんが作成した「タスクをゲームの敵のように倒していきながら楽しく管理できるアプリ」です。独学なら就職活動で有利になることしか考えてなかったかもしれないと語る彼は、実装段階でユーザー視点での開発の重要性に気がつき、使い心地や見た目の楽しさの向上のためモーダル表示やドット絵アニメーションでに挑戦。結果ユーザー数が920人・PV数5800を記録し、スカウト内定にも繋がりました。アイデンティティの具現化とも言えるこだわり抜いた作品がどう出来上がったのか?詳しくお聞きしました。【修了生ポートフォリオ紹介vol.17】

タスク管理がまるでRPGゲームなサービス

それでは、さっそくうおくんさんに「TaskQuest」についてお聞きしていきます。
「TaskQuest」は、どのようなサービスでしょうか?

うおくん
うおくん
「TaskQuest」は、タスク管理をゲームのように楽しく行えるサービスです。

ビジュアルは本当にゲームのようですが、使い方はいたってシンプルです。

ミッション作成から、タスク管理の種類を登録します。

すると、ミッションからタスクが作成できるようになります。
タスクを作成すると、タスクが敵となって表示されます。

敵が現れたら、ゲームをプレイするようにタスクをこなしていきましょう。

たくさんタスクを登録しても、見られる敵は当日のタスクに対応する敵のみです。
敵が見たくてどんどんとタスクをこなしていけそうですね。

タスク管理サービスだとは思えないとても壮大なアプリですが、うおくんさんご自身はタスク管理に苦手意識があったのでしょうか?

うおくん
うおくん
毎回予定を立ててからタスク管理をはじめるのですが、どうしても予定がずれたり変わったりする度に調整し直すことが面倒で途中から使わなくなってしまうことが多かったです。
らんてくん
らんてくん
たしかに、タスク管理サービスは最初のうちだけ張り切って使うことが多いよな……

うおくん
うおくん
タスク管理アプリの多くはシンプルな機能のものが多いんですよね……

タスクを作ってチェックをつけてこなしていくだけであれば、スマートフォンのメモ機能でもできるな〜と思い、僕自身はメモで予定を管理していました。

うおくんさんは、そのときにタスク管理を楽しくできるサービスにニーズがあるのではないかと思ったそうです。

「TaskQuest」は、タスク管理が苦手な方でも楽しみながらタスク管理を行えるところをポイントに開発なさったとお話してくださいました。

得意なデザインで意外性のあるアプリを意識

「TaskQuest」は楽しみながらタスク管理が行えることをポイントに開発なさったそうですが、具体的にはどのように「TaskQuest」のアイデアを練っていったのでしょうか?

うおくん
うおくん
スケジュール管理をゲーム感覚でできるアプリがあることを元々知っていました。

なので、同様にタスク管理もゲーム感覚で進められたらおもしろそうですし自分にも作ることができるのではないかと思いました。

また、タスク完了のプロセスと敵を倒すプロセスが似ていると考えたので、タスクを敵とみなし完了したら倒せるようにしました。

うおくんさんは建築学部を卒業しているためデザインを強みにできると考え、視覚的にアプローチする要素を盛り込もうと決めたのだそうです。

ご自身の強みを生かして楽しめるアプリケーションにしようと考えられたのですね!

うおくん
うおくん
タスク管理自体はどう頑張ってもタスク管理ですので、絵やデザインのクオリティはできる限り上げようと思っていました。

デザインのクオリティがたかければ「タスク管理なのに質素じゃない!」という意外性がありますし、自分でも面白いことを考えているという確信があったので、「TaskQuest」であれば集中して完成させることができそうだと感じました。

運営陣は最初うおくんさんからタスク管理アプリを作りたいと相談されたとき、すでにレッドオーシャンなジャンルのため考え直した方がよいのではないかと思ったそうです。

しかし、画面遷移図をみたときにあまりの出来栄えに驚き、うおくんさんに任せることにしたと言います。

「TaskQuest」は画面遷移図も本気で作成し、完成度がかなり高いものでした。

当時からクオリティの高いポートフォリオを作ろうという意識はありましたか?

うおくん
うおくん
僕は一度決めたことなら作業量が多くてもやりきることのできるタイプなんです。

なので、はじめにどのような画面にしたいかビジョンだけを考えて画面遷移図を書いたときに「これだったら色んな人の目に止まるポートフォリオになるのではないか?」と思いました。

ちなみに「TaskQuest」に至るまで、他のアイデアもあったのでしょうか?

うおくん
うおくん
各大学のアカペラサークル同士でのマッチングサービスや、大学通りの飲食店の混雑具合を可視化できるサービスなどを考えました。

RUNTEQコミュニティのポートフォリオアイデアチャンネルに何個か書いて、他の受講生の方々にも意見をいただいたりしました。

ただアイデアは浮かぶのですが、どれも誰にでもできそうなサービスでアイデンティティがないと思いボツにしました。

らんてくん
らんてくん
その点「TaskQuest」は、うおくんさんのアイデンティティたっぷりのポートフォリオだな!

ユーザー視点でこだわったアニメーションと機能

つづいて実装段階のお話をお聞きしていきます。
実装にはどのくらいの時間がかかりましたか?

うおくん
うおくん
実装自体は1ヶ月と1週間ほどで終わったのですが、デプロイ作業に時間がかかってしまい全部で1ヶ月と3週間〜2ヶ月ほどかかりました。

実装で苦労したところを教えていただけますか?

うおくん
うおくん
ドット絵のアニメーションです。

キャラクターの動作を1コマずつ描いたので非常に時間がかかりました。

らんてくん
らんてくん
ひ、1コマずつ……!?

とても驚いたことに、ひとつのキャラクターが1動作するだけで20枚ほど描く必要があるのだそうです。

それに加えて敵15体(5種類×3色ずつ)の繰り出す攻撃を6パターンと、登場・待機・消滅シーンで20枚程度が必要になるらしいのです。

なので、うおくんさんがご自身で描かれたドット絵のアニメーションは、キャラクターだけでなんと全部で200〜300枚ほど!

うおくん
うおくん
それから背景を描くためにはじめてドット絵に挑戦し、キャラクターとの世界観を合わせるためにさまざまな見本を参考にしました。

背景も含めると合計で300〜400枚は描きましたね。

全てを合わせると300〜400枚もの絵を描いたそうですが、実装期間中に絵を描いていたのは実質1週間ほどだったとおっしゃっていました。

らんてくん
らんてくん
UXが重要だと考えて、作ったイラストにサービスの雰囲気が揃うよう心がけたそうだぞ!

自分のデザインしたいよう自由に描くのではなく、ユーザーから見たときに統一感がでてわかりやすいようにデザインをしたところが素敵ですね。

機能面でもユーザーのことを考えながら開発なさったのでしょうか?

うおくん
うおくん
最初は難しい機能ばかりを取り入れようとしていましたが、講師に「たとえ難しくなくても自分が必要だと思う機能を実装したら良いし、就活で有利かどうかは考えなくても大丈夫」とアドバイスしていただきました

それからユーザー志向でどのような機能を入れたらよいのかをとても考えるようになりました。

一つの画面上で操作が完結したらユーザーが使いやすいはずだと考え、タスクの削除ボタンをモーダルで表示させることにしたそうです。

このときに、ユーザーが使いやすいように実装した結果、難しい機能も盛り込めることをさりげなくアピールしたのだとか。

らんてくん
らんてくん
「独学だったら就職活動で有利になることしか考えてなかったかもしれない」と教えてくれたぞ!

「これが駆け出しエンジニア!?」驚きの声

「TaskQuest」はユーザー数が920人PV数は5800と本当に多くの方に利用されています!

特にPVがとても多いですが、やはりご自身でデザインにこだわったところがユーザーにも響いているように感じます。

他のRUNTEQ受講生からもフィードバックをいただいたそうですが、どのような意見がありましたか?

うおくん
うおくん
「タスク作成のボタンが見えづらい」や「文字が見にくい」など見た目に関してのご意見をいただきました。

コードの中で日本語を使ってしまった箇所があったので、こちらもアドバイスをいただき修正しました。

いただいたフィードバックは、デザインとの兼ね合いもみながら対応なさったそうです。

それでは、ユーザーからいただいた嬉しい声を教えていただけますか?

うおくん
うおくん
「実際に使っています」と声をかけてくださるユーザーがいらっしゃったことが嬉しかったです。

それから「これが駆け出しエンジニアなん!?」と驚いていただけたことも嬉しかったですね。

うおくんさんご自身は「TaskQuest」がいろいろな方から日常使いをしてもらえるサービスではないと思っていらっしゃるそうで、それでもたくさんの方の目に止まったことが嬉しいとお話してくださいました!

今回はGoogleアナリティクスも活用したとお聞きしましたが、改善に役立てられましたか?

うおくん
うおくん
トップ画面からタスク作成画面への訪問が減っていたときがあり、トップ画面からのログインが面倒なのかもしれないと考えました。

なので、体験版というボタンを作成し、ボタンを押すと自動でユーザーを作ってくれるためログインなしでタスク管理が体験できる動線を作りました。

その結果、訪問が減っていたときよりもタスク作成画面へのページビューを増やすことができました

とてもうまくご活用なさっていますね!

たくさんの方に見ていただけるサービスを作ることができた要因は、どのあたりだと思いますか?

うおくん
うおくん
しっくりくるアイデアが出るまで1ヶ月ほど考え続けたからではないでしょうか。

以前より自分の中で100点に満たないアイデアは採用しない!という信念を持っていました。

その信念を曲げずに「TaskQuest」のような自分にぴったりなサービスが生まれたので、多くの方に見ていただけたのではないかと思います。

らんてくん
らんてくん
納得するまで粘ることができたからこそ、素晴らしいアプリを制作することができたのだな!

「TaskQuest」の今後の展望はいかがですか?

うおくん
うおくん
当初の構想で実現できなかった2つのことにチャレンジしたいと思っています。

ひとつめが、タスクをシェアする機能です。

例えば、TOEICの勉強タスクをカテゴリ別にシェアできて、目指したいレベル感の人たちのタスクを見ることができるんです。

実際に目標点数を取っている方がどのようなタスクをこなしていたかを知ることができ、自分のタスクにコピーして同じプロセスをたどることができるようにしたいとお話してくださいました。

同じ目標を持っている方がどんなタスクをこなしていたか知ることができれば、なにを勉強すべきなのかがわかり計画も立てやすくなりそうですね。

うおくん
うおくん
ふたつめは、複数人でタスクを管理してチーム戦で巨大な敵を倒せる機能です。

本当はポートフォリオの段階で盛り込みたかったのですが、入れてしまうと永遠に終わらないと思い保留になってしまった機能なので挑戦したいです。

なにから勉強したらいいかわからない!という悩みを解決できる機能や、なかなか難しい複数人でのタスク管理を楽しくできる機能はぜひ使ってみたいですね!

さいごに、全体を通して一番学びになったことを教えていただけますか?

うおくん
うおくん
アイデアが思いつくきっかけとして、自分が困ったことや悩んだことから洗い出している方が多いと思います。

しかし、僕の場合は就職活動をする上で自分にしかできないアピールポイントをポートフォリオに落とし込めないか?という点を重要視しました。

自分がいま抱えている問題や課題と、いままでの経験からこれなら誰にも負けないと感じる部分を掛け算することで目立つサービスを作ることができると思います。

元々得意なことや好きなことをサービス作りに取り入れることでアイデンティティのあるサービスとなり、結果的に就職活動にも有利に働いたのですね。

うおくんさん、今回はインタビューにお答えいただきありがとうございます!

今後のご活躍も、応援しております。

編集後記

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

うおくんさんの制作した「TaskQuest」は、ご自身の悩みをご自身の強みを存分に活かして唯一無二の存在まで育てあげられたポートフォリオでした。

この「TaskQuest」はTwitterでとある企業の目に留まり、スカウト、そして就職へと繋がりました。(詳細はこちら

就活で活きるポートフォリオは、うおくんさんのようにユーザー志向で考え抜かれ、かつ自身の個性を反映されたものであることが分かります。

RUNTEQで就活に強い、個性豊かなあなただけのポートフォリオを制作しませんか?
技術的なサポートはもちろん、アイデア出しの段階からサポートいたします!

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

「TaskQuest」を読んだあなたにおすすめ!ちょっとひねったポートフォリオ例

Late-Hack―遅刻をハックする―:遅刻救済サービス

Common Wallet:共働き夫婦向け家計簿サービス