Component Gallery

入力

日付選択（Date Picker）UIとは？

日付選択（Date Picker）は、カレンダーUIを使って日付を入力・選択するコンポーネント。日付範囲の選択や和暦対応バリアントを持つ場合もある。

最終更新日: 2026-07-16 / レビュー状態: 未レビュー

30秒でわかる要点

日付選択（Date Picker）は、カレンダーUIを使って日付を入力・選択するコンポーネント。日付範囲の選択や和暦対応バリアントを持つ場合もある。

自前UIプレビュー

日付選択の役割と状態を確認するための簡易プレビューです。外部サイトの画像転載ではなく、Component Gallery側で作成したHTML/CSS表現です。

使うべき場面

  • ・日付選択の役割が画面上で明確で、ユーザーの次の行動を支援したいとき。
  • ・同じUIパターンを複数画面で再利用し、学習コストを下げたいとき。
  • ・状態、エラー、読み込み、無効化などを一貫したルールで扱いたいとき。

使わない方がよい場面

  • ・単なる装飾として置くだけで、ユーザーの目的に関係しないとき。
  • ・既存のOS標準やフォーム要素で十分に伝わるのに、独自UIで複雑にしてしまうとき。
  • ・アクセシビリティやキーボード操作を担保できない状態で本番利用するとき。

構成要素

  • ・ラベルまたは主要テキスト
  • ・状態表現（通常、hover、focus、disabled、error、loading）
  • ・補助テキストまたはアイコン
  • ・操作後のフィードバック

アクセシビリティ

  • ・キーボードだけで操作できることを確認する。
  • ・フォーカス位置が視覚的に分かるようにする。
  • ・読み上げに必要なラベル、説明、状態をHTMLで表現する。
  • ・色だけに依存せず、テキストや形でも状態を伝える。

よくある失敗

  • ・見た目のバリエーションだけを増やし、使い分けルールがない。
  • ・エラー・空状態・読み込み中の表示が後回しになる。
  • ・モバイル幅でラベルやコード例がはみ出す。

デザインシステム比較

デザインシステム参照先見るポイント
Apple HIG公式を見るiOS/macOS文脈での操作感、階層、アクセシビリティを確認する基準。
Material 3公式を見るAndroid/Webでの状態表現、モーション、コンポーネント仕様を比較する基準。
Fluent UI公式を見る業務アプリ、管理画面、Microsoft製品に近いUIの比較基準。
shadcn/ui公式を見るReact + Tailwind CSSで実装する際の実用的な構成例。

実装例

Reactで日付選択を実装する

まずは意味のあるHTML構造とフォーカス状態を優先し、装飾は後から調整する。

export function DatePickerExample() {
  return <div className="rounded-md border p-4">日付選択のUI</div>;
}

HTML/CSSで日付選択を設計する

AIに渡す前のワイヤーとして、役割・ラベル・状態を明示する。

<section class="ui-component" aria-label="日付選択">
  日付選択のUI
</section>

Flutterで日付選択を実装する

Material標準の状態・タップ領域・セマンティクスを優先して組み立てる。

class DatePickerExample extends StatelessWidget {
  const DatePickerExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const Card(child: Padding(padding: EdgeInsets.all(16), child: Text("日付選択のUI")));
  }
}

SwiftUIで日付選択を実装する

Apple標準の余白、Dynamic Type、VoiceOverでの読み上げを確認する。

struct DatePickerExample: View {
  var body: some View {
    Text("日付選択のUI")
      .padding()
      .background(.regularMaterial)
      .clipShape(RoundedRectangle(cornerRadius: 8))
  }
}

AI実装プロンプト

実装プロンプト

日付選択（Date Picker）を、アクセシビリティとキーボード操作を考慮してReact + Tailwind CSSで実装してください。使う場面、状態、エラー時の表示、モバイル表示も含めてください。

比較プロンプト

日付選択（Date Picker）について、Apple HIG、Material Design、Fluent UI、shadcn/uiの設計思想の違いを比較し、どのプロダクトでどれを参考にすべきか整理してください。

関連コンポーネント

テキスト入力（Input）テキスト入力（Input）は、ユーザーがテキストを入力するための単行・複数行フォームフィールド。バリデーション状態（エラー・無効）の表現も含む。選択ボックス（Select）選択ボックス（Select）は、ドロップダウン形式で選択肢の一覧を表示し、ユーザーが選択するための入力コンポーネント。単一・複数選択のバリエーションがある。チェックボックス（Checkbox）チェックボックス（Checkbox）は、複数の選択肢からユーザーが任意の数を選択できるコンポーネント。グループで使用されることが多い。ラジオボタン（Radio Button）ラジオボタン（Radio Button）は、複数の選択肢から1つだけ選択させる入力コンポーネント。グループで使用し、排他的な選択を表現する。スライダー（Slider）スライダー（Slider）は、トラックとサムで数値や範囲をスライド操作で入力するコンポーネント。価格フィルターや音量調整などに使用される。トグルスイッチ（Switch）トグルスイッチ（Switch）は、ON/OFFの2状態をトグル操作で切り替えるコンポーネント。設定画面の機能有効化・無効化に広く使われる。

関連画面

設定画面（Settings Screen）設定画面は、ユーザーが通知、アカウント、表示、権限などの振る舞いを確認・変更する画面です。ダッシュボード画面（Dashboard Screen）ダッシュボード画面は、重要指標や状態を一覧し、次に取るべき行動へ進むための業務画面です。

比較・実装レシピ

日付選択のデザインシステム比較Apple、Material、Fluent、shadcn/uiの見方を比較します。日付選択をReactで実装するReact + Tailwind CSS向けの実装レシピです。

関連ハブ

フォームUIフォームUIは、ユーザーから情報を受け取り、入力ミスを減らしながら完了まで導くための入力コンポーネント群です。モバイルUIモバイルUIは、狭い画面、片手操作、下部導線、短い入力を前提にコンポーネントを選ぶ必要があります。

運営・更新・参照元

最終更新日
2026-07-16
レビュー状態
未レビュー

参照元

FAQ

日付選択とは何ですか？

日付選択（Date Picker）は、ユーザーが目的の操作や情報理解を進めるためのUIコンポーネントです。画面内での役割、状態、アクセシビリティを合わせて設計します。

日付選択を設計するときに最初に決めることは？

最初に決めるべきなのは、見た目ではなくユーザーが達成したい目的、表示する状態、操作後のフィードバックです。

日付選択の実装でよくある失敗は？

状態名やラベルが曖昧なまま装飾から作り始めることです。読み上げ、キーボード操作、エラー表示、モバイル幅を先に確認します。