予約フォームのデザインで入力の手間を減らす、日時と人数の項目の並べ方

2026年7月18日

＠SOHO編集部

この記事のポイント

✓予約フォームのデザインを
✓日時と人数の項目の並べ方を中心に整理しました
✓確認メールとキャンセルの案内

教室の体験レッスン、サロンの来店予約、個別相談の申し込み。予約フォームは、予約する人がその場で日時を決めるための画面です。色や写真で雰囲気を出すことも大切ですが、予約する人が途中で手を止めるかどうかを左右するのは、日時と人数の項目がどれだけ迷わずに選べるかです。

この記事では、予約を受け付ける側の目線で、予約フォームに入れる項目の決め方、日時と人数の項目の並べ方、受付の期限や確認メールの整え方、スマートフォンでの見え方、予約システムとフォームの使い分けまでを順に説明します。届いた予約の希望を担当と状況つきで管理し、同じ画面から返信まで済ませたい場合の選択肢として、フォームの道具Halictにも触れます。

予約フォームが申し込みフォームと違うところ

予約フォームは申し込みフォームの一種ですが、日時が中心にある点が大きく違います。申し込みフォームでは「何に申し込むか」が決まっていることが多いのに対し、予約フォームでは「いつ来るか」を予約する人がその場で決めます。そのため、次の3つに気を配る必要があります。

空いている日時が分かること

予約する人は、自分の都合の良い日時が空いているかどうかを知りたいと考えています。空いているかどうかが分からないまま希望を書かせると、あとで「その日は埋まっています」と断りの連絡をすることになり、予約する人もこちらも手間が増えます。

選んだ日時が確定したかどうかが分かること

送信した時点で予約が確定するのか、こちらが確認してから確定するのかを、予約する人に分かる形で伝える必要があります。ここがあいまいだと、予約できたと思って来店したのに予約が取れていなかった、という行き違いが起きます。

変更やキャンセルの方法が分かること

予約は、予定が変わることを前提に受け付けるものです。変更やキャンセルをどこから、いつまでにすればよいかが分かっていないと、無断のキャンセルが増えます。

予約フォームのデザインは、この3つを入力の流れの中でどう伝えるかで決まります。

予約フォームに入れる項目を決める

項目は、予約を受けたあとに何をするかから逆算して決めます。予約のあとにすることは、たいてい「予約の確認を送る」「前日に念のための連絡を送る」「当日に準備をする」の3つです。

項目	予約のあとに使う場面	判断
希望の日時	予約の確定、当日の準備	必須
メニューやコース	所要時間と準備するもの	複数あるなら必須
人数	席や材料の準備	複数人の予約を受けるなら必須
氏名	当日の受付	必須
メールアドレス	確認と前日の連絡	必須
電話番号	当日の急な連絡	当日に連絡することがあるなら必須
初めてかどうか	当日の説明の準備	任意か、選択式で簡単に
要望・相談したいこと	当日の準備	任意

住所や生年月日は、予約に直接使わないことが多い項目です。会員登録や郵送が無いなら、予約フォームでは聞かないようにします。予約のあとに使わない項目は、予約する人の手間を増やすだけでなく、管理する個人情報も増やします。

メニューの見せ方：料金と所要時間を選択肢に添える

日時の前に選んでもらうメニューの項目は、予約する人が最も迷いやすい場所です。メニューの名前だけを並べても、初めての人には違いが分かりません。

選択肢には、名前に加えて、料金と所要時間を添えます。「カット（60分・4,400円）」「カットとカラー（120分・9,900円）」のように書くと、予約する人は自分の予定と予算に合うかをその場で判断できます。料金が税込か税抜かも、店の表示と同じ書き方でそろえます。

メニューが多い場合は、「初めての方向け」「2回目以降の方向け」のように大きく分けてから選ばせると、選択肢の数が減って迷いにくくなります。初めての人向けの体験メニューがあるなら、一覧のいちばん上に配置します。

メニューの説明が長くなる場合は、選択肢の下に1行の説明を添えるか、メニューの詳しい説明のページへのリンクを載せます。選択肢の文字が長すぎると、スマートフォンでは折り返して読みにくくなるためです。

