ハッカソン『Dots To Code』に参加してきました

チーム名『404 サウナ NOT FOUND』で『あひる』として参加しました。
ウェブアプリ『おやこでつくる すまほえほん』を発表しました。

Dots To Codeとは？

期間はハッカソンとしては長め（？）の1ヶ月。テーマとして「ギャップを埋めるものづくり」が与えられていました（今見たらフリーテーマも可能だったけど）。

スケジュールは以下の通り。

Q.なんで参加したの？

A.Progate教材無償提供につられたから

わたしはエンジニアスクールを出てナレーターをやりながら転職活動をしていますが、「コードと完全に縁のない生活はもったいない気がする」「ただエンジニアとしての就職は違う気がする」「年齢的に遠回りでキャリアを作るのは危険すぎる」「自分を掘り下げるためには外部からの大きな刺激が必要だ」とモヤモヤした気持ちを抱いていました。

そんなときに現れたのが、「Dots To Code」です。「ハッカソン参加のハードルを下げたい」という主催者様の思いを反映して応募要項には「希望者にはProgate教材無償提供するよ！途中で難しいと思ったらリタイアしても大丈夫だよ！」という文言が。
それは、情報のキャッチアップはゆるゆるしていたものの1年近くまともにコードを書いていない&期間中に検定試験を控えていたわたしにとって魅力的すぎる内容でした。

（試験はちゃんと受かりました！）

チームについて

知らない者同士で組むランダム編成（プチトラブルあり）

申し込みの際に『個人で申し込むがチームで参加したい』という意思表示をしていたので、運営さんによって同じような方たちとチームを組んでいただきました。

が、4人チームなのに動いているのは自分ともう1人だけ。未経験2人での開発に不安を覚えていたところ、追加メンバー募集の書き込みがあったのでそちらに2人まとめて異動させていただきました。
ちなみにこの時点ですでにキックオフからほぼ4日が経過しており、プロダクト内容を発表する中間報告まであと5日という状況でした。

役割分担は特になし。
基本的にはとりあえず1人1ページは作って、あとは臨機応変に対応するというスタイルでした。わたしが他にやったのは、ページごとの機能の洗い出しやスライドの叩き台作ったくらい。
ただUIデザインだけは、明確に企画案を出してくれた方に担当していただきました。（日中はお仕事があるのに、3日くらいで爆速で仕上げていただいて感謝しかないです）

【余談】なんで『404 サウナ NOT FOUND』（※チーム名）？

懇親会で何度か聞かれたのでこちらでも。

Chat GPTに「メンバーの名前を使ってアナグラムで何か作って」と頼んだところ、5案中4案にサウナの文字が。しかし、当日話し合いに参加していたメンバーは誰もサウナを嗜んでいなかったので、「404 NOT FOUND」をつけることにしました（ただし、不参加メンバーの方はサウナーだったので虚偽申告チームとなりました）。

作ったものについて

プロダクト概要

『おやこでつくる すまほえほん』というWEBアプリを開発しました。

ターゲットは、読み聞かせが必要なお子さんをお持ちの子育て世代に設定。彼らの持つ「親子のコミュニケーションや子どもの発育として『読み聞かせ』はとても大切だけど、現実的は経済的にも時間的にも厳しい…」という課題に着目しました。

使い方はとてもシンプルで、親子で交互に文章と画像を登録して一緒に1冊の本を作ろう！という流れです。交換日記で日記の代わりにお話を書く感じ。

技術について

フロントはReact、バックはFirebaseを使用しました。技術もシンプル。

ドヤ顔でデータベース案を作ったあとにFirebaseがリレーショナルデータベースじゃないことに気付き、慌ててairtableやsupabaseについて調べていたらリーダーが根性でFirebaseを飼い慣らしてくれました。感謝しかないです。

（検定試験前日＆発表1週間前でこれはしんどすぎる）

最初はモバイルアプリ開発も検討しましたが、
①親は忙しい隙間時間に使用する可能性がある
②子どもは学校のタブレットを使用する場合、アプリのインストールが許可されない場合がある
などといったユーザー（親と子）の使用環境を考えるとデバイスを問わず使えた方が良いよねということでWEBアプリになりました。

中間報告会で「忙しい親の作業を軽減するために生成AIによる補助機能をつけてみては？」というアドバイスをいただいたのですが、「親が子を思う時間まで時短したくないよね」と明確な意思で採用しない判断ができたのが個人的に良い経験だったと思っています。便利機能って無限に採用したくなるのですが、そんなときによく考えられたコンセプトやMVVが判断の柱として活躍してくれるんだろうな。

Pitch Dayでのプレゼンで工夫したことについて

ハッカソンなので大事なのは技術とは分かっているのですが、個人的に頑張ったぞと思っているので紹介させてください。

①相対的に見た自プロダクトの立ち位置を確認した

最終報告会の投票はすべてのチームの発表が終わったあとに行われました。Pitch Day当日も同様のスケジュールだとしたら、投票時に思い出してもらえるような強い印象を残す必要があります。そのため、自分たちだけが持つ強い差別化要素とは何かを探りました。

①最終報告会が2グループに分かれて行われた②チーム名&プロダクト名しか一覧で公表されていなかったので、発表時に感想が書かれたJamBoardや中間報告会で使われたスライドを参考にスプレッドシートで出場チームの情報を一覧にまとめ、自プロダクトのアピールすべき個性を探りました。

結果的にはどこのプロダクトも方向性の被りなどは見られなかったので、ストレートに「子育て世代向けアプリ」としてプッシュすることにしました。

②印象に残るパワーワードを設定した

