Vibe Codingハッカソン優勝の裏話

この記事は、 NTT docomo Business Advent Calendar 2025 20日目の記事です。

先日2025年9月に開催されたGoogle Cloud主催のVibe Codingハッカソンに参加し、優勝することが出来ました。Gemini CLIを活用した「手書きコーディング禁止」のルールのもと、約2時間で開発したツールの内容と裏話、Vibe Codingが可能にした新しいアプローチについても考察していきます。

こんにちは。コミュニケーション&アプリケーションサービス部の木村です。
普段の業務では「ビジネスdアプリ」や「COTOHA VoiceDX Basic」の開発に携わりながら、社内の生成AI活用推進も行なっています。

先日、Google Cloudとドコモグループが共催したNTTドコモグループ向けのAIイベント「Google Cloud +AI Prism」内で行われたハッカソンに参加し、最優秀賞をいただきました。
まずは具体的に今回のイベント内容を紹介します。

Google Cloud +AI Prism と「手書き禁止」のハッカソン

Google Cloud +AI Prismとは?

2025年9月25日、Google CloudとNTTドコモグループの共催により、渋谷ストリームGoogleオフィスにて開催された社内向け生成AIイベントです。「Practice(実践する)」「Learn(学ぶ)」「Connect(繋がる)」をテーマに、グループ内での生成AI活用を加速させることを目的としており、当日は多くの社員が参加しました。
各社から開催レポートが出ていますので、詳細はそちらをご覧ください。

https://cloud.google.com/blog/ja/products/ai-machine-learning/google-cloud-and-ntt-docomo-group-co-host-ai-prism

https://nttdocomo-developers.jp/entry/2025/10/31/090000

Vibe Codingハッカソン

その午前の部で行われたのが、「アイデア、即、形に!Geminiによる高速開発Vibe Codingハッカソン」です。
このハッカソンのレギュレーションは以下のようなものでした。

  • テーマ: 「ライフハック・業務改善」
  • ルール: 生成AI(Gemini CLI)を利用した開発に限定、生成AI以外による手書きのコーディングは禁止
  • 時間: 開発からプレゼン資料作成まで約2時間

そもそも「Vibe Coding(バイブコーディング)」とは、Andrej Karpathy氏が提唱した、AIを使用して自然言語プロンプトから機能コードをバイブス(直感やノリ)で生成する開発手法です[1]。従来はプログラミング言語やフレームワークの習得が必要で、一定の技術的なハードルが存在していましたが、AIコーディングの登場で専門的な知識がない人でもアプリ開発ができるようになりました。

そのため、非エンジニアの参加者も多く、開発技術の高さよりも、スピードと発想力が試されるユニークな場でした。

参加した動機

今回、上司にこのイベントを勧めていただき、上記のハッカソンに参加しました。
元々Vibe Codingには興味があったことや、日頃Googleの諸サービスを使用していたこともあり(後述するツールをChrome拡張機能として作成したのは、私自身Chrome愛用者のため)、ちょうど良い機会でした。

作成したツール:TetriStop(テトリストップ)

私が今回のハッカソンで作成したのは「TetriStop(テトリストップ)」というChrome拡張機能です。

コンセプト

「見たくないのに見てしまうWebサイト(SNSなど)」にアクセスしようとすると、ブラウザがそれを検知してアクセスをストップし、代わりにテトリスの画面が立ち上がります。
一定時間テトリスをプレイしないと元の画面に戻れず、スコアは我慢すればするほど蓄積されるようにすることで、モチベーションが維持される工夫も取り入れました。

デモ動画

開発のきっかけ:ある記事の発見

アイデアを考えていたハッカソンの前日、興味深い記事を見つけました。

「テトリスを3分するだけで暴飲暴食を防げる?海外チームが2015年に研究発表」[2]

テトリスのような視覚的な作業に脳のリソースを使うことで、欲求の対象をイメージする余裕がなくなり、結果として渇望が弱まるそうです。
私自身、ついついSNSを見てしまう癖があったので「これをWebブラウジングに応用すれば、SNS断ちができるのでは?」と考えたのがスタートでした(あくまできっかけがこの記事でしたので、厳密な内容は元論文[3]を参照してください)。

何より、テトリスという題材は、Vibe Codingでテスト的に作るゲームとして最適で、今回のハッカソンのテーマにも合っていると考えました。

今後の展望:機能拡張と社会的展開

プレゼンでは、機能拡張や社会課題への接続についても述べ、このツールが単なるジョークツールに留まらない可能性についても言及しました。

  • 機能拡張
    • カスタマイズ機能: 「どうしても見てしまうWebサイト」ほど高得点が出るようにし、離脱をゲーム化する
    • ランキング機能: 全国のユーザーと我慢強さを競い、モチベーションを維持する
  • 展開
    • 子ども向けの教育利用
    • 深刻なスマホ中毒問題へのアプローチ

作ってみて分かったこと:「動かして」初めて活きる

また、「実際に作って触ってみたからこそ分かったこと」を所感として強調して伝えました。

