More than 3 years have passed since last update.

ハッカソンで優勝する技術

Last updated at 2019-12-22Posted at 2019-12-21

この記事はクラウドワークス Advent Calendar 2019 の 22日目の記事です。
昨日は@hisamura333さんによる「awsとslackで今日の献立を教えてくれるのを作った」でした。超絶面白かったですね！！

クラウドワークスのクラウドテックというサービスでエンジニアインターンをしている @taigamikami です。ハッカソンが好きで、様々なハッカソンに出没しています。

最近の戦績としては、以下のような感じです。

コンテスト名	結果
第3回ジロッカソン開発部門	優勝
JPHACKS2018@Tokyo	最優秀賞
JPHACKS2018	BestAudienceAward
Hack U 2019@Tokyo	最優秀賞
Hack Day 2019	最優秀賞

ハッカソンとは？

Hack(ハック) + Marathon(マラソン) = Hackathon(ハッカソン)
技術者が一定期間集中的にプログラミングやサービスの考案などを共同作業で行い、その技能やアイディアを競う大会です！

最近では、オープンな大会に加え、社内ハッカソンも増えている印象です。

adidasがやってるのはびっくり
ハッカソンから生まれたものとしてFacebookのいいねボタンが有名ですね

弊社クラウドワークスも2016年にバグ修正ハッカソンなるものをやっているのを発見しました！！

バグ修正ハッカソンを行いました！|クラウドワークスエンジニアブログ

ハッカソンの良さ

数日(1,2日)で終わる
チーム開発である
賞品が出る(HackDay: アメリカSXSW)
短期間で圧倒的成長ができる
他の人の作品を見るのも楽しい

→ 数日でポートフォリオに載せれる作品が作れて、賞ももらえて、圧倒的成長ができるのでコスパは最高だと思いますw。

ハッカソンで勝つ方法

私自身がハッカソンで勝つ確率をあげる手順について順番に説明します。

チーム作りはバラエティに富むように組む
アイディアづくりは基本真似て、オリジナル要素を組み込む
プロトタイプを作り、高速で検証する
PDDで始める
実装には事前準備必須
本番は英雄になれ

1. チーム作りはバラエティに富むように組む

フロントエンド(アプリ)エンジニア
バックエンドエンジニア
データサイエンティスト(機械学習屋)
デザイナー
動画・プレゼンクリエイター

基本的にはこんな感じのメンバーがいると最強だと思います。
アイディア出しの時点だと、もっと多種多様な人が関わってくれると良いですね。

ここに上げた全種類の人が揃っていなくても、勝つことはできます(Hack U時とかフロントとバックエンドの2人だけだったし...)
動画クリエイターがいると発表のインパクトが一気に大きくなる印象です。

2. アイディアづくりは基本真似て、オリジナル要素を組み込む

アイディアがハッカソンにおいて一番重要であるといっても過言ではないかもしれません。

ハッカソンは、大きく2つの種類がありますが、どちらの場合も事前準備することが大切ですが、今回は主にテーマがない後者について書きます。

解決すべき課題やテーマがあるもの（例: SPAJAM2019本選「ホーム」など）
課題がなく自由なもの（例: JPHACKS 「〇〇x Tech」など）

アイディアのネタの集め方

日常の不満や疑問を集めておく

これは身近な人やTwitterなどで集めるといいかもしれません。
お母さんや学校の友達、職場の同僚などにユーザーインタビューしたりすると意外な観点が見つかりますよ！

ユーザーインタビューについては以下の記事が良さそう
クラウドワークスのユーザーインタビュー設計手順を大公開！
失敗から学んだ、ユーザーインタビュー23の心得

日常のオモシロを集めておく

Twitterとかにはよく落ちてますね。
例)金魚自身が水槽を動かす

Water tank controlled by fish pic.twitter.com/An46lUUutj
— Space Explorer Mike (@MichaelGalanin) December 10, 2019

6秒商店さんのツイートなどもアイディアの種になりやすいです。
https://twitter.com/6sec_shop

印を結ぶと開く金庫です。

The world's most replaceable Jutsu.#6秒商店 #6secshop pic.twitter.com/zXMSylAkgE
— 6secShop/6秒商店 (@6sec_shop) July 19, 2019

過去の大会の受賞作品を分析する（オススメ)

大会によっても審査委員や評価されている項目が様々で、アイディアなどをどう作品に落とし込むかも大事な要素です。
また、過去作品をインスパイヤするのもありだと思います。

大会	過去優秀作品
HackDay	Hack Day 2018, Hack Day 2017, Hack Day 2016
JPHACKS	JPHACKS 2019, JPHACKS 2018, JPHACKS 2017
SPAJAM	SPAJAM2019, SPAJAM2018, SPAJAM2017

「もうそれあるから作るの微妙だよね？」的な発言を聞きますが、本当に新しく、見たことがないものを頭の中で考えることは不可能です。また、競合(類似のサービス)がないということは、その市場に需要がないということであり審査員の共感を生むことができません。
すでにあるものを真似し、そこにオリジナルのスパイスをかけることで新たな価値を生み出すことができるのです！！

