ぶんぶんウォーク2025 特設サイトを制作しました!【バイブコーディングでのLP制作実績】

works

国分寺市で毎年開催されている人気イベント「ぶんぶんウォーク」。
私は事務局として運営に携わっているのですが、2025年版の特設サイトを、AI開発環境「Antigravity」「Gemini 3 Pro」を使って制作しました!

今回は、その制作の裏側やツールの使用感などをまとめてみました。

なぜ特設サイトを作ったのか?

ぶんぶんウォークの公式Webサイトは、ノーコードツールの Bind Up というもので制作されています。


必要な情報は一通り掲載してあるのですが、ここ数年ほど、こんな課題がありました。

「期間中、日付ごとにどこでどんなイベントが行われているのか、一覧で分かるページがない…!」

パンフレットのPDFには拠点(施設)ごとのイベント情報は載っていたのですが、スマホでぱっと見やすい形にはなっていません。
そのため「イベント当日用に、まとまったページがほしい」と思うようになりました。

ただ、Bind Upでの構築では、

  • 日付ごとにイベントを出し分ける
  • 前日・翌日のイベントを切り替える

といった仕組みの実装が難しい状況。

そこで、静的なWebページを別途つくるという方向で進めることにしました。

制作プロセス:わずか半日で完成!

今回の制作は、11/19(水)にGoogleからリリースされたばかりのAI開発環境「Antigravity」「Gemini 3 Pro」をフル活用。

サイトに掲載したい情報はひと通り揃っていたとはいえ、コードとしては完全にゼロからの開始で、なんと 11/20(木)の午後から約半日で完成しました。

AIコード生成のスピードには、本当に驚かされました…!!

実装したコンテンツ

今回の特設サイトは、イベント当日の使い勝手を重視した構成となっています。
要素としては下記のもの。

  • メインビジュアル + キャッチコピー
  • 今日のイベント
  • イベント一覧(前後日の切り替え付き)
  • クイズラリー & ミッションラリー紹介
  • 8つの「ターミナル」紹介
  • 公式マップ(PDF)紹介
  • サポーター紹介

特にこだわったのが「今日のイベント」「イベント一覧」の部分。

イベントデータを構造化データ(今回はCSV。JSONに変換してもよかったかも。)にまとめ、
日付列を参照して
今日のイベントを自動表示、さらに
「前日」「翌日」ボタンで切り替え可能
な仕組みを実装しました。

Bind Up では難しかった部分が、静的ページ+AI生成コードであっさり解決できました。

Antigravity & Gemini 3 Proを使ってみた感想

VSCodeユーザーなら迷わず使える

AntigravityVSCode(Visual Studio Code)のフォークということで、普段VSCodeを使っている人ならほぼそのままの操作感
画面構成もショートカットも基本的には変わらず、すぐに馴染めます。

AIエージェントとしての機能も、GitHub Copilot の操作感と似ていたため、Antigravity 内で Gemini を呼び出すのもスムーズでした。

テキスト指示だけでベースが一気に完成

デザインも機能実装も、文章で指示すれば一気にアウトプットが出てきます。
必要に応じて画像で修正指示もできるため、細かい手直しも早い。

レスポンシブ対応についても、基本的にはおまかせしつつ、たとえば8つの「ターミナル」
セクションについて、「PCでは4つ並び×2行に、モバイルでは1つだけ横幅いっぱいに表示し、横にスワイプで切り替えられるように」
といった指示をすれば、バッチリ対応してくれました。

「Nano Banana Pro」による画像としてのLPデザイン生成も、そのクオリティの高さが話題になっていますが、画像からコードへの落とし込みがどのくらいの精度でできるか未知数だったこともあり、今回はあえて使わず、Gemini のコード生成だけで完結 させました。

完成したページはこちら!

ぶんぶんウォーク2025 特設サイト
自分の足でお気に入りを見つけよう。ぶんぶんウォーク2025の特設ページです。ぶんぶんウォークは、まちをぶらぶら歩きながら、国分寺の魅力を再発見するイベントです。イベントに参加したり、ぶらぶら歩く途中のカフェやお店に立ち寄ったりしながら国分寺のまちを満喫してください。

イベント開始が翌日金曜に迫っていたためかなりの突貫工事でしたが、必要な情報は過不足なくまとまったページになったと思います。

まとめ

生成AIで誰でも簡単にLPが作れるようになった!とは正直あまり思えません。

ただし、

  • Web制作の最低限の知識がある
  • スピード重視で作りたい

といった状況では、Antigravity + Gemini 3 Pro の組み合わせは非常に強力だとおもいました。

今回のぶんぶんウォークのように、予算が限られている地域イベントのLP制作には、とても向いていると感じました。

もちろん、言うまでもなく
しっかりした制作予算があり、プロのデザイナー・プロのフロントエンドエンジニアによって構築されたWebサイトがもっとも健全であり、理想的だと思います。
私自身も、プロの方々が時間をかけて作り上げるサイトの完成度や価値を、とても尊重しています。

ただ一方で、地域イベントや任意団体、助成金事業など、「どうしても予算の捻出が難しいけれど、それでも必要な情報を伝えるWebページが欲しい」という状況に出会うことも少なくありません。

そういった現場に対して、

  • 必要最低限の質
  • モバイルでの使いやすさ
  • 必要な機能の実装
  • スピード感のある公開

を重視した”短納期LP制作”という形で、お役に立てる余地があると感じています。

「地域にとって大事なコンテンツをつくっている!プロに頼むほどの予算はない、でもWebページが必要」
そんな状況がありましたら、ぜひ一度、お問い合わせいただければと思います!

タイトルとURLをコピーしました