生成 AI×社会課題ハッカソンで2冠してきた話(技術寄り)

に公開

先日、「生成 AI× 社会課題ハッカソン by WAKE Career」というハッカソンに参加し、オーディエンス賞と最優秀賞の二冠を達成することができました。この記事では、特に技術的な側面に焦点を当ててハッカソンを振り返っていきたいと思います。

どんなイベント?

https://wake-career-socialai-hackathon-2025.studio.site/

今回参加したのは、WAKE Career さんが主催する「生成 AI× 社会課題ハッカソン」です。
主催が WAKE Career さんということもあり、女性が安心して参加できるような配慮が随所に感じられる、とても素敵なハッカソンでした。

どんなプロダクトで出たの?

「AI Care Work Portfolio」というプロダクトで出場しました。
これは、無償のケア労働(家庭内での家事や育児など)がキャリアの空白期間と見なされ、正当に評価されないという社会課題に着目したものです。このプロダクトでは、そうしたケア労働をコミュニケーション能力などのソフトスキルが発揮される場として捉え直し、AI が分析・評価することで、キャリアの一部として可視化することを目指しました。

開発期間は約 2 ヶ月でしたが、最後の 1 週間はピッチ資料の作成に充てていたので、実質の開発期間はもう少し短かったかもしれません。

アイデア出しはどうやったの?

もともと社会課題については興味があったのですが、どのようなテーマにするか決めかねていました。ヒントを求めて本棚に向かった時にケア宣言:相互依存の政治へという本が目についたので、「無償のケア労働」が抱える問題にアプローチすることにしました。
そこからは、ChatGPT を壁打ち相手にして、アイデアを具体化していきました。


ChatGPT と壁打ちしている様子

技術構成は?

今回の技術選定では、以下の 3 つの基準を重視しました。

  1. AI が学習できるリソースが豊富(Web 上に情報が多い)であること
  2. 私自身がある程度コードを読めてレビューできること
  3. 開発工数を削減できること

AI をフル活用して Vibe Coding 的に開発することを決めていたので、AI が学習するリソースが多く、かつ出力されたコードを私がレビューできるようにするためこのような選定基準にしました。

ディレクトリ構成(monorepo)

ai-care-work-portfolio/
├── README.md
├── apps/
│   └── web/                         # Nextjs アプリケーション
│       ├── app/
│       │   ├── (activities)/        # 活動記録関連
│       │   ├── (features)/          # メイン機能
│       │   ├── components/          # 共通コンポーネント
│       │   └── styles/
│       ├── hooks/
│       ├── lib/
│       └── public/
├── docs/                            # ドキュメント
├── packages/                        # 共有パッケージ
├── pnpm-workspace.yaml              # monorepo設定
└── turbo.json                       # Turborepo設定

今回は pnpm と Turborepo を用いたモノレポ構成を採用しました。プロダクトのコンセプトから詳細設計書まで、全てのドキュメントを同じリポジトリで管理することで、AI にコンテキストをスムーズに共有できるというメリットがあります。

フロントエンド: Next.js

当初は LLM 専用のドキュメントがある Svelte も検討しましたが、UI 作成に v0 を使いたかったため、最終的に Next.js を選択しました。もし bolt.new などを使うのであれば Svelte も有力な選択肢だと思いますが、AI をフル活用するなら、エコシステムが成熟していて情報量も多い Next.js の方が現時点では有利かもしれません。

バックエンド: Hono

バックエンドは当初 Next.js でフルスタック開発しようと考えていたのですが、途中で「やはりエンドポイントは分離した方が良いのでは...?」と思い、Hono で API を切り出しました。ただ、結果的に AI 連携や Google API 連携を Next.js 側で実装してしまったので、分離した意味はあまりなかったかもしれません。

Hono を実際使ってみて、直感的に書けて(NestJS に比べてルールが少なく)学習コストが低い点や、Cloudflare との相性が良く、スムーズにデプロイできる点がいいなと思いました。以前から触ってみたいと思っていた技術だったので、今回挑戦できて良かったです。

AI 主導開発のワークフロー

Vercel には、PR ごとにプレビュー環境を自動で構築してくれる機能があります。
この機能と AI を組み合わせた開発フローが、今回の開発に合っていました。


Visit Preview を押すと、プレビューが表示される

具体的な流れは以下の通りです。

Codex や Devin で初期実装&PRを作成
  ↓
Vercel が自動でプレビュー環境を構築してくれるので、そこで手動テストを実施
  ↓
動作確認の結果や改善点を Codex や Devin にフィードバック
  ↓
Codex や Devin が修正・改善を行う

このサイクルを回すことで、開発がかなり捗りました。MVP を迅速に開発する上で、この技術選定とワークフローは最適解だったと感じています。

プロンプト精度向上の工夫

AI Care Work Portolio 内では、主に「ケア活動の検出(カレンダー‧タスク‧テンプレート⼊⼒内容からケア活動と思われるものを⾃動判別)」「スキル分析‧変換(ケア活動をソフトスキルに変換)」「ポートフォリオ作成(蓄積されたデータをに就活‧転職で使える形に整形)」の 3 点に AI を活用しています。ここで重要となるのがプロンプトの精度向上です。

