今日の営業状況型 営業日カレンダー

通称：営業中表示Open now / business hours status

見本の中のメニューやボタンは押して動きを試せます（リンク先へは移動しません）。

ページを開いたその時刻をもとに、いま開いているかどうか、閉まっているなら次に開くのはいつかを真っ先に示します。「いまから行けるか」「いま電話してつながるか」を知りたい人に、カレンダーを読ませずに答える形です。

自分のサイトの中身で、この形を作らせる指示文です。最初の「サイトの情報」を書き換えてから渡します。今あるページを直させるときは、その HTML を貼ります。

この形で作る 
# サイトの情報（ここを書き換える）
- どんなサイトか：〈例：工務店のサイト、税理士事務所のサイト、ネットショップ〉
- 入れたい文言・項目：〈見出し・ボタンの文言・項目の数など。決まっていなければ空けてよい〉
- 今あるページ：〈今のページを直すなら、その HTML を貼る。新しく作るなら空ける〉

# 部品の呼び名
一般に「営業中表示」（Open now / business hours status）と呼ばれる部品です。

# 作ってほしいもの
今日の営業状況型の営業日カレンダー（Open now status）。開いた時刻に合わせて「いま営業しているか」と「次はいつ営業するか」を最初に伝える。

# 並べるもの
- 左（SP では上）：今日の状況
  - 状況の札と今日の日付
  - ひとことの結論
  - 補足
  - 連絡の方法：営業中は「電話で問い合わせる」（tel: リンク）を主に、フォームを副に。営業時間外はフォームを主にし、電話は「営業時間内にお受けしています」と番号を文字で添える
- 右（SP では下）：曜日ごとの営業時間の表（月〜日の7行）。今日の行に印

# 守ってほしいこと
- 時刻の判定はお店の地域の時刻（Asia/Tokyo）で行う。Intl.DateTimeFormat の timeZone を使い、見ている人の端末の地域に左右されないようにする
- 営業時間は JavaScript の先頭に曜日ごとの設定としてまとめる（定休日は null）
- 終了の30分前からは「まもなく終了」にする
- 次の営業日は、定休日が続いても見つかるよう、最大14日先まで探す
- 状況の札は色だけでなく文字で示す。表は table 要素、曜日は th scope="row"
- 1分ごとに表示を更新する
- 表示を確かめやすいよう、判定に使う時刻を固定できる変数を1つ用意する（ふだんは null で、いまの時刻を使う）

# SP（画面幅 767px 以下）
- 今日の状況を上、曜日ごとの表を下に縦に並べる
- 連絡のボタンは横幅いっぱい、高さ 44px 以上にする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 色は CSS 変数（--accent など）にまとめ、あとから変えやすくする
- 文言は「サイトの情報」に合わせて考える。決まっていないところは〈 〉で囲んだ仮の文言にする
- 「並べるもの」に書いた項目の名前（エリア・間取りなど）は一例。サイトに合うものに置き換える
- 今あるページを渡したときは、そのページの色・文字・余白に合わせ、変えた場所を最後に箇条書きで知らせる

営業日カレンダーを6つの型に分け、AIへの指示文・動く見本・コードを載せています。

営業日カレンダーはどの型を選ぶか

営業日カレンダーを見に来る人が知りたいのは、たいてい「行きたい日に開いているか」です。型を選ぶときは、休みが曜日で決まっているか、臨時の休みや時間の変更がどれくらいあるか、見に来る人がいますぐ動くのか先の日を決めたいのか、の3つを考えます。1つの型で足りなければ、今日の営業状況型と月カレンダー型のように2つを並べてもかまいません。

こんなとき 向いている型
定休日が曜日で決まっていて、先の日付から来店日を選んでもらう月カレンダー型
思い立ってすぐ来店・電話する人が多い今日の営業状況型
祝日や行事で、週ごとに営業時間が変わりやすい週間表示型
点検・研修などで、定休日のほかにも休む日がある臨時休業表示型
年末年始や連休に、休業と短縮営業、受付の締め切りが重なる年末年始の特別日程型
時間の枠で予約を受けていて、空き具合まで見せたい予約枠つき型
トップページに場所を取らずに載せたい今日の営業状況型か週間表示型

どの型でも守ること

  1. 休みを色だけで示さない。灰色の面や模様に「定休」「臨休」「休業」の文字を重ねます。そうしておけば、色の区別がつきにくい人にも、モノクロで刷った紙でも、どこが休みかが伝わります。
  2. 画像ではなく文字と表で作る。カレンダーを画像にすると、SP で文字がつぶれ、読み上げにも検索にも伝わりません。月のカレンダーは table、曜日は th で組みます。
  3. 休みの日に理由を添える。祝日・改装・研修など理由がわかると、次はいつ開くのか、予約はどうなるのかを読み手が判断しやすくなります。
  4. 更新が止まらない作りにする。先月のカレンダーが残っていると、かえって信用を落とします。曜日のきまりから自動で作るか、誰がいつ更新するかを決めておきます。
  5. 今日の位置を示す。今日の日付のセルには aria-current="date" を付け、枠や色も変えて、ひと目で今日の位置が分かる見た目にします。

よくある質問 (FAQ)

更新の手間を減らしたいなら埋め込み、見やすさを優先するなら自分で作るのが向いています。埋め込みは予定を入れるだけで反映される一方、見た目をサイトに合わせにくく、SP では小さく表示されがちです。定休日が曜日で決まっているなら、ここに載せた月カレンダー型のように、きまりから自動で作る方法もあります。

色だけでは伝わらない人がいるので、「定休」「休業」の文字も入れます。赤と黒を見分けにくい人や、モノクロで刷った紙を見る人には、どの日が休みなのか伝わりません。日曜を赤くする習慣とも混ざりやすいので、面の色と文字を組み合わせて示します。

お店の地域の時刻に直してから判定します。海外にいる人や、地域の設定が違う端末では、そのままだと時刻がずれます。JavaScript なら Intl.DateTimeFormat に timeZone: 'Asia/Tokyo' を指定して、日本の時刻を取り出します。

今月と翌月の2か月が目安です。月末に見に来た人も、翌月の始めの営業を確かめられます。予約を何か月先まで受けているかに合わせて増やしますが、先の月ほど臨時の休みが決まっていないことが多いので、まだ決まっていない旨を書き添えます。