まず、自分でテストプレイをして痛感したのが「最初の数秒で、すぐにやめてしまいたくなる」ことです。元論文でも言及される適切な時間設定や、モチベーション維持のための工夫が誘惑を断ち切るために必要な要素だと体感で理解できました。

そしてもう1つ実感したことが「知見を知見のままにするのはもったいない」ことです。面白い論文(知見)を、従来はインプットとして終わっていたところを、動くツール=アウトプットに変えることで、初めて見える面白さや価値があることを実感しました。

こういったプレゼンを通して、Vibe Codingの面白さを短い時間ながら具体例を持って伝えることができたのではないかと思います。

開発の裏側

では具体的にどのように約2時間でこれを作り上げたのか?Vibe Codingの特性を活かすため、以下の3つの戦略を取りました。

1. 一旦作らせる

AIエージェントを用いた開発では、まず要件ドキュメントとなるMarkdown形式ファイル(GEMINI.md)などを作成し、それをコンテキスト(背景情報)としてAIに作成させることがベストプラクティスとしてまとめられています。[4][5]
しかし同時に、Google Cloudが提唱するVibe Codingの手順では、事前にドキュメントを用意するのではなく簡単に「目標を説明する(Describe goal)」ことからスタートし、「緊密な会話ループ(Tight conversational loop)」を回すことが解説されています。[6]

昨今これらのAIエージェントによる開発手法は、前者のやり方を大規模開発やリファクタリングに向く「Agentic Coding」、後者のやり方をアイデア出しやプロトタイピングに向く「Vibe Coding」として区別するようになりました。[7]
(「仕様書を書いたからAgentic」「書かなかったからVibe」という単純な二元論ではなく、個人的には地続きのものだと考えています)

今回のハッカソンはタイトル通り、まさに「Vibe Coding」の場としてうってつけであり、私自身アイデアはあったものの完成イメージが湧いていなかったため、「雑に一旦プロンプトを書いて作らせてみる」ことからスタートしました。

Gemini CLIへの指示出しで、私が打った初期プロンプトはこれだけです。

Chrome拡張機能で特定のwebサイトを開いたら、ブロックして別タブでテトリスを1分行わせるツールを作りたい。1分経ったら、状態とスコアは保存される。

結果、Gemini CLIは、HTML+CSS+JavaScriptで構成し、chrome拡張での実施方法についても解説してくれました。

また、一度作らせてみることで、「禁止したいwebサイトを設定する画面は最初に別画面で開かせたい」「テトリスの画面構成は一発だと作れなさそうだ」というおおまかな方針も立てやすくなりました。

このように、仕様イメージが無いうちは、「まず作る」→「仕様を決める」→「作り直す」というフローで進められるのがVibe Codingの利点だと考えます。

2. 作らせてから考える/作り直す

今回の場合は、上記の自然言語の指示で、Gemini CLIが以下を一括で生成してくれたため、大きく作り直すことはありませんでした。

  • manifest.jsonの設定
  • Content Scriptによるブロッキングロジック
  • テトリスのゲームロジック
  • UIの雛形

もちろん、一発で完璧なものはできないため、都度、自然言語で修正依頼をそのままプロンプトとして投げかけます。

  • 課題: ゲーム終了時にネガティブなメッセージが出る
  • 修正:『ハイスコアに届きませんでした』みたいな文言は余計ですね。削除してください
  • 課題: 終了時のポップアップが初めから出ており「初期終了した」と解釈される
  • 修正:初期終了してしまうのではなく、ポップアップ画面が重なっていることが問題なのでは?
  • ....

もし途中で崩れた場合やなかなか解消されないエラーがあった場合は、「ここまでの指示を踏まえて、このツールを作成するプロンプトを作成して」のように指定して作り直すことで、時間短縮することを想定していました。
このサイクルにより、2時間でバージョン13までアップデートを重ね(10分に1回ペース)、当日のプレゼンで余裕を持ってデモまで行うことができました。

3. 同時に作る

また、Vibe Codingが可能にしたこととして、並列開発が挙げられます。

複数バージョンを作成する際、同じプロジェクトで回すだけでなく、複製して別プロジェクトでも実行させておくことでさらなる高速検証が可能になります。
また、テトリスツールはジョークツールのつもりで作り始めていたので、AIにコードを書かせている待ち時間を利用し、別案として真面目な実用系ツール(大量のタブを管理するchrome拡張機能)も並行して開発していました。

結果的に、終了前に「テトリスツールの方が動かしてみて面白く、可能性がありそう」と判断してそちらを採用しました。

コードを書かせている待ち時間にもう一方の動作確認を行うことで、複数プロジェクトの検証が同時にできるようになったことも大きな利点です。

考察:「個人の衝動」と「社会課題」の接続

これらの開発過程から、今回評価していただいた理由を考えたいと思います。

