UI CHECK

Q. リストの日付を、ただの数字ではなく「四角い箱(Badge)」にした理由はなんだと思いますか?

Mode Set!
UI DESIGN LOGIC

BADGE ANATOMY

日付ボックスのデザイン意図

1. The Date Badge

ただ「2月3日」と書くのではなく、色付きのボックスにすることで、リストの中で強力なアイキャッチ(目印)として機能させます。

Text Only: 02/03 VS Badge UI:
FEB03
.date-box { background: #7986cb; /* Indigo Accent */ color: #fff; width: 60px; height: 60px; border-radius: 12px; display: flex; flex-direction: column; }
デザインの意図

日付を「文字情報」ではなく「アイコン(図形)」として認識させるテクニックです。ユーザーはリストを流し見する際、タイトルを読む前に「いつの話か」を直感的に把握できます。

2. Color Harmony

ボタンの色を「真っ青」から「紫がかったインディゴ」に変更しました。

.shortcut-btn { /* HeaderやDate Boxの色味に合わせる */ background: linear-gradient(135deg, #5c6bc0, #3949ab); box-shadow: 0 10px 25px rgba(92, 107, 192, 0.3); }
なぜ色を変えたの?

以前の明るいブルーは目立っていましたが、全体の「大人っぽい紫のトーン」から浮いていました。「目立ちつつ、馴染ませる」ために、同系色の濃いグラデーションを採用し、統一感(Unity)を高めました。

← ポータルに戻る