【デザイン事例紹介】MIRROR FIT. モバイルトレーナー -あなたの健康を記録し、アプリから運動を提案する-
未来型のセルフトレーニングを提供するデバイス「MIRROR FIT.」を提供するミラーフィット株式会社が運営する、健康を記録し、アプリから運動を提案する「MIRROR FIT. モバイルトレーナー」のUIデザインを担当しました。健康意識の高いユーザー層だけでなく、ヘルスケア市場全体に受け入れられるデザインを目指しました。
「MIRROR FIT. モバイルトレーナー」とは
人気トレーナーによる独自のフィットネス動画視聴をはじめ、アプリと同時リリースした「MIRROR FIT. スマート体組成計」と連携したヘルスケア機能にも対応するスマートフォンアプリ。12種類の体組成計データ、10種類のヘルスケアデータ、運動記録をまとめて管理することが可能。
身体データやその日の気分をもとに、おすすめのフィットネスコンテンツをリラックス／ダイエット／筋トレから毎日3本提案してくれます。
プロジェクトについて
クライアント：ミラーフィット株式会社
対応デバイス：iOS/Android
デザイン制作期間：約3ヶ月
使用ツール：Figma／Illustrator／Photoshop
担当範囲：モバイルアプリUI／アプリストアビジュアル／体組成計パッケージデザイン／Makuakeページデザイン
※写真撮影や動画などのコンテンツは除く目的：新規ユーザーの獲得／サービス全体のシナジー効果創出
効果：ビジュアルを共通言語としたデザインによる認識のすり合わせでプロジェクトを推進
注力したポイント
ブランドにおけるアプリが担う役割を踏まえ、トーン＆マナーを提案
ヒアリングを通じ、ブランドイメージが持つ洗練されたイメージは維持しながら、ホワイトをベースにしたデザインをご提案しました。
また多機能な情報をよりわかりやすく整理するために、ゴールドのブランドカラーに加え、全体になじむようにトーンを調整した新しいカラーリングもご提案。“ヘルスケア”や“身体データ”など各コンセプトに対して色を指定することで、直観的にわかりやすくなるよう調整しました。
情報の一覧性と直観的なアクセス
さらに情報量や機能の多いデータ画面では、情報の一覧性に加え、わかりやすさに細心の注意を払ったレイアウトを意識しました。要素ごとにデザインを統一しながら、強調色の配色コントロールや、フォントのジャンプ率（コントラストのつけ方）調整など、“知りたい情報がすぐに見つかる”デザインになるようブラッシュアップしていきました。
変更にも迅速対応できるコンポーネントライブラリーの整理
アプリの仕様やデザインの変更にも対応しやすいように、コンポーネントのライブラリー整理にも注力。アプリを構成するボタン、タブ、カード、フォント、アイコン、カラーなど細かいパーツの状態やバリエーションをしっかりと定義しておくことで、開発中はもちろんローンチ後でも、デザインの変更に迅速な対応が可能です。
アイデアも即座にビジュアル化！デザインによる“通訳”でプロジェクトを加速
クライアント様、エンジニアチームとのコミュニ―ケーションを軸に、デザインの設計を進めてきた本プロジェクトにおいて、各ステークホルダーの「考え」や「メッセージ」を“通訳”のようにビジュアル化することにもフォーカスしました。
例えば、ミーティング中にクライアント様から新しいアイデアを口頭で指示いただいた際に、その場で即座にデザイン・プロトタイプ上でビジュアル化して提示することで、認識のすり合わせと技術的な懸念点の洗い出しを同時に実施。 “一旦持ち帰る”工数を削減しながら、ビジュアル化による精度の高いコミュニケーションで、スピーディーなプロジェクト進行をサポートしました。
パッケージデザインから販促アイテムまでトータルデザイン
そのほか、「MIRROR FIT. スマート体組成計」のパッケージデザインとLP作成（studio）、各販促アイテム（クラウドファンディングページ， App Storeプロダクトページのスクリーンショットなど）を一貫して担当。統一したトンマナでスピーディーにデザインを仕上げました。
お問い合わせ
クライアント様のご要望にお応えするのはもちろん、コミュニケーションを通じて、潜在的なニーズの掘り起こしや丁寧な認識のすり合わせを行います。また「1を頼めば、2，3が返ってくる」をモットーに、プラスアルファのご提案でプロジェクトの具体化を推進いたします。
資料や素材がなくても構いません。
「こんなことを考えている」「こんなサービスを作りたい」など、まずはお気軽にお問合せください！
お仕事に関するお問い合わせは、TwitterのDMにて受け付けております。
この記事が気に入ったらサポートをしてみませんか？