coastdigitalgroup/coastai-skills

カレンダーと日付選択システム

目的

カレンダーと日付選択システムは、ユーザーが単一の日付、日付範囲、または特定の時間枠を選択できるインターフェースを設計するための方法論を提供します。日付選択は、「次の火曜日」「月の最終週末」など複雑なメンタルモデルを伴う高負荷タスクです。このシステムにより、日付ピッカーが視覚的に明確で、キーボードやタッチで簡単に操作でき、有効性や空き状況について即座にフィードバックを提供できるようになります。

ユースケース

• 予約・予約システム: ホテルのチェックイン/チェックアウト日やフライト出発日の選択。
• スケジューリング: 会議、予約、配送の時間枠を選択する。
• 分析・レポート: データフィルタリングのためのカスタム日付範囲（開始日から終了日）を定義する。
• 生年月日入力: 年齢確認やプロフィール設定のための生年月日を取得する。
• イベント計画: プロジェクト管理ツールでの締切やマイルストーンを管理する。

使用すべきでないケース

• 単純な日付: 「今日」や「昨日」など、よく知られた単一の日付のみが必要な場合は、シンプルなボタンやリンクを使用してください。
• 記憶しやすい日付: 誕生日やクレジットカードの有効期限など、ユーザーが覚えている日付には、カレンダーグリッドではなく、 type="number" や type="tel" を使用した標準テキスト入力の方が、グリッド内を移動するより入力が速いため適しています。
• 相対的な時間: 「過去7日間」や「今月」のみを選択する必要がある場合は、完全なカレンダーではなく、ドロップダウンやボタングループを使用してください。

入力

1. 選択モード: 単一日付、日付範囲、または時間枠。
2. 制約: 最小/最大日付、無効な日付（例: 過去の日付、予約済みスロット）。
3. コンテキスト: スタンドアロンページ要素か、ポップオーバー/モーダルトリガーか。
4. ローカライゼーション: 地域の日付形式（MM/DD/YYYY vs DD/MM/YYYY）と週の開始曜日（日曜日 vs 月曜日）。

出力

1. グリッド構造仕様: 月ヘッダー、曜日ラベル、各日セルの視覚的な定義。
2. 状態マトリックス: 「今日」「選択済み」「範囲開始」「範囲終了」「範囲内」「ホバー」「無効」の各状態における視覚的表現。
3. 入力連携仕様: カレンダーとテキスト入力フィールドとの関連（トリガーアイコン、フォーマット、手動入力サポート）。
4. アクセシビリティ計画: キーボードショートカット（矢印キー、Enter、Escape）と状態更新のためのARIAライブリージョン。

ワークフロー

1. 入力パターンを選択する

ユーザーが日付を入力する方法を選択します:

• 直接入力: マスク付きテキスト入力。高速で既知の日付入力に最適。
• ピッカートリガー: カレンダーアイコン付きの入力で、オーバーレイを開く。一般的なユースケースに標準的。
• インライン/常時表示: カレンダーがページ上に常に表示される。スケジューリングが頻繁なタスクに最適。

2. カレンダーグリッドを設計する

月表示に一貫した空間的リズムを確立します:

• ヘッダー: 「前月」「次月」のナビゲーションボタンとともに月と年を表示。
• 曜日行: 素早く方向を把握するための一文字または短いラベル（日、月、火...）。
• 7列グリッド: 各日セルに日付とステータスインジケーター（例: イベントのドット）を表示するための十分なスペースを確保します。

3. 範囲ロジックを定義する（該当する場合）

範囲を選択する場合、インターフェースは3つの状態を追跡する必要があります:

• 開始選択: 最初にクリックされた日付。
• 「スパン」 : 開始位置と現在のホバー位置の間の視覚的な接続。
• 終了選択: 2番目にクリックされた日付で、範囲が確定する。
• 視覚的フィードバック: 「範囲内」の日付には微妙な背景色を使用し、「開始」と「終了」のキャップには異なる形状や高いコントラストを使用します。

4. アクセシビリティを考慮した設計

• キーボードナビゲーション: ユーザーは矢印キーで日付間を移動し、PageUp/PageDownで月を切り替え、Enterで選択できる必要があります。
• フォーカス管理: ピッカーが開いたとき、フォーカスは現在選択されている日付または「今日」に移動する必要があります。
• ARIAロール: カレンダーには role="grid"、曜日には role="columnheader"、日付には role="gridcell" を使用します。アクティブな選択には aria-selected="true" を使用します。

5. レスポンシブ適応を計画する

• モバイル表示: 小さな画面では、単一の月表示が最適なことがよくあります。範囲選択の場合は、2ヶ月を縦に重ねるか、全画面オーバーレイを使用することを検討します。
• タッチターゲット: 各日セルは少なくとも44x44pxにするか、誤タップを防ぐために十分なパディングを確保します。

判断ルール

• 「まず入力」のルール: 常にユーザーが入力フィールドに日付を手動で入力できるようにします。カレンダーの使用を強制しないでください。
• 月の制限: 遠い過去や未来（例: 5年以上先）の日付を選択する場合は、ユーザーが何十回も「次へ」をクリックすることを強制せず、年/月のドロップダウンセレクターを提供します。
• 即時フィードバック: ユーザーが無効な日付（例: 平日のみ配送の日曜日）を選択した場合、フォーム送信を待たずに、直ちにコンテキストエラーメッセージを表示します。
• 週の開始日: ユーザーのロケールをデフォルトにします（通常、米国では日曜日、英国/EUでは月曜日）。

制約

• アクセシビリティ: すべての日付状態でWCAG AAコントラスト（4.5:1）を満たす必要があります。選択された日付は色だけでなく、他の手段（例: 塗りつぶし背景と背景なし）で区別できる必要があります。
• レスポンシブ性: カレンダーはビューポートをはみ出してはいけません。ポップオーバーピッカーは、入力の下に十分なスペースがない場合でも「反転」ロジックを使用して表示され続ける必要があります。
• ローカライゼーション: さまざまな日付形式や月名・曜日名の翻訳をサポートします。

よくある失敗パターン

• 「無限クリッカー」: 年セレクターを提供せずに、ユーザーに12ヶ月分クリックさせて日付を探させる。
• 隠された入力: ユーザーが日付を入力することを防ぎ、熟練ユーザーや運動障害のあるユーザーを苛立たせる。
• 小さすぎるターゲット: モバイルデバイスで使用不可能な20pxのセルでグリッドを設計する。
• 「今日」のコンテキストの欠如: 現在の日付を強調表示せず、ユーザーが自分の位置を把握しにくくする。
• わかりにくい範囲: 範囲の「開始」と「終了」を明確に区別せず、「範囲内」のスパンを表示しない。

検証基準

• ユーザーはキーボードのみでカレンダーを操作し、日付を選択できる。
• 手動テキスト入力がサポートされ、入力フィールドで検証されている。
• 今日の日付は視覚的に区別できるが、選択状態と競合しない。
• 範囲選択には明確な「開始」「終了」「スパン」の視覚的表現がある。
• 日セルのタッチターゲットが44x44pxの推奨値（または余白を含む最低24x24px）を満たしている。
• すべての状態（ホバー、選択、無効）のコントラスト比がWCAG AAを満たしている。
• カレンダーはモバイルデバイスでレイアウトを調整する（または全画面表示に切り替わる）。