🧱

v0を使ってブロック崩しゲームを作ってみたら、土木業界でもAI開発がぐっと身近になりそうな話

に公開
AI
ゲーム開発
ゲーム制作
v0
土木
tech

はじめに

はじめまして、Malme開発部、平野です。
最近、私たちのチームではAI×スピード開発を合言葉に、社内外のプロジェクトを効率化できないかと試行錯誤しています。というのも、クライアントからのヒアリング→要件定義→モックアップ作成→提案書…という流れが長くなりがちで、「もっとサクッとイメージ共有したい！」という声が上がっていたんですよね。

そんな中、「v0」という新しいAIアプリケーションを導入したところ、想像以上の効率アップを実感しているんです。今回ご紹介するのは、その一例として作ってみたブロック崩しゲームのお話。
「ゲームの話？」と思われるかもしれませんが、これが土木業界にも大いに役立ちそうなポイントが詰まっているんですよ。

自己紹介

建設コンサルタントで災害復旧業務を担当し、土木業界のDX化を1秒でも早く進めたいと思い、Malmeへ転職。
Malme入社後は技術部でBIM/CIMの導入支援やモデリング支援業務に従事し、
現在は開発部で、AIなどの先端技術を取り入れながら、土木業界の課題解決に取り組んでいます。

業界を変えたい…という強い気持ちとマッチして、Malmeに入社した平野さん。
詳しく知りたい方はこちらの記事をお読みください。

https://note.com/malme_recruiting/n/naa3080eeca62

きっかけ

Malmeでは、土木業務で発生する様々な課題をITで解決するため、日頃から提案活動や要件定義を念入りに行っています。

  • クライアントの抱えている問題をヒアリングし、
  • 要件をまとめ、
  • UIモックやシステム構成図、見積もり、提案書…

これらを1からすべて手作業で作るとなると、かなりの時間と労力がかかってしまいます。それが複数案件重なった場合は、リソースがカツカツ。

そこで私たちが注目したのがAIツール。
既にChatGPTなども積極的に取り入れていますが、最近導入したv0というツールが、特にアプリケーションモックの自動生成で大きな力を発揮するということで試してみました。

v0とは？

さて、そのv0とは何者なのか？
公式サイトいわく、

“v0 is your always-on pair-programmer.”
A generative chat interface with in-depth knowledge on modern web technologies. It can provide technical guidance while building on the web, generate UI with client-side functionality, write and execute code in JavaScript and Python, build diagrams explaining complex programming topics, and more.

とのこと。要するにChatGPTのようなチャットインターフェースで、UI作成やコード生成を自動でやってくれるAIツール、というわけです。
「UIイメージからコードまで勝手に作ってくれる」「要件を追加すると、それに合わせて修正案を出してくれる」など、人間のペアプログラマーさながらの動きをするのが魅力的。さらに、バージョン管理機能（v1, v2, v3...）が備わっていて、途中でやり直しも簡単にできるそうです。

実際に使ってみた結果

今回の題材は、「土木の要素を盛り込んだブロック崩しゲーム」。会議で話題に上がったとき、誰かが「バックホウをバーに見立てたり、盛り土をブロック代わりにしたら面白そう」と冗談めかして言ったのが始まりでした。

自然言語で指示→モック生成

まず、v0に対してザックリと指示を出します。
「ブロック崩しのUIを作って」「盛り土をブロックに」「バーの形状はバックホウのアームっぽく」
などなど。日本語でもそこそこ通じるのがスゴイところ。英語の方が伝わりやすい箇所もありますが、細かい要件を少しずつ追加していくと、だんだんゲームとして成立する画面が出来上がっていきます。

できあがったブロック崩しゲーム

出来上がったアプリを動かしてみました！
https://v0-hirano-demo.vercel.app/
上記のURLで実際にプレイできます。


昔のFLASHゲームを思わせるレトロなUIです。
ゲームスタートを押すと、ブロック崩しが始まります。


実際のゲーム画面はこんな感じ。
左のバーを上下に動かして、右側のブロック（盛り土）を崩していきます。

  • ボールのバウンド回数に応じてスピードアップ
  • アイテムを取るとボールが増える・スコアがアップ
  • ブロック（盛り土）の位置を変えたり種類を増やす
  • スコアが一定値を超えるとレベルアップ

……こんな要望まで伝えたところ、ちゃっかり反映されてるんですよね。さらに、自動生成されたソースコードもその場で閲覧・編集可能という便利さ。

