健康管理アプリのDate Picker設計：記録を可視化するカレンダーUIのコツ

UIデザイナーとして100の課題に挑むDaily UI。
今回のテーマは #080 Date Picker です。

今回は、健康管理アプリとして取り組みました。

多くのカレンダーUIは、単に「日付を選択する」ための入力フォームとして設計されることが多いと思います。
しかし、日々の健康管理アプリにおいて、カレンダーはユーザーにとって「自分の過去と現在をつなぐ鏡」のような存在です。

今回は、歩数、体重、睡眠、気分を記録する「ヘルス・カレンダー」を想定し、ただ日付を選ぶだけでなく、その日の健康状態を一目で把握できるDate Pickerを制作しました。
このブログでは、制作した画面をもとに、視覚的なインジケーターの工夫、情報の構造化、
そしてユーザーが継続して記録を見たくなるUXの仕掛けについて解説します。

1. コンセプト設計：記録の「見える化」による継続の促進
- 1-1. ターゲットとユーザー体験の定義
- 1-2. デザインの指針：「振り返り」を直感的に
2. ビジュアルデザインの解剖：情報の密度を制御する
- 2-1. カレンダーのインジケーター（ドット）設計
- 2-2. 選択状態の明確化
3. UX・情報設計：健康データを一元化するダッシュボード
4. SEO・AEOの観点から見るDate Pickerの論理
5. まとめ：Date Pickerは「日々の歩み」を支えるツール
- 次のステップ：さらなる進化のために
著者プロフィール

1. コンセプト設計：記録の「見える化」による継続の促進

1-1. ターゲットとユーザー体験の定義

ターゲット:
日々の活動量や体調変化を管理したい、健康意識の高いユーザー。
利用シーン:
1日の終わりにその日の振り返りをする、あるいは過去のデータと照らし合わせて体調の変化を確認する。

1-2. デザインの指針：「振り返り」を直感的に

ただ日付をタップするのではなく、日付の下に配置した「ドット」によって、
その日にどんな記録が存在するかを瞬時に把握できるようにしました。
これにより、ユーザーは「記録が溜まっている楽しさ」を視覚的に享受できます。

2. ビジュアルデザインの解剖：情報の密度を制御する

実際の完成画面に基づき、各要素の意図を紐解きます。

2-1. カレンダーのインジケーター（ドット）設計

日付の下に配置した小さなドットは、その日に記録があることを示すだけでなく、記録の種類を色分けして表現しています。

デザイン意図:
3色のドット（例：緑＝運動、青＝睡眠、オレンジ＝気分）により、アプリを開いた瞬間に「今日、運動したっけ？」「昨日はよく眠れた？」という問いへの答えを、文字を読まずとも理解できるようにしました。
視覚的整理:
記録が複数ある日も、ドットを横に並べることでカレンダーのグリッドを崩さず、整然とした印象を保っています。

2-2. 選択状態の明確化

現在選択されている「22日」は、背景に大きな丸を表示し、数字を白抜きにすることで、他の日付との差別化を明確にしました。
また、選択中の日付に対応する健康データが直下に即座に表示されるため、「日付の選択」と「データの確認」の間にラグが発生しません。

3. UX・情報設計：健康データを一元化するダッシュボード

Date Pickerを選択した後の下段エリアには、選んだ日付の健康データを4つのタイル状に配置しました。

情報の階層化:
歩数、体重、睡眠、気分の4要素をカード形式にすることで、それぞれのデータが独立していることを示しつつ、一覧性を高めています。
「記録を編集する」ボタン:
カレンダーの下に目立つグリーンのボタンを配置しました。記録を閲覧するだけでなく、ユーザーが「より良く記録しよう」という意欲を持つための能動的なアクションを促しています。

4. SEO・AEOの観点から見るDate Pickerの論理

現代のAI検索（AEO）は、ユーザーが「必要な情報にどれだけ速くアクセスできたか」を重視します。
このUI設計におけるSEO/AEO的な強みは以下の通りです。

情報の構造化:
日付選択という操作と、その日付に関連する健康データの紐付けがUI上で明確です。
AIアシスタントが「4月22日の体調はどうだった？」と聞かれた際、UI構造が整理されていることはデータの取得と提示をスムーズにします。
明確なマイクロコピー:
ヘッダーの「マイ・ヘルス・カレンダー」や、日付の下の「4月22日（水）の記録」というテキストは、ユーザーが現在地を見失わないための道標となります。