Component Gallery

Screen Pattern

カレンダー画面（Calendar Screen）UIの作り方

カレンダー画面は、日付・予定・空き時間を視覚的に確認し、選択や予約へ進むための画面です。

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

30秒でわかる要点

カレンダー画面は、日付・予定・空き時間を視覚的に確認し、選択や予約へ進むための画面です。

自前ワイヤーフレーム

カレンダー画面の情報配置を確認するための簡易ワイヤーフレームです。外部サービスのスクリーンショットではなく、Component Gallery側で作成した構成図です。

主なユースケース

  • ・予定を確認する
  • ・予約日を選ぶ
  • ・月・週・日表示を切り替える

レイアウトの考え方

  • ・現在日と選択日を分けて表す
  • ・予定密度が高い日でも読める表示にする
  • ・モバイルでは表示単位を絞る

アクセシビリティ

  • ・日付セルに完全な日付ラベルを付ける
  • ・選択状態をariaで伝える
  • ・キーボードで日付移動できるようにする

よくある失敗

  • ・今日と選択日が区別できない
  • ・予定が多い日に崩れる
  • ・祝日やタイムゾーンの扱いが曖昧

構成コンポーネント

日付選択（Date Picker）日付選択（Date Picker）は、カレンダーUIを使って日付を入力・選択するコンポーネント。日付範囲の選択や和暦対応バリアントを持つ場合もある。ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。バッジ（Badge）バッジ（Badge）は、数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。ポップオーバー（Popover）ポップオーバー（Popover）は、要素に紐付いてトリガー操作で表示される吹き出し型UIコンポーネント。ツールチップより情報量が多く、ボタンやフォームを内包できる。ツールチップ（Tooltip）ツールチップ（Tooltip）は、要素にホバーまたはフォーカスしたときに表示される補足情報。短いテキストで要素の説明や補足を行う。

AI実装プロンプト

カレンダー画面実装

カレンダー画面をReact + Tailwind CSSで実装してください。主要コンポーネント、空状態、エラー状態、モバイル表示、アクセシビリティを含めてください。

運営・更新・参照元

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

参照元

FAQ

カレンダー画面で最初に決めるべきことは何ですか？

まず、この画面でユーザーが完了したい主目的を1つ決めます。そのうえで、date-picker、button、badgeなどの構成要素を優先度順に配置します。

カレンダー画面でよくある失敗は何ですか？

今日と選択日が区別できない

カレンダー画面をモバイル対応するときの注意点は？

最初に表示する情報を絞り、入力欄、主ボタン、エラー表示、戻る導線が狭い画面でも隠れないようにします。