オンラインハッカソンの進め方【デザイナー編】
こんにちは。
オンラインのハッカソンに参加してオフラインよりも開発に対する難しさを感じたので、私がやった方法を書いてみました。忘備録的な記事です。
ついでに、わかる範囲で「このときエンジニアさんはこれをしてる！」とかも書きました。こちらは超ざっくりです。
せっかくなので、先日参加したOpen Hack U 2020 Online Vol.3で作ったCallrun↓というアプリの作成過程を例に紹介します。
1️⃣チームメンバーと作るモノ・ざっくりした枠組みまで決める
アイデア出しは、LINEのノートで行いました。
「ハッカソンのアイデア」というノートにコメントで、ひたすらアイデアを書き込んでいきます。
キックオフ後、以下のことを決めるためのミーティングを行いました。
・技術選定（私以外エンジニアさんだったため、ここでついでに決めちゃいました。）
・役割分担（開発、プレゼン作成など）
・ざっくりとした画面遷移
・次の進捗報告ミーティングの設定（ハッカソン中は定期的にミーティングすることをオススメします。）
チームメンバーとZoomのホワイトボードを利用しながら、これくらいざっくりした画面遷移で認識をすり合わせました。
エンジニアさんとはここら辺まで一緒に考えたら、あとは個人作業で都度、進捗報告が良いと思います。
さぎょいぷは出来たらした方が良いです。お互いの様子がわかるので🙆♀️
また、この時点で「このサービス面白いかな？」と疑ってドックフーディングしてみることが大切です。
私たちの作ったサービスは「運動中のみ通話機能が生きる通話アプリ」だったため、とりあえず走りながら通話してみました。楽しかったです。
2️⃣ロゴorUIを作ろう
エンジニアさんにはざっくりした画面遷移を共有してあるので、ロゴかUIどちらからやっても良いです。気分がノった方からやりましょう🙆♀️
と言いましたが、UIの方がオススメです。どっちでも良いけどね。
✨ロゴ
今回のアプリは、コロナ渦で問題となっている「走る＋コミュニケーション」を達成するモノだったため「疾走感＋会話」的なモチーフをたくさん案出ししました。
最終的に出来たモノがこちらです。
📱UI
最初にすり合わせた画面遷移だけだと、意外と抜け落ちてる部分があったりするものです。エンジニアさん側でもじわじわと足りない画面があることに気付き始める頃でしょうか。
足りないな〜と気付いたら、すぐにエンジニアさんと相談しましょう。
慌ててレシートの裏に描いたモックが出てきました。こんな感じで良いので言葉＋図で伝え合うと良いです。
ちなみにこれは、リンク共有の画面が足りなかったようですね。
最終的に出来上がったUIはこんな感じです。
最終版は開発しつつ、エンジニアさんと相談しつつという感じで完成していきました。やっぱり定期的な相談大事です。
👨💻その頃のエンジニアさん（ざっくり）
・コア機能の開発
・デバッグ、バグ取り
3️⃣CSSを書く（Webの場合）
エンジニアさんと自分の余力・スキルに相談しつつというお話でもありますが、なるべくデザイナーさんがCSSも書いちゃいましょう。
✅理由
・CSSによるデザインの手戻りがなくなるから
・思った通りのデザインにできて、クオリティの高いモノになるから
・エンジニアさんの工数が減って、開発に集中してもらえる
どこに書けば良いかわからないときは自分で調べたり、どうしようもない時はエンジニアさんに質問しましょう。（様子見つつ）
ネイティブ( SwiftとかKotlinとか )でハッカソンに挑んだ際はエンジニアさんに丸投げしてて、大変申し訳ない気持ちでいます。研究落ち着いたらflutter勉強したい。
👨💻その頃のエンジニアさん（ざっくり）
・デバッグ、バグ取り
・動作を安定させるために頑張っている
そしてもう一度ユーザーテストしてみましょう。新たな課題や野望が見つかるはずです。
4️⃣プレゼン資料のデザイン作っちゃおう
オンラインハッカソンの時はGoogleSlidesがオススメです。
同時編集可能・割と誰でも使いやすい・発表前の変更にも耐えれると良いことづくしです。
さて、スライドマスターという機能を使うと爆速でスライド資料のデザインが出来上がるのでサクッと作っちゃいましょう。
スライドの中身は言わずもがな、エンジニアさんやチームメイトと相談しながら作りましょうね（ざっくりした流れは誰か1人が作ると良いです）
一応、良さそうなページがあったので貼っておきます。
あとは、図にできるところは図にするとみやすくて良きです。箇条書きとか。
👨💻その頃のエンジニアさん（ざっくり）
・デバッグ、バグ取り
・動作を安定させるために頑張っている
・スライドの技術説明について書いてくれる←New!
5️⃣時間が余った
これで残るは発表だけですね。
時間が余ったら誰が発表するか決める、最後の動作確認などやれることは全てやっておきましょう。
🎉さいごに
オンラインでのハッカソンは普段よりも期間が長めのものが多いと感じたので（サンプル数2）心に余裕を持って取り組めます。
その反面、情勢の関係で集まって開発できない分、チームメンバーとの意思疎通が難しいという側面もあります。
そのため、ミーティングは本当にすっごくめっちゃ大事なので、毎日何時にしよう！とか決めて定期的にやった方がいいです。
あとユーザーテストはなるべくやった方がいいです。オンラインハッカソンと関係ないですが、やるとこんな↓いいことがあります。
・自分たちのサービスの強み、弱みが見つかる
・既存との差別化ができる
・デバッグ
・チームメンバーとのアイスブレイクになる
「難しそう〜やめよ！」と思わずに興味があったらぜひチャレンジしていただきたいです。ハッカソンはめっちゃ楽しいですよ！
以上、最後まで読んでいただきありがとうございました。
いただいたサポートはプロダクト開発関連の書籍購入に充てようと思います🙏