日時の項目の並べ方

予約フォームの中心になるのが日時の項目です。日時の選ばせ方には、いくつかの形があります。

日付と時間は分けて選ばせる

「10月24日 14時」を1つの欄に自由に書かせると、「24日の午後」「10/24 2時」のように書き方がばらばらになり、確認の手間が増えます。日付と時間は別の項目にし、それぞれ選択式にします。

日付はカレンダーか一覧で

日付の選ばせ方は、受け付ける期間で変わります。受け付けるのが2週間ほど先までで、営業日が決まっているなら、選べる日付を一覧で並べる形が分かりやすくなります。1か月以上先まで受け付けるなら、カレンダーの形で選ばせるほうが、曜日と日付の関係がつかみやすくなります。定休日や受け付けない日は、最初から選べないようにしておくと、断りの連絡が要らなくなります。

時間は「枠」で見せる

時間は「10:00」「11:00」「13:00」のように、受け付ける枠を並べて選ばせます。自由に時刻を入力させると、営業時間外や中途半端な時刻の予約が入ります。所要時間が60分のメニューなら60分おきの枠、30分なら30分おきの枠にするなど、メニューの所要時間と枠の長さをそろえます。

日時はメニューの後に聞く

メニューによって所要時間や受け付ける曜日が変わる場合は、先にメニューを選んでもらい、そのあとで日時を選んでもらいます。日時を先に選ばせると、選んだ日時ではそのメニューが受けられない、ということが起きます。

空き状況を連動させられないなら、第2希望まで聞く

空いている日時がフォームに自動で反映されない作りの場合は、第1希望だけでなく第2希望、第3希望まで聞いておきます。第1希望が埋まっていても、第2希望で確定できれば、日程の調整のやり取りが1往復で済みます。第2希望以降は任意にしておけば、どの日でもよい人の手間は増えません。

人数の項目の分け方

人数の項目は、何のために人数を聞くのかで分け方が変わります。

料金や準備が変わるなら、区分ごとに聞く

大人と子どもで料金が違う、子どもには別の材料が要る、という場合は、「大人」「子ども」のように区分ごとに人数を聞きます。合計の人数だけを聞くと、あとで内訳を確かめる連絡が必要になります。区分の名前には「子ども（小学生以下）」のように対象をはっきり書き、迷わないようにします。

選べる人数の上限を決める

人数は、自由に数字を入れる欄より、「1名」「2名」「3名」のように選ばせる形にすると、入力の間違いが減ります。1回の予約で受け付けられる人数の上限を決めておき、それ以上の人数は「5名以上の場合はお問い合わせください」と案内します。

1人の予約しか受けないなら、人数は聞かない

個別相談や1対1のレッスンのように、1人の予約しか受けないなら、人数の項目は要りません。項目を1つ減らすだけでも、予約する人の手間は減ります。

予約フォームの項目の並び順の例

ここまでの考え方を、体験レッスンの予約フォームに当てはめると、次の順番になります。

順番	項目	必須か	形式
1	受けたいメニュー	必須	ラジオボタン
2	第1希望の日付	必須	選べる日付の一覧
3	第1希望の時間	必須	時間の枠の一覧
4	第2希望の日付と時間	任意	同上
5	人数	必須	選択式
6	氏名	必須	テキスト
7	メールアドレス	必須	メールアドレス
8	電話番号	必須	電話番号
9	初めてかどうか	任意	ラジオボタン
10	相談したいこと	任意	複数行のテキスト
11	キャンセル規定と個人情報の取り扱いへの同意	必須	チェックボックス

「何を」「いつ」「何人で」を先に決めてもらい、「誰が」「どこに連絡するか」を後にする、という流れです。予約する人は、自分が予約したい内容を先に固めたうえで、連絡先を入力することになります。

予約する人が迷う場面と、その手当て

予約フォームで手が止まる場面は、だいたい決まっています。それぞれに、フォームの中でできる手当てがあります。

自分に合うメニューが分からない

初めての人は、どのメニューを選べばよいか分からずに迷います。メニューの選択肢の上に「初めての方は体験コースをお選びください」のような一言を添えるだけで、迷いが減ります。それでも決められない人のために、「相談して決めたい」という選択肢を用意しておく方法もあります。

