// パーソナルフィットネスウェブサイト

パーソナルフィットネスウェブサイト

フィットネスWebアプリ / Next.js / ワークアウト計画 / カロリー追跡

一言要約： Next.jsで構築された、無料かつアカウント不要のパーソナルフィットネスプラットフォーム。パーソナライズされたワークアウトプラン、カロリー目標、進捗管理、栄養記録をすべてローカルに保存し、登録なしで利用可能です。

ライブサイト：pfwfm.vercel.app

主な機能

• ユーザープロフィールと目標に合わせたパーソナライズされたワークアウトプラン
• 保存済み食品と日次ログによるカロリー追跡
• 三大栄養素（マクロ）の内訳を含む栄養記録
• 視覚的なチャートによる進捗管理（Recharts）
• プロフィールを作成しプログラムを推奨するオンボーディングフロー
• 個別のルーチンを作成できるカスタムワークアウトビルダー
• プロフィールのフルエクスポートと共有
• アカウント不要 — すべてのデータをlocalStorageに保存
• 完全無料、サブスクリプションなし、広告なし

私の貢献（役割と責任）

フルスタック開発：

• TypeScript厳密モードを用いたNext.js 15 App Routerによるアプリケーション全体の構築
• プリセットプログラムとカスタムルーチンを備えたワークアウト計画システムの実装
• ローカルストレージ永続化によるカロリーおよび栄養追跡機能の開発
• ステップバイステップのプロフィール設定を行うオンボーディングフローの作成
• Rechartsを用いた進捗可視化ダッシュボードの構築

UI/UXデザイン：

• shadcn/uiコンポーネントを使用したレスポンシブなモバイルファーストレイアウトのデザイン
• next-themesによるダークモード対応の実装
• Framer Motionを使用したアニメーション付きランディングページとスムーズな遷移の作成
• フィットネス追跡機能向けの再利用可能なコンポーネントシステムの開発

アーキテクチャ：

• localStorageベースのデータ層（8つのpfw_キー） — バックエンド不要
• 機能ごとのディレクトリによるモジュール化されたコンポーネント構造
• TypeScript厳密モードによる型安全な状態管理
• 詳細な機能仕様に基づくスペック駆動開発

直面した課題

• バックエンドなしのアーキテクチャ： 複雑な関連データ（ワークアウトプラン、ログ、栄養）をすべてlocalStorageで管理するため、慎重なキー設計とデータ移行戦略が必要でした
• 機能間の整合性： ワークアウトプラン、カロリー追跡、進捗チャートがすべて同じユーザープロフィールデータを正しく参照するようにすること
• 大規模な型安全性： localStorageのシリアライズ境界を越えて、成長するコードベース全体でTypeScript厳密モードを維持すること
• モバイルファーストのレスポンシブデザイン： フィットネス追跡のフォームやチャートを、スマートフォンとデスクトップの両方でシームレスに動作させること

プロジェクトアーキテクチャ

• フレームワーク： Next.js 15 App Router, TypeScript 5.x (strict: true)
• UI： shadcn/ui, Tailwind CSS v4, Framer Motion, Lucide icons
• チャート： Recharts v3 (パフォーマンス向上のため遅延読み込み)
• データ層： ブラウザのlocalStorage (8つのキー：プロフィール、アクティブプログラム、ワークアウトログ、進捗、栄養、カロリーログ、保存済み食品、カスタムワークアウト)
• フック： usehooks-ts (useLocalStorage), カスタムフック
• テスト： Playwright (E2E), Vitest (ユニットテスト)
• デプロイ： Vercel

デモプレビュー

• ライブサイト： pfwfm.vercel.app
• プラットフォーム表示： Web (レスポンシブ、モバイルファースト)
• 実演された機能：
  • ヒーローセクション付きのランディングページ
  • プロフィールと目標を設定するオンボーディングフロー
  • ワークアウト、栄養、進捗の概要を表示するダッシュボード
  • プリセットプログラムとカスタムルーチンを備えたワークアウトページ
  • 保存済み食品によるカロリーおよび栄養追跡
  • 進捗チャートと統計

開発リソース

• ガイド/ドキュメント：
  • Next.js, shadcn/ui, Tailwind CSS v4, Framer Motion ドキュメント
  • 開発ガイドラインのためのリポジトリ内 CLAUDE.md

詳細やコードベースの確認が必要な場合は、作成者に直接お問い合わせください。