# 20250220_EngineerGuildHackathonに参加してきました (例:20210901_LT会を開催しました) ###### tags: `ブログ記事` - [ ] 公開(ブログ公開担当者がいじるやつ) 太字斜体で書いてある内容を埋めて行ってください. 文章,画像は太字斜体の下の行に入れてください. 最初に書く時はREADMEを読んだら読むといいと思います. <br> ## 表示されない情報 ***書いた人の名前(自己紹介文と同じ名前)*** { ゆめみん } ***記事の簡単な説明(検索した時にタイトルの下に出てくる文章)*** { 初心者がデザイナーとして外部のハッカソンに初めて参加してきました } <br> ## 表示される部分 ***サムネイル画像*** { ![サムネイル](https://hackmd.io/_uploads/S1McYy1Tyl.png) } ***カテゴリ*** 以下の中から該当しそうなカテゴリを選択してください ※一つだけ選択してください - [ ] 対外活動 - [x] 活動の様子 - [ ] メンバーの趣味 - [ ] 実務訓練体験記 - [ ] NUTMEG Advent Calendar 2023 ***タグ*** 以下の中から該当しそうなカテゴリを選択してください.当てはまる物がない場合は適宜追加してください. 言語 - [x] HTML - [x] CSS - [ ] Python - [ ] Go - [ ] Ruby - [ ] JavaScript - [ ] TypeScript - [ ] Dart - [ ] Rust - [ ] Kotlin - [ ] Swift フレームワーク・ライブラリ - [ ] Ruby on rails - [ ] Vue.js - [ ] Nuxt.js - [ ] React.js - [x] Next.js - [ ] Gin - [ ] Flluter ツール - [x] GitHub - [ ] ターミナル - [ ] WSL - [ ] Ubuntu - [ ] Docker - [ ] Raspberry Pi - [x] Figma 分野 - [ ] チームづくり - [ ] フロントエンド - [ ] バックエンド - [ ] インフラ - [x] Web-design - [ ] API関係 --- ***以下に本文を記載してください*** # はじめに <img width="50%" height="50%" src="https://hackmd.io/_uploads/ry50yBd21g.jpg"> こんにちは、ゆめみんです。先日小学校の同窓会に出席してきたのですが、タイムカプセルからカービィが出土しました。 当時の私に、10年後はもっとたくさんのカービィに囲まれて幸せだよと伝えたいです。 </br> ![image](https://hackmd.io/_uploads/S1QTWxu21g.png) [EngineerGuildHackathon公式HP](https://event.gaishishukatsu.com/hackathon/2025_march?utm_source=twitter&utm_medium=twitter&utm_campaign=march) 今回のブログでは、2月末に開催された**EngineerGuildHackathon**に、NUTMEGメンバーと共に参加してきたので、そのことについてお話ししたいと思います。 詳しい技術の話などはこれから**他のメンバーがブログで発表してくれる**と思うので、私からは、ざっくりとしたハッカソン全体の流れと個人的に学びがあった点をピックアップして発表したいと思います。 # 参加に至るまで もともと、NUTMEGから はるじょー、准教授、うっちーで参加予定だったところに、デザイナーとして誘ってもらいました。 ![image](https://hackmd.io/_uploads/Hk9lo11pkg.png) ###### 准教授からの誘いに慄く様子 外部のハッカソンは初めてでしたし、デザイナーとしてもまだまだ経験が浅いので、みんなについていけるのか、チームの力になれるのかという不安がありました。 しかし、 </br> * 1からプロダクトを作る経験が得られる * githubを実際に使う期会が得られる * フロントエンドも学べるかも * <b>100万円(賞金)が手に入るかも...</b> </br> など、たくさんのメリットを感じたため、みんなと一緒に参加させてもらうことにしました。誘ってくれてありがとう。 # 事前準備 今回のハッカソンは以下のようなスケジュールでした </br> |日付| スケジュール | | -------- | -------- | | 2/22 | 事前説明会(Zoom)| | 2/23-2/28| 予選開発期間| | 3/1 | 予選発表会(Zoom)| | 3/2 - 3/7 | 決勝開発期間 | | 3/8 | 決勝発表会(東京) | </br> 開発期間は1週間で、予選で選ばれたチームが決勝に進出する流れです。 事前説明会の前に、准教授が事前の作戦会議として、メンバーそれぞれの目標などを話し合う時間を設けてくれました。 正直私は、前述したとおり「ハッカソンで開発の経験が積めたらいいな~」くらいのふんわりとした目的意識だったのですが、他のメンバーは<b>真剣に決勝進出を見据えており、面構えが違う...と関心し、私も頑張ろうと思えました。</b> # テーマ決め 事前説明で発表されたテーマは、 ### 「テクノロジーを使って、生活の困ったを解決」 でした。想像よりも範囲が広くてびっくりすると同時に、難しそうだと思いました。 テーマ発表後、figjamを使ってみんなでアイデアを出し合いました。ハッカソンは、**アイデア出しの段階が一番重要なのだそうです。(はるじょー談)** figjamを使ってブレインストーミングを行いました。 <image width=60% highta=60% src="https://hackmd.io/_uploads/HyrzQ8d2yg.png"> みんな出涸らしになるまで出していました。 ![image](https://hackmd.io/_uploads/r1G_oJkpyl.png) ![image](https://hackmd.io/_uploads/SkmWUUOhJx.png) ![image](https://hackmd.io/_uploads/SJwDoyyaJx.png) ![image](https://hackmd.io/_uploads/B1NKjJkayg.png) ## 最終決定したテーマ 最終的に採用されたお悩みが、slackであかりんが出してくれたこちらでした。 (ありがとう!) ![image](https://hackmd.io/_uploads/SJZFc8Ohkl.png) このお悩みをベースに、 ### 食べたいものが決まらない時に使うごはん屋さんレコメンドサービス を作ることに決定しました! ちなみに、最終決定の直前までテーマの候補に挙がっていたもう一つのお悩みが<b>「ペットボトルを飲み残して放置してしまう」</b>だったので、一見テクノロジーではどうにもならなさそうな意見でもアイデアの種となりえるのかもしれないなと思いました。(飲み残しについて真剣に討論するのも面白かったです) そういった点でも、アイデア出しの段階はたくさん時間を取った方がよいのかもしれません。 その後、ペルソナを設定したり競合サービスを調査したりして、サービスの解像度を高めていきました。ここでは、NUTMEGのHPチームでのペルソナ設定の経験を活かせたと思います。 # プロダクトの開発 こちらが今回制作したプロダクト<b>「NeedsFoods」</b>になります! ![image](https://hackmd.io/_uploads/ByxWmYd3Jg.png) ![image](https://hackmd.io/_uploads/HJqLEFdn1e.png) ![image](https://hackmd.io/_uploads/BkeK4Fuhkl.png) ![image](https://hackmd.io/_uploads/H173VF_nJl.png) ![image](https://hackmd.io/_uploads/SJDaNKd2kl.png) [実際のプレゼン資料](https://www.canva.com/design/DAGgX9Af8yA/s15rkgjGwL_5BMSHgC6Y7w/edit) ## デザイナーとしての業務 今回、デザイナーとして手を動かして担当した業務は以下の通りです。 <b> * ロゴの作成 * デザインシステム(色、フォント、文字の大きさ)などの設定 * イラストなどの素材の作成 * ワイヤーフレーム(要素だけの画面)からデモ画面(デザインのついた画面)を作成 </b> 女子大学生というペルソナに基づきポップで愛嬌のある印象を意識したり、スマホで操作する前提で片手で押しやすい位置に大きくボタンを配置したりなど、**ひとつひとつに意味があるデザインをすること**を心がけました。 ![IMG_0508 (1)](https://hackmd.io/_uploads/r1T0vtu3kl.jpg) ###### ロゴとカラーの検討の様子 手を動かす業務以外にも、実装予定の機能がプロダクトの軸に沿っているかなどを話し合ったり、ワイヤーフレームなどをみんなで批評する時間もあり、とてもいい経験になりました。 また、ロゴ作成の際など、メンバーが「これは微妙」 「なんか違う」など、**否定的な意見をちゃんと伝えてくれた**のもありがたかったです。 しかし、なぜ微妙に感じたのか、どうすれば解消できるのかを考えるのは難しく、今後はこのようなことも言語化できるようになっていきたいなと思いました。 ## 個人的にうれしかったこと 今回、事前の作戦会議で私が「フロントを触りたい」と伝えていたため、githubを用いたコード開発を少しだけ手伝わせてもらいました。 **pullとpushがギリ分かる**くらいの理解度だったので、プロの3人に初歩的なことを聞きまくりました。 実際に開発に携われたことで、**今まで抱えていた「自分のやりたいことは分かっているけどgithubやターミナルでどう操作すればよいか分からない」という悩みが解消されました!** メンバーが当たり前のようにつけていたブランチ名(featとかfixとか)も、最初は何!?と思いましたが、教えてもらったりネットで調べたりするうちに理解できるようになりました。 私が担当したのはコンポーネント1個(たぶんうっちーとかが5分くらいで作れちゃうやつ)でしたが、それまで知識の中だけだったgithubの一連の流れを実際に体験することができて本当にありがたかったです。おかげさまで私は今、HPチームで元気にブランチを切れています。 ## 懺悔 准とはるじょーが予選発表会前日の深夜(朝!?)までスライド作成、私は早朝のバイトが入っていたので早めに寝させてもらいました。 発表者ははるじょーがやってくれるとのことでした。 ![image](https://hackmd.io/_uploads/BJSXsk1pye.png) 私たちのチームは13時ごろからの発表でした。 </br> ![image](https://hackmd.io/_uploads/Hk8NsJkTJl.png) **あり得ない寝過ごしを「おはよう」で済ませてくれたメンバーのみんなの寛容さに感謝します。** # 最後に 初めは上手くやれるか不安でしたが、メンバーの熱量に後押しされ、楽しく進めることができました。また、事前に目標としていたことも自分なりに達成することができました。 決勝進出は叶いませんでしたが、とても有意義な時間を過ごすことができて、参加した意味はあったと思っています。 このような充実した体験ができたのも、誘ってくれたNUTMEGの3人のお陰です。ありがとうございました!そして、お疲れ様でした! 自分は何も分からない初心者だから... もう少しスキルが上達してから... そんな人こそハッカソンに参加する意味があると思います。**初心者だからこそ、小さな発見で成長でき、達成感を感じることができるのではないかと思います。** 自分たちの発表や予選で発表した他のグループの制作物を見たうえでの感想も述べたかったのですが、寝坊してすべてを聞き逃してしまったので、**他のメンバーがブログで発表してくれることを期待したいと思います。** <img width="50%" height="50%" src="https://hackmd.io/_uploads/SkfdaMKhyl.png"> ここまでお読みいただきありがとうございました!