JPHacks2021にデザイナー枠で出た
以前ブログで書いた記事をお引っ越しさせました。
初ハッカソンでデザインを担当したときの話です。
JPHacks
PHACKS（ジャパンハックス）は、学生を対象にした日本最大規模のハックイベントで、2014年より全国の複数都市で開催されています。 今年は全国を6ブロックに分けオンラインで開催されます。
1週間の事前学習期間「Learning Sprint（ラーニングスプリント）」を経て「Hacking Sprint（ハッキングスプリント）」でチーム開発を行い、そこから選ばれたファイナリスト達がオンラインピッチをおこなう「Award Day（アワードデイ）」で構成されています。
Award DayではJPHACKS Innovator認定のほか、様々な賞を用意しています。参加することで、皆さんの新しい未来を切り拓く場になることでしょう。
簡単に言うと、オンラインで1週間開発→発表→15チームが次に進み二週間開発→発表という流れのハッカソンです。ハッカソンでは中期的な長さだと思います。
なんで出たか
理由はシンプルに誘われたから。会津大学はソフトウェアを作る授業はあります。ただし、ソフトウェアを作る以前のアイディア出し、ペルソナ策定、市場調査、デザインづくりなどの授業が皆無です。私は趣味でデザインをしているレベルだが、他にデザイナー枠がいなさ過ぎて誘ってもらいました。
チーム構成
ビジネス １名
エンジニア Android １名
エンジニア バック ３名
デザイナー １名（←これ）
エンジニアでなくてもアイディア出し、デザイン、動画作り、スライドづくり要員が一人いると、ハッカソン中にエンジニアの負担を軽減できるので意外と役に立てました。
ちなみにチーム名は「ヒト息子 デスマダービー」。色々、本当に色々あってこれになった。
やったこと
9月 アイディア出し
実は今回のJPHacksは最終目標ではありませんでした。もともとチームでアイディア決め→開発→リリースしたいとなった時に、時期的にもちょうどいいJPHacksが選ばれました。もし上位に行けばプロモーションにも使えますし、チームとして一度活動する経験も得られます。
ということで他のチームよりアイディア出しをガチで行いました。私はビジネス担当の人に手取り足取り教えてもらいながらお手伝いしたって感じです。
まず初めに分野を観光系に絞りました。その後は市場調査としてスタートアップ企業を100社ほどScrapboxに調べまくりました。その後は１日１個サービスのアイディアをビジネス担当と考えてました。後半になるとアイディアが出尽くして変なサービスしか思いつかななくなって結構きつかったです。
９月はリーンキャンバスなどを利用したサービスの考え方や、VCという単語など、新しい知識を得られた期間だったと思います。ビジネス系を知らなすぎるせいで、逆に新しい知識を得られるのが楽しかったです。
10月 UIデザイン
上記のことから大体サービスの目的が決まったのでFIgmaのデザインに入ります。と思いきや、２週間くらいは機能決めで終わりました。アバウトな機能しか決まっていなかったので、ロゴ、画面数、属性の種類、デザインなど8.5割型私が決めなければいけなかったからです。
参考にするために初めてTikTokやInstagramをほぼ初めて使い、「やっり自分は隠キャだな」と思いながらUIを考えていました。
その後やっとデザインを本格的に考えます。これも２週間位かかりました。実際に作ると穴が見えたり、デザインが良くてもユーザビリティー的に無理な画面を作ってしまったりと調整が相当大変でした。プロフィール画面などは５時間くらい悩みましたし、毎日Auto Layoutばかり唱えすぎて深夜に叫びたくなりました。結局完璧に終わったのはJPHacksが始まるギリギリ。結局MVP策定で大部分が作らない（右画像の青い部分）ということになりましたが…
加えて馬鹿な私はコンポネント化せずにFigmaで作り始めたので、途中にVariantsの整理で相当時間がかかりました。最終的にも結構ガイドラインが汚くなってしまった（左画像）のでエンジニアの人には申し訳ない気持ち。ガイドラインもAuto Layoutと内部リンクでFigmaに書いてしまいましたが、今思えば普通にNotionとかでよかったかなと反省。
10月18 – 22 Learning Sprint
少し時系列が前後するがしますが、JPHacksは事前学習としてLearning Sprintという勉強会的なものを開いてくれました。ただ、私はデザインで死んでいましたし、ビジネス担当、エンジニアは強すぎて勉強会の内容だと生ぬるいようだったので、結局１日くらいしか参加しなかった気がします。
10月23 – 30 ハッカソン開始
ここから一週間のハッカソンが始まりました。開始するとビジネス担当とデザイナーは結構楽で、エンジニアは大学で深夜まで死んでいました。残った仕事はFigmaでのプロトタイプ作成でした。
全体通しての反省点としてはデザインに法則が弱かったことと、完璧に考え切れていなかったところの2点です。
例えば、画面のサイズが違う場合に、「この要素の幅はそのままか、余白の幅をそのままにすればいいのか、それとも比率維持でいいのか？」を質問された時にはっきりと答えられませんでした。正直なんとなく決めていた部分もあったので、エンジニア側としては統一感のないデザインに見えてしまっていたと思います。
加えてUIの知識が足りなさすぎた。例えばステータスバーは「この色しかできないけど、どうする？」的な質問をいくつかもらいました。私がプログラミングの知識があれば事前にそこを回避したデザインにでき他と思いますが、特にAndroidについての知見がなさすぎました。一度UI作りだけでも体験したほうがいい気がいいします。
発表会
最終日には1分間の発表があったので、プロダクトを操作する動画をPremire Proで編集したり、スライド作りをしました。他の大部分のチームに比べれば結構いいデザインだったと思います。どちらもGitHubに載ってます。
一週間後
結果、Award Dayに進む16チームには選ばれませんでした。（もし選ばれると＋2週間開発できる）
理由としてはアイディアがハッカソン向きではないってことらしいです。確かにAward Dayに進んだプロダクトを見ると、面白いかつ分かりやすいものが多かったです。実際に製品化はコスト、需要の面で少し難しそうだけれど、Twitterなどではめちゃくちゃバズりそうなもの。対してこちらはガチでサービスをローンチするために考えたアイディアであるので、実装できたのは全体の20%ほどなのでハッカソン向きでは無かったと思います。ただ、「実用化」の評価項目があったので、そこは少し高く評価してもらえたんですかね？という気持ち。
後悔はないですが、私は初めてながらめっちゃ頑張ったし、ウチのチームのエンジニアとビジネス担当の人が高い実力を持っていることを知っているので余計悔しくはあります。
最後に
今回初めてアプリ全体のUIを作ったが、エンジニアよりデザイナーの方が楽しくね？と正直思えてしまいました。ビジネス、デザインがアイディアを考え、それをエンジニアが実現させるという流れで今回のハッカソンは進みました。私は「自分で作る」ということが重要なのでエンジニア側だと少し物足りないと感じたと思います（そもそもそちらに行けるほど実力もないが）。エンジニアは与えられた要件の中で、内部的な構成を工夫して楽しめそうでした、私はそれよりも直接ユーザー触る目に見える場所やサービスの根幹を作れる場所で動きたいと改めて思えました。
しみじみこんなことを考えられたので、私の人生を20度くらいは動かしたイベントとして、JPHacksに参加してよかったと本当にお思います。
Adobe税を払うために使わせていただきます