瞑想アプリのデザイン:ホーム画面リデザインのビフォーアフター

瞑想アプリの約束はひとつ。画面を開いたときより、閉じるときのほうが落ち着いていること。下の初稿はそれを狙っているのに、9色、淡い写真に乗った白い文字、数字があるべき場所に置かれた1段落で、自分で台無しにしています。修正版は機能をすべて残したまま、ボリュームを下げます。

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

新人の初稿

修正版

左の画面は親しみやすくて、うるさい。右は同じプロダクトの音量を下げたもので、その音量の低さこそが機能です。

両側で、目が仕分けしなければならないものを数えてみましょう。初稿は、誰かが一言読むより前に、ムードの5色とタイルの4色、ピーチ色の箱、文字が乗った写真が目に入ります。修正版にあるのは、ブランドのセージグリーン #4F7A5A と、連続日数だけのために取っておいたピーチ色の炎 #E0784A だけです。

修正1:ムードの質問は1回だけ、1色で

ビフォー

アフター

色付きの丸5つと言葉がそれぞれ付いた状態と、1つの質問、静かな顔5つ、選ばれた答え1つの状態。

ムードチェックは、答えが5つある質問です。初稿では答えごとに色があるので、ユーザーが何も選ばないうちから、もう答え済みのように見え、何が選択中なのかも分かりません。色が情報ではなく装飾の仕事をしています。

修正版は5つの顔をすべて同じグレーで描き、選ばれた1つだけをブランドの緑で塗り、その言葉「Calm」を質問の横のチップに入れます。これで色の意味はただ1つ、「これが現在の状態」になります。顔の下の言葉は行から消えました。選ばれた顔の言葉はチップが1回だけ言ってくれるからです。

この原則は、評価や選択のあるどんなアプリにも使えます。すべての選択肢に色が付いていたら、色はユーザーに何も伝えません。選択肢は無彩色のままにして、アクセントは選択に使いましょう。

修正2:写真は上、言葉は下

ビフォー

アフター

淡いビーチ写真の上に白い文字と極小タグ4つ、対して写真の下にタイトルと時間と再生ボタン1つ。

初稿は、17 pxの白いタイトルと8 pxのタグ4つを、明るい砂と海にそのまま載せています。淡い写真に白は最も弱い組み合わせで、しかもタグは、ユーザーが何を再生するか決める場面で画面上いちばん小さい文字です。写真の上の文字は写真が変わるたびに見え方も変わります。暗い画像が来た日には、レイアウトの印象が変わってしまいます。

修正版はすべての言葉をカードの上ではなく写真の下、無地の面に暗い文字で置きます。写真はただの写真になりました。4つのタグは「Daily Calm, 10 min, Sleep」というメタ情報1行にまとまり、隅にあった Play のピルは、親指がすでにある行末の丸いボタンになりました。同じセッションが、タイトル1つ、時間1つ、アクション1つになったのです。

使い回せるルールはこれ。言葉が大事なら、言葉専用の面を与える。写真の上に文字を置くのは、一部の写真ではそれが崩れると受け入れる決断です。

修正3:色付きタイル4枚より、写真カード2枚

ビフォー

アフター

アイコン付きのパステルタイル4枚と、セッションの雰囲気を見せる写真カード2枚。

タイルは何にも見えません。月の付いた紫の箱が「睡眠」と言うのも、肺の付いた青の箱が「呼吸」と言うのも同じくらい平板で、4色は画面の落ち着きを奪います。写真なら中身が見えます。睡眠セッションには夜空、朝のセッションには霧の湖。瞑想アプリでは画像もプロダクトの一部です。音声より先に気分をつくるからです。

修正後の行はカード2枚で、それぞれ名前、長さ、カテゴリを2行で載せます。2枚なので、どの写真も十分な幅で読めます。Breathe と Focus Music のタイルはこの画面にはなく、セクション名も「Recommended For You」から「For you」に変えました。ホーム画面のリストは、もともとあなた向けだからです。

