<WaytoAGI> Vibe Codingハッカソン 20251025 参加レポート
はじめに
2025年10月25日に開催された「<WaytoAGI> Vibe Codingハッカソン」に参加してきました。
WaytoAGI
そもそも、WaytoAGIとは、AIアプリケーション開発に特化した、世界最大級のオープンソース・ナレッジコミュニティです。このコミュニティのミッションは、教育、イベント、そしてプロダクトを通じて、世界中のAI開発者が成長し、その採用を収益化（マネタイズ）できる未来をエンパワメントーすることです。
2025年10月現在、900万人を超えるコミュニティメンバーが在籍しております。現在、日本で最もアクティブなAIアプリケーション・エコシステムの構築に取り組み、定期的なイベント開催やクリエイター支援、エコシステムの構築に取り組んでいるようです。
引用元：https://luma.com/i64wwcg74?tk=fZ5ihD
イベント概要
<WaytoAGI> Vibe Codingハッカソンは、以下の通りです。
Vibe Codingを実際に使い、アプリ開発をするハッカソンになっています。エンジニアではない初心者の方でも参加できるように設計をしておりますので、どなたでもご参加いただけます。アプリで収益を生み出す体験を味わっていただきます。アプリ開発を通して、インタラクティブなコンテンツを創出することを目指します！
当日のスケジュール
当日のスケージュールはこのようになっており、開発時間は3時間となっておりました。
10:30-11:00：受付・入場
11:00-12:00：オープニング/ゲスト講演
12:00~13:00：昼食
13:00~16:00：ハッカソン・Vibe Coding
16:00 ：作品提出締切
16:00~17:00：各グループ作品発表
17:00~17:30：審査員による審査/表彰式・交流会
開発したもの
アイデア：顔を隠すプライバシー保護アプリ
今回開発したのは、PCのカメラを使用して、リアルタイムで顔を検出し、AI生成画像で置き換えるプライバシー保護アプリケーションです。
Google Imagen 3（NanoBanana🍌）で生成したユニークな画像を顔の位置に重ねることで、プライバシーを守りながらも、動きや表情の雰囲気を伝えられるアプリを目指しました。
バナナや犬などのユニークな画像を顔に重ねることで、楽しみながらプライバシーを保護できる新しい体験を提供します。
猫で顔を隠した状態のデモ
犬の画像バージョン
開発プロセス：AIツールを組み合わせた3段階開発
3時間という限られた時間の中で、複数のAIツールを戦略的に組み合わせて開発を進めました。
フェーズ1：技術検証（Gemini）
最初にGeminiを使用して、コア機能のProof of Concept（PoC）を作成しました。
- カメラからの映像取得
- 顔検出のアルゴリズム検証
- Google Imagen 3（NanoBanana）との連携テスト
このフェーズで技術的な実現可能性を確認し、開発の方向性を固めました。Geminiは技術的な質問に素早く答えてくれるため、初期の検証フェーズで非常に役立ちました。
フェーズ2：UI設計（Figma Make）
技術検証が完了したら、Figma Makeを使ってUIの大枠を作成しました。
Figma Makeは自然言語からUIデザインを生成できるため、以下のような指示を出すだけで、プロトタイプを素早く作成できました：
- 「カメラプレビューを中央に配置」
- 「画像選択のためのギャラリービュー」
- 「設定パネルをサイドバーに」
デザインの専門知識がなくても、短時間で見栄えの良いUIを作れたことが、このフェーズの大きな成果です。
フェーズ3：実装と仕上げ（Claude Code & Cursor）
最後に、Claude CodeとCursorを使って、実際のコードに落とし込み、機能を実装しました。
- Figma Makeで作成したデザインをもとにコンポーネントを実装
- 顔検出ロジックとUIを統合
- エラーハンドリングやパフォーマンス最適化
Claude Codeは複雑なロジックの実装や、複数ファイルにまたがる変更を効率的に処理してくれたため、短時間で完成度の高いアプリケーションに仕上げることができました。
Vibe Codingの実践ポイント
今回の開発で意識したのは、**「各AIツールの得意分野を活かす」**という点です：
- 検証はGemini: 素早い技術調査と検証
- デザインはFigma Make: 視覚的な完成度の高いUI生成
- 実装はClaude Code & Cursor: コード生成と統合
このように役割分担することで、3時間という短時間でも完成度の高いプロトタイプを作ることができました。
学んだこと
Figma Make
今回、強く感じたことはFigma Makeが短時間のハッカソンに向いているということです。
そもそも、Figma Makeとは、デザインツールのFigmaが提供するAIデザインジェネレーターです。
Figmaが提供していることもあり、デザイン能力が他のAIツールに比べると優れていることが特徴として挙げられると思います。
Vibe Codingとハッカソン
数回、Vibe Codingをモチーフとした短時間のハッカソンに参加してきましたが、必ずしも全員が完成物を開発する必要はないのではないかと感じました。
具体的には、バイブコーディングでゴリゴリと生成AIに入力するを一人か二人ほど立てて、他の人は情報収集やアイデアの発想、技術検証をすれば良いのではないかということです。短時間のハッカソンでは、アイデアを持ち寄って開発することは非常に稀であると思います。大体は、その場でアイデアを決めて、開発に進んでいくことになると思います。その場合、開発できる時間はごくわずかです。そのため、ゴリゴリと提出する形を開発する人、それを実現するための技術を調査・検証して、情報を提供する人などに分かれればある程度ロスが少なく開発できるのではないかと感じています。
印象に残ったこと
他のチームの作品
今回、優勝したチームは「小顔のトレーニングをして、ボスを倒すアプリ」を開発していたチームです。そのチームは開発経験があまりないような状態からアプリを作成したと耳にしました。つまり、バイブコーディングの文脈では、課題の発見とアイデアさえあれば優勝が可能であり、だからこそ難しさも増していると感じました。
短時間の開発では、よっぽどのことがない限り大きな技術さは出ない分、課題の着眼点やそれを解決するアイデアの秀逸さが求められます。
英語力
今回のようなグローバルコミュニティが主催するハッカソンでは、日本人ばかりではありません。むしろ、日本語が話せない人が多いです。しかし、私自身は英語力が大学受験レベルで止まっているため、意思伝達にハードルがありました。
このように英語力が原因となり、機会損失する場面が増えてきているため英語力を向上させなければいけないという強烈な動機になりました。
課題と反省点
今回のハッカソンでは、アイデア力、技術検証力、プレゼン力、英語力と多くのことでで助けられた結果、3位入賞できたと感じています。そのため、今後はこれらの能力を意識的に向上させることに注力していきたいです。
まとめ
私自身、数ヶ月前までハッカソンに参加したことがありませんでした。しかし、複数のハッカソンに参加することで、少しずつできることが増えてきたいと感じています。そのため、まだハッカソンに参加したことがない人には、ハッカソンへの参加をオススメいたします。
ハッカソンの参加にあたり、なにかわからないことがあれば、XでDMしていただければ回答いたします。
Xのフォローをお願いします。
Xでも発信を行っていますので、よろしければフォローをお願いします。
Discussion