カレンダーアプリのデザイン:1日画面のリデザイン、ビフォーアフター

カレンダーの1日画面の仕事はひとつ。次に何があって、今日はあとどれだけ残っているかを伝えることです。下の初稿は1日の全体を把握していますが、5つの予定を5つの派手な色で塗り、月グリッドを足し、一番上に赤いアラートまで置いたので、何も他より重要に見えません。19分後の会議が、ランチと同じ重さで扱われています。

改善版は機能をすべて残し、重みだけを変えます。長い会議は長く見え、空き時間はただ空いていて、今まさに大事な1つの会議には落ち着いた専用の行が与えられます。

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

新人の初稿

改善後

左では、目の置き場がありません。ヘッダー、4つのボタン、赤いバナー、月グリッド、彩度の高いカードの山が、最初の視線を奪い合っています。予定カードは画面で一番うるさい存在で、しかも全部が同じようにうるさい。赤はアラートと予定の2回使われているので、赤は何の意味も持たなくなります。

右では、画面に上から下への明確な順序があります。今週のどこにいるか、次は何か、残りの1日はどんな形か。色は控えめで、予定を見分けるという1つの目的だけに使われています。

何を変えたか、数字で見る

修正1:カードをタイムラインに変える

ビフォー

アフター

青、赤、オレンジ、緑、紫のフルカラーカードが5枚積まれ、すべて同じ高さで、それぞれにベル、アバター、タグが付いています。対するタイムラインには、時間ラベル、グレーの過去の会議、9:41の赤い線、細いカラーバー付きの淡いブロック4つがあり、ランチとクライアントとの通話は1on1より背が高くなっています。

カードのリストが言うのは「ここに5つあります」だけ。1時間のチェックインと3時間のワークショップが同じスペースを取り、その間の隙間、つまりカレンダーで人が本当に見たい部分は見えなくなります。

タイムラインは1日に形を与えます。45分の会議は短いブロック、長い会議は背の高いブロック、空き時間は目に見える余白です。色はカード全体から左の細いバーと背後の淡い色味に移ったので、文字はすぐ読めて、色は仕事の通話とランチを区別する役目を保ちます。

小さな工夫が2つ、意味を運んでいます。Team Standupは終わったのでグレー。赤い線は9:41を示し、1日のどこにいるかが正確に分かります。

使い回せるルール:時間は空間として見せ、派手な色は今起きている1つのことだけに取っておく。

修正2:次の予定のための落ち着いた1行

ビフォー

アフター

ベルと「今日は5件の予定があります。次の予定は19分後です」という文が入った赤いバナーに対し、白い行にはRoadmap Review、赤字の「19分後」、横にZoom、小さなアバター3つ、黄色いJoinボタンが並んでいます。

初稿のアラートは、1文で3つのことを伝えようとします。予定の数、1つが次だということ、そしてその時刻。エラーのように読めます。今日の予定数は誰も必要としていません。画面にその予定が見えているのですから。

改善版は、カレンダーを開いた人が持つ唯一の疑問に答えます。次は何で、参加できるか。名前が先頭、赤字の「19分後」は画面で唯一の赤、36 pxのJoinボタンは親指が届く場所にあります。時刻も辻褄が合っています。ステータスバーは9:41、Roadmap Reviewは10:00開始です。

これはNotion CalendarのJoinボタンと同じパターンです。会議、カウントダウン、1つのアクション。

使い回せるルール:1日を説明するバナーを、次の一手を助ける行に置き換える。

修正3:月を週に交換する

ビフォー

アフター

5行の数字が並ぶ月グリッド全体。多くの数字の下に小さな色付きドットがあり、今日は小さな黄色い円で示されています。対するのは1週間の1行で、各数字の上に1文字の曜日、11月3日火曜に大きな塗りつぶしの黄色い円があり、その下に「11月3日火曜日」の文字があります。

月グリッドは、1日画面が問うていない問いに答えています。スマホの158 pxを使って30日分の色付きドットを見せ、そのドットは下のカードと似て見えるので、画面に同じものの競合する要約が2つできてしまいます。

週ストリップは、1日表示に必要なものを残します。今日とその前後の日。塗りつぶしの円1つが今日を示し、完全な日付がその真下に文字で出ます。月もちゃんとあります。ヘッダーの11月で月表示に戻れ、ストリップをスワイプすれば1週間動きます。

使い回せるルール:その画面が扱うズームレベルを見せる。1日画面に必要なのは月ではなく週。

修正4:4つのボタンを1つのメニューにたたむ

ビフォー

アフター

