筋肥大に特化したトレーニング記録アプリ
筋肥大を目指すトレーニー向けのトレーニング記録アプリのデザインをしました。記録がとにかく見やすくなるようにデザインを決めており、家計簿アプリや睡眠を記録するヘルスケアアプリのグラグを参考にしています。また、筋肥大にはトレーニング負荷を少しずつ高めることが重要である主旨の研究から、以前の自分より負荷を高めていることができているかが比較しやすアプリにしています。実装については、React Nativeを考えており、現在フロントエンド技術については学習中です。
筋肥大目的の自分の成長がみやすいアプリをデザインできないか?とはじめた制作物です。私自身もトレーニングの記録用にフィットネスアプリを愛用していますが、スマートフォンだと記録が見づらいと感じていました。筋肥大には漸進性過負荷の法則と言い、負荷を徐々に大きくする必要があります。そして習慣化や継続のためには自分が前に進んでいる感覚が必要なことから、より記録が見やすいアプリを目標にデザインしました。
数あるトレーニングアプリのレビューで低評価の内容を調べると、記録したデータが見返しにくいというものでした。そこで、記録が見やすいとは?の問からはじめ、一目で何かわかる状態=見やすいと仮定しました。
筋肥大には「漸進性過負荷の法則」と言い、負荷を徐々に大きくする必要があります。例えば、ベンチプレスで60キロを10回3セットした場合、次回のベンチプレスでは60キロで11回3セットや、62.5キロで10回3セットとトータルで前回よりも高い負荷をかけることになります。そのため、記録としては「前回よりも負荷がかかっているか?」が重要視されるため、前回よりも負荷が高いか低いかが一目でわかるようなデザインを意識しました。
モチベーションは、前に進んでいる感覚から得やすいと言われます。つまり、モチベーションはその人の意志の強さが重要なのではなく、維持するためのしくみが重要だということです。そこで、自分の積み重ねを可視化できるようにしました。具体的には、前回より負荷がかかっていることを比較するための円グラフと、これまでの負荷が確認できる線グラグの2種類で記録を確認できる形にしました。
自分が何のデータを比較しているかが自覚的になるように、分析のページに遷移すると比較したい項目を選択できるようにしました。グラフは前回よりも負荷が上がっているか?下がっているかのみに着目することで、筋肥大に必要な「負荷を少しずつ上げる」ができているかを一目でわかるようにしました。
トレーニング中にエネルギーを感じられるような色として、オレンジを採用しました。また、どこがアクティブか判別しやすいように、アクティブ部分はオレンジ、非アクティブ部分はグレーで表現することで、ユーザービリティにも配慮しました。
アプリに採用されているアイコンは全てオリジナルで制作しました。トレーニングする部位や器具に合わせて、アイコンが選択できるようにしています。
WEB制作を学ぶ中で、ユーザービリティに興味を持ちました。アプリデザインをすることで、ユーザビリティに対する学びを深められるのでは?と考えチャレンジしてみました。
Udemyの「初心者から始めるアプリデザインUI・UXデザインをFigmaで学ぼう!」をハンズオンで学習した後に、制作を進めました。をハンズオンで学習した後に、制作を進めました。制作の中でマテリアルデザインを意識しながら、現実世界の物理的法則と乖離していないか?色の数は多すぎないか?ボタンはボタンと認識されるか?など、ユーザー視点での「わかりやすさ」をより重視しながら制作することができました。
また、ポートフォリオには載せていませんが、プロトタイプ制作にもチャレンジすることで、アプリの動きも加味したデザインに触れることができ、違和感のない動きをつくる難しさを実感しました。アプリやWEBサイトの「使いやすさ」「わかりやすさ」は、主観的であり、状況やユーザーのスキルレベル、目的によって正解が変わることが自分ごととして理解でき、ペルソナの設定やユーザーからのフィードバックを得て改善していくことの意義を改めて学習する良い機会になりました。
筋トレMEMO
MoneyForward
ヘルスケア(iPhoneの標準アプリ)