投稿日2026年2月17日

自転車レース「富士ヒル」のペース配分表を開発してわかった、人間だからこそ気づけたこと

今年はWebアプリやWebサイトを10個作るぞ！と決め、今月は2つ目のアプリが完成！富士山五合目を目指して走る人気自転車レースの練習補助になるようなアプリを作ってみました！

作ったもの

Mt.富士ヒルクライム（通称富士ヒル）のゴールまでの目標タイム別ペース配分計算機です。富士ヒルは毎年たくさんのサイクリストが富士山五合目を目指して、全長約24km、標高差約1,255mのコースを駆け上がる、日本最大級のヒルクライムレースです。

スライダーをドラッグしたり、プリセットにある目標リングやタイムをクリックすると、距離に応じた目標通過タイムを表示します。また、距離表示は1kmごと、5kmごと、◯合目ごとに選べます。

「印刷する」ボタンをクリックすると、トップチューブに貼れるくらいの細い感じで印刷できます。

APIを使っていないので、前回のアプリよりシンプルです。Antigravityのモデルは、最初Gemini 3 Pro を使いました。公開後、試しにClaude Sonnet 4.5でリファクタリングしてみましたが、シンプルなアプリだからかあまり違いがわからず。

手順も前回とほぼ同じく、Antigravityへの指示をして、UIや機能の調整してデプロイ。

富士ヒルは自分でも参加しましたし、以前「富士ヒル決意表明ジェネレーター」を作ったくらい、陰ながら応援している自転車イベントです。出場するすべての人を遠隔応援するよ！

富士ヒルのエントリーが始まる2月くらいにあわせて何か作ろうとアイデア出し。

などなど考え、1ヶ月で作れそう＋あまり存在してなさそうなものを考えて、「目標別ペース配分のタイムテーブル」を作ることにしました。

実はこのペース配分表、オリジナルのものは富士ヒルの公式でも公開しています。ただ、目標のタイムが限られていたり、どういったペース配分になっているのかよくわからなかったりで、少し使い勝手が悪かったんですよね。そこで、もう少し目標タイムのアレンジができるようにしました。

まずは目標タイムを設定して、それにあわせて1kgごとに目標ペースを表示するシンプルなタイムテーブルが完成。

続いて表示距離を 1kmごと、5kmごと、◯合目ごと、と選べるようにしたり。

印刷できるようにしたり。

データ表示系はあまりごちゃごちゃしたUIにしたくなかったので、色味の調整や背景画像を加え、左右のエリアをより見やすくするために割合調整した程度。

今回もNext.jsを使ったので、Vercelで公開。APIを使っていないので、GitHubのリポジトリーを連携させてクリックするだけで公開できました。

このあとは多言語化したり、速度を表示しようかなーと、もう少し機能を加えようと考えているところです。

前回のようにAIに（ほぼ）丸投げではなく、人間的なこだわりも加えています。

富士ヒルのコースは全長24km。それを目標タイムにあわせて1kmごとのタイムを提案してもらいましたが、AIに「よしなに作って」と言うだけでは、ただの割り算（平均）になってしまいました。

そこで、公開されているコースプロフィール（PDF）から、勾配データに基づいて、急な坂は遅く、緩やかな坂や平坦は速くなるようにペース配分を調整。特に富士ヒルのコースは最初に急な坂が続くので、平均値を出しただけだと実走の時に序盤かなり焦るペースになってしまうんですよね。

実際にそのコースをロードバイクで走った経験がある人が、正確なデータを渡してこちらから提案していかないと、AIだけだと「それっぽいけど当てにならない情報」を言ってくるなぁ、という気付きを得ました。

ペース配分表は印刷できるようにボタンを設置しています。印刷されるのは指定した距離と目安のタイムのみ。横幅約3.5cmにおさまる程度の細長い表で印刷できます。（印刷用のCSS、久々に書きました…。）

これはロードバイクに乗る人あるあるかなと思いますが、目標タイムやペースをステムやトップチューブと呼ばれるハンドル下方にある棒？に貼ったりするんですよね。それに合わせて印刷できるようにしています。

ユーザーが実際にどう使うかを想像したり、実際にそういった人に会って話して…という体験は、まだまだ人間のお仕事ですね。

遠いからなかなか富士ヒルには参加できないのですが、富士ヒルに参加するすべての人を画面から全力応援しています！こんな機能がほしいなっていうのがあれば、Xからお気軽にリプください！