動画で読む
カレンダーの役割を「予定の器」から「実行ログ」へ裏返す
結論から書きます。月カレンダー UI を「未来の予定を埋める器」ではなく「過去の実行を記録する地図」として設計し直すと、何を表示すべきかの判断軸がまるごと入れ替わります。前者は空白を「埋めるべき余白」として扱い、後者は空白を「やらなかった記録」として扱う。同じグリッドでも役割が違えば、最適な情報設計は別物になります。
きっかけは、2026 年 6 月に Zenn で読んだ iOS アプリ Calendar ToDo（v2.2.0 で月カレンダーを導入、App Store ID6756511434）の設計記録でした。作者はこのカレンダーを「予定表ではなく、自分の行動を見返すための実行ログの地図」として設計したと書いています（Calendar ToDo の月カレンダー設計）。予定を入れる場所ではなく、入れた予定にどう動いたかを残す場所。この一文で、私の中のカレンダー観がひっくり返りました。
正直に言うと、私は予定を立てるのは得意なのに、立てた予定の 8 割は実行されないまま月が変わります。Google カレンダーを 5 年使って、ある時から埋まった予定表を見返すのをやめました。理由は単純で、そこには「何を予定したか」しか残っておらず、「実際どう動いたか」が一切無かったからです。実行ログとして設計されたカレンダーは、まさにこの欠落を埋めにいく道具でした。
状態は色とドットで符号化する、ただし詰め込まない
状態の符号化（encode、情報を色や形に対応づけること）は、実行ログ UI の心臓部です。ただし全部を見せると破綻するので、Calendar ToDo は日付セルの下に小さなドットを置き、予定や状態の雰囲気を軽く伝える方式を採っていました。完了・途中・未着手を、文字ではなく点の有無と色で示す。セルを文字で埋めない判断が効いています。
私はかつて、自分のタスク管理で状態をカテゴリ別に 20 色まで増やして破綻させたことがあります。色が 7 色を超えたあたりで、どの色が何だったか自分でも思い出せなくなりました。色は強力な符号化チャネルですが、人間が前注意的（preattentive、意識して見る前に瞬時に区別できること）に処理できる色数は限られます。Apple の Human Interface Guidelines も、色だけに意味を負わせず形やラベルを併用するよう促しています（Apple HIG — Color）。状態は 3〜4 種に絞り、色とドットの位置で区別するのが現実的でした。
これは以前 DESIGN.md に値ではなく役割を書く で書いた話と地続きです。「赤」という値ではなく「未完了という役割」を先に決め、その役割に色を割り当てる。役割ベースで状態を設計しておくと、後から色を変えても意味が崩れません。
| 状態 | 符号化 | セルでの見え方 |
|---|---|---|
| 完了 | 塗りつぶしのドット | 静かに「済んだ」と分かる |
| 途中 | 半分のドット / 別色 | 視線が少し引っかかる |
| 未着手 | 輪郭だけ / ドット無し | 主張しない |
| 予定多数 | +3 の省略表示 | 件数は伝えるがセルは崩さない |
表にすると当たり前ですが、現場では「全部の予定をセルに出したい」という欲求との戦いになります。詰め込みたい衝動を抑える設計判断こそが、この UI の本体です。
空セルを「失敗」ではなく「記録」として扱う
空セルの意味づけが、予定表と実行ログを分ける最大の境界線です。予定表では空白は「まだ埋めていない余白」ですが、実行ログでは空白は「その日は動かなかった」という立派な 1 つの記録になります。空白を罪悪感の対象ではなく、観察対象として置く。この転換が、カレンダーを見返す心理的なハードルを大きく下げます。
埋まっていないことを責める UI は、見返されなくなります。私が Google カレンダーを見なくなったのも、空いた予定が「サボった証拠」に見えたからでした。逆に、空白を淡々と記録として残す UI なら、「先週は火曜だけ動けた」という事実を冷静に受け取れる。空セルをグレーアウトで叱るのではなく、ニュートラルな余白として扱うだけで、振り返りの道具に変わります。
月全体の可読性と 1 日の情報量を両立させる
月表示の難しさは、1 日あたりの情報を増やすほど月全体が読みにくくなる、という逆相関にあります。Calendar ToDo はこの矛盾に、件数が多い日は +3 のように省略表示することで応えていました。予定が多いことは伝える、でもセルのレイアウトは崩さない。1 日のズームと 1 か月の俯瞰を、同じグリッドで両立させる工夫です。
ここで効くのが、月ビューの役割を「詳細を読む場所」ではなく「パターンを掴む場所」と割り切ることです。どの週に動けて、どの週が空いたか。月ビューが答えるべきはこの粒度の問いで、1 件ごとの詳細は日ビューに譲ればいい。役割の切り分けは、私が ピクセルパーフェクトを「意図の一致」として捉え直す で書いた、「何を一致させ、何を捨てるかを先に決める」判断と同じ筋でした。
手元の iPhone と MacBook で実際に何度かカレンダー UI を試作した範囲でも、セルに 2 件以上のテキストを出した瞬間に月全体が情報の壁になりました。1 セル 1 ドット + 件数バッジ、という制約を先に引くほうが、結果的に読み返される画面になります。
自分の UI に落とすときの判断軸
最後に、自分の UI に落とすときの判断軸を整理します。カレンダーに限らず「記録を見返させたい UI」を作るときは、(1) その器が記録する対象は未来か過去か、(2) 状態を何種類まで符号化するか、(3) 空白に何の意味を与えるか、の 3 つを先に決めると設計がぶれません。
私の運用ルールはこうしました。器の役割を 1 文で言い切る（「これは実行を見返す地図だ」）。状態は 3〜4 種に絞り、色とドット位置で区別する。空白はグレーで叱らず、ニュートラルに残す。そして 1 セルに出す情報は 1 ドット + 件数バッジまでに制約する。制約を先に置くほど、後の実装判断が速くなりました。
この記事は、iOS アプリ Calendar ToDo の設計記録を起点に、私自身の判断軸を加えて書いています。下書きは AI が起こし、運営者である私が公開前に内容を確認・編集して公開しました。
よくある質問
- 予定表アプリと実行ログ型カレンダーの一番の違いは何ですか？
- 空白の扱いです。予定表は空白を「埋めるべき余白」とみなしますが、実行ログ型は空白を「その日は動かなかった」という記録として扱います。同じグリッドでも、見返す目的と心理的ハードルが変わります。
- 状態を色で表すとき、何色まで使ってよいですか？
- 完了・途中・未着手など 3〜4 種に絞るのが現実的です。前注意的に区別できる色数は限られ、色が増えるほど意味を思い出せなくなります。色だけでなくドットの有無や位置を併用すると安定します。
- 予定が多い日はどう表示すればいいですか？
- 全件をセルに出すとレイアウトが崩れます。Calendar ToDo のように `+3` の省略表示で「多い」という事実だけを伝え、詳細は日ビューに譲ると、月全体の可読性を保てます。
- この設計はカレンダー以外にも応用できますか？
- できます。記録を見返させたい UI 全般に、(1) 記録対象は未来か過去か、(2) 状態を何種類符号化するか、(3) 空白に何の意味を与えるか、という 3 つの判断軸がそのまま使えます。