カレンダーUIの再設計：情報密度と配色の整理でプロ仕様に

どーも、ちょりんだです。

先日からカレンダーUIのチューニングを繰り返していましたが、ようやく納得できる形にまとまりました。

以前の実装でも機能自体は満たしていました。記事のある日が視覚化でき、月移動でき、クリックで絞り込みもできました。

でも見た目にはまだ「ノイズ」が残っていました。

今回は「情報の整理」と「配色の引き算」という2つの軸で再設計した内容をまとめます。

何が問題だったのか

当初のカレンダーは、機能こそ充実していたものの、視覚的な情報量が多すぎる状態でした。

色が多すぎる: 平日・土日・祝日で色分けし、そこに投稿日の紫も加わったことで、画面が信号機のようになっていました。
優先順位が不明瞭: 「今日を示すドット」「投稿日の丸」「祝日の赤」が並ぶことで、情報の優先順位が分かりにくくなっていました。
檻のような枠線: セル同士を線で区切ることで、レイアウトが窮屈に見えていました。
ダークモードの違和感: ライトモードで馴染んでいた色が、ダークモードでは不自然に浮いていました。

これらを解決するため、今回は「削ぎ落とす」ことに注力しました。

1. 配色の引き算：インディゴとグレーの2色へ

まず、「祝日や土日を区別する」という発想を捨てました。

ブログのカレンダーにおいて、祝日かどうかという情報は優先度が低いと考えたからです。

それよりも「いつ記事を書いたのか」「今日は何日なのか」という、自分にとっての記録を最優先にしました。

平常心で情報を絞る

すべての日付を共通のベース色に統一することで、色によるノイズを減らしました。

.date-number {
  color: #374151;
}

.dark .date-number {
  color: #cbd5e1;
}

その上で、重要な情報にはブランドカラーであるインディゴを乗せています。

投稿日: インディゴの背景に白文字。クリック可能な要素であることを示しました。
今日: インディゴの太字。丸やドットで装飾せず、文字の強調だけで役割を持たせました。
それ以外: 薄いグレー。今月の通常日に対して一歩引いた存在感にしました。

投稿日は bg-indigo-600、今日は text-indigo-600、今月以外は text-slate-400 に統一しました。これだけで、情報の優先順位が一目で分かるようになりました。

2. 枠線から「余白」への転換

グリッド線も削除しました。セル同士を線で区切るのではなく、余白で分けることで、モダンで開放的な印象に変わりました。

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.day-cell {
  padding: 16px;
  border: none;
  background: transparent;
}

数字の周りに十分な余白を持たせることで、UI全体が呼吸し始めたように感じます。

数字はflexboxで中央揃えにしているので、左右のズレもありません。

ポップアップ版のカレンダーは領域が限られるため、paddingを8pxに抑えつつも中央配置を維持しました。

場所に応じて最適な余白を選ぶことも、今回のこだわりの一つです。

3. ダークモードを落ち着かせる

ダークモードではベーステキストを text-slate-300 に落とし、背景の slate-900 に対してコントラスト比を確保しました。

アクセント色はライトモードと同じインディゴのままにすることで、モードを切り替えてもブランド感が保たれています。

色数をインディゴとグレーの2系統に絞ることで、プロ仕様の落ち着いた見た目になりました。

4. カレンダーと記事一覧の統合

さらに、カレンダーと記事一覧を一つのページに統合しました。

「過去の記事を探す」という目的は同じなのですから、別々に分ける必要はありませんでした。

具体的には以下の変更を行いました。

src/pages/calendar.astro を src/pages/blog/index.astro に移動
旧 /blog の単純な記事一覧ページを削除
メニューの「カレンダー」→「機能一覧」→「記事一覧」と段階的に名称変更
旧URL /calendar から /blog への301リダイレクトを設定

# public/_redirects
/calendar /blog 301

これにより、UXの整理と同時に、既存のリンクやSEO価値の集約も実現できました。

技術的な余談

今回の変更は、Astroコンポーネントの <style> ブロック内に直接HEXコードを書く形で行いました。

Tailwindのクラス名だけでは、動的に生成されるカレンダーセルに対して正確な色を当てにくかったからです。

:global() でグローバルに、scoped styleでコンポーネント単位に、使い分けることでスタイルの影響範囲も整理できました。

また、Cloudflare Pagesの _redirects を使ったリダイレクト設定は、静的サイトでもURLの移行をスムーズにしてくれるので、今後の再編にも活用していきたいと思います。

UIは「足す」より「引く」

今回の改善を通して、デザインにおいて重要なのは「いかに情報を加えるか」ではなく「いかに捨てるか」だと改めて実感しました。

祝日を捨て、枠線を捨て、多すぎる色を捨てたことで、ようやく「いつ書いたか」という情報が主役になれました。

見た目はようやく納得できるプロ仕様になりましたが、肝心の記事の中身はまだまだこれからです。

このカレンダーに、もっとたくさんのインディゴの丸を増やしていけるよう、これからも書き続けていきたいと思います。

次は、タグや検索機能ともっとうまく連携させたいですね。またリファクタリングが進んだら報告します。