発表チームは20チーム。先述の通り、投票時までに思い出してもらう/覚えていてもらう必要があります。そこで、記憶に残してもらうものを意図的に作りました。それがパワーワード『エンドレス読み聞かせ』です。チームメンバーの中に自プロダクトの想定ユーザーがいて、絵本の読み聞かせが時間的にも経済的にもどれだけ大変なのかというのを具体的に話してもらったのですが、その際にとても印象に残ったので採用しました。

ちなみに『エンドレス読み聞かせ』というのは、読んで字の如く読み聞かせがエンドレスで続く現象のことです。キーワードを覚えてもらうために、スライド自体にも工夫をしました。（デザインについては薄目で見てください）

デザインはさておき、ハッカソンに参加する人ならコードが書かれてたら何が書かれているかとかエラーがないかとか能動的な行動をするのではないかと考えて貼り付けました。実際ここを映している際に会場の空気がふわっと和らいだり、Xでもここの写真を投稿していただいたりしたので、目論見が当たったと言ってもいいのかな？と思っています。
（ちなみにこちらのポストの引用許可をいただくためにDMしたところ、「エンドレス読み聞かせ印象に残ってます」と言っていただきました！）

③自分ごと化してもらえる情報を追加した

主催者も参加者の多くも学生であることを踏まえると、最終報告会でのスライドの「これは読み聞かせ問題を解決するアプリです！」という導入は情報が足りていないと気付きました。人は自分から遠いと感じる話は、向き合う真剣度が下がりがちです。
そこで、「そもそもなぜ読み聞かせが重要なのか」という理由を説明してから「そんなに重要な読み聞かせがなぜ難しいのか」と現状を説明する流れを作りました。

④UIとスライドのイメージをそろえた

（実際にアプリを触ってもらえたかは分かりませんが）アプリかスライドのどちらかのイメージだけでも覚えてもらえたら自動的にもう一方も思い出してもらえるように、UIで使用したフォントや色・画像をスライドにも使用しました。

いざ書き出してみるとそんなに大したことはしてないのですが、自分が何かを魅力的に伝えようとするときは機動力が上がるということが分かったので良かったです。

ほか感想

今回の経験で得た最も大きな気付きは「チームで開発するってコミュニケーションが大事だな？でも難しいな？？？」です。言葉にしてみれば当たり前すぎるのですが、人間は二酸化炭素を吐くという事実を石灰水を通して実感した程度には現象と向き合えたな…という感じ。

先述の通り、今回は全く面識のない者同士でチームを組みました。一応簡単なプロフィールは交換しているものの、どういう価値観を持っているのかみたいな根底にある人間性は全然分からない状態です。
それでも時間が押しているので企画会議をする必要があり、わたしたちはアイディア出しをしながら同時にお互いを知って信頼関係を構築する必要がありました。

ただまあ、1回1時間程度のブレストを2-3回やったくらいでは全然相手のことなんて分かるはずがありません。この声は誰であるとか言語化しやすい個人情報とかは分かったものの、どういう距離感で接するのを好む人であるかとか話しながら考える人かじっくり考えをまとめてから話す人なのかとかは全くです。

話しかける際わずかに緊張感を持つようになったのは、具体的に作り始めてからでした。実際に手を動かしていくと、小さな疑問がいくつも生まれてきます。それは技術的なことだったり、企画的なことだったり様々でした。質問や確認を投げ、返信が来て、さらにそれに返信を送り…ということを繰り返すと、だんだん自分は誰かの余計な仕事を増やしてしまっているのでは？と申し訳なくなってきます。わたしはハッカソン経験も実務経験もないので、技術も視点も本当に何一つ自信が持てなかったのです。

緊張が和らいだのは、最終報告会のスライドを（ほぼ）徹夜で作っていたときでした。その日は初めてチーム全員が集合できた日で、各々がコードを書いたりコンフリクトと戦ったりスライドを作ったりと別の作業をしつつ必要に応じて通話をしていました。

わたしはスライド組だったのですが、「このページで伝えたいことは◯◯です」という雑なアウトラインだけが投げられた状態で複数人がそれぞれ作業を進めるとまあレイアウトとかぐっちゃぐちゃになるじゃないですか。それでさらに個人判断でアウトラインになかったページが作られたりしているのを見て「原稿の流れをどう作り直そう？」なんて頭がいっぱいになってました。

とりあえずスライドの意図確認とデザインの微調整の許可取りだけしようとリーダーに話しかけた際に「わたしはそういう部分に目が届かないので助かります」「みんなそれぞれ違う得意分野を持ち寄って1つのことをやるっていいですよね」と返されて、一気に心が軽くなったんですよね。一人で勝手に卑屈になっていたけど、もうちょっと自信持って出しゃばっていいんだ？？みたいな感じ。そしてその結果の一部が前章です。

チームの空気に慣れて自分のポジションが（キャラ的にもスペック的にも）把握できるというだけで、人間とはこんなに動きが変わるですね。企業が社内報作ったりピザパーティー開いたりする理由がなんとなく分かりました。

今回の経験を活かしてすぐさま自分が何かが出来るとは思っていませんが、今回得られた視点を元にチームやコミュニティについて考えていけたらと思います。

Dots To Codeとても楽しかったです。初めてのハッカソン参加だったので残念ながら他のと比較してどこが良かったなどは言えないのですが、おかげさまでまたハッカソンに参加したいなと思える体験を得られました。
運営メンバー、スポンサーさん、審査員の方々、ボランティアスタッフの方々、素敵な機会をありがとうございました！
サウナメンバーは福岡にお越しの際連絡ください。ごはん行きましょう〜

長い文章を読んでいただき、ありがとうございました。