希望の日時が空いているか分からない

空き状況が見えないフォームでは、予約する人は「この日時で送っても断られるかもしれない」と考えて、送信をためらいます。フォームの近くに「平日の午前は比較的空いています」のような目安を書いておくと、希望を出しやすくなります。

同行者の分も予約してよいか分からない

家族や友人と一緒に予約したい人は、1人ずつ予約するのか、まとめて予約できるのかで迷います。人数の項目の近くに「ご家族やお友だちの分もまとめてご予約いただけます。お名前は代表の方のみで構いません」のように書いておきます。

送ったあとに内容を直したくなった

日時を間違えて送ってしまったとき、どうすればよいかが分からないと、同じ内容で2回送ってくる人が出ます。確認メールに「内容を変更する場合は、このメールにご返信ください」のように、直し方を書いておきます。

予約の変更を受け付ける方法

予約は、いったん確定したあとに変更の相談が来るものです。変更の受け付け方も、予約フォームを作る段階で決めておきます。

変更の窓口を1つに決める

変更をメールで受けるのか、電話で受けるのか、予約フォームから送り直してもらうのかを決め、確認メールと完了画面に同じ内容で書きます。窓口が複数あると、どこに連絡が来たかを探す手間が増え、変更の見落としが起きます。

変更の期限を書く

「変更は前日の18時まで」のように、変更の期限を書きます。期限を過ぎた変更をどう扱うか（キャンセル扱いにするのか、相談に応じるのか）も決めておき、キャンセルの規定と一緒に書きます。

変更のたびに、確定の連絡を送り直す

変更を受けたら、変更後の日時を書いた確定の連絡を改めて送ります。変更前の確認メールが手元に残っていると、予約した人が古い日時で来てしまうことがあるためです。件名に「【変更】」のように書いておくと、どれが最新の連絡かが分かります。

予約の受付期限と、確定の伝え方

日時の項目と同じくらい大切なのが、予約をいつまで受け付けるか、予約がいつ確定するかの伝え方です。

受付の期限を書く

「前日の18時まで受け付けます」のように、受付の期限をフォームの冒頭か日時の項目の近くに書きます。当日の予約を受けない場合は、当日の日付を選べないようにしておきます。準備に時間がかかるメニューは、メニューごとに期限を書き分けます。

送信の時点で確定か、確認後に確定かを書く

空き状況が連動していないフォームでは、送信の時点では予約は確定していません。この場合は、送信ボタンの近くと完了画面に「お送りいただいた時点では予約は確定していません。空き状況を確認のうえ、24時間以内に確定のご連絡をします」のように書きます。何時間以内に連絡するかを書いておくと、予約する人が待つ間に不安になりません。

確定の連絡を決まった形で送る

確定の連絡には、確定した日時、メニュー、人数、場所、持ち物、変更やキャンセルの方法を書きます。毎回同じ形で送れるよう、文面のひな形を作っておきます。ひな形には、日時やメニューを差し込む場所を決めておき、送る前に差し込んだ内容が予約の希望と合っているかを必ず見直します。日時の写し間違いは、確定の連絡で最も起きやすい誤りです。

確認メールとキャンセルの案内

予約フォームの送信のあとには、多くの場合、自動で確認メールが送られます。この確認メールも、予約フォームのデザインの一部です。

確認メールに書くこと

予約を受け付けたこと（確定前なら「受け付けた」、確定後なら「確定した」と書き分ける）
予約の内容（メニュー、日時、人数）
場所と行き方、オンラインなら参加の方法
持ち物や当日の注意
変更とキャンセルの方法と期限
問い合わせ先

件名は「【ご予約受付】10月24日（土）14:00 体験レッスン」のように、日時と内容が件名だけで分かる形にします。予約した人が当日にメールを探すとき、件名で見つけられるからです。

キャンセルの規定は、予約の前に見せる

キャンセル料がかかる場合は、予約フォームの中で、送信の前に見える場所に書きます。予約のあとに確認メールで初めてキャンセル料を知ると、トラブルの元になります。同意のチェックボックスを付ける場合も、規定の本文をその場で読めるようにしておきます。

