Gemini 3.1 Proで自転車用Webツールを作ってみる

現在の生成AIで自転車用のWebツールを作ってみたら、どれくらいのものが出来るのか？　試してみました。

まえがき

昨今は、プログラムが書けなくても生成AIとの対話だけでプログラムを作る「バイブコーディング」というものが流行しています。

2025年2月段階でのトライ

今から約1年前、ふと「生成AIによるプログラミングで自転車用のWebツールを作れないかな」と思いました。当時はまだバイブコーディングというワードはありません。2025年2月に登場したワードなので。

その時欲しかったのは、「自転車のジオメトリ検討ツール」です。シート角やヘッド角といったジオメトリ表の数値を入れると、図形でフレームの形を描画してくれるようなもの。海外サイトには似たようなツールもあるんですが、色々多機能すぎて使いづらく感じていました。もっと、最低限の値を入れるだけで、シンプルに形状が分かるツールが欲しい。

私もプログラムは書けるんですすが、「図を描画する」というのは、一般的なプログラミングでは中々やらない領域です。こういう所を生成AIならば上手いことやってくれるんじゃないか？と思って試してみることにしたのでした。

使ったのは、ChatGPT。当時のバージョンは、GPT-4oです。

しかし、出来上がったのは見るも無惨なツールでした。ジオメトリ表にあるような値を入力する欄は作ってくれたものの、どうやらChatGPT先生は「自転車がどういう形をしているのか」をまるで理解していない様子。当時は無料プランだったので、何度か手直しのやり取りをした所でトークン上限に達してしまって終了。

では、プログラミングに強いと言われる「Claude」ではどうか？ 当時のバージョン「Claude 3.7 Sonnet」でテストしてみました。

ChatGPTよりは自転車の形を理解しています。それでも、前輪がダウンチューブにめり込んでいるし、チェーンステーが下方向に傾いているし、やっぱり自転車の形が良く理解できていません。

2回ほど指摘したら割とまともになりましたが、ここで無料枠を使い切り。

2025年2月段階では、「無料枠だけでプログラミングはちょっと無理だな」という所管でした。

2026年2月、1年ぶりのトライ

最近、Geminiの有料プランを契約しました。年明けセールで、一年契約すると随分安かったので契約してみました。

1年前は無料枠の壁に阻まれて作れなかった「自転車のジオメトリ検討ツール」。「有料プランの今なら、トークン制限を気にしないで作れるのではないか？」「1年経ってAIの性能も更に上がっているはず」ということで、1年ぶりにテストしてみることにしました。

現在のGeminiのバージョンは「Gemini 3.1」です。一番プログラミング能力が高いとされる「Proモード」で試してみると……

いきなり、それなりのものが出てきてしまいました。一年前のGeminiは触っていないので分かりませんが、恐らくChatGPTと大差ないものを出したはず。それを考えると、現在のGeminiは「自転車がどういう形をしているか」をある程度理解したように見えます。

色々イマイチな部分を指摘しながら、「こうしてほしい」ということを指示すること約30回で、以下の段階までツールが育ちました。

かなり実用的なレベルになりました。

とりあえず、こういう感じの簡単なツールなら十分にバイブコーディングだけでも作れることが分かったので、色々とツールを作ってみることにしました。

作ったツールの紹介

Gemini 3.1 Proで作ってみたツールの紹介です。チャットでのバグ指摘や手直しはしていますが、私は1文字もコードは書いていません。用途に合えば使ってみてください。

フレームジオメトリ検討ツール

前述の「一年前に頓挫したが、今回作成に成功した」ツールです。完成までの指摘回数は約30回。

「オーダーフレームのジオメトリを検討する」使用シーンを想定したものです。指定するのは、トップチューブ長・シート角・ヘッド角であることが多いので、そこを基準に入力するようにしています。

全ての設定可能な値が互いに独立している(一つの値の変更が他の値に影響を及ぼさない)ようになっているのが特徴。

また、最近流行りのドロップドシートステーのシミュレートのため、「シートステーのドロップ位置(SSドロップ)」を調整できるようにしたのもこだわりポイントです。

初期値として、GE-110のMサイズのジオメトリ数値を入力しています。

ポジション比較ツール

2本のフレームのポジションを比較するためのツールです。「フレームジオメトリ検討ツール」をベースに拡張しました。完成までの指摘回数は約10回。

「フレーム載せ替えの際にポジションを再現する」使用シーンを想定しています。「サドル位置とハンドル位置を元のフレームと合わせられるか」を検討するためのツールです。