2026年11月、2つのシェブロン、ワードマーク、「今日」チップ、検索と設定のアイコンがあるヘッダーと、その下に同じ大きさの枠線ボタン4つ(日、週、月、年)。対するのは、戻る矢印と11月、シェブロン付きの小さなDayメニュー、検索アイコン、プラスアイコンのヘッダーです。

同じ大きさの4つのボタンは、4つの表示が同じ確率で使われると言っています。実際は違います。人は1つの表示にとどまり、めったに切り替えません。ボタンは1行丸ごとを占め、下のカードに似て見えます。

改善版は、それらを現在の表示を示す小さなメニュー1つにたたみます。週、月、年は1タップで届きます。検索と追加はシンプルな24 pxアイコンになり、設定はタブバーに残り、ワードマークは消えます。画面こそがプロダクトであり、Apple Calendarにもワードマークはないからです。

使い回せるルール:選択肢の使用頻度に差があるなら、現在のものを見せ、残りはその裏に隠す。

細かな修正

• 機能はすべて残る。 矢印は週ストリップのスワイプになります。ベル、タグ、場所は、予定を開くと出てきます。
• 同じ予定。 5つの予定は両方の画面にあり、それぞれ元の色を色味として保っています。Team Standupは終わったのでグレー、Roadmap Reviewは次なのでブランドの黄色です。
• フローティングタブバー。 62 pxで、1日がその下を流れるので、画面は全高を使い、タブバーが別の箱に見えなくなります。
• フローティングボタンなし。 52 pxのプラスは最後のカードとその参加者に重なっていました。今はヘッダーのアイコンです。
• 均等な余白。 初稿は左14 px、右12 px。改善後の行は1つのグリッドで端から端まで伸びます。
• どちらもZoom。 Roadmap Reviewは両方の画面でZoomなので、Joinに意味があります。

自分のカレンダー画面を監査する

Figmaファイルを手に入れる

無料ファイルには、新人の初稿、改善後の画面、そしてすべてのパーツがコンポーネントとして入っています。

無料のFigmaファイル

カレンダー1日画面のリデザイン、ビフォーアフター

両方の画面と、すべてのパーツをFigmaコンポーネントとして収録。無料、閲覧専用、下書きに複製してお使いください。

Figmaで開く

FAQ

カレンダーアプリの1日表示はどうデザインすべき?

ブロックの高さが会議の長さに等しいタイムラインにします。控えめな色味と細いカラーバーを使い、空き時間は空白のまま、現在時刻には線を引きます。次の会議はその上の1行に置きます。

カレンダーアプリで次の会議はどう見せる?

会議名、「19分後」のようなカウントダウン、参加者、通話があるならJoinボタンを、1行にまとめます。その日の予定数を数えるバナーは避けましょう。

カレンダーアプリは1日画面に月グリッドを出すべき?

通常は出しません。今日に塗りつぶしの円が1つ付いた週ストリップが、1日表示に必要な文脈を与え、月はヘッダーから1タップで開けます。

カレンダーアプリに表示切替ボタンはいくつ必要?

1つです。現在の表示、ここではDayを小さなメニューに出し、週、月、年はその中に入れます。

カレンダーでフルカラーの予定カードがなぜダメなのか?

すべての予定が高彩度だと、すべての予定が緊急に見え、色が区別の役目を果たさなくなります。細いカラーバー付きの淡い色味なら、カテゴリは保たれ、文字も読めます。

カレンダーの参加ボタンは何色にすべき?

ブランドカラーで、画面で唯一の塗りつぶしボタンにします。赤はカウントダウンだけに残します。

出典

• 両方の画面は私たち自身のもので、Figmaで設計・計測しました。アプリのSundial、人物、予定は架空です。時刻は整合しています。ステータスバーは9:41、Roadmap Reviewは10:00開始、2026年11月3日は火曜日です。
• 文字とコントラストの確認:マリーゴールド#FFC233上のインク#1B1A17は10.8対1。色味の上の予定テキストは、黄色8.1、オレンジ6.5、緑6.8、紫8.4対1。白地の赤い「19分後」#D70015は5.4対1です。
• 参考にしたパターン:Apple Calendarの1日表示(左上で月に戻る、検索と追加はシンプルなアイコン、今日だけが塗りつぶしの週ストリップ、カラーバー付きの色味ブロック、空き時間としての余白)と、Notion CalendarのJoinボタン。
• ビフォー画面のワードマーク:Playfair Display Bold。アバター写真はPexelsより:Peter Platou、Son Hoa Nguyen、Luthfi Ramaditya、Carlos Gutierrez。
• 最初にApp Brainyでカルーセルとして公開しました。