前日の連絡で無断のキャンセルを減らす

予約の前日に「明日のご予約の確認です」という連絡を送ると、予約を忘れていた人が来られなくなったことを事前に知らせてくれるようになり、当日の無断のキャンセルが減ります。前日の連絡を送る運用にするなら、予約フォームで連絡先を確実に聞いておきます。

見た目の整え方

項目と流れが整ったら、見た目を整えます。予約フォームの見た目を設定できる道具も多く、予約システムの中には、色や背景を店の雰囲気に合わせて変えられるものがあります。

SELECTTYPEの予約システムで作成する予約フォームには、さまざまなデザインを設定することが出来ます。出典: blog.select-type.com

見た目を整えるときに気をつけたいのは、雰囲気を出すことと、選びやすさを損なわないことの両立です。

選べる日時と選べない日時の差をはっきりさせる

空いている枠と埋まっている枠が、色の薄さの違いだけで区別されていると、見分けにくい人がいます。埋まっている枠には「満席」の文字を付けるなど、色だけに頼らない示し方にします。デジタル庁のウェブアクセシビリティ導入ガイドブックでも、色だけで情報を伝えないことなど、誰にとっても使いやすい画面を作るための考え方が整理されています。

背景の写真は控えめに

店の雰囲気を伝える写真を背景に敷くと、文字が読みにくくなることがあります。写真はフォームの上部に1枚配置し、入力欄の背景は白か薄い色にしておくと、雰囲気と読みやすさを両立できます。

ボタンの文字

送信ボタンの文字は「送信」より「予約を申し込む」のように、押すと何が起きるかが分かる言葉にします。確定前の受付であれば「予約を確定する」とは書かず、「予約を申し込む」としておくと、確定の行き違いを防げます。

業種ごとに気をつけること

予約フォームの基本の形は同じでも、業種によって気をつける点が変わります。

美容室・サロン

担当者を指名できるかどうかで、項目が1つ増えます。指名を受けるなら、担当者を選ぶ項目を日時の前に配置し、「指名なし」の選択肢も用意します。担当者ごとに空いている日時が違うため、空き状況と連動しないフォームでは、第2希望まで聞いておくことがとくに大切です。

教室・レッスン

体験レッスンの予約が中心なら、初めての人が持っている不安（持ち物、服装、レベル）に、フォームの近くで答えておきます。子ども向けの教室では、子どもの学年や年齢を聞く項目が要ることがあります。保護者が予約するので、連絡先は保護者のものを聞きます。

個別相談・カウンセリング

相談の内容によって所要時間が変わることがあります。相談したい内容を選択式で聞き、自由記述は任意にします。相談の内容は人に知られたくない情報を含むことがあるため、何に使うか、誰が見るかを書いておくと、予約する人が安心して書けます。オンラインの相談なら、使う道具（ビデオ通話の種類）を予約の時点で伝えておきます。

飲食店

人数と時間に加えて、席の種類やアレルギーの有無を聞くことがあります。アレルギーのように当日の準備に関わる情報は、任意の自由記述にしつつ、「事前にお知らせください」と書き添えます。大人数の予約や貸し切りは、フォームで受けずに電話や問い合わせに案内する形にしておくと、調整の行き違いが減ります。

スマートフォンでの見え方を確かめる

予約は、移動中や休憩中にスマートフォンから入れる人が多いものです。公開の前に、スマートフォンで最初から送信まで試し、次の点を確かめます。

日付の一覧やカレンダーが、指で押しやすい大きさか
時間の枠が画面の幅に収まり、横にはみ出していないか
電話番号の欄で数字のキーボードが出るか
メールアドレスの欄でメールアドレス入力向けのキーボードが出るか
送信ボタンまでのスクロールが長すぎないか
完了画面に、次に何が起きるかが書かれているか

時間の枠が多いと、スマートフォンでは縦に長くなりがちです。午前と午後で枠を分ける、メニューを選んだあとにそのメニューで選べる枠だけを見せる、といった工夫で、画面の長さを抑えられます。

予約フォームでよくある失敗

予約フォームを見直すときの点検に使えるよう、よく見かける失敗を整理しておきます。

