ハッカソンで賞をもらったチームの裏側
野村総合研究所が主催しているハッカソンに参加してきました！
結果として
- オーディエンス投票で２位
- スポンサー賞受賞
- 技術協賛賞受賞
という成績を残すことができました。
せっかくなのでその振り返りと、開発の過程をまとめてみました。
0. プロダクト
作成したプロダクトの概要は以下になります。
ランチをもっと直感的に選びたい、、、そんな問題を解決しようとしたアプリです。食べたいものを選ぶと、それをLine botを通じて友人をご飯に誘える機能を備えています。
誘われた側はLine上で参加・不参加の意思表示をすることができます。
このアプリができるまでの過程をイベントの内容と添えて振り返っていきます。
1. イベント概要
-「Bazaar（市場）」をコンセプトとして開催
- それ以外にもスポンサーから別にテーマが与えられる（後ほど記載）
- コワーキングスペース貸切で行われる（以下参照）
- 土日をまたいでの２日間（実質的な作業時間は半分で１日）
- チーム参加 or 個人参加 のどちらかを選択可能
最初は自分もチームで参加したかったのですが、２日間という日程に気乗りしない友達が多く、結局個人で参加しました。トータルで７０人ほどが参加していたと思います。
また、技術協賛として以下の企業様が提供する機能をふんだんにつかうことができました。
技術協賛賞を狙えるので、ほとんどのチームが機能を使用していました。
2. スケジュール
アイデアソンでは、各自が考えたものを参加者が見て回り、面白いと思ったものに星をつけて評価するということをしました。後にアイデアが面白いと思ったものや似ていると思った人とチームを組んでいきます。
個人的には、技術協賛としてAPIを提供してくださっていた IBM Watsonさんの「言語から感情を読み取れる」機能というのが面白いと思い、それをやりたいと思っていました。
（実際、自分が出したアイデアは「感情から食べたいものを選ぶ」というアイデアに対して、星を１０個以上獲得することができ、そこそこの評価を得られました。）
最終的には
「ランチを画像から手軽に探せるアプリ」
という案を考えたチームに合流しました。
以下、アイデアソンのラフ案から清書したもの
また、今回スポンサーである三菱地所さんから
というテーマが出たため、このアプリをたたき台にして
「丸の内OLのランチをハックするアプリ」
をピンポイントに解決しに行きました笑
チーム構成は
- iOSエンジニア １名（自分）
- バックエンドエンジニア ４名（java, PHP, node, goがいけるメンツ）
- 写真家 １名
というほぼエンジニアチームという感じです。
ハッカソンに写真家が参加しているのもビビりました笑
3. 要件定義
ぼくらのチームが賞をいただくことができたもっとも大きな理由
「要件定義がうまくできていた」
この一言に尽きると思います。
結局のところ、ハッカソンといえど１つのプロダクトをつくっているのと変わりありません。個々の能力差はもちろんあるとは思いますが、それを踏まえても、何ができてどこまで実装できそうかを見極めて、遂行できるかも重要になってくるかと思います。
先ほどのラフ案をたたき台にして要件定義をしていきました。
左：開始して１時間程で考えた要件（ラフ案）
右：実際に実装した要件
少しわかりづらいかとは思いますが、ほぼラフ案の通りの構成で実装しきることができました。これは要件定義がうまくいっていたからだと思います。
（もちろん、実装しきってくれたメンバーにはとても感謝しています！）
正直なところは、僕らのチームよりもアイデアが面白いチームはたくさんありました。しかしながら、実際の実演においてプロダクトが100％になっていないチームが多かったように思います。
やはり、ハッカソンなのでプロダクトを作り切ってなんぼであり、要件定義って大事なんだと痛感しました。
4. 役割分担
実際のところ「要件定義がうまくできていた」だけではチームは回らないので、メンバーの担当を細かく分担しました。
- エンジニア４人を上記の図で分担
- 残りのエンジニア１人はペルソナと発表資料の作成に集中
- 写真家さんはデザイン周りのデータ集め
という感じで分担しました。
これは結果論ですが、サーバーを分けてマイクロサービスにしたおかげで、開発が捗ったように思います。
（当初、LineのMessaging APIの部分もIBM Cloud functionsを使用予定だったがやめました。こういう決断もハッカソンでは重要なんだと感じています。）
5. ペルソナ作成
繰り返しになりますが、ハッカソンといえど１つのプロダクトをつくっているのと変わりありません。問題解決のためのペルソナを作りました。
ありがたいことに、メンバーには実際の「丸の内OL」がいたので、意見を参考にしながら色々と議論をすることができました。
左：考えたペルソナ（ラフ案）
右：清書したもの
この議論は後々のアプリのUIをどうするかにも関わってきたので大変よかったです。
6. UIへのこだわり
ペルソナと並行して考えていたのが、UIに何を盛り込むかです。
ここの領域は自分の担当だったので、主には
「出来るだけシンプルな作りであること」
を意識しました。
というのも、「丸の内OLのランチをハックする」前に、そもそも「毎日ランチを探すのが大変」ということを解決したい、というのがこのアプリのコンセプトにあったためです。なので、出来るだけユーザーが直感的に使えることを意識しました。
例えば、ペルソナの想定から「丸の内OL」は
- 糖質（カロリー）
- 時間
- コスト
に分類できると仮定できたので、シンプルにするために検索の絞り機能はこの３つしかついていません。
左：UIと遷移図（ラフ案）
右：実装した画面
料理の見せ方に関しては、写真家の方がチームにいたので、そちらの意見を参考にしました。地味にこういうところでコミットしてくれました笑
そして、とにかくコンセプトを大事にしました。
「丸の内ランチハック」 → 「MARUCH」
の世界観を作り出し、いかにして使ってもらうか。
丸の内OLが良いものとはなんなのか、、を模索しました。
結果として、
- ロゴの作成
- テーマカラー（３つを設定）
を作成するにいたりました。
「丸の内OLっぽいい色はなんだろう、、？」
「ちょっと大人っぽいよね？」
みたいな議論をした結果、あの色（紫っぽいやつ）になりました笑
ロゴに関しては、たまたまイラレが得意なメンバーがいたので任せた感じです笑
5. 反省点
限られた時間でここまでできたらいいよね！
という話で要件定義をして、タスクに優先順位をふっていました。
結果として、一部の機能は実装することができませんでした。
- twilioのSMS連携
- 駅すぱあとの位置情報連携
上記も「できたらいいよね〜〜」で、できませんでした笑
使用する理由には、技術協賛賞狙いというのもありますが、そもそもハッカソンという機会がないと、なかなかこういったAPIに触れる機会がないので、ちょっと残念だったなぁと。
また、想定では
- チュートリアル
- 履歴機能
- ダークモード機能
- 画像の投稿機能
などの機能もありましたが、残念ながらつけることができず、、。
結果として、DEMOでお見せする時間がなかったので、機能は本当にシンプルでよかったのかもしれません。
6. 最後に
エモいことを言いますが、誰一人欠けても成り立たなかったので、、、
本当に感謝でいっぱいです！！
知らぬ人同士のメンバーが２日間ですごく仲良くなれました。
楽しかったなぁ〜〜！笑
１０万円は１２月にメンバーで打ち上げに使わさせていただきます！
ありがとうございました！
最後に、運営に皆様、スポンサーの皆様、協賛企業の皆様、
このような場を設けていただきありがとうございました。
貯金します！