日付ピッカーUIの設計：期間・タイムゾーン・エラーを分ける

日付ピッカーでは、確定する前に予定のルールを理解できることが大切です。選べる日、期間の決め方、結果を左右するタイムゾーン、入力を間違えたときの直し方を示します。カレンダーだけでなく、入力欄、補足説明、検証、確定後の表示まで含めて設計しましょう。

1. カレンダーの形より先に、何を予約するか決める

まず、利用者が何の日付を決めるのかを確認します。宿泊ならチェックインとチェックアウト、レポートの絞り込みなら片側を指定しない期間、会議なら日付、時刻、所要時間、タイムゾーンが必要かもしれません。似た画面でも、受け付ける値のルールは異なります。

部品を描く前に、日付の要件を短くまとめます。

• 選択方法：単一の日付、期間、複数の日付、または日付と時刻。
• 境界：最も早い日、最も遅い日、期間の上限、選択できない日。
• 暦と表示：地域、週の始まり、月名、年の形式。
• 時刻の解釈：利用者、アカウント、施設のタイムゾーン、またはUTCのどれを使うか。
• 確定方法：選択したらすぐ適用するか、「適用」の操作を待つか。

この記事では、宿泊の空き状況を絞り込む画面を作ります。チェックインとチェックアウトを選び、宿泊数は1〜14泊、過去の日付は選択不可、空き状況は施設のタイムゾーンで判定するという例です。日付の計算をそろえるため、操作日は2026年9月17日とします。この同じ例を、配置、状態、エラー、レビューまで使います。

この要件を先に決めておくと、見た目の判断を実際の予約ルールに結び付けられます。

2. 日付の入力方法を、利用目的に合わせる

曜日、空き状況、二つの日付の位置関係を確認するなら、カレンダーのポップオーバーが役立ちます。一方、すでに分かっている日付は、文字で入力した方が早い場合があります。入力欄とカレンダーを開くボタンを組み合わせれば、キーボードで入力したい人にも、日付を見ながら選びたい人にも対応できます。

宿泊の例では「チェックイン」「チェックアウト」という二つのラベルを常に表示し、各入力欄にカレンダーを開くボタンを付けます。選択した期間は、入力欄とカレンダーの両方で確認できるようにします。開始と終了は色だけで区別せず、形や文字を併用し、実装ではアクセシブルな名前も用意します。

3. 期間を選ぶ順序と、確定の条件を決める

チェックインを選んだら、選択対象をチェックアウトへ移し、すでに選んだチェックインを残します。ホバーやフォーカスで期間の候補を見せる場合は、確定済みに見えないようにします。チェックアウトを選んだ時点で、二つ目の日付だけでなく、期間全体を検証します。

例では9月21日を選ぶと開始日として表示し、9月22〜24日に移動すると期間をプレビューできます。9月24日を選んだら3泊の期間になります。もし9月23日が利用不可なら、その日をまたぐ期間を認めるかどうかを製品のルールに従って処理します。選択できない日を通過できるかをデザイナーが独断で決めず、プロダクトと開発の担当者に確認します。

選び直せる場合は「リセット」や「クリア」を用意します。「適用」が必要な方式なら、有効な期間になるまで実行できない状態にし、その理由を説明します。選択と同時に適用する方式なら、周囲の結果表示を更新し、実装では変更を支援技術にも伝えます。

4. 選べない理由と、まだ分からない状態を区別する

選べない日を薄い色にするだけでは、理由が伝わりません。過去の日付、満室、予約可能な期間の外、別の条件による制限では、必要な説明や次の操作が異なります。

• 選択不可、選択済み、表示中の月以外の日を、見た目で区別します。
• 実装では無効な状態をプログラムから分かるようにし、役立つ場合は理由もアクセシブルに伝えます。
• 理由を確認するために意図して操作可能にしている場合を除き、完全に利用できない日へ不要なフォーカス移動をさせない設計を検討します。採用するカレンダーの操作パターンと整合させてください。
• 「予約は14泊まで」のような制約を、日付の操作部品の近くに示します。
• 空き状況を取得中の状態を分けます。まだ分からない日を、満室として見せないようにします。

キーボードとカレンダーグリッドの実装には、WAI-ARIAの日付ピッカーダイアログ例（英語）が参考になります。デザインファイルには意図するフォーカス順を記録し、最終的なキーボードと支援技術の動作は実装で試します。

5. タイムゾーンを、選択値の意味に含める

日付だけを選んでも、システムがタイムスタンプとして保存すると地域によって意味がずれることがあります。空き状況、締め切り、集計に影響する場合は、タイムゾーンを表示します。意味が複数ある略称だけより、「施設の時刻（対象日はUTC−04:00）」のように基準を説明した方が分かりやすくなります。UTCとの差は日付によって変わる地域もあるため、固定の差をそのまま地域のタイムゾーンとして扱わないようにします。