前のツールと違い、こちらは「リーチ」「スタック」を基準に入力します。「リーチ」「スタック」は、フレームの設計をした「結果」として出てくる数値ですが、異なるフレームのポジション比較をする時にはこの値を使ったほうが便利です。このため、トップチューブ長ではなく「リーチ」「スタック」を入力するようにしたわけです。

初期値として、「BikeA: GE-110(Mサイズ)」「BikeB: Oltre XR4(55サイズ)」という、私が持つ2台のロードバイクのポジションを入力してあります。
「Oltreはハンドルが近く感じるなぁ」と思っていたのですが、ステム先端はOltreの方が18mmも近いという計算結果。ハンドリのリーチはOltreの方が5mm長いので、差し引き13mm近いことになります。出来ればOltreのステムを10mm伸ばしたいのですが、Oltreのハンドルはステム一体型ハンドル(約10万円)なので買い替えることも出来ません……。

PBP 2023 計画シミュレーター

2023年PBPの前にExcelで作ったシミュレーターをWeb版に移植しました。完成までの指摘回数は約20回。

左の領域で「スタート時間」「各PC間の平均時速」「各PCの滞在時間」を入力すると、右の領域にグラフで表現されるというもの。点線はPCクローズのデッドラインで、それよりも下に行かずにゴールすることを目標に数値を調整します。パリの日没/日の出時刻を計算して、夜の時間帯は網掛けするように設定。これにより、「どこで日没/日の出を迎えるか」が判断できるので、睡眠計画に役立ちます。

2027年のPC配置はまだ完全には明らかになっていませんが、明らかになったら2027年版も作ろうと思っています。

信号数カウントツール

指定した2点間にルートを引き、その間の信号数をカウントするツール。こちらは外部APIを利用する必要があるので非公開です。欲しい人がいたら連絡をいただければお渡しは可能です。

「キャノボでルートを引く時に少しでも信号数が少ないルートを選べないか」を検討するシーンを想定して作りました。

OpenStreetMapは「信号の設置場所」というデータは持っているんですが、信号機というのは一つの交差点に「4個」設置されている場合もあれば「2個」設置されている場合もあります。単純に「ルートから20m以内にある信号の個数を数える」だけでは駄目で、「交差点の半径●m以内にある信号は一箇所と数える」みたいな名寄せ処理を行う必要があり、そこの指摘に苦労しました。

作成時に苦労した点

ほぼ1日で4つのツールを作ることが出来ました。ただ、色々と苦労した点もあったので、そこについても書いておきます。

意味不明なバグが作り込まれている

生成AIに「川崎市で美味しいラーメン屋を教えて」と聞いてみたら、存在しない店を紹介されたことがあります。いわゆるハルシネーション(知ったかぶり)というやつ。これは、プログラミングにおいてもまだ存在します。

最初に作った「フレームジオメトリ検討ツール」では、ファーストバージョンからそれなりに「自転車っぽい」形状を出力してくれました。ただ、本来あるべき「ヘッドチューブ」の描画が抜けています。このヘッドチューブというものが存在することを教えたら、今度はタイヤがダウンチューブにめり込みました。何度か指摘を行ってようやく正しい自転車の形になりました。

プログラミングにおいてもハルシネーションはまだまだ多いようなので、「ハルシネーションを見抜いて指摘する」「ハルシネーションが起こらないようにプロンプトをしっかり指定する」必要があるということなのでしょう。

細かい仕様までは察してくれない

「PBP 2023 計画シミュレーター」を作る上で1点「これは言わないと分からないよな」と思った仕様がありました。それは、「ゴールクローズ時刻」の判定です。

PBPの制限時間は「90時間」とされていますが、実は「90時間00分59秒」までは認定されます。この59秒のボーナスタイムで認定されたという人もいます。

Geminiくんはそんなことはさすがに知らないので、「90時間00分00秒」を基準に計算を行っていました。修正を行い、「90時間00分59秒まではセーフ」という仕様に変更してもらいました。

こういった細かい仕様は、人間がプロンプトでしっかり指示をして上げる必要がありそうです。

まとめ

Geminiによる自転車ツールの作例紹介でした。

コードを自分で書かなくても簡単なツールは作れるになってきていることは分かりましたが、やはり人間側による「仕様の正しい把握」「仕様を正しくプロンプトに書き込む」という作業はまだ必要だなと感じました。

一方、単純なコーディング作業は今後ほとんどがAIに任せられるようにはなりそうですね。今のところは人間にも「要件定義」「レビュー」という仕事が残っていますが、果たして今後どうなるか……。

自分の本業(SE)にも関わることなので、今後とも定期的に「AIのプログラム作成能力」については確認していこうと思っています。