フィットネスアプリのデザイン：ホーム画面のリデザイン、ビフォーアフター

フィットネスアプリのホーム画面の仕事は1つです。今日の調子を伝え、始めるための明確な入口を1つ示すこと。下の初稿には正しい数字がすべて揃っていますが、それを窮屈な4つのタイル、ごちゃついた写真の上の白文字、読み取るものが何もないチャートで渡しています。修正版は機能をすべて残したまま、各パーツが目に求める手間の量を変えています。

画面全体のビフォーアフター

新人の初稿

修正版

左では、目はまず4つの要素のヘッダー、次に4色の4つのタイル、さらに写真、2つのボタンとハート、チャート、そしてタブバーで切れた2段目のワークアウトに出会います。右にあるのは3枚のカードとヘッダーだけ。今日の調子、今やること、今週の様子です。

誰かが惜しむような機能は何も削っていません。歩数、カロリー、水分、心拍数、今日のワークアウト、週の活動量はすべて残っています。ただ、より少なく、より大きな形にまとめ直しました。

修正1：4つのタイルではなく、リングのカード1枚

Before

After

アイコン、数字、ラベル、細いバーを持つパステルのタイル4枚に対し、リング3つ、各ラベルの下の目標値、小さなチップになった心拍数を収めたカード1枚。

初稿の各タイルは数字を言い、細いバーを描きますが、そのバーが何と比べているのかは示しません。8,432歩は良いのか悪いのか。読み手はバーの伸び具合から目標を推測するしかなく、しかもバーは細いのです。

リングは目標を言葉（「10,000歩中」「600 kcal中」「2 L中」）と形で示します。リングは満ちているか、いないか。ひと目で「今日は順調?」に答えが出ます。心拍数は目標ではなく測定値なので、リングは与えません。隅のチップに下げることで、種類の違う数字だと伝えています。

使い回せるルール：数字に目標があるなら、目標を見せる。なければ、進捗のふりをさせない。

修正2：再生ボタン1つ、文字の裏に影

Before

After

セクションタイトル、NEWバッジ、写真の上の9pxの白文字、その下の3つの操作に対し、ラベル付きの写真、影の上の大きめの文字、再生ボタン1つ。

写真の上の白文字は、たまたま写真が暗い場所でしか読めません。初稿では詳細の行が画像のいちばん明るい部分、ジムの床とグレーのシャツの上を横切り、9pxでは消えてしまいます。修正版は、文字が載る下端でちょうど72%に達する黒い影を写真に重ね、文字も大きくしました。

初稿は、行動する前に問いも投げかけます。今すぐ開始、それとも詳細、それともハートで保存? 今日のワークアウトにすることは1つ、始めることです。丸い再生ボタン1つなら、言葉なしでそれを伝えられます。詳細は必要なときに1タップで見られますが、もうメインの操作と競合しません。

「NEW」バッジと「今日のワークアウト」のセクションタイトルは、ほぼ同じことを2回言っていました。修正版は写真の上のチップ1つだけを残しています。

修正3：チャートは合計から始める

Before

After

ドロップダウンと凡例付きの同じ長さのオレンジの棒7本に対し、大きな文字の週の合計、傾向のチップ、濃いオレンジの棒1本。

チャートは問いに答えるものですが、初稿のチャートは何の問いなのか言いません。同じ強いオレンジの棒が7本、値はなく、系列が1つしかないのに凡例があり、何を読み取るかは読み手任せです。修正版は、ありそうな問いにまず言葉で答えます。今週は4時間12分、先週より18%多い。

棒はメッセージではなく文脈になりました。5本はブランドカラーの淡い色で、今日の土曜日だけが濃いオレンジなので、目は週の中の現在地に着地します。日曜は短い切れ端のままなので、週は今日まで左から右へ読めます。「今週」のドロップダウンと「アクティブ時間」の凡例は、タイトルがすでに両方を言っているので消えました。

