トップ > 自由研究 > Mashup Awards 2016 For Proで最優秀賞をとるためにがんばった話 #MA_2016

Mashup Awards 2016 For Proで最優秀賞をとるためにがんばった話 #MA_2016

自由研究 【執筆者】岩田直樹

f:id:g-editor:20170116105043j:plain どうも、全社員早押上司争奪戦推進機関改め、スマホアプリチームの岩田です。

2016年12月17日に開催されたFESTA 2016 By Mashup AwardsにてMashup Awards 2016 For Pro部門の決勝に参加しました。チーム名は「全社員早押上司争奪戦推進機関」。普段離席しがちでなかなか話せない上司との会話権を早押しで決定するシステム「全社員早押上司争奪戦」という作品についてプレゼンをしました。

f:id:g-editor:20170116105105p:plain

審査員の方からありがたい褒め言葉をいただき、最優秀賞を受賞した我々の作品について、少し裏話を交えながら振り返りたいと思います。

何を作ったか

我々が作ったのは部下同士が上司と話す権利を争奪する早押しシステムです。「会議を開くまでもないが忙しい上司と話をする機会が欲しい」というニーズに応えるべく制作しました。

f:id:g-editor:20170116105130p:plain

手順は次のとおり。

f:id:g-editor:20170116105143j:plain

アプリを起動させ、話したい上司を選択します。

f:id:g-editor:20170116105203j:plain

上司が席に戻ってきたら「早押し開始」を押します。

f:id:g-editor:20170116105314j:plain

話しかけたい上司が他の部下たちと重複した場合、早押し開始のカウントダウンが始まります。

f:id:g-editor:20170116105338j:plain

「PUSH」ボタンが表示されたら、MESHのボタンタグを早押しします。

f:id:g-editor:20170116105400j:plain

一番早かった部下にこの画面が表示されます。上司と話す権利を獲得した証です。

なお、デモムービーは下記のとおり。

Mashup Awards For Proの開催を知り、チームを結成！その経緯

Mashup Awardsはアイデア（独自性、新規性、優れた着眼点、発展可能性）、完成度（実用性、ユーザビリティ、エンターテインメント性）、デザイン（芸術性、優れた表現技法）を競い合う開発コンテストで、今年で12回目を迎えます。

過去には、本物の弓を使ったスタンドアローンARゲームシステムや人間の評価軸に関する言葉の重みを測る天秤などを生み出してきました。

前回までは一般部門のみでしたが、今年は初めて法人向けのFor Pro部門が設立されました。我々が参加したのはそのFor Pro部門。一般部門であるFor All部門と違い、For Pro部門ではMA公式のAPIを必ず利用するという条件がありました。

開発部門の検索チームにいる松村がリーダーとなり、ハッカソンやイベントが好きそうなメンバーを集めて構成。集まったメンバーは、デザイナー、アプリエンジニア、フロントエンドエンジニアなど。バランスの良いチームですがメンバー同士はリーダー以外ほぼ初対面で、業務での関わりもないような状態でした。

コンセプト・デザインを決める

チームのコミュニケーションは主にSlackを使用しました。

「グルメ関係、Webサービスはやらない」と決めた

最初のアイデア出しの際に立てた方針は「グルメは仕事でやっているからそれ以外のことをやろう」ということ。せっかくイベントに参加するので、仕事で作っているサービス以外でも幅を広げたいという思いもありました。

f:id:g-editor:20170127151026p:plain

話し合いを重ねた結果、「部下同士が上司を争奪する」プロダクトを作ることになりました。

9月30日に方針を定め、10月5日の時点でネタは決定。その次に考えたのはプロダクト名です。Slack上でいろいろと候補を出してみんなで多数決をとりました。

f:id:g-editor:20170127151038p:plain

多数決で票を集めた「上司早押し争奪戦〜上司さま!!」をブラッシュアップさせ、プロダクト名は「全社員早押上司争奪戦」に決定しました。

なお、Slackの公開チャンネルで議論をしていたので、社内の他チームから「アイデアもらえませんか？」と様子を探ってきたメンバーもいました。

f:id:g-editor:20170127151049p:plain

プロダクト名決定から6時間後にデザインが完成

f:id:g-editor:20170127152740p:plain

プロダクト名が決まって6時間ほどしたら、デザイナーよりキービジュアルが上がってきました。仕事早すぎです。背景やタイトルの両サイドには「ぐるなび」の「ぐ」の文字をモチーフにしたデザインを配置しました。

デザイナーの話では「タイトルが決まって、漢字の字面を見て以下を満たすデザインを考えた」とのこと。

  • 近未来系のSFアニメみたいな雰囲気を現実に落としこみたい
  • シンプルにフラットでさらっとしたものにしたい
  • 何かロゴを作りオリジナル感出したい

その結果、「ぐ」のロゴがひらめき、わりとスッとできたそうです。

スマホアプリ画面
スマホでの表示画面です

PC画面

PCでの表示画面です

アプリやPCの操作画面も10月7日と早い段階で決定。ほぼ当初のデザイン案の通りに実装されていきました。チームメンバーの能力に感謝です。

社内でおこなったコンセプト発表会でのチーム紹介文も、某Web百科事典風な文体に。独特の世界観を作っていきました。

技術的な話：「全社員早押上司争奪戦」のシステム構成

システムは図のような構成になっています。

f:id:g-editor:20170116105626j:plain

今回、For Pro部門ではMA公式のAPIを使用するという制限があり、少し回りくどい形になっています。また「たくさんのAPIを使うことで何かしらの企業賞等に該当する確率をあげよう」という戦略もありました。

社内では4チーム中1位を獲得

Mashup Awardsへ応募する前に、社内でアイデアのお披露目を兼ねたコンセプト発表会がありました。

