はじめに
こんにちは！@shun_pです。前回、初めて出たハッカソンで優勝したことを記事にしました。
私は兼業エンジニアで、ビジネスサイドやクリエイティブをメインとしていますが、私がハッカソンに参加するにあたって思考したプロセスは「一般的なエンジニアがハッカソンに出る時と違う考え方で参考になるのではないか？」と感じまして、皆さんがハッカソンにでる際の参考になればと思い、ハッカソン裏側編 を記事にしました。私には大した技術はないので、技術の話ではなく思考プロセスについてまとめています。
ハッカソン数日前：事前リサーチ
ハッカソンは土曜日と日曜日に行われました。1人で参加するということもあり、どう進めていけばいいのか不明なことが多かったので、少し下調べをしたり準備をしました。
行った準備は以下です。
・そもそもハッカソンとは何か、どう進めていくものなのか調べる
・今回のハッカソンのルールを調べる
・環境構築をする
Qiitaで「ハッカソン」で調べたところ、「プレゼンの準備ができなかった」、「プレゼンの手が回らなかった」という記事や感想がいくつかでてきました。確かに起きそうな話で、ギリギリまで開発しているとプレゼンに手が回らなくなってしまうとのこと。複数人で参加するハッカソンでは、プレゼン専門の人が1人いた という記事もありました。
事前に分かったこと1:
ハッカソンではプレゼンが大事で、多くの人が準備不足になりがち
そして、続いて参加するハッカソンの審査ポイントが数日前に発表されたので内容を確認しました。
### 日程
1日目
9:00 テーマ発表
9:30 ハッカソン開始
2日目
17:00 成果発表（プレゼンテーション）
17:30 結果発表
### ルール
期間内であれば開発時間は自由
成果発表ではコードと発表スライドを提出
発表は1チーム3分間
CI/CDやテストは不要
技術選択は自由
期間外の事前準備は可能（環境構築等）
テーマは当日発表
チームは1人から4人まで
質問や壁打ちはGatherで受け付け
### 審査ルール
・技術的に優れているか (20%)
・ユーザー価値につながるか(30%)
・UI/UX, 完成度 (20%)
・プレゼンテーション (30%)
なるほど、今回のハッカソンは技術力を競うよりもプロダクトとしての価値をつくれるかに比重を寄せた配点なんだなと分かりました。
事前に分かったこと2:
技術的な優位性やUIよりも、ユーザー価値とプレゼンの配点めっちゃ高い
そのあとさくっと環境構築をしたあと、今回のハッカソンの主催者でありJISOUの運営者である、@Sicut_study さんのハッカソンに参加した記事を見つけました
記事の中に書いてあったことは
・ハッカソン予選落ちして悔しい
・技術評価の点数高すぎない？ユーザー価値ないプロダクト評価してもハッカソン意味なくね？
・テーマに沿ったプロダクト作らないとダメじゃね？
という悔しさと
・ハッカソンで頑張ると女神が降臨する
ということが書き連ねてありました。
事前に分かったこと3:
@Sicut_study (渡邉 臣 | JISOU) はビジネス寄りのハッカソンをやりたいと思っていて、それが配点にも表れている！！
事前準備の段階でこの3つを知ることができました。
- ハッカソンではプレゼンが大事で、多くの人が準備不足になりがち
- ユーザー価値とプレゼンの配点めっちゃ高い
- 今回のハッカソン企画者はビジネス寄りハッカソンをやりたそう
ここまで調べる必要があるのか？と疑問に思われるかもしれませんが、私はBtoBで大企業向けの法人営業・提案・受注活動や、YouTubeの動画をたくさん作ってきたこともあり
採択者の好みや課題を知ること (企業の社内論理を知る)
プラットフォームのアルゴリズムをハックすること (YouTubeやTikTokでインプがでる仕組みを把握する)
の2点はむちゃくちゃ重要だと思っています。
こうしたことを長年やってきたこともあり、リサーチできる場合はこういったことを調べる様にしています。調べた上であえて定石を外しに行くこともあるのですが、とりあえず調べたり思考をめぐらせます。
今回も、もはや習慣になっているこの行動によって、なんとなく、今回のハッカソンの評価アルゴリズムは分かったなというところで、ハッカソンの事前リサーチを終わらせました。
ハッカソン前日：時間配分の検討
事前に発表されたスケジュールによると、朝9時にテーマが発表され、アイディアを考えて開発し、プレゼンの準備をして、2日目の17:00までにすべてを終わらせる必要があります。
全部一人でやるので、かなり計画的によくやらないと間に合わないことは目に見えていました。事前リサーチで「プレゼン準備の時間がない」という記事を読んでいたので、ここに十分に時間を割くためにざっくり以下の時間配分で行こうと決めました
# 1日目
9:00 テーマ発表
9:00-12:00 アイディアの検討
12:00-14:00 プレゼン骨子の検討 （途中ランチ休憩あり）
14:00-21:00くらい 開発
22:00 就寝 ※寝ないと2日目が開発できなくなるので絶対寝ることにしました
# 2日目
5:00 起床
6:00-12:00 開発
12:00-14:00 UIなど最終調整
14:00-16:00 プレゼン資料の作成
16:00-17:00 3分の時間制限にあわせたプレゼン練習
多少ズレてもokとして、だいたいこれぐらいを目安にして進めていくことにしました。
ということは開発に充てられるのは13時間ぐらい、アイディアは 1日目の午前中のうちに必ずまとめないといけない ことがはっきりしてきました。
この中でおそらく他の参加者と違う時間配分は、1日目の12:00-14:00 プレゼン骨子の検討 です。
今回のハッカソンの配点を踏まえ、「ハッカソンのテーマに沿っていてユーザー価値が伝わるプレゼンをする」というのが重要であることを確認していたので、機能開発をする前に、プレゼンのスライドをグーグルスライドで作る事にしました。
広告会社やコンサル会社で働いていたり、エンプラ向けの営業している人だと良くわかると思うのですが、顧客への提案を作るにあたって分析や各スタッフが作業し始める前に、プレゼン資料のページングを先にしてしまうということをよくやります。各ページで何をいうか何をとりあげるかを大体決めておいて、分析担当や制作会社にそれぞれのページの作り込みを依頼していきます。いろんな分析やクリエイティブを作ってから資料にいれようとすると、ぐちゃぐちゃになって何を言いたい提案なのか分からなくなってしまうい手直しに時間がかかるからです。
これと同じで、要件定義や開発をしてからハッカソンのプレゼン資料を作ると、短時間で一貫したメッセージのプレゼン資料を作るのが難しくなり時間切れになると考え、まずプレゼン資料作る→ユースケース検討→要件定義→データモデル→機能実装→UI作成 という順番を今回とることにしました。
そのため、1日目の昼頃の重要な時間にプレゼン骨子の検討 に多くの時間を割くことにしました。結果的にはこれがうまく成功することになりました。
1日目午前:アイディア方向の検討
さてハッカソンの初日です。朝の家の用事を済ませて、9時からズームでハッカソンの内容の説明、そしてテーマが説明されました。今回のテーマはこれでした。
「出会い」とか「暮らし」とか単語でくるかなーと思っていたので文章だったのがやや意外でしたが、AIです。日常で、魔法。うーん難しいなあ...参加者一同もみんなAIで魔法..?という顔つき。
テーマ発表は10分そこそこで終わり、ハッカソンが開始されました。
時間配分で決めた通り、午前中はアイディア出しにしっかり使っていこうと考えていたので、ひとまずコーヒーを入れながらテーマを分解することにしました。
AI →AIを呼び出して何か機能を実装する
日常 →ストレートに行くと日常生活。自分特有の日常でもいいが、プレゼンテーションのわかりやすさを考えると、多くの人にとっての日常だといい
魔法 →魔法？？魔法..なんだそれ...
一番悩んだのは「魔法」でした。つい最近、Netflixで「ダンジョン飯」を見ていた事もあり、黒魔法しか頭の中にでてきません。
魔法ということばを言い換えてみることにしました。連想ゲームです。
魔法 → 人のちからを超えた不思議な能力、不思議な事
こう考えていったうちに、一瞬で見たこともないすごいことが起きる と言い換えてもいいのではないかと考えました。ケアルとかファイアとかも、一瞬で火が出たり、治療できたりするわけで、すぐにできる！というのが魔法っぽいのではないか？ と考えました。
これで考えるべきアイディアの方向は決まりました。
「AIをAPIで呼び出して、日常生活の何かを、一瞬でどうにかする。すごい！って思える（すごい！って思えないと魔法じゃない）」
このアイディアが出せれば、ハッカソンのテーマ→今回私が作ったプロダクトのコンセプト のスライドはうまく流れそうです。（上の方で書いた通り、今回はプレゼンの流れが全てなので、スライドがうまくつながるか、ブリッジできているか、をすごく気にかけながらアイディアを出しています。ユーザーペインから出しているのではないので普通のプロダクト開発とは違いますね。）
1日目午前:アイディア出し
さて、方向は決まったのですがアイディアは出てきません。ここで制約をかけてみます。アイディアは制約があったほうが思いつきやすいものです。
・開発期間は12時間少し
・自分の技術力で実装できるもの
・一瞬でできる（魔法の様な変化がある）
このことから他のAPIを調べている余裕はないので、慣れているOpenAIのAPIでできることを考えよう、と思い、APIドキュメントを見ながらアイディアを出すことにしました。簡単に実装できて、一瞬でできそうなのは、Text to Speech や 画像認識、テキスト生成等がありますが、テキスト生成はもう見飽きてるし、魔法感ないので、どうしたものか。
ここで散歩に出て歩きながら考えていると、ふとアイディアが浮かびました。
「目が見えない人がカメラをかざして今目の前にある情景が分かったり、解説してくれるアプリはどうか？」
なんか良さそうな気がしてきました。視覚障害者の日常が魔法の様に変わるのではないか？と思いました。
検索してみると...マイクロソフト様がすでに素晴らしいアプリをリリースしていました。
https://k-tai.watch.impress.co.jp/docs/column/teppan/1556724.html
使ってみたところそこそこ使い勝手もよく、これにケチをつけられるほと私に視覚障害者の気持ちや辛さが解像度高く分かっているわけではありません。こういう時は即撤退です。このアイディアは諦めます。
けど、写真をGPTに投げて認識したものでなにかするというのは、実装簡単だし、レスポンスも早いので方向は良さそうです。写真を投げて何かできることはないか考えました。日常の写真を投げて、魔法の様に...私が普段学習している英語学習で何かできないか、と考えだして、アイディアに行き着きました。
歩いているうちに案が出てきました。
「日常生活で撮った写真を使って英語センテンスを作り英語学習するアプリ」
これはどうだろうか？と。GPTと英語学習の相性がいいのはもともと知っていたのと、目で見たものを英語で喋ると脳の記憶と結びついて学習効率が高まるというのはよく言われていて、なんか筋が良さそうな気がしてきました。（マネタイズの筋じゃなくて、ハッカソンのプレゼンとしての筋、ですが）
ここでセブンイレブンに到着して、コーヒーを飲みます（コーヒー中毒者なので考え事しているとたくさん飲んでしまいます。）
やはり歩くとアイディアが出てきます。煮詰まったら歩くのを習慣にしているのですが、脳科学的にも良いみたいです。
https://toyokeizai.net/articles/-/651924
1日目午前:アイディアを実現できるかテスト
さてここで、アイディアを試してみることにしました。いま歩いている写真を撮って、GPTが英語教材を返してくれればこのアイディアがいけそうです。
実際に試した様子が以下のスクリーンショット
おお！ちゃんと返ってきた!! レスポンスも早いし、一瞬で英語学習のお手本センテンスができて英語学習者からすると魔法の様な体験です。自分の日常が英語教材になるというのは今までなかったので、これは新しい体験だし、いいじゃない。
セブンイレブンからの帰り道にアイディアの実現可能性について検証することができました。所要時間5分ぐらい。
1日目午前11時-:プレゼン骨子の検討
思ったより早くアイディアがまとまりました。12時までアイディア出しをするつもりでしたが、11時少し過ぎぐらいには、プレゼン骨子の検討に進むことができました。
翌日のプレゼンを楽にするために、スライドを作り始めます。グーグルスライドのデザインをダウンロードできるサイトから学習アプリっぽいデザインのテンプレートを落として来て、ページングをしていきます。
キーコンセンプトはこれにしました。
なんか良さそうです。それっぽいですね。
プロダクトについて分かりやすく伝えるために、エレベーターピッチのフォーマットでアイディアをまとめてみました。
ページングはこんな感じにしました。
・イントロ（課題提起）5スライドくらい？ 1分
・プロダクトのコンセプト、解決する課題 2スライド 1分
・プロダクト紹介 2スライド 1分
・システム構成 1スライド 10秒
イントロ部分も、イラストやレイアウトなどは整えず、大体こんな事をいうスライドね、というのを1スライド1行ぐらい雑に書いてスライド全体の流れを作り切りました。
キーコンセプトからピッチ、プロダクト紹介までのプレゼンの流れが割とすっと行きそうな感じがしたので、いったんokとしてプレゼン骨子の検討を終わらせました。
1日目午後1時-:要件定義開始
さあ要件定義です。アイディア出しからそのまま休憩無しで要件定義に入りました。ここからはAIをフル活用してきます。以下の記事を過去に読んだことがあり、全部AIでドキュメントを整理するというのをやってみたかったので、ユースケースの洗い出しやドキュメントの作成、必要な画面などを一気に作っていきます。
作ったドキュメント
ユースケース
### 1. **ユーザーによる写真のアップロードと教材生成**
- **アクター**: 英語学習者
- **シナリオ**:
1. ユーザーがアプリの「スナップ」ボタンをクリックする。
2. スマートフォンやパソコンから日常生活の写真を選択してアップロードする。
3. アップロード時に、ユーザーに英語レベルを自己申告してもらう（例: `初心者`, `中級者`, `上級者`）。
4. アップロードされた写真がCloud Functionsを通じて処理される。
5. 選択されたレベルに基づいて、写真の内容に基づいてGPTサービスがそのレベルに適した描写英文を生成する。
6. 生成された英語教材がユーザーの画面に表示される。
### 2. **生成された英語教材の表示と学習**
- **アクター**: 英語学習者
- **シナリオ**:
1. ユーザーがアップロードした写真に関連する英語教材（単語リストや例文）がアプリ内に表示される。
2. ユーザーは表示された単語やフレーズを閲覧することができる。
3. ユーザーは表示された単語やフレーズの音声を再生することができる。
—-ハッカソンではここまで。以下、将来的な発展—
### 3. **類似表現の表示と学習**（**オプション**）
- **アクター**: 英語学習者
- **シナリオ**:
1. 写真を元に作成された教材の下に、類似のセンテンスや単語など一緒に学習すると効率の良いセンテンスや単語を表示する。
2. ユーザーは表示された単語やフレーズを閲覧することができる。
3. ユーザーは表示された単語やフレーズの音声を再生することができる。
### 4. **基本的なユーザー認証**（**オプション**）
- **アクター**: 英語学習者
- **シナリオ**:
1. ユーザーが初めてアプリを使用する際に、簡単な登録（メールアドレスとパスワード）を行う。
2. 登録後、ユーザーはログインして自分の学習データにアクセスできる。
### 5. **学習コンテンツの保存と簡易管理**（**オプション**）
- **アクター**: 英語学習者
- **シナリオ**:
1. ユーザーが生成された教材を「お気に入り」ボタンで保存する。
2. 保存された教材はSupabaseのデータベースに格納され、ユーザーが後でアクセスできるようになる。
3. ユーザーは保存された教材の一覧を閲覧し、再度学習することができる。
### 6. ユーザーが作成した**学習コンテンツを学習者間で共有**（**オプション**）
- **アクター**: 英語学習者
- **シナリオ**:
1. ユーザーが生成された教材を「パブリッシュ」できる
2. パプリッシュされた教材は難易度毎で集約され、複数の写真を塊にした教材リストが作成される
3. ユーザーは自分がアップロードした写真以外にも、教材リストをもとに学ぶことができる
## 実装の優先順位
### **優先順位**
1. 画像をとってストレージに保存
2. 保存した画像を解析する
3. **生成された教材の表示と音声再生**
システム構成図
技術スタック一覧
| カテゴリ | 技術・ツール | 説明 |
|---|---|---|
| フロントエンド | React | UIの構築に使用。動的なコンポーネント管理と状態管理を行う。 |
| HTML/CSS | 基本的なUI設計とスタイリング。 | |
| JavaScript | フロントエンドのロジック処理に使用。 | |
| ストレージ | Supabase Storage | 音声ファイルや写真を保存するための外部ストレージ。 |
| 画像解析 | OpenAI GPT Vision | 写真から英文を生成するために使用。 |
| 翻訳 | OpenAI Translation | 生成した英文の日本語訳を生成するために使用 |
| 音声生成 | OpenAI TTS | 英文に対応した音声ファイルの生成に使用。 |
| 開発ツール | Cursor | コードエディタ。 |
| v0 | UI作成、相談 | |
| Git/GitHub | バージョン管理とチームでのコラボレーションに使用。 | |
| PM補助 | Claude | アーキテクチャ、キャッチコピー、アプリ名考案等の壁打ち |
画面
- 写真アップロード画面
- 描写文表示画面
- エラーメッセージ画面
## 開発タスクリスト
### **1. 環境セットアップ**
- [ ] **APIキーの取得と設定**（OpenAI, Supabase）
- [ ] **Supabaseストレージの設定**（画像、音声保存用）
### **2. GPT-4 Vision APIとの連携**
- [ ] **OpenAI APIの設定**（APIキーの取得）
- [ ] **画像解析のテスト**（ローカルでSupabaseから取得した画像URLをGPT-4 Visionに渡す）
- [ ] 英文作成のプロンプト調整
### **3. フロントエンド実装（画像投稿→解析、英文表示まで）**
- [ ] **Reactでのフロントエンド構築**（写真アップロード機能、Supabaseとの連携）
- [ ] **画像のアップロード機能の実装**（フロントエンドからSupabaseへアップロード）
- [ ] **公開画像URLの取得**（API経由で取得）
- [ ] GPT呼び出し部分の構築
- [ ] **英語描写文の表示**（GPT-4 Visionの結果を表示）
- [ ] **UI/UXデザイン**（シンプルで直感的な画面設計）
### **4. 音声生成**
- [ ] **生成された英文から音声生成**（Pythonでの音声生成スクリプト）
- [ ] **Supabaseに音声ファイルを保存**（生成された音声ファイルをアップロード）
- [ ] **音声再生の表示**
### **5. 日本語訳表示**
- [ ] **生成された英文から日本語訳を作成**
- [ ] 日本語訳の表示
- [ ] 音声及び日本語訳が出力されるまでの間、英文だけ先に表示するUIの作成
### **6. UI調整**
- [ ] 文字サイズ調整、色、文字間等の調整
- [ ] キャッチコピーや文言の整理
- [ ] ボタンサイズ、色の調整
1日目午後3時-:ドキュメントがまとまる
今回のハッカソンでは相談okだったので、ハッカソン主催者の@Sicut_study にドキュメントを元に相談しました。この相談のときにはCloud Functionを使ってAPIを呼び出す部分を書いていたのですが、残り時間と私の技術力をふまえると、今回のハッカソンでは公開するものを作るわけではないので、「フロントエンドから直接外部サービスを呼び出す実装をした方がいい」 というアドバイスをもらい、セキュリティを考えるとフロントエンドから呼び出すという発想をしていなかったのですが、プレゼンの準備時間が足りなくなることや、プロダクトの完成形が示せなくなるという事態を防ぐためにアドバイスの通りにすることとして、ドキュメントを修正しました（上記のドキュメントは修正した状態）
この変更をしていなければ翌日の開発がギリギリになっていた可能性が高く、1人参加で技術力が低い状態のハッカソン参加としてはグッドジャッジだったかなと思います。
また、「AIを呼び出してレスポンスが返ってきたものを表示するところを先に作るべし」というアドバイスももらいまして、フロントエンド初心者が詰まりそうなところから先に開発するという優先順位付けもできたので、この方針で開発をスタートしました。
1日目午後4時-9時ぐらい：ひたすら開発
集中して作業していたので、どこからどこまで作ったかは正確に分かりません。実装でもAIを駆使して開発しました。
1人で参加といいつつも、いろんなAIで役割分担しながら開発チーム的に運用し作業を行いました。
| ツール | 担当業務 | 説明 |
|---|---|---|
| Cursor | エディタ | 頼れるリードエンジニア。Cursorなくしてこの速度では開発できなかった |
| ChatGPT | エンジニア | エンジニア。Cursorの回答が納得できない時などに活用。 |
| v0 | UI作成 | 凄腕UIデザイナー |
| Claude | PM補佐 | アーキテクチャ、技術スタック、ユースケース検討、キャッチコピー、アプリ名考案等の各種壁打ち |
| 人間 | PM兼PJM | 各種指示。プレゼン作成。 |
↓開発の様子（再現）
普段から右側の画面はAI専用で、コードは真ん中で書き、コードの横の画面で調べ物やデザイン系作業をやっています。マルチ画面でAI専用で場所をとっておくことで、レスポンスが返ってきたことがすぐに分かるので複数のAIを動かすときには2画面を使うととても効率的です。
Claudeで満足しない答えがでてきているときはGPTにも同じ内容を投げてみて、セカンドオピニオン的に使います。
Cursorにクエリを投げて、V0に投げて、GPTに投げてというのを同時にやることで並列処理で開発を進めていきます。（実際には人間の脳の理解が追いつかないので順列になるのですが、気持ちは並列処理です。）
さて、AI様達のおかげで、午後8時には開発がかなり進みました。フロントエンドからGPTにリクエストを投げて
- Reactでのフロントエンド構築**（写真アップロード機能、Supabaseとの連携）
- 画像のアップロード機能の実装**（フロントエンドからSupabaseへアップロード）
- 公開画像URLの取得**（API経由で取得）
- GPT呼び出し部分の構築
ぐらいまで開発が終わっていたと思います。ちょっとこの辺は意識が朦朧としていてうろ覚えです。
疲れてきたので、9時ぐらいには開発を終了し、翌日に備えます。
2日目午前7時:開発終了まであと4時間
2日目の開発を開始しました。12時ぐらいまでに開発を終えて、UIの微調整に入りたかったので機能開発はあと5時間ほどです。
音声の生成や翻訳の作成はGPTのAPIを使って何度もやっていたので、1時間ぐらいで終わると見ていたので、午前中の山場はアップロードした写真をGPTに投げて、レスポンスを画面描写するというところです。
ここで思ったよりも時間がかかってしまったことが起きたのが、
フロントエンドからOpenAI APIを呼び出すときに、CORSエラーが発生する（オプションで回避できるがそうすると別のエラーが発生する）
でした。「セキュリティ的に危険だから呼び出すなよ」、ってことでエラーが起きるわけですが、今更バックエンドの開発をしていると絶対に間に合わなくなるのでなんとかするしかありません。
残り時間を気にしながら急ピッチで開発したので、どうやって乗り越えたか忘れてしまったのですがゴニョゴニョ書いて乗り切りました。フロントエンドに慣れている人なら何と言うことのない事かと思うのですが、学習中の身としては残り時間も気にしながらエラーを解消しないといけないので少し焦りました。
1-2時間このエラーで時間を使ってしまいましたが、なんとか、「写真をユーザーから受け付ける→OpenAI APIを呼び出す→英文を作成して画面に描写」までを午前10時ぐらいまでに作りました。
その後、
・音声生成、再生
・日本語訳作成、再生
もOpenAIのレスポンスをSupabaseのストレージに入れて呼び出すだけという簡単な方法で作り、12時までに主要機能の構築が完了しました！
2日目昼12時:ランチ休憩を挟んでUI調整
主要機能が作れてちょっとほっとしたので、ここで軽くランチ休憩を挟みました。プレゼンのことを考えると絶対に休憩しておきたかったので、あえてしっかり昼食の時間を取りました。
その後2時間ほど、V0とCursorを中心にUIの微調整などを行い、作りたかった画面の挙動が完成しました！
デザイナー無しで、自分の実装でこんなフロントエンドができるとは...!Pythonでスクリプトを書いて業務用のアプリや処理ばかりやってきたので、動くwebアプリで見た目がしっかりしたものを短時間で作れたのは感動でした。そして成長を感じることができました！（AIのおかげだけどね）
2日目午後2時半:プレゼン資料作成・準備
改めて最初に計画したタイムスケジュールを振り返ってみると
# 2日目
5:00 起床
6:00-12:00 開発
12:00-14:00 UIなど最終調整
14:00-16:00 プレゼン資料の作成
16:00-17:00 3分の時間制限にあわせたプレゼン練習
こういう予定にしていたので、ほぼオンタイムで進行できていました。
ここから16時まで集中してプレゼン資料の準備にとりかかります。
[資料作成]
・ページングを元に各ページの内容の詰め
・プロダクトコンセプトに行く前の導入部分のスライドの内容の詰め
・レイアウトの調整 （デザインにはこだわらない。中身重視）
・説明の順番が頭に入って来やすいか
・自分が喋りやすいか
この時間にこんなスライドを複数つくっていきました。
内容については詳しくはこちら
https://qiita.com/Shun_P/items/4663490d1972de2dcc6d
そして資料だけでなく以下のことも行いました
・プロダクト画面の録画 （動いている画面をプレゼン中に見せたかったから）
・実際に動くプロダクトの公開 （Hostingしていないので開発環境のローカルサーバーをngrokで公開）
中でも プロダクト画面の録画 はとても重要だと考えて、手間はかかりますが行いました。
これはハッカソンでプレゼンをする人にはぜひオススメしたいことです。というのも、プレゼンしながらプロダクトを実機で画面共有しながら動かすのは意外と難しいものです。思った通り動かなかったり、見せるとカッコ悪い画面がうつってしまう可能性もあります。そうしてそういうことが起きると、喋っている自分が焦ってしまう となりかねません。これを避けたかったので、プロダクトの画面は録画して望みました。自分の平常心を保つためにも、録画した画面をプレゼン資料の中にエンベットすることを強くお勧めします。
こういう細かな作業に時間をあてるためにも、プレゼンの準備時間をしっかりとったのは正解でした。時間がないと、プロダクト画面の録画も、ローカルサーバーの公開もおそらくできていなかったので、十分な準備時間をとる、というのはハッカソンに慣れていない人ほど、ぜひ取り入れてほしい戦術です。
2日目午後4時:プレゼン練習
発表まで残り1時間。UIで気になるところやプレゼン資料で気になるところがありますが、もう直してはいけません。誤字脱字以外は変更せず、この時間で、「自分で読み上げて制限時間の3分で収まるか読み方を調整」していきます。読んでみると4分30秒ぐらいあったので、スライドを削ったりまどろっこしい言い方をなくしていきます。
いろんなやり方があると思いますが、私はプレゼンの喋る内容をテキストに起こしてスピーカーノートに書くのは反対派です。文章を作りきってしまうと、それを読んでしまうので、聞いている人の反応を見逃したり、読むことに集中してプレゼンに感情がこもりづらいからです。
原稿を読むのではなく、スライドを見ながら自然に喋れる様になるまで練習する これが一番いいと思っています。
ということで3分きっかりでプレゼンテーションできる様になるまで30-40分ほど練習して、4時40分に全ての準備を終了しました。（数分前まで練習する、などは絶対にダメです。心の余裕を持つために、15分前には切り上げましょう）
トイレにいって、コーヒーをいれて、午後5時を迎えました。
2日目午後5時:プレゼン&ハッカソン終了
準備したプレゼンの発表は3番目でした。1番目の発表で、3分だと短いねということで急遽ルール変更が入り、4分ぐらい喋っていいよとなりました。こうした急な変更が入っても、しっかり準備しておけば対応ができます。2番目の方が発表しているのを聞きながら、事前の準備の段階で3分にするために削ったスライドを復活させて、4分少しになる内容に戻して自分の順番を迎え、発表を無事に終えることができました！
午後6時に結果発表となり、最優秀賞に選んでいただきました。ありがとうございました。
さいごに
むちゃくちゃ長いこの記事を最後まで読んでくださってありがとうございました。今回は、私の初ハッカソンの裏側をタイムラインにまとめて記事にさせてもらいました。実は裏側でいろんなドキュメント作ったり、プレゼンの準備をしていた、というのを同じ参加者の人が見ると面白いかなーと思って書き出してみたところ、大変な長文になってしまいました。
私の様にハッカソンに初めて出る人や、今は技術力が低いけれども学習している人の励みになればと思い、包み隠さずほぼ全てを書いてしまいました。参考になれば幸いです。
Special Thanks1
今回、土日の開催のハッカソンにフルコミットで参加できたのは家族の協力のお陰でした。普段は土日は子供と一緒に遊びに行ったり、家の用事を片付けたりしているのですが、開発の学習と経験になるからということで妻が全面協力をしてくれ、子供と一緒に1泊2日ででかけてくれました。大変静かな環境で開発に打ち込むことができ、妻と子供の協力がなければ途中でギブアップしていたかもしれないので、集中できる環境を用意してくれたことにとても感謝しています。
Special Thanks2
今回のハッカソンではなんと景品が提供されまして、JISOUからこんな素敵なプレゼントをいただきました！！
↑届いた新品のMetaQuest3
うおーやったーーー!!
これは嬉しい。
実はもともと1台持っていたので
↑2台になった我が家のMetaQuest3
これは全面協力してくれた妻と一緒に、「リアルで食事しているのにわざわざVR空間で喋る」とか、「2人でMRでチェスする、ボードゲームする」など色んな遊びができそうです。家に遊びにきてくれた友達とも盛り上がれそう。メタクエストはリアルで会っている人と一緒にやるととても楽しいので、2台になったのは本当にありがたいです！感謝！
メタクエストを景品にしてくれるかもしれないプログラミングコーチングJISOUではメンバーを募集しているので、気になる方はぜひHPから見てみて下さい👇