TBL-005 公開  更新

時間割型 テーブル

曜日と時間帯を掛け合わせて、受け付けている時間と休みを示す表の設計です。
診療時間・営業時間・教室の開講時間などに使います。
記号の意味を表の上に示し、休みや受付の締め切りなどの例外は、表の下に文字でもまとめます。

ワイヤーフレーム(PC)

時間割型 テーブル PC版ワイヤーフレーム

ワイヤーフレーム(SP)

時間割型 テーブル SP版ワイヤーフレーム

SP版の特徴

  1. 表のまま収める:曜日の見出しを短くすれば7列でも収まるため、カードに組み替えず、曜日を横に見比べられる形を残しています。
  2. 時刻を小さく併記する:時間帯の列を細くしても、何時から何時までかが分かるようにしています。
  3. 例外を縦に並べる:横に並べると折り返して読みにくいため、1行ずつにしています。

採用前の判断ポイント

向いているケース

  • 曜日や時間帯によって、受け付けの有無が変わる
  • クリニック・歯科・整体・教室・店舗など、来院や来店の前に時間を確かめられる
  • 時間帯を2〜3つに分けて書ける

向かないケース

このワイヤーの特徴

曜日と時間帯で、行ける時間がひと目で分かる

「月〜土 9:00〜18:30(水曜午後休診)」のような文章だけでは、読み手が自分の行ける日を考える必要があります。曜日を横、時間帯を縦に並べ、行ける時間をマスで見つけられるようにしています。

時間帯の見出しに、時刻を書く

「午前」「午後」だけでは、何時から何時までかが分かりません。時間帯の行の見出しに、時刻を小さく併記しています。

休みを、記号・文字・背景で区別する

休みを「/」や空欄だけで示すと、見落としたり、未記入と区別できなかったりします。休みは「休」と書き、背景を薄く塗って、ほかのマスと区別しています。

例外を、表の下に文字でまとめる

祝日や受付の締め切りは、表のマスだけでは表しきれません。休診日と受付の締め切りを表の下にまとめ、表を読んだあとに確かめられるようにしています。

SPでも、表のまま見比べられる

カードに組み替えると、曜日どうしを見比べにくくなります。曜日の見出しを短くして、SPでも表のまま横に見比べられるようにしています。

制作時のよくある失敗

記号の意味が、表の下の小さな注記にしかない

●や▲の意味が表の下にあると、読み手は表を読んでから意味を探すことになります。
記号の意味は表の上に置きます。

祝日の扱いが書かれていない

祝日が休みかどうかは、来院や来店の前によく確かめられる情報です。
祝日の扱いを、表か表の下に書きます。

受付の締め切りが書かれていない

診療や営業の終わりの時刻だけでは、何時までに行けばよいかが分かりません。
受付の締め切りを書きます。

表を画像で載せる

画像の表は、文字の拡大や読み上げ、検索ができず、時間を変えるたびに作り直しが必要になります。
HTMLの表で組みます。

臨時の休みを、表に書き込む

臨時の休みを通常の表に書き込むと、期間が過ぎたあとも残り、通常の時間と取り違えられます。
臨時の変更は、お知らせや臨時休業表示型 営業日カレンダーなど、別の場所で伝えます。

よくある質問

祝日のある週は、どう書けばよいですか?

祝日の扱いを「日祝」の列や表の下の注記で決めておき、その週だけの変更は、お知らせで伝える方法があります。
通常の表は、いつ見ても正しい内容にしておきます。

臨時の休みは、表に書き込んでもよいですか?

臨時の休みは期間が過ぎると不要になるため、通常の表とは分けて、お知らせなどで伝えるほうが取り違えにくいと考えられます。
日付ごとに示したい場合は、臨時休業表示型の営業日カレンダーが向きます。

Googleビジネスプロフィールの営業時間と、そろえる必要はありますか?

ホームページとGoogleビジネスプロフィールで時間が違うと、読み手がどちらを信じればよいか迷います。
変更したときは、両方を同じ内容にそろえます。

同じパーツのPattern

テーブルの型の選び方と一覧を見る

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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