実際の映像を見ると、想像以上にちゃんとブロック崩しらしい動きが実現されているのがわかると思います。アイテムを取ると画面内のボールが増えたり、速度が変化したり。発注側（私たち）の要件と、AIの学習リソースがうまく噛み合った結果ですね。

使ってみて感じたメリット・デメリット

  • メリット

    1. とにかく早い！
      普通に手でコードを書いてUI整えて…となると、それだけで半日以上かかるところを、v0なら数十分で基本形が完成。
    2. モック段階での誤解が減る
      クライアントやチーム内に「こんな画面を想定してますよ」と見せるたたき台があれば、言葉だけの説明よりもイメージが合いやすいです。
    3. バージョン管理がラク
      要件を追加したり修正指示したりすると、チャットごとにバージョンが保存されるため、いつでも前の状態に戻せます。

  • デメリット

    1. 複雑な機能は要注意
      シンプルなゲームなら問題ないのですが、大規模システムや厳密な要件（セキュリティ要件など）が絡むと、AI任せだけでは足りないことも。
    2. 指示があいまいだとズレが生じる
      「もうちょっとカッコいいUIにして」とか抽象的すぎると、期待外れのコードが返ってくる場合も。細かく指定するか、後から編集できる前提で使うのがベスト。

どの様に業務に活かせるか

今回、ブロック崩しというゲームで遊んでみましたが、本来の狙いは**「クライアントとの提案フェーズをもっとスムーズにする」**ことでした。

  1. 提案前の要件定義で、ざっくりモックを作成

    • お客様が求める機能をヒアリングしたら、すぐにv0でモックを生成。
    • 「こんな感じですか？」と画面イメージを見せながら話せるので、イメージの齟齬を最小化できます。

  2. 見積もりや構成図の作成を効率化

    • 「この機能が増えるなら、UIはこう変わります」「予想データフローはこんな構造に」といった案をAIに作らせ、そこから細部を詰めるイメージ。

  3. 再提案が必要になっても、バージョン管理でロールバック可能

    • 前のバージョンに戻しつつ、追加要件だけを足して新提案を作成。まさにペアプログラマー感覚です。

    Malme自身がこの技術を使ってみて実感したのは、要件さえしっかり伝えれば、あとはAIが組んでくれるという安心感です。

参照情報

  • v0 公式サイト
    https://v0.dev/faq
    v0の詳細や使い方のドキュメント、よくある質問がまとまっています。

  • ブロック崩しゲーム
    https://v0-hirano-demo.vercel.app/
    今回のブロック崩しゲームが遊べます。バウンド速度やアイテム効果が実際に確認できるので、興味ある方はぜひ。

  • Malme公式サイト
    https://malme.net/
    弊社の土木×ITソリューションや、提供サービスについて紹介しています。ドボクをもっとおもしろくというメッセージを掲げ、BIM/CIM・3次元設計支援や受託開発、自社開発などを実施しています。

Malmeでは、AIが苦手とされる土木業界でも、開発をもっと身近にを掲げ、積極的に新しいツールを取り入れています。今回の「v0」導入で、プロトタイプや初期提案がぐっと楽になり、さらにお客様とのやり取りがスムーズになるという手応えを得ました。

この先、ブロック崩し以外にもさまざまなテーマで応用実験を進め、土木DXを加速させていきたいと考えています。
実際、すでにMalmeでは数多くのプロジェクトにAI技術を取り入れており、業務効率だけでなくイノベーションの創出に繋がる瞬間を数多く目撃しています。

「こんなことできないかな？」というアイデアがあれば、ぜひ一度ご相談ください。AI＝難しそう、土木分野では相性が悪そう…という先入観を覆して、業界の常識を超えるソリューションを生み出していきましょう。

以上、ブロック崩しゲームの事例から見るv0の可能性のレポートでした。最後まで読んでいただき、ありがとうございました！

【エンジニア大募集！】

遊び心を持ちつつ、最先端のAI技術に触れながら土木業界の課題を本気で解決していきたい。そんな想いを共有できるエンジニアを、Malmeではいつでもお待ちしています。

  • AIやLLMを使った開発に興味のある方
  • 土木分野の知識や現場経験を活かしてITソリューションを作りたい方
  • 3DモデルやBIM/CIM、画像解析などにワクワクする方
  • チームの雰囲気を大切にしながら、新しいアイデアを試してみたい方

私たちと一緒に、土木×ITをもっと面白く、もっと身近にしていきませんか？
興味のある方は、ぜひ Malmeの採用情報をチェックしてください。

https://malme-doboku.studio.site/recruit

最新テクノロジーを取り入れ、土木業界の「できない」を「やってみよう」に変えていく仲間をお待ちしています！

Discussion