まず「プレゼンの順番」や「アイデアが他と被らなかった」といった運の要素は大きかったと思います。
その上で、審査ではありがたいことに「現代の社会課題(スマホ中毒)や企業課題を捉えている点」や、「論文というエビデンスに基づいている点」を高く評価していただきました。

しかし、今回の場合は「社会課題をリサーチし、エビデンスを探し、そこからソリューションを導き出した」訳ではありませんでした。
もし私が最初から「企業の業務改善課題」や「スマホ中毒の解決策」を真面目に考えていたら、間違いなく「テトリスツール」というアイデアには辿り着かなかったと思います。

実態はこうです。

  • ① ネットニュースで記事をたまたま見つけて「面白い!」と思った。
  • ②「自分もSNS断ちしたいし、これを作ったら自分が楽しいかも」という素朴な衝動で作り始めた
  • ③ 出来上がってみたら、結果として「これって実は多くの人が困っている課題に刺さるのでは?」「他の分野にも展開できるのでは?」という社会的意義が見えてきた

Vibe(衝動)Coding

ビジネスやサービスとして社会実装を目指す以上、社会的意義やエビデンスは必要です。それがなければ、ただの自己満足で終わってしまいます。しかし、「ロジックから始めなければならない」という思い込みがアイデアの幅を狭めることもあります。

例えば「企業の業務効率化」「ウェルビーイング」といった自分より外にある大きな課題から始めると、入念な調査がない限り、ピントがぼけた抽象的なアウトプットになりがちです。対して「SNSを見てしまう自分の指を止めたい」といった個人の衝動は、「極めて具体的である」という大きな利点があります。

従来では、こういった「ちょっと面白いかも」程度の衝動に大きくコストをかけることはできず、この利点を活かすことが困難でした。しかし、Vibe Codingは試行錯誤のコストを限りなくゼロにしました。
まず「自分が欲しい」から走り出し、大量に試作する中で「社会にとっての意味」を見つけ出し、そこへ接続していくーー今回のハッカソンでは、この順序が上手くハマったのではないかと思います。

「極めて具体的」な個人の衝動から始まるアプローチに、市民権を与えたこと。

これが、Vibe Codingの本質的な価値ではないでしょうか。

おわりに

社内でのAI活用推進

さて、こうしたAIの可能性を、実際の業務にどう落とし込んでいけば良いのでしょうか。
大規模で堅牢性が求められる商用のプロダクト開発においては、今回のようなドキュメントレスな手法ではなく、「Agentic Coging」的な手法が求められ、別途検討が必要です。
しかし、「個人の業務改善」や「チーム内のツール開発」レベルであれば、力を発揮できる場面は多いと考えます。

現在、私の所属する部署(コミュニケーション&アプリケーションサービス部 第二サービス部門)では、全社的なAIリテラシー向上と実活用に向けて、以下のような取り組みを行っています。

  • ユースケースの共有
    • サービス企画職向けの活用事例: AIによる市場調査/調査資料の作成
    • 活用チャネルの整備: 相談会の定期開催・最新情報の展開
  • 環境整備:
    • 全員が生成AI(Gemini・NotebookLM)を使用できる環境の構築
  • イベント実施
    • ハンズオンワークショップ: 実際にGeminiを触って体験し、活用方法をアイディエーションするワークショップの実施

今後は「より現場の業務に即して具体的にカスタマイズしていけるような仕組みづくり」にチャレンジしていきたいと考えています。
機会があればそちらの取り組みについても紹介していきたいと思いますので、社内の皆さんはじめ、ぜひお気軽にご連絡ください。

まとめ

生成AIの登場により、私たちは「正確な仕様書」や「高尚な目的」がなくても、思いついたアイデアを即、形にできる手段を手にしました。
もちろん、最終的なプロダクトとして世に出すにはロジックや品質が不可欠ですが、その入り口はもっと個人的で素朴なものでも良いのではないか。それが、今回私が最も実感したことです。

「まずは自分の業務を少し楽にしたい」「単純にこれを作ったら面白そう」そんな身近な動機から走り出してみることも、新しい価値を生む道となるかもしれません。
もし、こうした開発スタイルや、AIを活用した業務改善に少しでも興味をお持ちいただけたなら、ぜひ一緒にチャレンジしていきましょう。

それでは、明日の記事もお楽しみに!

参考文献

  1. Andrej Karpathy (@karpathy):該当ポスト(2025年2月3日)
  2. 山下裕毅:テトリスを3分するだけで暴飲暴食を防げる?海外チームが2015年に研究発表(2025年8月6日)
  3. J. Skorka-Brown, et al:Playing Tetris decreases drug and other cravings in real world settings(2015)
  4. Google Cloud:AIコーディングアシスタントを使用するための5つのベストプラクティス(2025年10月15日)
  5. Google Cloud:Gemini Code Assistエージェントモードを使用する(最終確認:2025年12月17日)
  6. Google Cloud:vibeコーディングとは(最終確認:2025年12月17日)
  7. M. Chen, et al:Vibe Coding vs.Agentic Coding: Fundamentals and Practical Implications of Agentic AI(2025)