【個人開発】運動習慣＆身体の変化を管理するアプリを作りました！

はじめに

初めまして！Ryoです！
私はプログラミングスクールの「RUNTEQ」で2024年11月から学習を始め、
未経験からエンジニアを目指しています！
今回ポートフォリオとして「Fitgraph」を開発しましたので、サービスについて開発理由やこだわったポイントについて紹介します！

1. サービス概要

Fitgraph（フィットグラフ）

GitHubリポジトリ

続けられるダイエットを、Fitgraphで。

体重や写真データなどを記録し、グラフや写真のレイヤー機能を使って身体の変化を実感しながらモチベーションが維持できるようサポートします。
また、性別や希望するトレーニング強度等からユーザーのニーズに合わせて動画を紹介し、トレーニングの実行まで一貫してサポートします。

主な機能

• 身体情報入力
  カレンダーから入力日を選択して体重、体脂肪を入力します。
  また、その日の身体の写真も登録することができます。
  （スマホからアプリにアクセスしている場合、カメラ機能を使うことが可能です。）

• 記録
  入力した情報をもとに、数値は折れ線グラフで、写真はレイヤー表示やBefore/Afterで
  身体の変化を確認できます。

• 動画
  マイページで設定した情報をもとにユーザーに合わせたYoutubeの動画を紹介します。

• マイページ
  アカウントの詳細設定を行います。
  特にここで性別とトレーニング強度を設定することで、紹介動画に反映します。

2. 開発のきっかけ

1. 最近太ってきたと感じ、痩せたいと思った

私自身、最近運動不足などもあり気づけば20kgほど増えてしまい、
そろそろ痩せないとと…個人的な理由です（笑）
また、過去に15kgのダイエット経験があり、その時「こんなアプリがあれば
もっと楽だったのに」と思っていたアイデアを形にしたいと考えて制作に至りました。

2. 体重と写真の管理を別々で管理するのが手間だった

ダイエット中は、体重はアプリで記録し、身体の写真はスマホの
フォルダで管理するという形で運用していました。
しかし、記録が分散して非常に不便で、振り返りづらい状況でした。
そこで一つにまとめたものを作りたいと思い形にしました。

3. オフ日に YouTube の筋トレ動画を探すのが手間だった

筋トレのオフ日や軽い運動の日は、YouTube でお気に入りの
トレーニング動画を探して取り組むことが多かったのですが、
毎回検索したり、保存した動画を探したりするのが地味に手間でした。
そこで、動画探しやお気に入り動画へのアクセスをスムーズにしたいと
考え、アプリに組み込みました。

4. ダイエットが続かない人に一度使ってみてほしいと思った

ダイエットで一番難しいのは「続けること」であると痛感しています。
その中で私が続いたときに、たまたま見つけたやり方に加えアイデアを
詰め込んでみました。
その続いた方法をアプリという形でまとめることで、一人でも「これなら
続けられるかも」と感じてくれる人や誰かの成功のきっかけになれたら、
開発した意味があると思っています。

3. 機能紹介

1. 身体情報管理

• 記録入力・編集

体重、体脂肪率、身体の写真などを登録・編集します。
体重・体脂肪率・写真は、空欄でも登録可能な柔軟な仕様です。

• カレンダー機能

カレンダーでは、今日の日付・入力済みの日・選択中の日を色分けして視認性を高めています。

2. ユーザー機能

• マイページ設定

マイページから各情報を登録することで様々な機能を扱うことができます。
例えば、「目標体重」でグラフに表示させたり、「生物学的性別」と「トレーニング強度」からトレーニング動画の提案を行ったりします。

• LINE連携による通知設定

LINEと連携し、トレーニング時間や記録の時間を通知設定することができます。

3. 記録（グラフ）

• 折れ線グラフと身体変化表

日時と体重で折れ線グラフを作成し、体重の変化が直感的に分かりやすい様にしています。
目標体重はマイページで設定した値が表示されます。
表示期間は「3ヶ月・1ヶ月・3週間・1週間」の4種類から選択できます。
また、下の表に目標体重に対しての差分や、記録した体重からどれだけ変化があるか数字としても一目でわかるようになっています。

4. 記録（写真）

• 身体の変化レイヤー図

登録した写真の記録を画像下のダイヤルをスライドさせてレイヤーのように
画像を切り替えが可能で、簡単に身体の変化を確認することが出来ます。
表示期間はこちらも３か月、１か月、３週間、１週間から選択できます。