他にもPepperと弊社の提供しているAPIぐるなびWebサービスを利用したものや、ドローンを利用したり、JINS MEMEを利用したりと面白いアイデアがたくさん。

f:id:g-editor:20170116105836j:plain 写真撮影の際に、1名欠席となったため「あとで合成しよう！」と盛り上がりちょっと変なポーズになっています

また、コンセプト発表会でいただいた意見のなかには「早押しの感じ、みんな必死にやっている感じをもっと強調できたら面白そうだよね」というものも。そこで、何故必死に早押しをおこなうかを考え、世界観を重視しながらスライドを追加しました。

f:id:g-editor:20170116105850j:plain

Mashup Awards当日

いよいよ迎えた当日。リーダーは気合を入れすぎたのか、朝5時半ごろには起きてグループチャットに連絡を入れてきていました。

会場の様子

午前10時ごろに入場。事務局から聞いていた会場図面よりも想像以上に観客と登壇者が近く、熱気が溢れるステージになりそうだなと感じました。

f:id:g-editor:20170116105909j:plain 会場にてスポンサードの看板を発見！

ブース展示の様子

f:id:g-editor:20170116105921j:plain

当日は発表以外にもブース展示があると聞き、事前に展示用イメージと配布用ポストカードを作りました。

f:id:g-editor:20170116105933j:plain

PC・タブレット・スマホを用意して展示も気合を入れました。

発表の様子

f:id:g-editor:20170116105946j:plain

「早押しする3つの理由」を説明している（と思われる）シーンです。発表時は360度を観客に囲まれ、みんなで舞台の真ん中に立っていました。

ストーリー・構成力が審査員から高く評価される

我々が作り込んできた世界観を評価していただけ、しかも「あるまじき力のかけ方」というある意味最高の褒め言葉を頂いて感無量でした。リーダーは緊張から解放されたからか表彰式で泣きそうになっていました。

f:id:g-editor:20170116110016j:plain 審査員の方と一緒に集合写真

f:id:g-editor:20170116110034j:plain 賞金の目録を持っての集合写真です。喜びで世界観忘れて笑みがこぼれてます（笑）

なお、当日のTwitterでの実況はTogetterにまとめられています。

おわりに

今後

今回作成したアプリですが、残念ながら配布する予定はありません。しかしながら、今回の開発で得た知見やチームワークなどは今後のぐるなびのサービスに生かされていくことになると、個人的には思っています。

次回Mashup Awardsでも初代For Pro部門最優秀賞受賞者として、再度あの舞台に立ち上がれるようなプロダクトを生み出していきたいと思います。

f:id:g-editor:20170116110047j:plain

サングラスをとってコートを羽織って集合写真を撮ったときに「サングラスとったら普通の人なんですね」と言われてしまいました（笑）。

謝辞

期間中を通してイベントを盛り上げてくださったMashup Awards2016事務局の皆様方、ご多忙にも関わらず急な訪問を受け入れてくださいました株式会社ウフル川野様、開発時間を作るために協力していただいたチームの皆様には感謝いたします。ありがとうございました。

Wantedly

ぐるなびは、イベントごとに全力を尽くすことも歓迎される社風です。興味のある方は一度遊びに来ませんか？


岩田直樹
岩田直樹

ボルダリングとロードバイクが好きなエンジニアっぽいヘンジニア。
三度の飯とビールが好き。IoT界隈やフロントエンド、アプリの勉強会と幅広く出没してます。
好きなエディタはVimです。

suki_yo_kirai_yo

'; relatedArticle += '' + art.title + ''; relatedArticle += '
' + art.text + '…
'; relatedArticle += '
'; relatedArticle += ''; createLinkList.push(art.link); if (createLinkList.length == 5) { return false; } }); return [relatedArticle, createLinkList] } var showRecommend = function(items1, items2) { var createLinkList = []; var relatedArticle = '
おすすめ記事
    '; if (items1.length !== 0) { items1 = shuffleList(items1); } if (items2.length !== 0) { items2 = shuffleList(items2); } var articleList1 = createRelatedArticleList(items1, createLinkList); if (articleList1[1].length < 5) { var articleList2 = createRelatedArticleList(items2, articleList1[1]); relatedArticle += articleList1[0] + articleList2[0] + '
'; } else { relatedArticle += articleList1[0] + '
'; } $('footer.entry-footer').before(relatedArticle); } var feedUrl = "/feed"; var myCategory = $("div.entry-categories a:first-child").text(); if (myCategory != "") { feedUrl = feedUrl + "/category/" + myCategory; } getFeed(feedUrl) .then(function(data) { first_items = parseFeed(data); return first_items; }) .then(function(first_items){ var second_items = []; if (first_items.length < 5 && feedUrl != "/feed") { getFeed("/feed").then(function(data) { second_items = parseFeed(data); return [first_items, second_items]; }) .done(function(items) { showRecommend(items[0], items[1]); }) } else { showRecommend(first_items, second_items); } })
'; //挿入するタイトルのHTML for (var i = 0; i < num; i++ ){ var entry = result.feed.entries[i]; var entryImg = ""; var imgCheck = entry.content.match(/(src="http:)[\S]+((\.jpg)|(\.JPG)|(\.jpeg)|(\.JPEG)|(\.gif)|(\.GIF)|(\.png)|(\.PNG))/); //画像のチェック entryImg += ''; if(entry.link != presentUrl){ container.innerHTML += '
' + entryImg + '
' + entry.title + '
' + '
' //挿入する関連記事のHTML }else{ num ++ //今のリンクのときは、表示せずもう１つ記事を取り出す } } } } } google.setOnLoadCallback(initialize);