💡開発背景・課題意識

筋トレを継続する上で「記録を残すこと」は重要ですが、既存アプリの多くは数値やグラフでの表示が中心でした。日本市場の主要アプリ8種（FiNC、筋トレMemo、Strong等）を調査したところ、カレンダー表示機能を持つアプリでも「実施日を赤く表示する」程度に留まっており、トレーニング強度を段階的に視覚化するアプリは存在しないことがわかりました。

「頑張った日は濃い色、軽めの日は薄い色」というシンプルな視覚表現で、継続のモチベーションに繋がる「努力の可視化」を実現するため開発しました。

⚡主な機能

カレンダー×強度の視覚化（コア機能）

主観的強度（1〜5段階）をカレンダー上に色で表示
ユーザーがレベル1とレベル5の色を設定すると、中間レベル（2〜4）のグラデーションを自動生成
月間の努力量が一目で把握可能

トレーニング記録

部位・種目・重量・回数・セット数の記録
左右別のセット管理（ダンベルカール等のワンハンド種目に対応）
メモ機能でフォームの気づきなども記録可能

カスタマイズ性

種目・部位の自由な追加・編集・削除
お気に入り種目の登録で入力を効率化
左右別記録のON/OFF切り替え

PWA対応

ホーム画面への追加でネイティブアプリライクな体験
オフライン時もデータ入力可能（オンライン復帰時に自動同期）
アプリストアを経由せずブラウザから即利用開始

🛠技術スタック

カテゴリ	技術
フロントエンド	React 18 / Next.js 14 (App Router) / TypeScript
スタイリング	Tailwind CSS
状態管理	Zustand
バックエンド	Supabase（PostgreSQL / Auth / Row Level Security）
ホスティング	Vercel
PWA	next-pwa / Service Worker

🔧技術的な工夫・設計判断

色のグラデーション自動生成

ユーザーが2色を指定するだけで5段階の中間色を生成する機能を実装。HSL色空間で補間計算を行い、自然なグラデーションを実現しています。

左右別記録のデータ設計

左右別対応は種目単位でフラグ管理し、セットテーブルにsideカラム（'left' | 'right' | null）を持たせる設計としました。既存の記録機能への影響を最小限に抑えつつ、柔軟な拡張性を確保しています。

オフラインファースト設計

ジムでの電波不良を想定し、IndexedDBにローカルキャッシュを保持。オンライン復帰時にSupabaseと同期する設計で、データ消失リスクを軽減しています。

Row Level Security（RLS）の活用

SupabaseのRLS機能により、ユーザーは自分のデータのみアクセス可能。フロントエンドのバグがあってもデータ漏洩が起きない設計としています。

レスポンシブ対応

モバイルファーストで設計し、カレンダーUIはタップ操作に最適化。PCでも同一コードベースで動作します。

📊競合との差別化ポイント

観点	既存アプリ	キンロク
カレンダー表示	実施日を単色で表示	強度を5段階の色で表現
色のカスタマイズ	固定または限定的	2色指定で自動グラデーション
左右別記録	非対応	対応（種目単位で切り替え）
PWA対応	ほぼ皆無	完全対応（オフライン動作）

🚀今後の展望

トレーニングボリューム（総負荷量）のグラフ表示
種目別の1RM推移グラフ
SNS共有機能（カレンダー画像のシェア）
データエクスポート（CSV形式）

キンロク

ステータス

外部リンク

閲覧数

概要

詳細