定休日や受け付けない日を選べてしまう

定休日やすでに埋まっている日を選べる形のままだと、届いた予約にいちいち断りの連絡をすることになります。受け付けない日は、最初から選べないようにするのが基本です。道具の都合で選べないようにできない場合は、日付の項目のすぐ近くに定休日を書いておきます。

時間を自由入力にしている

時刻を自由に入力させると、「午後」「夕方ごろ」のような答えが届き、確定の連絡の前に聞き直す手間が生まれます。時間は枠を選ばせる形にします。

送信したあとに何が起きるかが分からない

完了画面が「送信しました」だけだと、予約する人は予約が確定したのか分かりません。確定の方法、確認メールが届くこと、届かない場合の連絡先を完了画面に書きます。

確認メールが迷惑メールのフォルダに入る

自動の確認メールが迷惑メールとして振り分けられ、予約した人の目に届かないことがあります。完了画面に「確認メールが届かない場合は迷惑メールのフォルダもご確認ください」と書き、送信元のメールアドレスには店や教室の名前が分かるものを使います。

予約のフォームが古いまま

営業時間や料金を変えたのに、予約フォームの選択肢が古いまま、ということがよくあります。営業時間や料金を変えるときは、告知のページと予約フォームの両方を直す、と手順に書いておきます。月に1回ほど、自分で予約を最後まで試して、確認メールまで届くかを確かめます。

予約の受付を始める前の確認リスト

予約フォームを公開する前に、次の点を確かめます。

メニューの選択肢に、料金と所要時間が書いてある
受け付けない日や時間は、選べないようになっているか、近くに書いてある
受付の期限（前日の何時までなど）が書いてある
送信の時点で確定か、確認後に確定かが、送信ボタンの近くと完了画面に書いてある
キャンセルの規定が、送信の前に読める場所にある
スマートフォンで最初から送信まで試し、確認メールが届いた
個人情報の利用目的が書いてある
届いた予約を、誰が、いつまでに確認して確定の連絡をするかが決まっている

8つ目が決まっていないと、フォームがよくできていても、予約する人には返事が来ないままになります。予約を受け付ける時間帯と、確認する担当を決めてから公開します。

届いた予約から、フォームを見直す

予約フォームは、公開したあとに届いた予約を見ながら直していくものです。月に1回ほど、届いた予約をふり返り、次の点を見ます。

第2希望がほとんど使われていない、または第1希望でほとんど確定している：第2希望の項目を外して、フォームを短くできる
特定の時間帯に予約が集中している：その時間帯の枠を増やすか、空いている時間帯の案内を書き添える
「相談したいこと」の欄に同じ質問がよく書かれている：その質問への答えをフォームの近くに書いておく
確定の連絡の前に聞き直すことが多い項目がある：その項目の書き方か選ばせ方を変える
無断のキャンセルが多い：前日の連絡を送る、キャンセルの規定を送信の前に見える場所へ移す

聞き直しや断りの連絡が減っていけば、フォームが予約する人と受け付ける人の両方にとって使いやすくなっている合図です。直した点と日付を記録しておくと、次に見直すときの手がかりになります。

予約システムとフォームの使い分け

予約を受け付ける方法には、大きく分けて、空き状況と連動する予約システムを使う方法と、フォームで希望を受け付けてこちらが確定させる方法があります。

方法	向いている場面	気をつけること
予約システム	予約が多い、枠が細かい、その場で確定させたい	月額の費用がかかることがある。設定の手間がかかる
フォームで希望を受け付ける	予約が少ない、日程の相談が要る、メニューごとに調整が要る	確定までに時間がかかる。二重予約を自分で防ぐ

予約が1日に何件も入り、枠が埋まるのが早い場合は、空き状況と連動する予約システムが向いています。予約する人がその場で空きを見て確定できるため、こちらの確認の手間も減ります。

一方、予約が週に数件ほどで、日程の相談をしながら決めたい場合や、内容によって所要時間が変わる相談の予約などは、フォームで希望を受け付け、こちらから確定の連絡をする形でも十分に回ります。この場合は、確定前であることを予約する人にはっきり伝えることと、届いた希望を取りこぼさず管理することが大切です。

