FORM-009 公開  更新

日時予約型 フォーム

空いている日にちと時間を選んで、相談や来店の予約を申し込むフォームの設計です。
空き状況を選ぶ前に示し、埋まった枠も並べたまま選べないことを伝えることで、読み手は迷わずに都合のよい枠を選べます。
申し込み時の空きの再確認や、予約が確定するまでの扱いまで決めておくことで、予約の重なりや行き違いを防ぎます。

ワイヤーフレーム(PC)

日時予約型 フォーム PC版ワイヤーフレーム

ワイヤーフレーム(SP)

日時予約型 フォーム SP版ワイヤーフレーム

SP版の特徴

  1. 日にちは横に送って選ぶ:7日分を1行に詰めると1つ1つが小さく押しにくいため、横に送って選べる大きさにしています。次の日付を少しのぞかせ、続きがあることが分かるようにしています。
  2. 時間は3列:狭い画面でも押し間違えにくい大きさを保つため、4列から3列に減らしています。
  3. 選んだ日時は縦並び:日時と説明を横に並べると折り返しが増えるため、日時の下に説明を置いています。
  4. 選択肢と入力欄は全幅:相談の方法の選択肢も縦に並べて、1つずつ押しやすくしています。

採用前の判断ポイント

向いているケース

  • 決まった時間の枠で、相談や来店を受け付けている
  • 日時の調整のやりとりを減らしたい
  • 空き状況が日によって大きく変わる
  • 無料相談、見学、来店、オンライン面談の予約など

向かないケース

  • 担当者の予定を画面の空き状況に反映できない(実際には埋まっている時間が空きとして表示されてしまいます)
  • 日時をその都度相談して決めたい(希望の日時を書いてもらう1ページ完結型が向きます)
  • 日時のほかに聞く項目が多く、段に分けて入力してほしい(ステップ分割型の1段目に日時を置く形が向きます)

このワイヤーの特徴

空いている日と時間が、選ぶ前に分かる

日にちを1つずつ開いて空きを探すのは手間がかかります。日にちの一覧に空き状況の印を付け、空きのない日や休業日は最初から選べないようにしています。

埋まっている時間も並べたまま、選べないことを伝える

埋まった時間を一覧から消すと、時間の並びが日によって変わり、読み手は比べにくくなります。埋まった時間も同じ位置に残し、「空きなし」の文字を添えて選べない状態にしています。

選んだ日時と、このあとの扱いがひと目で分かる

日にちと時間を別々に選ぶと、最後に何を選んだのかを見失いがちです。選んだ日時を1か所にまとめて表示し、確定のメールが届くまでの流れも添えています。

希望に合う枠がなくても、行き止まりにならない

表示された枠に合う時間がないと、読み手はそこで予約をあきらめてしまいます。候補の日時を書いて問い合わせる道を、フォームの下に用意しています。

SPでは、日にちを横に送り、時間を大きく並べる

SPで7日分を1行に並べると、1つ1つが小さく押しにくくなります。日にちは横に送って選ぶ形にし、時間は3列にして押しやすい大きさにしています。

制作時のよくある失敗

空き状況を、印の色だけで伝える

空きの有無を色の違いだけで表すと、色の見分けにくい人や、白黒で印刷した資料では分かりません。
○・△・×のような印や「空きなし」の文字を添え、読み上げでも日付と空き状況が伝わるようにします。

申し込んだ時点で、ほかの人と同じ枠が重なる

画面を開いてから申し込むまでのあいだに、同じ枠がほかの人に取られることがあります。
ほぼ同時に申し込まれた場合は、両方が空いていると確認された直後に、同じ枠に2件の予約が入ってしまうこともあります。
申し込みを受けたときにサーバー側で空きをあらためて確かめ、空きの確認から予約の登録までを一連の処理として扱って、同じ枠が同時に確定しないようにします。
埋まっていた場合は、入力した内容を残したまま別の時間を選び直せるようにします。

予約が確定したのか、申し込んだだけなのか分からない

申し込んだ時点で予約が確定する作りと、担当者が確認してから確定する作りでは、読み手が次にすることが変わります。
どちらの扱いなのかを、申し込み前の画面と完了の画面、確認のメールで同じ言葉で伝えます。

時間の基準や所要時間が書かれていない

海外から見る人や、移動を伴う相談では、時間の基準や所要時間が分からないと予定を組めません。
表示している時間が日本時間であることと、1枠の長さを、時間の一覧の近くに書きます。

実際の予定と、画面の空き状況がずれる

担当者の予定表と予約の画面が別々に管理されていると、すでに埋まっている時間が空きとして表示されることがあります。
空き状況は実際の予定から作り、休みや準備の時間も反映される仕組みにします。

よくある質問

申し込みと同時に、予約を確定させたほうがよいですか?

運用によって決めます。
空いている枠がそのまま対応できる時間なら、申し込みと同時に確定させると読み手の手間が減ります。
担当者の割り当てや内容の確認が必要な場合は、確定のメールを送ってから確定する形にし、そのことを申し込み前から伝えておきます。

予約の受け付けは、外部の予約サービスを使うのと、フォームで作るのとどちらがよいですか?

空き状況を実際の予定と連動させたい場合や、変更・取り消しの手続きまで扱いたい場合は、予約サービスや予定表と連携できる仕組みを使うほうが手間が少なくなります。
件数が少なく、希望の日時を聞いたうえで個別に調整する運用なら、フォームで希望日時を受け取る形でも足ります。

空いている枠は、どれくらい先まで表示すればよいですか?

確実に対応できる範囲だけを表示します。
先の予定まで出しすぎると、あとから予定が変わったときに、確定した予約を動かしてもらうことになりかねません。
表示する範囲は、担当者の予定が決まっている期間に合わせます。

選べる枠がないときは、どうすればよいですか?

空きのない日だけが並ぶ状態で終わらせず、候補の日時を書いて問い合わせる方法や、次に枠が空く時期を案内します。
枠が足りない状態が続く場合は、予約の枠そのものの見直しも検討します。

同じパーツのPattern

フォームの型の選び方と一覧を見る

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開