修正4:段落ではなく3つの数字

ビフォー

アフター

同じ3つの事実が埋もれた一文と、ラベル付きの数字として並べた3つの事実。

どちらも言っていることは同じです。7日連続、合計2時間35分、23セッション。初稿はそれを、感嘆符2つと「so far, amazing!」付きの一文に詰め込みました。読み手は探している数字を見つけるために文全体を読まねばならず、節の中に埋まった数字は一目で比べられません。

修正版は事実ごとに1列を与えます。大きな数字と小さなラベル。ピーチ色の炎は連続日数の隣に置きます。明日も戻ってくる理由をつくる数字だからです。これでユーザーは、見る時間だけで進捗を確認できます。

そのほかの小さな修正

• タブは5つではなく4つ。 Home、Sleep、Meditate、Music、Profile を、Today、Explore、Sleep、Profile に置き換えました。Meditate と Music は専用のタブを持たなくなりました。
• 余白は1種類。 初稿は左14 px、右12 pxでした。修正版は両側20 px、カード間14 pxです。
• すっきりしたあいさつ。 「How are you feeling today???」はヘッダーから消えました。ムードカードが、疑問符1つで1回だけ聞くからです。
• ヘッダーのアクションは1つ。 ベルは残して小さなドットを付けました。アバターはヘッダーから外しましたが、Profile はタブとして残っています。
• 本物のタイプスケール。 文字は8〜18 pxから、iOSの11〜28 ptのサイズになり、最小の文字も読めて、タイトルはきちんとタイトルに見えます。
• 控えめなセクションリンク。 「View all >」を、全セクション共通の「See all」にしました。

自分のウェルネスアプリを点検する

Figmaファイルを入手する

無料のファイルには、2つの画面をコンポーネントとして、すべての修正をビフォーアフターのペアで、さらにカラー変数とiOSのテキストスタイルを収録しています。

無料のFigmaファイル

瞑想アプリのホーム画面、ビフォーアフター

2つの画面と、修正した各パーツをFigmaコンポーネントで収録。無料、閲覧専用。自分の下書きに複製して使えます。

Figmaで開く

FAQ

瞑想アプリのホーム画面には何を表示すべきですか?

あいさつ、ムードの質問1つ、再生ボタン1つの写真カードとしての今日のセッション、短いおすすめの行、そしてユーザーの進捗です。それ以外は、1タップ先に回して構いません。

アプリのムードチェックインはどう見せるべきですか?

同じ大きさで静かな選択肢5つと、その上に質問1つ。色を付けるのはユーザーが選んだ選択肢だけにして、その言葉は1回だけ言います。すべての顔に専用の色があると、何が選択中なのか伝わりません。

アプリで写真の上に文字を置いてもいいですか?

暗いオーバーレイのように管理された領域に文字が載り、コントラストの最低基準を満たしている場合だけです。明るくて変わりやすい写真なら、代わりに画像の下の無地の面に言葉を置きましょう。

ウェルネスアプリで連続記録や進捗はどう見せますか?

day streak、total time、sessions のような、ラベル付きの少数の数字で見せます。連続記録には炎のような小さなアクセントが似合います。励ましの一文は、数字の代わりにはなりません。

瞑想アプリのタブはいくつがいいですか?

4つか5つ。2つのタブが同じライブラリにつながるなら、統合しましょう。修正版の画面は5タブから4タブになりました。

出典

• 2つの画面はどちらも自作で、Figmaで設計と計測をしました。ユーザー、セッション、数字は、この演習のための架空のものです。
• 写真は Pexels より、Татьяна Танатова、olia danilevich、Felipe Barboza、Jean-Daniel Francoeur。
• Apple Human Interface Guidelines: Typography、修正版の画面で使ったiOSの文字サイズについて。
• W3C: Web Content Accessibility Guidelines 2.2, Contrast (Minimum)、画像や背景の上の文字について。
• 最初は App Brainy でカルーセル投稿として公開しました。