届いた予約の希望を取りこぼさない管理のしかた

フォームで予約の希望を受け付ける場合、届いたあとの管理が予約の質を決めます。届いた希望に気づくのが遅れれば、予約する人は別の店や教室を探してしまいます。

少ないうちは、表計算とメールで回せる

予約の希望が週に数件で、対応する人が1人なら、フォームの回答を表計算に書き出し、「確定済み」「前日連絡済み」のような列を自分で足して管理する方法で十分です。確定の連絡は、ひな形を使ってメールソフトから送ります。

担当と状況の管理が苦しくなったら

予約が増え、複数人で対応するようになると、誰がどの予約に確定の連絡をしたのかが分からなくなり、連絡の漏れや二重の連絡が起きます。

こうした場面の選択肢の1つが、Halictです。公式サイトによると、Halict はフォームを作って届いた回答を管理するための道具で、届いた1件ごとに担当者とステージ（対応の段階）が残り、同じ画面から返信まで送れます。日付やメール、電話などを含む12種類の項目でフォームを作れ、色とフォントも変えられます。フォーム送信の直後には、回答内容の控えを添えた自動返信を送れ、よく使う文面はひな形として保存して使い回せます（メールのひな形はチームプラン以上）。表とボードの表示を切り替えて、ステージごとに予約の希望を並べられるので、「確定待ち」「確定済み」「前日連絡済み」のような段階で予約の状況を見渡せます。なお、Halict は空き状況と連動して予約を自動で確定させる予約システムではないため、その場で確定させたい場合は予約システムを選びます。料金は、メンバー1人までのフリープランが無料で、フォームの数と回答の数はどのプランでも無制限とされています。Halict は、@SOHOを運営する株式会社ライフスケープが開発・提供しています。

個人情報の取り扱いを書いておく

予約フォームでは、氏名、メールアドレス、電話番号などの個人情報を集めます。個人情報保護法では、本人から書面（電磁的記録を含む）で直接個人情報を取得する場合、あらかじめ利用目的を明示するよう定めています（条文はe-Govの個人情報保護法の第21条）。Web の予約フォームもこれにあたるため、フォームの中か近くに「ご入力いただいた情報は、ご予約の確認、前日のご連絡、当日のご案内のために利用します」のように利用目的を書いておきます。扱う情報や事業の内容によって必要な対応が変わるため、迷う場合は専門家に相談します。

予約フォームを作る仕事と、在宅で受ける人の視点

最後に、予約フォームを作ることが在宅の仕事になる場面を見ておきます。

個人の教室やサロン、相談業の事業者の中には、予約の受け付けを電話や SNS のメッセージで受けていて、フォームを作りたいが手が回らない、という人が多くいます。予約フォームを作る仕事では、見た目を整える技術だけでなく、「予約のあとに何をしているか」「どの日時を受け付けたいか」「キャンセルをどう扱いたいか」を依頼した人から聞き出す力が求められます。この記事で整理した項目の表や並び順の例は、そのまま打ち合わせの資料として使えます。

2004年から在宅ワークとフリーランスの仲介を続けてきた運営者として見てきた限りでは、長く依頼が続く人ほど、作ったフォームの見た目より、依頼した人の予約の受け付けがどれだけ楽になったかを大事にしています。公開後に「無断のキャンセルは減りましたか」「確定の連絡に時間がかかっていませんか」と一言聞き、前日の連絡やひな形の文面まで提案できる人は、次の依頼にもつながりやすい傾向があります。中間の手数料が乗らない直接のやり取りでは、こうした相談を依頼した人と直接重ねられるため、同じ予算で依頼する側はより多く頼め、受ける側は手取りが厚くなります。

予約フォームを含む画面の設計に関わる仕事は、UI/UX・アプリデザインのお仕事にまとまっています。教室やレッスンを自分で開いて予約を受ける側に立つなら、デザイン・動画・音楽レッスンのお仕事も参考になります。デザインの仕事の報酬の目安は、デザイナーの年収・単価相場で確かめられます。予約フォームのデザインは、小さな画面の中で、予約する人と受け付ける人の両方の手間を減らす仕事です。