[個人開発]コンビニ食品でダイエットできるサービスを作りました

# はじめに
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702672/fd55a232-b978-65d5-0c31-fdc63d675a6d.png)


普段みなさんはどれぐらいコンビニを利用しますか？
[ある統計](https://vropencafe.video-research.jp/figures/figureofmonth-29.html)では、1ヶ月に1回以上コンビニを利用する人は94.6%という結果が出ていました。

最近は「たんぱく質が摂れる」といった、健康志向の高まりに合わせた食品が出ている印象を受けますね
中には、**「たんぱく質が摂れる食品を選べば痩せられる！」**という人もいるでしょう
　

ただ、みなさんご自身に適した摂取カロリーはご存知ですか？
健康的な食品を選択しても、ご自身のカロリーを上回る量を摂取していたら台無しです
　
　
そこで、**Macro Store(マクロストア)**というサービスを開発しました。
**※スマートフォン推奨**

~~https://www.macrostore.jp/~~ (2023年1月15日サービス終了)


　
# サービス概要
MacroStoreは、コンビニ食品でダイエットできるサービスとなります。掘り下げると、　
**あなたのダイエットに適した摂取カロリーを計算し、その数値に見合ったコンビニ食品を検索できるサービス**です。主な機能は以下の通りになります
　

### 1. ダイエットに有効なカロリー計算機能
ダイエットの第一歩は、普段あなたがどれぐらいのカロリーを消費しているのかを、知ることから始まります。これを**消費カロリー**と呼び、食事で摂取するカロリーは**摂取カロリー** と呼びます。

*痩せる= 消費カロリー > 摂取カロリー*
　
上記の式が原則となるので、まずカロリーを知りましょう
MacroStoreでは4つの質問に答えていただくことで、１食のダイエットに最適なカロリーと、PFCバランスを提案します。
[![Image from Gyazo](https://i.gyazo.com/c5d1cb5220f819ae6d88278a080af380.gif)](https://gyazo.com/c5d1cb5220f819ae6d88278a080af380)
(この数値は、厚生労働省が定めている[「日本人の基礎代謝基準値」](https://www.e-healthnet.mhlw.go.jp/information/exercise/s-02-004.html)と[「生活活動強度の区分」](https://www.mhlw.go.jp/www1/shingi/s9906/s0628-1_11.html)を参考に算出しています。)

　

### 2. コンビニ食品検索機能
検索機能を試してみましょう
カロリー計算の質問に答えていただくと、おすすめの数値がデフォルトで入るようになり、すぐ検索ができるようになっています。**あなたのダイエットに有効なコンビニ食品が結果に出てきます**
[![Image from Gyazo](https://i.gyazo.com/d0a0997c87547e1ce40ef7d6d94c605c.gif)](https://gyazo.com/d0a0997c87547e1ce40ef7d6d94c605c)
またお店で気になる食品があれば、名前検索もできます

　
### 3. お気に入りと摂取カロリーの保存
会員登録をしたユーザーは、気になった食品を保存することができ、いつでも閲覧できるようになります

[![Image from Gyazo](https://i.gyazo.com/ef81313e259acd20dff68757b7f4b0c5.gif)](https://gyazo.com/ef81313e259acd20dff68757b7f4b0c5)

他にも摂取カロリーの計算結果を保存することができます
　
# 使用技術
- Ruby on Rails　6.0.4.1
- Ruby　2.7.5
- Vue.js 2系

#### UIフレームワーク
- Vuetify

#### CIツール
- CircleCI

#### デプロイ
- Heroku

#### 主なGem
- Mechanize
- Carrierwave
- Sorcery

#### 主なライブラリ
- vuex-persistedstate
- vue-infinite-loading
- vue-chartjs

　
# ユーザー目線で作成
今回このサービスを作る上で意識したことは、ユーザーの目線に立って開発することを意識しました

### 1.SPAでの実装
コンビニでも手軽に検索できるように、スマホファーストの設計にしました。その上で単一のページでコンテンツが早く切り替わる点がUXの向上につながると思い、Vue.jsでSPAを実装いたしました。
　

### 2. スリーステップで検索結果ページへ
サービスを利用するにあたり、あまりに階層が深いと離脱率も高くなり、その後触れてもらえなくなる、、、　
なんてこともあると思います

MVPリリースで得られたフィードバックより、トップページにカロリー計算フォームを設置することで、
　
**カロリー計算 → 計算結果と検索フォーム → 食品検索結果**
　
とユーザーが簡単に結果画面にたどり着く設計に変更しました
　　

### 3.非会員ユーザーも検索機能を利用できる
サービスの中身が分かからないにもかかわらず、利用するにあたり会員登録が必要なのは、**ユーザーにとってかなりハードルが高いこと**だと思います
　
MacroStoreでは非会員ユーザーでも、カロリー計算や検索機能を自由に使ってもらえるようになっています
**サービスに触れてもらった上で、より機能を利用したいと思ったユーザーは会員登録をするような設計**にいたしました

　
　
### 4.　非会員ユーザー(カロリー計算を済ませた)の会員登録時に、カロリー計算結果も自動で保存される
usersテーブルには、カロリーとPFC(たんぱく質、脂質、炭水化物)のカラムがあり、会員ユーザーはカロリー計算をした値も保存することができます。　

ただ先に触れた通り、非会員ユーザーは、一度サービスに触れた上で会員登録の判断をする設計になっているため、**登録後にまた同じ質問に答えて、値を保存するのは面倒**です。　
　
カロリー計算した結果はstoreに保持しておき、会員登録をする際に値があれば、入力したユーザー情報と共に送る設計にしました



　　
　

## ※補足　開発者について
このサービスはダイエットについて触れていることもあり、人によって「開発者はどうなの？」と気にされる方もいると思ったので、念の為、、、
　
「どうでもいいよ！！」って方は、[**終わりに**](#終わりに)へ進んでいただければと思います
　
私は趣味で筋トレと食事管理が好きで、自分でカロリーを決めてダイエットをしたり、増量をしたりしています。昨年の3月から6月までは減量をしていて、4ヶ月間で9.4kgのダイエットに成功しました
　
ボディメイクの大会に出られているような方と比べれば、大したことない数値ですが、**今回のサービスは自分の経験に基づいた上**で、開発をしております

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">減量終了　4ヶ月でマイナス9.4kg<br>これからクリーンにバルクしてく<br><br>ポートフォリオも食事管理系のもの作りやす <a href="https://t.co/1JGaJHKWu6">pic.twitter.com/1JGaJHKWu6</a></p>&mdash; RYUTARO@エンジニア転職 (@yorutaru097) <a href="https://twitter.com/yorutaru097/status/1410365546541961219?ref_src=twsrc%5Etfw">June 30, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

　
#終わりに

最後までご覧いただきありがとうございます！
まだまだ気になる点は多々ありますので、少しずつ改善していきたいと思います
　
今回開発するにあたり、多くのアドバイスやフィードバックをいただくことで、よりユーザー視点でサービス作りをすることができたと思います。貴重な時間を割いて、意見を寄せていただいたこと、本当にありがとうございました！！

MacroStoreを通して、自身のカロリーを知っていただき、理想の体を目指す人が一人でも増えたらとても嬉しいです！ありがとうございました！

~~https://www.macrostore.jp~~ (2023年1月15日サービス終了)

**※スマートフォン推奨**
　
[Twitter]https://twitter.com/yorutaru097


# 参考記事

- [ビデオリサーチ オープンカフェ | 1カ月に1回以上コンビニを利用する人](https://vropencafe.video-research.jp/figures/figureofmonth-29.html)