タスクアプリのデザイン:Today画面のリデザイン、ビフォーアフター

タスクアプリは「助けてくれる存在」に感じられなければいけません。下の初稿は、今日が期限のものを正確に把握しています。それなのに、全行に赤い日付、優先度ごとに色付きチップ、最後のタスクの上に居座るボタンで伝えてきます。まるで警報です。修正版はタスクも事実もすべて残したまま、警報を落ち着いたリストのレベルまで下げました。

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

新人の初稿

修正版

左では、各タスクに説明文、最大3つのタグ、赤い日付、顔アイコンの束が付いています。右では、各タスクは1行半で、目が最初に止まるのはリストです。

目が処理しなければならないものを数えてみましょう。初稿には、色付きの進捗ボックス、5色のフィルターチップ、そして各タスクに説明文、色付きタグ、赤い期限、しばしばアバターの束があります。修正版にあるのは、リング、3分割のスイッチ、リストだけです。

修正1:進捗はリングと一文で

ビフォー

アフター

分数、小数点2桁のパーセント、バー、応援メッセージ。それに対して、リング1つと一文。

初稿は同じことを3回言っています。「1/5」「20.00%」、そして5分の1だけ埋まったバー。小数点2桁がその証拠です。「20.00%」はプログラムが出力した数字で、人間が必要とするものではありません。しかもその下の一文は小さくて灰色で、感嘆符2つで終わっています。

修正版は、20%のリングという1つの絵と、大事な2つの事実を伝える一文を選びました。5件中1件完了、残り4件。文は役に立つ部分「次は午後4:00」で終わります。ユーザーを応援する代わりに、次に何をすべきかを伝えるのです。

リングはブランドの赤で描かれています。追加行や選択中のタブと同じ赤です。

修正2:色ではなく「いつ」でフィルターする

ビフォー

アフター

優先度と状態を5色で示す5つのチップ。それに対して、1つのスイッチに3語。

初稿のチップは2つの問いを混ぜています。High、Medium、Lowはタスクの重要度を問い、Doneは状態を問い、All (5)はすべてを求めています。5つのチップは5色で、角丸の半径も2種類あり、形さえ揃っていません。

これを使うには、まず赤は緊急、オレンジは中、緑は低だと学ばなければならず、

修正版が問うのは1つ、人がToDoリストに対して実際に問うこと、つまり「いつ」です。All、Today、Upcomingは1つのスイッチに入った3語で、選択状態を1つ持つ1つのコントロールとして読め、下のタブ(TodayタブとUpcomingタブ)とも対応しています。優先度は消えていません。行の上の小さなドットに移りました(修正3)。

修正3:タスクは1行半

ビフォー

アフター

各タスクにタイトル、説明文、タグ、赤い期限、アバター。それに対して、タイトルと時間とリスト名だけ。

初稿の各タスクは、説明文、最大3つの色付きタグ、赤い「Due: 10/24/2026 5:00 PM」、アバターのグループ、チェックボックスと、5種類の情報を抱えられます。「Urgent!!」は、期限行ですでに赤いタスクにタグとしても現れます。すべてのタスクが今日期限で、すべての期限が赤いので、赤は「遅れている」ではなく「タスクがある」という意味になってしまいます。

修正版は、各タスクにタイトル1つと灰色の1行を与えます。時間と、所属するリスト。「午後5:00、Work」。日付は消えました。ヘッダーがすでに今日の日付を示しているからです。

タグはリスト名にまとめました。優先度は右側の小さなドット1つになり、最初のタスクは赤、2番目はオレンジ、目印が要らないものにはドットなしです。完了したタスクはリストに残り、取り消し線と「完了」のラベル付きで、ブランドの赤の塗りつぶしチェックが付きます。

タスクは細い区切り線で1枚の白いカードにまとめられ、リストが1つのまとまりとして読めます。

修正4:「タスクを追加」はリストの末尾に

ビフォー

アフター

最後のタスクを覆う浮かぶボタン。それに対して、リスト末尾の行。

浮かぶボタンはユーザーについてきて、下にあるものを覆い隠します。初稿では最後のタスクの上に乗り、行の右側のアバターを切り取っており、しかも画面で一番重いオブジェクトです。56 px、彩度の高い赤、影付き。

修正版はリストらしく振る舞います。追加できるものでリストを終えるのです。「タスクを追加」は、最後のタスクが終わるすぐそこの行にあり、小さなプラスと他のアクションと同じ赤が付きます。影はなく、何も覆いません。リストをスクロールする人はすでにその末尾を見ているので、追加アクションは目が止まる場所で見つかります。

細かな修正

• タブは5つではなく4つ。 Today、Upcoming、Projects、Search、Profileを、Today、Upcoming、Browse、Profileにしました。
• 余白は1つ。 初稿は左14 px、右12 pxでした。修正版は両側20 pxです。
• ちゃんとしたヘッダー。 完全な日付つきの「My Tasks」は、大きな「Today」の上に小さな「Saturday, Oct 24」を置く形になり、アバターはベルになりました。
• 赤は1つ。 ブランドの赤 #E5484D が、リング、追加アイコン、選択中のタブをカバーします。赤い文字には読みやすさを保つため、より深い #D92D20 を使います。
• ちゃんとした文字スケール。 文字は8〜20 pxから、iOSの11〜28 ptのサイズになりました。

自分のタスクアプリを監査する

Figmaファイルを入手

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

無料のFigmaファイル

タスクアプリのToday画面、ビフォーアフター

両方の画面と、修正した各パーツをFigmaコンポーネントで。無料、閲覧専用、ご自分のドラフトに複製してください。

Figmaで開く

FAQ

タスクアプリのToday画面には何を表示すべき?

今日の進捗、All、Today、Upcomingを切り替える方法、時間つきのタスクリスト、そして「タスクを追加」アクションです。説明文や長い日付はタスク詳細に回せます。

タスクアプリは進捗をどう表示すべき?

リングまたはバーに、「5件中1件完了」のような一文を添えます。同じ数字を分数、パーセント、バーで3回出してはいけません。パーセントを出すなら、丸めましょう。

タスクアプリは優先度をどう表示すべき?

必要な行にだけ小さなドットかフラグを付けます。全タスクに色付きタグを付けるのはやめましょう。優先度はフィルターやソートにもできますが、メインである必要はありません。

ToDoアプリは浮かぶ追加ボタンを使うべき?

浮かぶボタンは一般的ですが、リスト画面では最後の項目を覆ってしまうことがあります。リスト末尾の「タスクを追加」行なら何も覆わず、目が止まる場所に置けます。

ToDoアプリのフィルターは何にすべき?

人が実際に問うこと、つまりすべて、今日、これからです。コントロール1つにつき問いは1つにし、優先度フィルターと状態フィルターを同じ行に混ぜてはいけません。

出典

• 両方の画面は自作で、Figmaで設計・計測しました。タスク、人物、クライアントは演習用の架空のものです。5件中1件完了は20%です。
• 写真はPexelsより、pessoas uem、Iphanyi Ezemenari、Ajan Yogi。
• Apple Human Interface Guidelines: Typography。修正版の画面で使ったiOSの文字サイズの参照元です。
• Apple Human Interface Guidelines: Color。意味を色だけに頼らないことについて。
• 最初は App Brainy でカルーセルとして公開しました。