みなさん、自転車乗ってますか〜!?
自作の自転車セッティング計算ツール「BikeFit Land」ですが、またまた新しい機能をアップデートしちゃいました!
今回追加したのは、サイクリストなら誰もが一度はハマる「クリート位置の沼」を解決するための『クリート位置ガイド』です!
「プログラムの裏側でどんなことやってるの?」「開発でどこに苦労したの?」なんて話を、ちょっとだけ開発者目線でお届けします!💻🔥
💡 なぜクリート位置の計算ツールを作ったの?
サイクリストの永遠のテーマ、「クリート、どこに付けるのが正解なの?」問題。
- 昔からの定番:「親指の付け根(母趾球)の真上!」
- 最近のトレンド:「いやいや、ちょっと深く(かかと寄り)に下げた方が足が疲れにくいよ!」
…って、情報がありすぎて迷子になりません?(僕も一時期完全に迷子でした笑)
そこで!「自分の足のサイズ」を入力して、「どう走りたいか(標準・深め・浅め)」を選ぶだけで、人間工学や論文データに基づいた『おすすめのミリ数』を一発で計算してくれる機能を組み込みました!

🛠️ プログラムの裏側:Angularでこんな風に組んでます!
今回のアプリは Angular(アンギュラー) というWEBフレームワークを使って作っています。
画面の入力欄に数字を入れた瞬間に、裏側でスッと計算されて結果がパッと変わるリアクティブな仕組みにしています!
👨💻 実際のコード(TSファイル)はこんな感じ!
import { Component } from '@angular/core';
// スタイルの型定義(標準・深め・浅め)
export type CleatStyle = 'neutral' | 'deep' | 'shallow';
@Component({
selector: 'app-cleat-position-guide',
templateUrl: './cleat-position-guide.component.html',
styleUrls: ['./cleat-position-guide.component.css']
})
export class CleatPositionGuideComponent {
// 入力値(初期値は255mmに設定)
footLengthMm: number = 255;
selectedStyle: CleatStyle = 'neutral';
// 走りのスタイルごとの補正量(データ駆動で管理!)
private readonly STYLE_OFFSETS: Record<CleatStyle, number> = {
neutral: 0, // 標準(ニュートラル)
deep: 5, // 深め(かかと寄り+5mmでふくらはぎの疲れを軽減!)
shallow: -3 // 浅め(つま先寄りー3mmでクルクル高回転!)
};
// リアルタイムで結果を打ち出す計算プロパティ
get calculatedPositionMm(): number {
if (!this.footLengthMm || this.footLengthMm <= 0) return 0;
// 足長に対して骨の関節が来る平均比率(約67.5%)を掛ける!
const baseRatio = 0.675;
const basePosition = this.footLengthMm * baseRatio;
const offset = this.STYLE_OFFSETS[this.selectedStyle];
// 四捨五入して整数値(mm)を返す!
return Math.round(basePosition + offset);
}
}
計算ロジック自体はスッキリまとめているので、動作もめちゃくちゃ軽快です!⚡️
😅 実はここ、めちゃくちゃ苦労しました…!(開発裏話)
「足のサイズに係数を掛けて出すだけでしょ?」って思われるかもしれないですが、プログラミングしていく中で地味〜に頭を抱えたポイントがありました(笑)。
1. 「靴の余裕(捨て寸)」という壁!
計算上「かかとから◯◯mmの位置!」ってバシッと綺麗な数値を画面に出せるんですけど、サイクルシューズってメーカーによってつま先の余裕(捨て寸)が全然違うんですよね!
「計算通り付けたのに、実際のシューズで測ったらズレてるぞ!?」ってユーザーを混乱させないために、画面の見せ方や「これはあくまで基準線だよ!」という補足アナウンスを入れるUIの工夫にかなり気を配りました。ていうか逃げた的な😅
2. 「最後は個人の好み」というリアル(笑)
論文を読み漁ってロジックを完璧に組み上げれば組み上げるほど、「…で、僕自身はどこにクリート付けて走ってるんだっけ?」と自分の靴を見たら【一番限界までかかと寄りに極振り】してました(笑)。 数値は数学的に正しく出すけれど、使う人に「この数値通りじゃないとダメなんだ」と思わせない、「迷ったときの原点として使ってね!」という優しさを画面デザインに込めるのが一番難しかったかもしれません!
🎪 まとめ:「BikeFit Land」でセッティングを楽しもう!
今回のクリート位置ガイドが追加されたことで、BikeFit Landはサドル高、ハンドル位置、空気圧、ショートクランク、ヒルクライム予測、補給食計算まで何でも揃う「フィッティングのテーマパーク」に一歩近づきました!🎉
「クリート位置、最近しっくりこないな〜」という方は、ぜひ遊ぶ感覚で数値を入力してみてくださいね!
それでは、良いサイクルライフを〜!🚲💨

