はじめに
普段みなさんはどれぐらいコンビニを利用しますか？
ある統計では、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
— RYUTARO@エンジニア転職 (@yorutaru097) June 30, 2021
これからクリーンにバルクしてく
ポートフォリオも食事管理系のもの作りやす pic.twitter.com/1JGaJHKWu6
#終わりに
最後までご覧いただきありがとうございます！
まだまだ気になる点は多々ありますので、少しずつ改善していきたいと思います
今回開発するにあたり、多くのアドバイスやフィードバックをいただくことで、よりユーザー視点でサービス作りをすることができたと思います。貴重な時間を割いて、意見を寄せていただいたこと、本当にありがとうございました！！
MacroStoreを通して、自身のカロリーを知っていただき、理想の体を目指す人が一人でも増えたらとても嬉しいです！ありがとうございました！
https://www.macrostore.jp (2023年1月15日サービス終了)
※スマートフォン推奨
[Twitter]https://twitter.com/yorutaru097