オンラインハッカソンのつくりかた【こだわり強め】
こんにちは！「ARエンジニア×異業種」をテーマにハッカソンを運営するwithARハッカソンディレクターのおっしぃです！
◆このnoteはこんな人にオススメ！
・オンラインハッカソンを開きたいエンジニア
・オンラインワークショップを開催したい運営者
・オンラインイベントの裏側を知りたい人
先日、withAR史上初の2日間に渡るオンラインハッカソンを開催しました！
Yahoo!ニュースにも掲載されオンラインイベントとしては無事成功に終わりました。そこで、これからのWithコロナ時代に少しでも多くのエンジニアやイベント運営者がオンラインでもハッカソンを開催し、みんなでテック業界を盛り上げれるように、運営時に役立つTipsを共有します！
◆このnoteのおおまかな流れ
・開催の心構え
・運営メンバーの構成案
・オンラインツールの手引き
・スケジュール順にTips！
・参考リンク
※Tipsたくさんあるので目次から使えるのつまんでね！
【告知！】withARハッカソン参加者、見学者、募集中！
本ハッカソンのポイント！
■ARに特化したハッカソン！
■テーマ発表から発表まで一週間！スキマ時間に制作できる！
■制作ツールはUnity以外にもSTYLYやsparkARなどなんでもOKです！
■デザイナーさんクリエイターさんもぜひご参加ください！
■学生歓迎！
はじめに
実は普段ITツールに慣れ親しんでいるエンジニアでも多人数による双方向のオンラインコミュニケーションはスムーズには行きません。各自が置かれた通信環境も千差万別です。
困難な状況ですがWithコロナ時代は通信技術が発達した未来の予行演習、ソーシャルテレプレゼンス(実際には離れた場所にいる他者とあたかも同じ場所にいるような感覚)の高め方を試せるチャンスです！オンラインならではの熱の伝え方、分散しない空気作りを目指しましょう！
参加者が最大限のアウトプットを出せるようにイベント設計し、オフラインとは異なるベクトルで最高の体験を届け、開発を楽しんでもらう。ディレクター(運営)はその気持ちを常に忘れないよう心がけましょう！
運営メンバーの構成案
イベント規模によりますがZOOMなどオンライン会議システムの操作に時間がかかるので司会とサポートで最低2人いると良いです。
※参考 withAR運営メンバー
①ファシリテーター
(司会進行、エンジニアのフォロー)
②ディレクター
（ZOOMホスト、全体連絡や環境整備）
③サブディレクター
（ZOOMサブホスト、全ての面倒事を解決）
④プロデューサー
（イベント当日は補佐やSNS発信）
参加者にもきちんと周知させて困ったときに誰に声をかければいいか明確にしましょう！※サングラスが怖いけど実はARグラス…！
利用ツールとオンラインマップ
①ZOOM
（会話と進行用）
②Googleスライド
（発表資料やチームブレスト用）
③Messengerグループ
（グループの文章コミュニケーション用）
④Facebookグループ
（全体アナウンス用）
⑤YouTube Live
（配信と動画アーカイブ用）
①ZOOM
ZOOMは無料会員だと40分毎に接続が切れるのでホストだけでも有料プランにするのが無難です。ホストは常時参加する司会以外の運営メンバーが理想。また参加者をグループ毎に振り分けるブレイクアウトセッション機能を使用します。ハッカソンでグループワークは必須なのでホストは予め利用設定しておきましょう。手動振り分けに時間がかかるので、司会が進行中にホストが裏で振り分けておくのがおすすめです。難しい場合はグループ分けの前に休憩時間を入れましょう。ホストはどのグループにも自由に移動でき、指定したメンバーのグループ移動も行えますが、参加者が自分から他のグループに移動できない点には注意が必要です。
Remoというオンラインイベントツールがイケてると巷で話題ですが現実的な料金設定でなかったので採用を見送りました。
②Googleスライド
Googleスライドは複数人で同時に編集ができるのでチームごとのスライドページをホワイトボードのように使ってチームブレストの際に使用しました。発表の際にも使用します。全チームのブレスト＆企画発表を１つのスライドにまとめると他チームの進行状況などもチラ見できて、オンライン上でも一緒に作業空間を共有している感があって良いです。（あと管理も楽です。）
事故を防ぐためにイベント進行用のスライドとは別に用意して下さい。
↑オンラインブレストはこんな感じ↑
※各参加者が、ローカル環境でスライド作成→画面共有で発表、の流れは作業空間が分断されイベントの一体感が損なわれるのと、頻繁な画面共有切り替えで進行がスムーズに行かない要因になるので参加者が希望しても基本的にはやめておきましょう。
Miroというオンラインディスカッションに便利なオンラインホワイトボードツールも評判良いです。今回は普段オンラインサービスにあまり馴染みのない異業種の方もたくさんいたのと、ツールを極力少なくするために採用を見送りました。
③Messengerグループ
文章コミュニケーションに使います。参加者や業界ごとに使いやすいチャットアプリでいいです。パソコンはZOOMや開発に使うのでスマホアプリにあると便利です。全体のグループとチームごとのグループを作成し、運営メンバーで作り招待します。運営メンバーは参加者の発言に積極的にリアクションしてオンライン上で出来る最大の盛り上げ役を担いましょう！
④Facebookグループ
全体アナウンス(スケジュールやチーム発表、提出フォームのリンクなど重要な連絡事項)に使用しました。全体のMessengerグループはメッセージがすぐに流れてしまうので情報が迷子にならないように利用すると安心です。そのほか質問スレッドや自己紹介スレッドを立てたりできますが参加者全員を招待→承認の作業が必要になるのでFBグループの運用は余裕があればで大丈夫でしょう。イベント期間が長くなれば活きます。
⑤YouTube Live
ZOOM有料アカウントの機能でYouTube Liveに配信できます。一般に公開して人数無制限の見学視聴枠として利用できます。また配信終了後は動画が保存されいつでもYoutube上で見れます。公開しなくても非公開でライブ配信して保存することができるのでイベントのアーカイブとしてもオススメです。
※ZOOMにも録画機能がありますが、PCの容量を食いつぶすので非推奨。またクラウド保存機能も容量の無料枠が少ないのでハッカソン向きでは無いです。
オンラインハッカソン(2日間)の流れ
【1日目】
①オープニング（１０：００～）
②アイスブレイク
③当日の流れ説明
④開発テーマの共有
⑤チーム分け
⑥自己紹介
⑦アイディアブレスト
⑧企画発表
⑨開発開始（１３：００～）
⑩中間発表（１８：３０～）
⑪翌日のアナウンス
【２日目】
⑫集合（１２：００～）
⑬開発終了・発表資料の提出（～１５：００）
⑭リハーサルタイム
⑮最終発表（１６：００～）
⑯結果発表
⑰クロージング（～１８：３０）
⑱懇親会 in ZOOM（１９：００～）
以下スケジュールの順にこだわり強めな狂気のTips集です！
【開催前】
事前準備でイベントの全てが決まります！！！
オンラインでも同じ！！当日はなぞるだけ！！
- リハーサルを絶対にやる！！！
一番大事！！これでイベントの成否が決まります！！！！僕たちは共催団体と通しで２回やりましたがそれでも少なかったと感じました。練習を本番のように本番を練習のように！オンラインで何が起きるかわかりません脳内シュミレーションはもちろんリハーサルは入念に行いましょう！
- 役職がわかるバーチャル背景
役職や所属のわかるバーチャル背景を準備しておくとひと目でわかります。
※ZOOMで背景画像を選択すると自分の画面では左右反転して表示されますがそれで正解です。相手には正しく表示されます。
Googleスライドを使ってだれでも簡単に背景画像を作れるジェネレーターを用意しておくと、運営メンバー間でも楽だし当日盛り上がるので良いです。
↑参加者に共有したジェネレータースライド↑
- ZOOMの設定
事前にスケジュール設定する際に詳細オプションから待機室の有効無効など設定できます。退出した人が再訪問してきた際に承認が必要など、すぐに対応できず待たせてしまう場面が多く、個人的には待機室はなしでやるほうが良いです。（変な人が入ってこない様に注意）
- チーム分けとメッセージグループ作成
チームエントリーの場合は必要ありませんが、当日にチームを組むハッカソンはオンラインでやると地獄ですので事前にチーム分けは行います。スキルレベルなどチーム分けに必要な情報があれば事前にGoogleフォームなどで回収します。メッセージグループへの参加者招待なども当日バタつくので事前に行い、資料の共有などもやっときましょう。基本的に「当日やろうは馬鹿野郎」です！
- ランチ持参を前日には伝える！！
これ僕たちも直前まで見落としていましたがお昼買うタイミングが無いのでめっちゃ重要です。オンラインイベントはある程度自由に行動できる反面拘束時の融通は効きづらいです。
【集合～オープニング】
- 集合時間
僕たちは集合～オープニングまで15分でしたが、オンラインイベントでは移動がない分みんな遅刻せず時間通りに来る傾向が高めでした。初対面でオンライン１５分間沈黙はかなり気まずいのでトークでつなぐかメッセグループで自己紹介してもらうなどプチコンテンツがあると良さそうです。
- BGMを流す
音楽を流すと朝から雰囲気良い感じです。最終日の感想タイムとかスピッツ流れるだけで泣けますね。ちなみにZOOMで音楽再生はめちゃめちゃ音がデカいので音量調整はリハーサルで事前にやりましょう。
- 表示名の変更
参加者にZOOMインしてもってからまず表示名の変更を促します。
【エンジニア】草薙素子 【デザイナー】バトー
とかです。参加者がひと目で理解できるのと、チーム振り分け時など運営サイドで非常にスムーズにメンバー管理できます。
やり方
参加者(画面下)＞”自分”＞詳細＞名前の変更
※インするたびにリセットされるので注意
- ZOOMレクチャとアイスブレイク
離れていてもイベントとしての一体感を作るために大事な時間です！
・みんなでリアクションボタン押してみよう！
・肌が綺麗になる機能を試してみよう！
・カメラに収まる様に顔の前で拍手の練習！
・大定番！バーチャル背景を変えてみよう！
などアイスブレイクで楽しみながら使い方をレクチャはしましょう！
エンジニアだからといってオンラインコミュニケーションに慣れているわけではありませんので丁寧に！また、発表者は画面共有していると他メンバーの顔が見づらいので不安になります。拍手や合いの手などしやすい環境を整えましょう。
- オンラインマップの可視化
シチュエーションごとにどこにアクセスすればいいのか参加者にわかりやすく図やイラストで伝えましょう！ここがオンラインイベント初めての方には想像しにくい部分です。
【ブレスト＋企画発表＋中間報告】
- スライドの同時編集
Googleスライドをみんなで共有して同時編集します。ブレストも企画発表も全チーム同じスライドで行います。事故を防ぐためにイベント進行用のスライドとは別に用意しましょう。
※人数が増えすぎるとPCのスペックによっては動作が重くなる報告があり。
↑当日使ったスライド例↑
【開発】
- コアタイムの明示
ZOOMから退出すると承認作業や表示名のリセットなど面倒なので基本はZOOMインし続けてもらいます。ただ参加者はミュート＆カメラオフで作業に集中したい方もいると思うので確実にいてほしい時間は予め明示しましょう。
- 夜時間
解散後の夜は開発を強制していないのでZOOMは開放していませんでした。ただやはり夜に作り込むエンジニアは多いと思います。使うかは自由ですがDiscordなどリンクを踏むだけで参加できるので作業部屋サーバーを用意しておくと親切です。(Slackは運用が面倒で短期イベント向きではないです)
- スクショタイム！
当日の撮影については顔出しNGの方もいるかと思うので「今からSNS発信ためにスクショタイムにします！」など専用時間をアナウンスして設けると親切です！気合が入る開発スタート時、集中力が途切れてきた夕方などおすすめです！
スクショ撮り方
Windows10
「Windows」＋「G」でキャプチャ機能起動
Mac
「command」＋「shift」＋「3」
2日目の朝イチに参加者の一体感を高めるアイスブレイクにも…！
動画のキャプチャもなかなかエモいです！参加者が良い体験をしたと思ってもらえるように、いろいろ工夫しがいがあるところですね。
【最終発表～クロージング】
- 最終発表物の提出先
ブレストや企画発表、中間発表と同じ様にGoogleスライドを作成し共同編集します。僕たちのハッカソンの特性上アプリケーション共有が困難なためキャプチャ動画の提出を最終発表物としています。問題がGoogleスライドには動画を直接アップロードできないため、いちど運営側の共有Googleドライブフォルダに動画をアップロードしてもらうことでGoogleスライドの挿入メニューから選択できます。この方法だと最終発表物のキャプチャ動画の元データを同時に回収でき、イベント公式SNSなどの発信にそのまま利用できます。同じ目的がある運営者には現状ではおすすめの方法です。参加者にはかなり分かりづらいので、バタつきがちな最終提出時間より前の中間発表時などで同じ形式を一度やってもらうのがおすすめです。
↑例もあるとわかりやすい！↑
- 最終発表の個別リハーサル
最終発表がスムーズに行えるように、最終発表物の提出完了したエンジニアからリハーサルを行いましょう！！！ 最後でグダると台無しです！専用のリハーサル部屋(ブレイクアウトセッション)に個別に呼び出し、発表内容や発表時間、スライド送るタイミングの確認をファシリテーターと取ります。
- 最終発表
ハッカソンの集大成！最後の発表です。参加者が最高のパフォーマンスを発揮してもらえるように、聞き手側も含めた全員で最終発表を成功させる心の準備をしましょう！改めて拍手や合いの手のアイスブレイクを挟んでから発表に移ります！！
- 優勝景品と集合写真
優勝者の景品には金券なども良いですが、優勝者専用バーチャル背景といったオンラインハッカソンならではの想い出とお土産も良いでしょう！
集合写真はスムーズに行えるように進行や掛け声、スクリーンショット誰が撮るのか、撮り方など段取りしておきましょう！
【懇親会】
お疲れさまでした！！！開発時の苦労話だったり業界の未来など話せるいい時間ですね！！クロージング時に解散の○○分後に「乾杯」する旨を伝えましょう！買い出し時間など含め15～20分くらいあると良さそうです。
流行りのZOOM飲み以外にもβ版ですがこんなWebサービスもありますので色々試して見て下さい！
リアルとバーチャルが交差する瞬間にたちあえたみたいで楽しかったです🤩🤩
— おっしぃ / withARハッカソンの押田 (@Ossy_Oshida) April 20, 2020
イベントも楽しみです！
みなさんまたよろしくお願いしますー！！https://t.co/k1QYVXW9F4
→オンラインイベントの懇親会などでオススメです！ https://t.co/0rPHx7cRvh
最後に
以上になります！ちょっとしたTipsでしたがこれでWithコロナ時代をみんなで乗り越えていければ嬉しいです！！ぜひ周りのイベント運営者やエンジニアに共有して下さい！！
また今回のTipsはかなりwithARハッカソン色が強く、初開催だったので「こうしたらもっと上手くいったよ！」等のコメントも大歓迎ですよろしくおねがいします！随時更新していきます！
本ハッカソンについてより詳しく裏側知りたい！といった方はTwitterのDMなど個別にご連絡下さい！必要ならオンラインハッカソン含むオンラインでのイベントに関する相談や、代行企画、設計、運営も可能ですのでご相談下さい。
参考にした記事
リサーチした際に参考にしたサイトを添付します。(4月中旬時点)
・ディスカッション方法の参考
・当日のオンライン配信環境について
・細かい設計の部分など
・ZOOMの使い方など
※おまけ
ハッカソンの知財周りについてすごく参考になるテンプレート
この記事が気に入ったらサポートをしてみませんか？