見出し画像

Daily UIデザイン  #035 運動Appダッシュボード

おはようございます。週4日40分の筋トレを4月から続けているダイゼン です。もはや筋トレしないと不安になります。(笑)

今日のお題はこちら。

スクリーンショット 2020-09-11 7.47.31

前回同じようなターゲットで制作をしました。

Daily UI #021  フィットネスApp ログイン画面

唯一の違いは前回が28歳で今回が29歳…。ターゲットは8月生まれなんでしょう。
ターゲットは同じだけど、デザインはガラッと変えてみました。オレンジと黒の組み合わせがあまり得意じゃないみたいです、私。
なので、21日目に作ったアプリの競合アプリという位置付けで作っていきます。

そして完成品はこちら。

画像2


コンセプト

●ペルソナ 
・Appで管理したい
・健康意識が高い
・ゆるベジタリアン実践中
・家で筋トレ、外で走る
・仕事は家ですることが多い

●機能面
・自分に足りていないことがわかる
・オンラインのパーソナルトレーナーの役割
・身体の動かし方によってグラフが見れる(歩行時、ランニング時、水泳時など)
・日毎、週毎、月毎でグラフが見れる
・目標設定ができ、実績と合わせて見ることができる


ユーザー課題の想像

・身体づくりをしていて必要な栄養素がわからない
・どこの部位をトレーニングしたらいいか教えて欲しい
・ランニング、ウォーキング、筋トレ別のカロリー消費数などを見たい
・身体づくりをトータルサポートしたアプリが欲しい


使ったフォント・色

スクリーンショット 2020-09-11 7.56.44

フォント
アルファベット:Gothic A1
偶然見つけたフォント。全く癖のないサンセリフ体なので、数字をメインに使ってます。
日本語:Noto Sans JP
おなじみ、大好きなフォント。

●色
グラフをネオンっぽい雰囲気で表現したかったので紺ベースに蛍光色を入れました。

参考サイト・参考アプリ

Fitbit、ヘルスケア、30日間フィットネス
30日間フィットネスは日々自分も使っていて、部位別のトレーニングができるようになっていて、またカロリー表示もされるので、これをベースに考えました。



制作にあたっての工夫点

・ダイナミックさを出すために、グラデーションでグラフを表現
・トータルで身体づくりをしたいのがターゲットの課題のため、情報が多すぎて操作性を困難にしないためにも、できるだけメインの画面の情報を省くように意識した。
・必要な用途から絞り出して、要素を配置するようにした
・上部のメッセージで「寄り添われてる感」を出して、筋トレのモチベーションアップなどにつながるような仕組みにした


振り返ってみての改善点

・カロリーの円グラフをもう少し小さくすればよかった。(遠目で見ると、横の棒グラフと比べて大きく見えるため)
・カロリーの円グラフにグラデーションが入ってないので、統一感が若干崩れたような…。
・制作時間が2時間強になってしまった。

制作時間 2時間10分 構想20分 制作1時間50分


最後に、こちらランニングバージョン。

画像4


この記事が気に入ったらサポートをしてみませんか?