はじめに

普段みなさんはどれぐらいコンビニを利用しますか？
ある統計では、1ヶ月に1回以上コンビニを利用する人は94.6%という結果が出ていました。

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

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

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

サービス概要

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

1. ダイエットに有効なカロリー計算機能

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

痩せる= 消費カロリー > 摂取カロリー
　
上記の式が原則となるので、まずカロリーを知りましょう
MacroStoreでは4つの質問に答えていただくことで、１食のダイエットに最適なカロリーと、PFCバランスを提案します。

(この数値は、厚生労働省が定めている「日本人の基礎代謝基準値」と「生活活動強度の区分」を参考に算出しています。)

2. コンビニ食品検索機能

検索機能を試してみましょう
カロリー計算の質問に答えていただくと、おすすめの数値がデフォルトで入るようになり、すぐ検索ができるようになっています。あなたのダイエットに有効なコンビニ食品が結果に出てきます

またお店で気になる食品があれば、名前検索もできます

3. お気に入りと摂取カロリーの保存

会員登録をしたユーザーは、気になった食品を保存することができ、いつでも閲覧できるようになります

他にも摂取カロリーの計算結果を保存することができます
　

使用技術

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のダイエットに成功しました
　
ボディメイクの大会に出られているような方と比べれば、大したことない数値ですが、今回のサービスは自分の経験に基づいた上で、開発をしております

減量終了　4ヶ月でマイナス9.4kg
これからクリーンにバルクしてく

ポートフォリオも食事管理系のもの作りやす pic.twitter.com/1JGaJHKWu6
— RYUTARO@エンジニア転職 (@yorutaru097) June 30, 2021

　
#終わりに

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

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

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

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

参考記事

ビデオリサーチオープンカフェ | 1カ月に1回以上コンビニを利用する人