この予約では、日付の境目と空き状況を施設のタイムゾーンで判定します。別の地域にいる旅行者も、施設側の日付を選びます。このルールを入力欄の近くと、確定内容の表示に繰り返します。タイムゾーンを変更できる場合は、選択した現地日付を維持して解釈し直すのか、同じ時点を別の地域の時刻へ変換するのかを明示します。

夏時間の切り替えは、開発と文言の両方で検討が必要です。日付だけの宿泊指定は存在しない時刻の問題を避けられる場合がありますが、時刻も指定する予約では扱う必要があります。予約サービスが受け付けない時刻を、画面だけで選べると約束しないようにしましょう。

繰り返す予定では、タイムゾーンに加えて繰り返しルールと例外を定め、変更対象が今回のみ・今回以降・すべての予定のどれかを明確にします。

6. エラーは、入力を直せる形で伝える

安全に保持できる日付は残し、問題のある欄、条件、修正方法を示します。「無効な日付です」だけでは、何を変えればよいか分かりません。

形式の検証は、利用者が入力を終える時間を取ってから行います。複数の欄にまたがる条件や空き状況は、期間を適用する、または次へ進む段階で確認する方が分かりやすい場合があります。入力途中の一文字ごとにエラーを出し、作業を妨げないようにします。

この例の操作日を基準に、9月21日〜10月6日なら15泊で上限を超えます。チェックアウトを10月5日へ直すと14泊になります。期間が条件を満たして「適用」できることと、宿泊予約自体が確定したことは区別します。

7. Pixsoで日付ピッカーの部品と状態を作る

Pixsoでは、それぞれを独立したスクリーンショットにせず、編集できるコンポーネントとして組みます。入力欄、カレンダーの見出し、曜日の行、日付セル、期間の強調、補足説明、エラーメッセージを再利用できる部品にします。通常、フォーカス、開始日、期間内、終了日、選択不可、今日、表示中の月以外を、プロパティまたは明確な名前のバリアントで表します。

配置の設定で、ラベルやエラーメッセージの長さが変わっても、間隔と揃え方を保ちます。予約ルールを部品の横に置き、「最初に開いた状態」「期間の選択」「利用できない日」「不正な期間」の四つのシナリオをフレームにします。共有コンポーネント、スタイル、変数は見た目の一貫性に役立ちますが、予約ルールの出典と責任者は別に明らかにする必要があります。

プロダクト、文言、アクセシビリティ、開発の担当者へファイルを共有し、対象のフレームと状態にコメントしてもらいます。広く再利用する基準は、チームのデザインシステムの運用（英語）へつなげます。Pixsoで設計を直した後も、実装した日付の操作部品は別に検証します。

8. 狭い画面とアクセシビリティを確認する

広い画面では二か月を並べると期間を選びやすい場合があります。狭い画面では、一か月と明確な前月・翌月の操作の方が読みやすくなります。二か月を縮めすぎて日付を押しにくくしないでください。二つの入力値をカレンダーの上に残し、スクロール中も選択内容を確認できるようにします。

カレンダーを開く、日や週ごとに移動する、月を変える、日付を選ぶ、Escapeで変更せず閉じる、開いたボタンへフォーカスを戻す、というキーボードの経路を記録します。実装ではラベル、説明、エラー、選択状態、更新を支援技術へ伝えます。コントラスト、操作対象の大きさ、拡大、ハイコントラスト表示も、コード上での確認が必要です。

ローカライズも、実際の文字で試します。月名、曜日の順序、数字の形式、翻訳した補足は幅を変えます。選択値が切れたり、主要な操作が見えなくなったりしないように確認します。

9. 日付ピッカーUIの確認リスト

• 単一の日付、期間、複数日、日時のどの仕事かに合った部品になっている。
• 文字入力とカレンダー操作で、同じ値と形式になる。
• 開始、終了、プレビュー、今日、選択不可、表示中の月以外を区別できる。
• 最小・最大の日付、利用不可の日、期間の長さの条件が分かる。
• 結果に影響する場所に、基準のタイムゾーンを示している。
• エラーでも直せる入力値を保ち、修正する操作を説明している。
• 読み込み中、空きなし、成功、選択後の空き状況の変化を扱っている。
• 画面が狭くても、選択値と操作対象を読める大きさで保っている。
• キーボードと支援技術の動作を仕様にし、実装で試している。

見えるカレンダーと、実際の予定のルールをつなぐ

日付ピッカーの設計では、見た目を整える前に、目的、期間の条件、選べない日、タイムゾーン、検証、確定したことを示す情報を決めます。その状態をPixsoで再利用・レビューできる部品にし、実装ではキーボード、地域による違い、予約サービスの条件を試します。利用者が、何を選び、どう直し、何を確定したのか分かる操作を目指しましょう。