ハッカソンのアイデア出しで5時間かかって大苦戦した話【QiitaHackathon2024】

![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795089/91ef3aef-e130-3897-afb4-b1275b0c8e63.jpeg)


こんにちは、@_sayako21 です。
2024年9月21日～22日に開催された QiitaHackathon2024 に参加してきました！
ハッカソン経験はありますが、今回は特に大変でした…。
この記事では、挑戦の過程や開発したプロジェクトについて振り返ります。

## QiitaHackathon2024 とは？

Qiita Hackathon 2024 は、日本最大級のエンジニアコミュニティQiitaが主催するハッカソンです。
イベントは予選・本選の2段階で構成され、オンラインで実施される予選と、通過したチームが参加するオフラインでの本選が行われます。

ハッカソンはテーマに沿った開発を行うのですが、Qiitaハッカソンではそのテーマが当日に発表されることが特徴的です。

https://qiita.com/official-campaigns/hackathon/2024

## 苦戦ポイント
Qiitaハッカソンは、**当日までテーマが発表されない**ので、当日アイデアから考える必要があります。
今回のハッカソンのテーマは「オープン」でした。
最初はシンプルで、考えやすそうだと思ったのですが、実際に取り組む中で意外にも難航しました。

### 納得感のある課題設定の難しさ
一番苦戦したのは、テーマに合った納得感のある課題を見つけることでした。

私は前回のQiitaハッカソンにも参加したのですが、その中でもいいなと思ったアイデアは、課題に対する解像度が高かった印象があります。そのようなチームの発表にはとても納得感があり、本当に使いたいと感じるプロダクトが多かったです。
そのため、テーマに合った解像度の高い、納得感のある課題を見つけたいと思ったのですが、それが難しく、苦労しました。

アイデア出しに時間を費やしすぎた結果、技術的に挑戦的なテーマに取り組む時間が足りなくなってしまいました。
（最初は2時間でアイデアを固める予定でしたが、実際には5時間もかかってしまいました）

### 最終決定
最終的に「家事のオープン」をテーマに選びました。限られた時間の中で技術的な難易度を追求するのではなく、UI/UXをこだわることにしました。

また、デモンストレーション中にみんなに使ってもらえるように、公開して、体験してもらうことを目標にしました。


## チームと役割分担
私たちのチームは、私 @_sayako21 と @sey323 の2人です。
役割分担は以下の通りです。

|メンバー|役割|
| ---- | ---- |
|sayako21|フロントエンド、デザイン、発表、資料作成|
|sey323|バックエンド、インフラ、生成AI、発表ロジック|

## ハッカソン当日のタイムライン
アイデア出しに時間を費やしたので、開発のスケジュールはかなりギリギリでした。
以下が当日のタイムラインです。

|時刻|	内容|
| ---- | ---- |
|10:20|	テーマ発表後、ブレストを行うがアイデアに詰まり始める|
|14:00|	「家事のオープン」「思考のオープン」の2つのアイデアに絞る|
|15:00|	「家事のオープン」に決定|
|16:00|	家事SNSの詳細を詰め、設計を開始|
|17:00|	sey323：開発環境構築<br>sayako21：Figmaでモック作成|
|18:00|	sey323：バックエンド開発<br>sayako21：フロントエンド開発|
|21:00|	とりあえず動くものが完成（投稿・集計・タイムラインの基本的な機能のついたアプリを本番環境にデプロイ）<br>発表を見据えて、作戦会議を実施|
|22:00|	個人作業（バグの改善）|
|03:00|	お互いの進捗を確認してタスクを整理し、作戦会議を再度実施|
|04:00|	個人作業（UXの改善）|
|11:00|	sey323：アプリのブラッシュアップ<br>sayako21：発表資料作成と発表準備|
|13:20|	無事に提出完了！|


## 「Kajitter」の紹介

<img width="250" alt="かじったー (1)" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795089/5ab1db10-3474-1861-7f12-0b0e35092614.png">

今回開発した Kajitter について紹介します。
こちらから利用できるのでお気軽にお試しください！

https://kajitter.vercel.app/login


:::note warn
上記のURLは予告なく終了する場合があります。
ログイン時にGithubかGoogleアカウントのユーザ名とアイコンを収集します。
:::

### 発表資料
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795089/4f5d745c-eb09-c43c-291c-636451402279.jpeg)
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795089/64d509b8-e1d8-6b1d-c158-1aefa2b9d065.jpeg)
![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795089/7b7e3e54-5ca7-0aa6-0cf3-77fbe11246dd.jpeg)
![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795089/6e29cdf4-c62d-4ef0-ff6b-50a5f5c66069.jpeg)
![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795089/9f28656c-4e70-8d4a-fa37-17f03424eeab.jpeg)
![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795089/0f16fc72-8799-9d93-e512-7c8f8b9db8b7.jpeg)

#### 使ったサイト
・ツール：Canva
・イラスト：ソコスト、いらすとや

### 解決しようとした課題と解決策
家事をする際の孤独感の解消と、達成感の醸成を目指しました。
家事の実績をSNS上で共有し、AIが褒めてくれることで、日々の家事に少しでも楽しい要素を取り入れました。
全国のユーザーと共に貢献度が可視化されるため、つながりも感じられる仕組みです。

### 工夫したポイント

より家事をやりたくなるように、以下の２つのUI/UXを工夫しました。

#### 派手な演出
家事を完了したときに達成感を得られるように派手な演出の画面を作成しました。
`vue-confetti`を使用して、家事の登録時に紙吹雪を表示させたり、🎉がゆらゆら動くようにしたりしました。
<img width="250" alt="kajitter-vue-confetti.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795089/4a8e6351-f646-7c2a-394e-0c7311e1df0a.gif">



#### パーソナライズされたお疲れ様メッセージ
家事の登録完了時に生成されるお疲れ様メッセージは、過去の家事履歴をもとに生成しています。
<img width="350" alt="kajitter-message.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795089/9e754aaa-9c09-c77e-c5a7-ce023ae18ba1.png">

自分を見てくれている人からの褒め言葉のようなメッセージがモチベーションアップに繋がります。


## 次回への意気込み
今回のハッカソンで感じたことは、日頃からアイデアを蓄積しておけばよかったなということです。
日常から課題に目を向けていなかったので、アイデア出しに時間がかかってとても苦労しました。
次回の本選に向けてアイデアを蓄積して、質の高いプロジェクトを目指します！

## おわりに
以上です。最後まで読んでいただき、ありがとうございます！
とても楽しい2日間でした。
他のチームも素晴らしいプロジェクトが多く、大変勉強になりました。
Qiitaさんありがとうございました！

## 関連技術

https://www.npmjs.com/package/vue-confetti-explosion

👆紙吹雪で利用したコンポーネント

https://qiita.com/sey323/items/9ecb1c98a21e70c11365

👆ハッカソン中に @sey323 が見つけたTips