CAL-003 公開  更新

週間表示型 営業日カレンダー

日付ごとの営業時間を1週間分並べ、祝日や臨時休業の日もその日の欄に書く設計です。
曜日や日によって営業時間が変わる場合に、行きたい日の営業時間まで確かめられるようにします。

ワイヤーフレーム(PC)

週間表示型 営業日カレンダー PC版ワイヤーフレーム

ワイヤーフレーム(SP)

週間表示型 営業日カレンダー SP版ワイヤーフレーム

SP版の特徴

  1. 1日を1行にする:7列に並べると、営業時間が細かく折り返して読めないためです。
  2. 週送りのボタンを見出しの下に置く:同じ行に並べると、ボタンの文字が折り返すためです。

採用前の判断ポイント

向いているケース

  • 日によって営業時間が違い、時間まで確かめてもらいたい
  • 土曜は短縮営業、祝日は休業など、曜日と日付の両方で営業が変わる
  • 1週間先くらいまでの予定を見てもらえば足りる

向かないケース

このワイヤーの特徴

日付ごとの営業時間まで、確かめられる

1週間分の日付を並べ、各日の営業時間をその日の欄に書いています。
曜日の決まりだけでは分からない、祝日や臨時休業の日の営業も確かめられます。

休みの日は、休業と明記する

休みの日は「休業」と明記し、背景の色も変えています。
この例では、必要に応じて「(祝日)」「(定休日)」のように理由も添えています。
臨時休業の日は点線の枠で、ほかの休みと区別しています。

週を送って、先の予定も見られる

「前の週」「次の週」のボタンで週を送り、表示中の期間を見出しに書いています。
切り替えたときは、読み上げでも期間を知らせています。

SPでは、1日を1行にする

SPでは7列に並べると読めないため、1日を1行にして、左に日付、右に営業時間を置いています。
週送りのボタンは、期間の見出しの下に並べています。

制作時のよくある失敗

曜日の決まりしか書いていない

「月〜金 10:00〜18:00」だけでは、祝日や臨時休業の日が分かりません。
日付ごとの表示にするか、休業日の一覧を添えます。

休みの日を、空欄にする

休みの日の欄が空いていると、書き忘れなのか休みなのかが分かりません。
「休業」と書きます。

週の始まりが、ほかのカレンダーと違う

月カレンダーは日曜始まり、週の表示は月曜始まり、と混ざると読み手が迷います。
サイトの中でそろえるか、日付も書いて取り違えを防ぎます。

SPで週送りのボタンの文字が折り返す

ボタンを期間の見出しと同じ行に並べると、SPでは文字が折り返して押しにくくなります。
見出しの下にボタンを並べます。

よくある質問

週の表示と、月のカレンダーは、両方あったほうがよいですか?

当日や直近の来店が多いなら週の表示、先の予約が多いなら月のカレンダーが向きます。
両方を載せる場合は、週の表示を先に、月のカレンダーを後に置く方法があります。

何週先まで送れるようにすればよいですか?

予約を受け付ける期間が目安です。
休業日の設定が決まっている範囲までにとどめ、決まっていない先の週は表示しないようにします。

営業時間の表記は、「10時〜18時」と「10:00〜18:00」のどちらがよいですか?

どちらでも伝わりますが、サイトの中でそろえることが大切です。
数字の幅がそろう書き方にすると、縦に並べたときに比べやすくなります。

同じパーツのPattern

営業日カレンダーの型の選び方と一覧を見る

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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