例えば、HackDayで優勝したおそうじぶーぶーは 掃除機, ラジコン, カメラの足し算です。
それぞれ既存のものに対してスパイスをかけまくるとオリジナルになるのです。

3. プロトタイプを作り、高速で検証する

プロトタイプを作ることで、アイディアが正しいか高速に検証することができます。

以下のプロトタイプツールをよく使っています。

ペーパープロトタイプ
Prott
Invision
Adobe XD
FluidUI

などがあります。デザイナーでなくとも直感的に使いやすいものばかりなのでぜひ使ってみてください

価値仮説シート

クックパッドさんやグノシーさんがよく使用していると聞きますね。
以下の表の〇〇にアイディアについての文脈を当てはめることで、そのアイディアが誰の何をどんな形で解決しているのかが整理され説得力のあるアイディアが作成しやすくなります。

対象	具体的な文
ユーザー	〇〇は、
欲求	〇〇したいが、
課題	〇〇なので、
製品の特徴	〇〇することに価値がある

4. PDDで始める

プロトタイプを作り終わったら、実装する前に発表資料のフレームワークを作成しておきます。そう！**プレゼン駆動設計 PDD(Presentation Driven Design)**です。

なぜPDDで開発するのか？

作成したものが、どんなにすごく実用的なものであっても伝えることができなければ何も意味がありません。
審査員の印象に残らなければ、ブースに来てすらもらえないかもしれないためです。作成する際には、実際の利用シーンを審査員に想像させることが重要です。
また、先に実装してしまうと無駄な部分を作りすぎてしまうことが多く、ただでさえ短い時間がもったい！ので、プレゼンで主張したいポイントを先に絞り込みそれに合わせて実装を行うという手法を取ることがオススメです。

発表資料に関しては、発表が上手な人達を参考にしましょう。
HackDay2018のチームむっちりの発表が簡潔でわかりやすいです！
https://youtu.be/VEbOvV7_BWw?t=8750

おそうじぶーぶーでのPDD

HackDayで優勝した際のおそうじぶーぶーの例です。

1.　解決する課題や満たされる願望のスライドを作成

おそうじぶーぶーを作成した際には、まず問題点のスライドを作成しました。

こうのように問題点を整理すると何を解決すべきかが自明となるので、無駄な遠回りをすることを防ぐことができ、チームメンバーが共通の問題イメージを持ちやすくなります。

2.　課題に対するアンサースライドを作成

課題に対して、それを解決しアピールしたい機能のスライドを作ります。
今回は動画にしましたが、実機でデモができる時はデモのほうがウケが良いですね。

この穴抜きになっている箇所を埋めるように実装すればいいのです。
何をすれば良いのかわかりやすいですよね！

3.　実装をし、動画・画像を挿入し完成

穴抜きの箇所を埋めるように実装すれば完成です。

これが私の考えているPDDです。

5. 実装には事前準備必須

ハッカソン中にやったこともない方法を調べて、実装するのは困難です。(時間が長いハッカソンでは可能かも...)
機械学習のモデル生成やフロントエンド・アプリなどの画面実装など使い回しができるものを個人開発などで用意しておいたり、知識を蓄えておくことで、ハッカソン中にそれを応用し実装を爆速にすることができます。
興味を持った技術などにはなるべく手を触れておくことです。

6. 本番は英雄になれ

緊張せずに発表するだけです！もしかしたら世界を変えることができるかもと英雄になった気持ちで発表しましょう！！

今まで実装してきた作品例

最後に、私が誇る仲間達とこれまで作って来たものの例を何点か紹介します。

ShowTime

ShowTimeはプレゼンテーション中のポーズに応じて、効果音やスライド操作ができる作品です。
ポーズとスライドアクションは設定画面でカスタマイズすることができます。

実装方法

ポーズの認識には、OpenPoseというリアルタイムに顔体DeepLearningの一種で、単眼カメラで顔〜足までの骨格を検出してくれるアルゴリズムを使用しています。

設定画面は、Nuxt.jsで書いていますがvuedraggableというライブラリを応用し、ユーザーが直感的な操作ができるようUXを高めました。

全体の実装は以下のリポジトリにあります。

ばえるーポン

ばえるーポンは食べ物の写真のインスタ映え度を深層学習で自動的に判定し、その評価に応じて割引クーポンを発行するサービスです。

実装方法

インスタ映え度の可視化には、心理物理学的なアノテーションを実施し、Googleが開発した画像に対して技術面と審美面の両方で訓練できるCNN（Convolutional Neural Network）ベースの画像評価モデルであるNIMAとリアルタイムに高速でオブジェクトを検出するDeepLearningの一種であるYOLOv3を使用しました。
インスタ映え度のしっかりした定義がないので、心理物理学的な美しさ × 食べ物写真の構図 という定義からインスタ映え度を算出しています。