CAL-002 公開  更新

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

今日営業しているか、営業時間外なら次はいつ営業するかを、ひと目で分かる形で最初に伝える設計です。
状況に合わせて、電話やメールなど、今すぐ取れる連絡の方法も切り替えます。

ワイヤーフレーム(PC)

今日の営業状況型 営業日カレンダー PC版ワイヤーフレーム

ワイヤーフレーム(SP)

今日の営業状況型 営業日カレンダー SP版ワイヤーフレーム

SP版の特徴

  1. 枠の中を縦に並べる:横に並べると一文が細かく折り返し、状況が読み取りにくくなるためです。
  2. 連絡のボタンを横幅いっぱいにする:SPでは、そのまま電話やメールに進むことが多いためです。

採用前の判断ポイント

向いているケース

  • 「今日やっているか」を確かめに来る読み手が多い
  • 店舗・飲食店・クリニックなど、当日の来店や電話が多い
  • 営業時間外や休業日に、次の営業日を案内したい

向かないケース

このワイヤーの特徴

今日の状況を、ひと言で伝える

「営業中」「営業時間外」「休業日」のラベルと、「本日10月15日(木)は営業しています」の一文で、今日の状況を最初に伝えています。

営業していないときは、次の営業を書く

営業時間外や休業日には、「次の営業:10月16日(金)10:00から」と次に営業する日時を書いています。
休みだと分かっただけでは、読み手は次の行動を決められません。

状況に合わせて、連絡の方法を切り替える

営業中は「電話で相談する」、営業していないときは「メールで相談する」と、今すぐ取れる連絡の方法をボタンにしています。
つながらない電話をかけさせずに済みます。

今週の予定も、下に小さく添える

今日の状況の下に今週7日分の営業時間を並べ、今日の枠を太くしています。
明日以降の予定も、ページを移らずに確かめられます。

制作時のよくある失敗

サイトを開いた時刻ではなく、作った時点の表示のまま

「営業中」の表示が、実際の時刻や休業日と連動していないと、夜中にも「営業中」と表示されます。
表示は時刻と休業日の設定から決め、キャッシュで古い表示が残らないように確かめます。

タイムゾーンを考えずに、状況を判定する

読み手の端末の時刻で判定すると、海外からの読み手や時刻がずれた端末では、状況を取り違えます。
店舗の所在地の時刻で判定します。

休業日に、電話のボタンだけを出す

休業日に電話のボタンだけがあると、読み手はつながらない電話をかけることになります。
休業日や時間外は、メールなど受け付けられる方法を出します。

営業状況を、色の丸だけで示す

緑の丸と赤の丸だけでは、色の見え方によっては区別できません。
「営業中」などの文字で示します。

よくある質問

営業中かどうかの判定は、どう作ればよいですか?

営業時間と休業日の設定を持っておき、店舗の所在地の時刻と比べて判定する方法があります。
サーバーで判定する場合は、ページのキャッシュで古い表示が残らないように注意します。

受付の終了時刻と、営業の終了時刻が違う場合は、どう書けばよいですか?

「10:00〜18:00(お電話の受付は17:30まで)」のように、両方を書きます。
受付の終了が近いときは、そのことを伝える表示にする方法もあります。

ヘッダーに、営業状況を出してもよいですか?

当日の来店や電話が多いサイトでは、ヘッダーに短く「本日営業 10:00〜18:00」と出すと、どのページからも確かめられます。
詳しい案内は、このワイヤーのような枠で伝えます。

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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