まず、OpenAI が公式に提供しているベストプラクティスに準拠するようにしました。今回は GPT-4o mini を使用していたので、OpenAI の公式ガイドラインをプロンプト作成の指針としました。

さらに、プロンプト自体の改善も AI に任せていました。NotebookLM に OpenAI のベストプラクティスを学習させ、私が作成したプロンプトを「ベストプラクティスに従って改善して」と指示することで、精度向上も高速化することができました。


プロンプトの改善をぶん投げている様子

各 AI ツールの使い分け

今回の開発では、複数の AI ツールを並行して利用していました。それぞれのツールの得意分野を理解し、適切に使い分けることが、全体の生産性を高める上で重要だったかと思います。

Cursor - メイン開発機

開発・調査・ピッチ資料作成全般に使っていました。claude-4-sonnet が使えるようになってから体感大幅に賢くなり、出力精度が上がったように感じています。
Thinking の内容を読んで「なんか勘違いしてるな...?」と思ったら指示を修正する、という流れがしっくり来ています。

最近のメイン開発機

ここ最近(2025 年 7 月時点)では、開発のメインは Claude Code に移行しつつありますが、タブ補完や Docs、Web 検索機能が便利なので Cursor も併用しています。

ChatGPT - 壁打ち・設計・調査

プロダクトのアイデアの壁打ちから要件定義、設計、調査まで幅広く利用しました。壁打ちから設計書作成、実装へと繋げる流れについては、以下の記事が非常に参考になるかと思います。
https://zenn.dev/yoshiko/articles/my-vibe-coding

プロダクトの性質上、信頼できる調査資料が多く必要だったため、Deep Research 機能には非常にお世話になりました。

ChatGPT をいい感じに使うポイントは、プロジェクトチャットの活用かなと感じています。以下のようなフローを回し、コンテキストを積み上げていました。

ChatGPT と壁打ちして内容を固める
  ↓
文書(Markdown)にしてもらう
  ↓
出力してもらった文書をプロジェクトに投入してコンテキストを共有する

Codex - 叩き台作成

ChatGPT の有料プランに付属しているため、料金を気にせず気軽に PR を作成してもらえるのが魅力です。ただ、私が使用した時点では、コンテキストの把握能力やコーディングの質は Devin に一歩譲るかな、という印象でした。タスクを細かく分割し、一つずつ着実に処理してもらうことが特に重要になりそうです。

Devin - 開発パートナー

開発が最終ピッチに間に合わなくなりそうな局面で導入しました。「音声入力機能の追加」といった比較的大きな粒度のタスクを依頼したのですが、コード生成の精度が高く、人間とのコミュニケーションで生じがちな認識の齟齬や価値観の衝突、レスポンスのラグといった摩擦がないため、「確かにジュニアエンジニアがいらなくなるかも、、、」と感じさせられました。

Devin を使う際は、以下のようなフローで使うのが効果的でした。

Ask Devin でプロジェクトの現状を把握
  ↓
Ask Devin で開発方針について相談しながら修正指示書を作成
  ↓
指示書に基づいて Devin Session で実装を依頼

※この方法は俺の勉強会 #2で教えていただきました。感謝です。

v0 - UI 設計

UI デザインについては、v0 が非常に優秀でした。作りたいものや解決したい課題は明確だったものの、具体的なプロダクトのイメージが固まりきっていなかったため、

ChatGPT と壁打ち
  ↓
要件定義書や画面設計書を仮作成
  ↓
v0 でビジュアル化してプロダクトのイメージを掴む
  ↓
v0 にフィードバックして UI を調整
  ↓
v0 に画面設計書を更新してもらい、再度 ChatGPT にフィードバック

という流れで仕様を詰めていきました。正直、過去に UI デザインをかじったことがある私よりも、よっぽど良いものを作ってくれたと感じています。

ピッチはどうだったの?

ピッチは 6 分間の発表と 5 分間の質疑応答という形式でした。とても緊張してしまい、練習よりも早口になって 20 秒ほど時間を余らせてしまったのは少し心残りです。
ちなみに、このピッチ資料も AI を活用して作成しました。Cursor と Marp で大枠を作り、pptx 形式で出力した後に、グラフなどの細かい部分を手作業で調整するという流れです。

結果はどうだったの?

オーディエンス賞(審査員以外の参加者が投票する賞)と最優秀賞をいただくことができました。多くの方から温かい感想をいただけて、本当に嬉しかったです。

まとめ

今回の経験を通じて、AI との協業について改めて考えさせられました。
AI は 0 から 1 を生み出すのではなく、人間が持つ 1 のアイデアを 90 まで一気に引き上げてくれる存在だと感じています。だからこそ、私たち人間には、最初の 1 を生み出すための引き出しの多さや、AI が作り出した 90 を 100 に仕上げるための知識・技術力がより一層求められるのかもしれません。

一人での出場だったため作業量が多く、泣きながら開発とピッチ準備に取り組んでいましたが、本当に出場してよかったと心から思っています。この場をお借りして、関係者の皆様に深く感謝申し上げます。

最後までお読みいただきありがとうございました 🫶

Discussion