CAL-001 公開  更新

月カレンダー型 営業日カレンダー

1か月分の日付を曜日の列に並べ、定休日や短縮営業の日を印と文字で示す設計です。
来店や予約の前に、行きたい日が営業しているかを読み手が自分で確かめられるようにします。

ワイヤーフレーム(PC)

月カレンダー型 営業日カレンダー PC版ワイヤーフレーム

ワイヤーフレーム(SP)

月カレンダー型 営業日カレンダー SP版ワイヤーフレーム

SP版の特徴

  1. 各枠を日付と1文字の印だけにする:7列の枠が狭く、文字を詰めると読めなくなるためです。
  2. 「今日」の文字を省くこともできる:枠が狭く文字が日付と重なる場合は省き、枠の太さと凡例で示します。読み上げでは、今日であることを文で伝えます。

採用前の判断ポイント

向いているケース

  • 来店や予約の前に、先の日付の営業日を確かめてもらいたい
  • 店舗・教室・クリニックなど、曜日や祝日で休みが決まっている
  • 来月の予定まで、前もって示しておきたい

向かないケース

このワイヤーの特徴

先の日付まで、営業日を自分で確かめられる

1か月分の日付を曜日の列に並べ、行きたい日が営業しているかを読み手が自分で確かめられるようにしています。
前の月・次の月のボタンで、翌月の予定も見られます。

休みを、色だけでなく文字の印で示す

定休日には「休」、短縮営業の日には「短」の文字の印を付け、印の意味をカレンダーの下にまとめています。
色だけで休みを示すと、色の見え方によっては区別できません。

今日の日付を、枠で示す

今日の日付は太い枠で囲み、「今日」の文字を添えています。
今日から数えて何日先かが、すぐに分かります。

表として組み、読み上げでも伝わるようにする

カレンダーは表(table)で組み、曜日を列の見出しにしています。
各日付には「10月12日 祝日・休業」のような読み上げ用の文を持たせ、印だけで伝わらないようにしています。

制作時のよくある失敗

休業日を、赤い日付の色だけで示す

日曜や祝日の日付を赤くするだけでは、休みなのか、ただの曜日の色分けなのかが分かりません。
休業日には「休」などの文字の印を付けます。

画像のカレンダーを、毎月貼り替える

カレンダーを画像で載せると、読み上げや拡大ができず、貼り替えを忘れると先月のまま残ります。
表で組み、休業日の設定から自動で作る形にします。

今月しか見られない

月末に翌月の予定を確かめたい読み手は多くいます。
少なくとも翌月まで表示できるようにします。

SPで、日付の枠が小さすぎる

7列の枠に印や文字を詰め込むと、SPでは読めなくなります。
SPでは印を1文字にし、詳しい説明は凡例に任せます。

よくある質問

営業日のカレンダーは、何か月先まで出せばよいですか?

予約や来店の予定が立てられる範囲が目安です。
来店や予約までの期間(リードタイム)に合わせて決めます。
直近の予約が中心なら、今月と翌月の2か月分が1つの目安です。

Googleカレンダーを埋め込んでもよいですか?

埋め込むと更新は楽になりますが、見た目や読み上げを自分で整えにくくなります。
休業日を管理する仕組みから、サイトの表として出す形のほうが扱いやすい場合があります。

Googleビジネスプロフィールの営業時間とも、そろえたほうがよいですか?

そろえておくと、検索の結果と地図の情報、サイトの情報が食い違わずに済みます。
臨時休業を決めたときは、両方を更新します。

同じパーツのPattern

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

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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