• Before/After写真

登録した写真の記録を表示期間内の一番過去の写真と最新の写真を縦並びに表示させることで一目で分かるようにしています。

5. トレーニング動画紹介

• ユーザーに合わせたYoutube動画の紹介

マイページで設定した性別・強度設定をもとに YouTube API の検索条件を
カスタマイズし、ユーザーに適した動画を提案します。お気に入り動画の
URL登録も可能です。

6. その他の機能

• gem devise・Google認証、LINE認証を使ったユーザー登録・ログイン機能
• 2FA認証
• GitHub Actionsによるテスト自動化(Rspec・RuboCop)
• Google Apps Scriptを活用したスリープ対策
• お問い合わせフォーム(Googleフォーム)
• 使い方説明
• 利用規約
• プライバシーポリシー

4. 使用技術について

技術スタック

技術選定の理由

• Devise + OmniAuth: 安全で拡張性の高い認証システムを構築
• devise-two-factor + rotp: 二要素認証の実装によるセキュリティ強化
• Hotwire (Turbo/Stimulus): グラフの部分更新とシンプルな設計
• Tailwind CSS + daisyUI: 効率的なUI開発とデザインシステムの統一
• Simple Calendar: シンプルで高いカスタマイズ性のあるカレンダー表示
• Chart.js: 体重および体脂肪率の変化を折れ線グラフで直感的に可視化
• Active Storage + ImageMagick: 身体の画像の効率的な管理と最適化
• YouTube Data API: Youtubeの動画検索及び表示機能
• LINE Messaging API: ユーザー普及率の高さとプッシュ通知機能

5. 工夫・こだわりポイント

1. カレンダー機能の色合いについて

記録系アプリに欠かせない「入力済み日のマーキング」を工夫しました。
未入力 → 入力済み → 今日の日付 → 選択中の日付
の順に状態に応じてグラデーションを変えることで、入力状況がひと目で分かるように工夫しました。

2. グラフの下に表でもどれくらいの変化があるかまとめた

視覚的な変化を示すためにグラフを表示していますが、数値を正確に知りたいときは読み取りづらいため、グラフの下に体重のBefore / After表を表示させました。
これにより、目標体重までどれくらい減量する必要があるのかわかりやすくなりました。

3. 写真レイヤーの切り替えを直感的に操作できるUI

体の変化を比較しやすいように、写真レイヤーを下部のボタンで切り替えられるUIを採用しました。
Before / After の比較や時系列の変化がスムーズに確認でき、モチベーション維持につながる設計にしています。

4. ユーザー情報をもとに最適化される動画提案機能

マイページに登録されたユーザー情報（運動目的・好みなど）をもとに、YouTubeの検索方法を変え、表示される動画を個別最適化しています。
ユーザーごとに異なるトレーニング提案が行われるため、より「自分に合った動画」に出会える仕組みとなっています。

6. 開発で得た学び

1. モノづくりの楽しさ

アイデアが形になり、アプリが動き出す瞬間に大きな喜びを感じました。
課題にぶつかりながらも解決し、形にしていく過程そのものがモノづくりの魅力だと実感しました。

2. 開発の流れ

要件定義から設計・実装・改善まで、開発工程を一通り体験することで、
「作って終わりではなく、より良くしていくこと」がプロダクト開発において重要であると深く理解できました。

3. フィードバックの大切さ

他者の視点を取り入れることで、より良いUI・機能にブラッシュアップできました。
改善を重ねてプロダクトが成長する過程は、大きな達成感を得られる経験となりました。

7. 今後の展望

• ジムでのトレーニング記録機能の追加
• 摂取・消費カロリー計算機能
• ユーザーからのフィードバックをもとにさらなる改善
• 新機能の追加やUI改善の継続

おわりに

最後まで読んでいただきありがとうございました。
2024年11月にRUNTEQへ入学してから、ようやく自分の想いを
形にすることができました。
初めてづくしの開発で、うまくいくことも失敗することもありましたが、
その全てが学びであり成長につながりました。
アプリを使ってくださった方から感想をいただけた時は本当に嬉しく、
「もっと良いものを作りたい」という気持ちが強まりました。
これからも技術を磨き、アプリをアップデートし続けながら、
ひとりでも多くの方が Fitgraph をきっかけにダイエットに挑戦してくれたら嬉しいです。