オンラインハッカソンやってみたよ。やり方と振り返りまとめ（運営資料共有してるよ） #ProtoOut #ProtoPedia

![EV4b-lBVcAAlJEj.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216883/7ac01435-d1f3-223e-a998-4c091d3513f6.jpeg)

## Remo.co を使用してオンラインハッカソンやったよ
こんにちは。[一般社団法人MA](https://we-are-ma.jp/)の伴野です。
4/18（土）に、[ProtoOutStudio](https://protoout.studio/) での活動の一環として、自身初となるオンラインハッカソンの運営を行いましたので、進行や準備に関するTipsと振り返りを残したいと思います。
▼[Connpass：ProtoOutハッカソン　-テーマ：リモートワーク #ProtoOut](https://protoout.connpass.com/event/172136/)
▼[ProtoPedia：誕生したアウトプット12個](https://protopedia.net/taxonomy/term/2239)
▼[togetter：時空を超えた？全員自宅から参加！リモートワークを良くする12個のアウトプットが誕生した初めてのオンラインハッカソン！](https://togetter.com/li/1496111)



今回は仮想ワークスペースのRemo.co を使用し開催しました。参加者の方用に、当日のRemo.coの使用方法を以下のQiitaにまとめてありますのでご参考ください。
▼[Qiita：Remo.coを使ったオンラインハッカソン（ワークショップ）の運営について【参加者編】](https://qiita.com/banboo1118/items/518a41222b96b378a22c)

## Remo.co 採用の理由：ハッカソンに持ち込みたかった事
最もオンラインの場に持ち込みたかった事は、創作活動を最大化させるために必要な**「自由な環境」** でした。

ハッカソンは、短期間で成果物をアウトプットする、まさに「創作活動」です。
「時間を使ってもいい」 と、思えるモノや人（チーム）と、出会えるかどうかが重要な要素となります。
今まで私が運営してきたハッカソンでは、その出会いが生まれるような「自由」な選択肢を大切にしてきており、今回もその観点で、ツールを選定しました。
（自らのクリエイティブを発揮できないのであれば、1人でやることも重要です。）

様々なコラボレーションツールの中でも、Remo.co は非常に参加者にとっての自由度が高いツールです。
**　・会話する相手を自分で選べる
　・会話をはじめるタイミング、やめるタイミングは自分で決定できる**
採用を決めたポイントはこの辺りです。

アイデアを発散したり、チームビルディングの過程で、なるべくリアルな環境に近い「自由」を参加者の方に感じていただく必要があり、Remo.co を選択しました。
※実は、、ツールを使いこなしきれず、、反省点もあるので、それは別途エントリーします。

## オンラインハッカソンの設計で気をつけた事
### 1.非同期対策
多くのイベントがそうであるように、ハッカソンにも運営の「現場力」が求められるシーンが沢山あります。
オンラインでは、参加者に何かのトラブルが発生しても、目の前でリアルタイムに把握することが出来ず、対処出来ません。まさに非同期状態。

よって、いつ・誰が迷っても戻ってこられるように、なるべく多くの情報を事前に共有することと、進行をシンプルに（使用するツールの数を最小化する）する必要がありました。

**非同期対策の準備物**

- 共有フォルダを作成、使用する資料を全て格納しておく
- 進行スライドは事前に共有（今回はGoogleSlideで準備）
- 自己紹介資料を事前に作って臨んでいただく（参加者同士イメージがつくように）
- 進行上使用するツールは2つに限定（Remo.coとGoogleスプレッドシート）
- Remo.co（使用ツール）を前日から共有し、参加者が試用できるようにする
- [使用ツールの使い方をドキュメントにまとめて共有](https://qiita.com/banboo1118/items/518a41222b96b378a22c)
- トラブル時の対応周知（今回はTwitterハッシュタグとし、主催は常に巡回）

※主催は開催日前日に、進行の流れやRemo.co ツールの使用方法の最終確認など、リハーサルを実施しました。


### 2.雰囲気（1人ぼっちにならないように）
オンラインハッカソンは、実際には**各自自宅の席周辺作業の集合体**です。
非日常性を体験するはずのハッカソンにおいても、日常と同じような環境で臨むことになります。少しでもハッカソンやワークショップの「ガヤガヤ感」が出せるように準備をしました。
※ちなみに、当日はいわゆる「ボッチソン」が6組誕生しました。これは、ここで言う「一人ぼっちにならないように」の意味合いとは異なります。

**非日常性を演出するための施策**

- 成果発表など、参加者のプレゼン時は複数人で司会する。メイン司会とガヤ司会（ @n0bisuke  @tseigo )
- 同様にプレゼン時は、テキストチャットを多用し全員で聴いてる雰囲気を出す
- Twitter で昼飯のアップを共有しあうなど、一緒にやっている雰囲気を大切にする


**参加者によるお昼の共有ツイート例**
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">どん兵衛鴨だしそばで優勝🏆<br>（まだハッカソン終わってない）<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/Noodl%E3%83%A9%E3%83%B3%E3%83%81?src=hash&amp;ref_src=twsrc%5Etfw">#Noodlランチ</a> <a href="https://t.co/CSvu2kxs7r">pic.twitter.com/CSvu2kxs7r</a></p>&mdash; ぺんたけ (@penpenchapen) <a href="https://twitter.com/penpenchapen/status/1251364541478236162?ref_src=twsrc%5Etfw">April 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

**メイン司会とガヤ司会**
場を進行していくことと、プレゼンテーションに対して反応とに役割を分け、参加者（発表者）が1人では無い雰囲気にしました。
![寂しくないように.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216883/5e93290f-f80d-f57e-fecc-6c5fd206dd39.jpeg)


## 実際にはどのように進めたか（資料の共有）
ここからは実際の進め方を共有していきます。
**いくつか使用した資料を公開しておきます。** コピーするなり、改変するなりで使用いただいて構いません。

- [進行スライド](https://bit.ly/357unMd)
- [自己紹介スライド（事前に共有し、当日持ち込んでいただく）](https://docs.google.com/presentation/d/1XNxkbYE_Y5M1kGPR-3XZb3dRcW8XBLgvqPBIoqerT7Q/edit#slide=id.p)
- [アイデア発散からチームビルディング用のスプレッドシート](https://docs.google.com/spreadsheets/d/1B9D_ku4YOwVHh3p22Rh3EkVbtlJxSf8YUXnBNUXypAQ/edit?usp=sharing)

**当日のタイムテーブル**
<img width="823" alt="スクリーンショット 2020-04-27 12.43.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216883/32c6167d-ee8e-5607-7b0d-91f93fcfe324.png">


## ざっくりとした流れ

### ①入場から開始・お出迎え　
- 主催が顔を出して周り、安心感を醸成
- Remo.coの使用に慣れていただくために、積極的にビデオ通話を持ってもらう
- 見知った人同士で固まらないよう、ランダム着席を推奨

**赤丸が「主催立場」のアカウント**
![オープニング前.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216883/7a23fc1d-4064-020d-321a-244adfff4a37.jpeg)



### ②オープニング
- プレゼンテーションモードに移動し、オープニング
- 司会から全体の流れやタイムテーブルについて説明
- 司会以外に2名ガヤに入っていただき、フランクな雰囲気を作る
- 最初はRemoの機能にみんなで慣れていく時間と説明
- チャットなどで反応すると発表者が寂しくないことなど、理解を呼びかける

**全体チャットで自由に発言される様子**
![オープニング図.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216883/c6ab8e09-2a79-5001-2447-0657f9619a38.jpeg)


### ③アイスブレイク：Remo.coの試用・練習

- Remo.coの試用を兼ねたアイスブレイク
- 書いてきていただいた[自己紹介スライド](https://docs.google.com/presentation/d/1XNxkbYE_Y5M1kGPR-3XZb3dRcW8XBLgvqPBIoqerT7Q/edit#slide=id.p)で自己紹介するというシンプルなもの
- 途中で座席の移動を促し、**「座席の自由移動」**を体験していただく

**アイスブレイクの説明資料**
※アイスブレイク後はプレゼンテーションに強制的に戻すので、余韻が無い旨伝える
<img width="819" alt="スクリーンショット 2020-04-27 13.58.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216883/5c87cdd1-f282-63e3-53d9-6dd4b4244390.png">
**強制的に戻す直前のアナウンス**
![アイスブレイク終了のアナウンス.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216883/4107c528-b70e-f619-fbd7-b65e4d54fe5c.jpeg)

### ④アイデア出し

- [Googleスプレッドシート](https://docs.google.com/spreadsheets/d/1B9D_ku4YOwVHh3p22Rh3EkVbtlJxSf8YUXnBNUXypAQ/edit?usp=sharing)を使用しアイデア出しを実施
- 短時間のハッカソンなので、デザイン思考的アプローチは度外視
- 使いたいおもちゃ（技術やサービス）を軸に、作るものを決める

**今回採用したアイデア出し5ステップ** 

1. 使いたい技術やサービスを書き出す（スプレッドシート 2行目）
2. リモートワークにまつわるキーワードを全員で出す（スプレッドシートA列）
3. 出したキーワードの連想語を、他者が書き出す（スプレッドシートB列）
4. 技術 × キーワードでジャストアイデアを量産する
5. 量産アイデアの中から、自分がやりたいアイデアを具体化する（スプレッドシート アイデア確定シート）

### ⑤チームビルディング

- 自分のアイデアを見せ合いながら、一緒にやりたい人を探す
- 自由に話しかけ合い（Remo.coのテーブルモード）、チームメンバーを見つける
- チームが決まったら、**決められた席に座る。**座ってない人はチームビルディング中
![チームビルディング図.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216883/8f74c381-c231-6f8f-1cb8-b885b2275679.jpeg)


### ⑥アイデアの確定と発表

- チームが決まったら、**何をどうやって作るか**をチーム毎にディスカッション
- 決まったらチーム毎に、[Googleスプレッドシート](https://docs.google.com/spreadsheets/d/1B9D_ku4YOwVHh3p22Rh3EkVbtlJxSf8YUXnBNUXypAQ/edit#gid=0)に記入
- 全チーム決まったらプレゼンテーションモードに切り替えて、各チーム作るものを発表
- プレゼンテーションモードでの発表に慣れる目的と、この時点で非現実的なアイデアを排除するのが目的

**チーム毎に「登壇」しアイデアを発表する様子**
![作るもの発表の図.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216883/405f83d3-7192-eaff-e83e-06761cd87d02.jpeg)

### ⑦ハックタイム

- ハックタイムはチームごとにテーブルに座っていただく
- チーム毎のコミュニケーションは自由に使いやすいツールにて進めてOKとする
- 主催からのアナウンスがあるので、Remo.co も開いておいていただく
- メンター ( @tseigo ）の席を作り、質問・相談席にて自由にビデオ会議できるようにする

**質問がある方が来て直接相談できるメンター席**
![ハックタイム-メンター.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216883/b01eaed4-bd0f-d357-24fa-b454ea267815.jpeg)

### ⑧成果発表

- 成果発表は、[⑥アイデアの確定と発表](### ⑥アイデアの確定と発表)と同様にチームごとに**登壇**し、成果を共有していただきました。
- メンターなど主催も登壇をし、成果発表に対するフィードバックやコメントを実施
- 全体チャット上にて、参加者同士わいわいチャットでの反応が生まれるように促進
- 全発表終了後、Q&A機能を応用し相互投票を実施。ベストアウトプットを決定
- 最後に全員**登壇**し集合写真！（本エントリーの最初の写真）

**成果発表画面：全体チャットで発表内容についてコメントし合う様子**
![発表画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216883/9a895074-439a-b381-6668-16997b9b1718.jpeg)

**Q&A機能を応用した「相互投票」** 
![相互投票.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216883/d76827fd-7f4f-4929-5f0d-0456fbb3424a.jpeg)

## 振り返り
#### オンラインハッカソンを行う上での反省点や課題

- ハードウェアやデバイスユーザーは、工夫しないとチーム作業が難しい
- 参加者の満足度に影響がインターネットの環境に依存するケースがある
- プラットフォームは代替施策を用意しづらい。落ちてしまったら、、という恐怖をずっとかかえてた
- ツールの運用に思考がうつってしまい、参加者の方の気持ちのケアなどまで手が回らない事がある。（今回は運営側に3名いたので、ある程度対応できたかもしれない）
- ツールの選定には、固定概念を排除する必要がある。（Googleスプレッドシートをアイデア出しの軸においたが、慣れていない参加者にとっては、同時編集の概念が持ちにくかった方もいた）

#### オンラインハッカソンで良かった点

- 普段のハッカソンでは中々出会えない方同士のチーム作業などが発生した（地域を超えて出会いが生まれた）
- 対面コミュニケーションでは無い面白さ（お昼ごはんみんなで共有しあったり、普段見えない側面が垣間見えた）があった
- Twitterやチャットコミュニケーションなどを多用することで、1人作業の寂しさはだいぶ減る事がわかった（参加者アンケートより）
- 工夫と準備次第で、十分に楽しめる事がわかった

#### 蛇足

参加者の方のハッカソンを楽しむ気持ちや、一緒に運営した @n0bisuke @tseigo の2人にも助けられ、（準備、運営大変でしたが）結果とても楽しめたハッカソンでした。
運用面の課題はあれど、普段のハッカソンとあまり変わらない雰囲気を感じられたし、なにより地域を超えられるオンラインの特性は代えがたいものだったと思います。
普段出会えないチーム、メンバー、仲間と一緒に作業できるのも、オンラインハッカソンならではかなぁ。
**リモートワークまだ慣れていない方もハッカソン参加すれば一気に慣れるんじゃないかな。**

## オンラインハッカソンの相談会・説明会開催します
この記事を見て、オンラインのハッカソンやワークショップに興味を持って頂いた方がいらっしゃいましたら、以下の通りオンラインハッカソン相談会・説明会を開催いたします。ぜひお話を聞かせてください！
個人・法人どちらでもご参加可能です。

▼[オンラインハッカソン説明会・相談会 エントリーフォーム](https://docs.google.com/forms/d/e/1FAIpQLSfaUFXz-8SZOgmziZXb0Iygqhw8fkk1GJCVBWBFEzliBWEmBg/viewform)
**開催日程**
5/7（木）14時-15時（説明会）、15時-17時（個別相談会）
5/8（金）14時-15時（説明会）、15時-17時（個別相談会）
5/14（木）14時-15時（説明会）、15時-17時（個別相談会）