健康的なライフスタイルへの関心が高まる中、食事や運動を体系的に管理したいというニーズも増加しています。しかし、従来の健康管理アプリはユーザーが自ら栄養素やカロリーを入力する必要があったり、単なる記録にとどまるものが多く、不便さがありました。 そこで、AIを活用してユーザーの入力負担を軽減し、持続可能な健康管理体験を提供することを目指しました。食事写真や運動記録のみで栄養情報を分析しカロリーを算出し、パーソナライズされたフィードバックと目標達成を支援するシステムを構築したことが、このプロジェクトの出発点です。

運動のアクティブな印象と、食事・栄養の調和の取れたイメージを同時に伝えるデザイン構成に課題がありました。 チームメンバーとの定期的なミーティングでアイデアを共有し、複数のデザイン案を比較検討した上で、最も効果的なビジュアル方向性を決定し実装しました。 運動および食事データの種類が多かったため、機能ごとに3つのContextに分割し、それぞれをStateContextとDispatchContextに分けて、ユーザーの操作フローに沿って適切にデータを供給できるよう構成しました。 また、AIのレスポンス遅延によるユーザー体験の低下を防ぐため、API呼び出し回数を最小化し、ローディングコンポーネントを導入して明確なフィードバックを提供しました。 大量の食事データを一度にレンダリングすることで発生するパフォーマンス低下については、無限スクロールによる部分レンダリング手法やReactの最適化手法を適用し、不要な再レンダリングを削減することで解決しました。

デザインを含む重要な意思決定プロセスにおいて、チームメンバーと密接に協力しながら進める中で、コミュニケーションの重要性を強く実感しました。 特に、Webとモバイルサービスが同一のバックエンドを共有する構成であったため、機能の一貫性とユーザーフローを維持するために、週1回以上の対面ミーティングを実施し、意見の調整と方向性の統一を行いました。 また、Webフロントエンドを担当しながらも、Spring BootベースのバックエンドやOpenAI APIとの連携を含むシステム全体の構造を理解し、設計フローを把握する経験を積みました。 バックエンド担当メンバーとの協働を通じて、データ構造設計からフロントエンドのContextやコンポーネント構造に至るまで、一貫性と効率性を意識した統合的な設計手法を学ぶことができました。