使い回せるルール：チャートが説明に1分かかる数字を先頭に置き、あとは棒に任せる。

修正4：ヘッダーのボタンは1つ

Before

After

アバター、感嘆符付きのあいさつ、さらに2つ感嘆符のある2行目、3つのアイコンに対し、日付、あいさつ、通知ボタン1つ。

初稿のヘッダーは、コンテンツの前に7つのものを抱えています。アバター、2行のあいさつ、3つのアイコン。アバターは本人のアカウントへ続きますが、アプリにはすでにプロフィールタブがあるので、修正版ではヘッダーから外しました。検索と設定のアイコンも一緒に外れ、あいさつの場所が空きます。

修正版が残すのは、右上の角にふさわしい1つだけ。新着があるときに点が付く通知です。あいさつは日付と大きな名前になり、感嘆符なしで、今日の数字がどの日のものかを読み手に伝えます。

そのほかの細かな修正

• タブは5つではなく4つ。 ホーム、ワークアウト、進捗、プロフィール。統計とコミュニティは進捗タブ1つにまとめました。
• 余白は1種類。 初稿は左14px、右12pxで、カードがわずかに中央からずれて見えました。修正版は両側20px、カード間16pxです。
• アクションの色は1色。 初稿はピーチ、黄、ピンク、青のタイルにオレンジを加えていました。修正版はオレンジをアクションに使い、アンバーと青はリングの区別に役立つ2つのリングだけに残します。
• 本物の文字スケール。 文字は8〜16pxから、iOSの文字サイズ11〜28ptになり、画面上にシステムの最小キャプションより小さいものはありません。
• 「おすすめ」の行はなし。 初稿の2段目の写真の行はタブバーで切れていました。修正版はチャートでホーム画面を終えます。
• 落ち着いたあいさつ。 「今日の目標を叩きのめそう!!」は、名前の上の日付になりました。

自分のフィットネスアプリを監査する

Figmaファイルを入手する

無料ファイルには、両方の画面がコンポーネントとして入っており、すべての修正がビフォーアフターのペアで、さらにカラー変数とiOSのテキストスタイルも含まれています。

無料のFigmaファイル

フィットネスのホーム画面、ビフォーアフター

両方の画面と修正した全パーツをFigmaコンポーネントで。無料、閲覧専用、複製して自分の下書きへ。

Figmaで開く

FAQ

フィットネスアプリのホーム画面は、最初に何を見せるべきですか?

今日の調子です。歩数、カロリー、水分を目標と比べて、カード1枚で。その真下に今日のワークアウトを置き、始める明確な入口を1つ添えます。

フィットネスアプリでは、プログレスバーよりプログレスリングのほうがよいですか?

少数の1日の目標なら、そうです。リングはひと目で読め、スケールなしで満ちているかどうかが分かり、中央に数字も入ります。心拍数はリングに入れないでください。測定値であり、満たすべき目標がないからです。

ワークアウト写真の上の白文字を読みやすくするには?

文字の裏に、文字が載る場所でいちばん濃くなる暗い影を敷き、読める大きさにします。写真が都合のよい場所で暗いことを当てにしてはいけません。

フィットネスの活動チャートはどう設計すべきですか?

合計と傾向を言葉で先頭に置き、棒は柔らかい色で見せて、現在の日だけをブランドカラーにします。タイトルがすでに伝えている凡例やドロップダウンは外します。

フィットネスアプリのタブはいくつがよいですか?

4つか5つです。統計とコミュニティのように関連する数字を持つタブは、進捗のような1か所にまとめます。

出典

• 両方の画面は自作で、Figmaで設計・計測しました。
• 写真はPexelsより、pessoas uem、Julia Larson、Tima Miroshnichenko、Vitaly Gariev。
• Apple Human Interface Guidelines: Typography、修正版の画面で使ったiOSの文字サイズの出典。
• 最初は App Brainy でカルーセルとして公開しました。