お知らせの型の選び方
お知らせの型は、「どう並べるか」「どう探してもらうか」「何を優先して見せるか」の3つで変わります。問い1で並べ方を選び、問い2で探し方を加え、問い3で重要な情報の扱いを決めます。型を選んだら、各Patternのページでワイヤーフレームとプロンプト、動くデモを確認できます。
問い1：お知らせを、どう並べますか？
置く場所と、画像を用意できるかで決まる問いです。多くの場合、ここで基本の型が決まります。
| 状況 | 向く型 |
|---|---|
| トップページの一角に、最新の数件を文字だけで置く（基本） | 日付リスト型 |
| 画像と抜粋で、開く前に内容の見当をつけてもらう | サムネイル付きリスト型 |
| 写真のある話題を、見た目で目に留めてもらう | カード型 |
問い2：読み手に、どう探してもらいますか？
お知らせが増えてきたときに加える型です。問い1の並べ方と組み合わせて使います。
| 探し方 | 向く型 |
|---|---|
| 種類（お知らせ・プレスリリース・イベントなど）で、関係のある話題だけを見たい | カテゴリ切り替え型 |
| 何年分も積み重なったお知らせから、目当ての年をたどりたい | 年別アーカイブ型 |
| 件数が少なく、新しい順に並べるだけで足りる | 探す仕組みは加えない（日付リスト型） |
問い3：期限まで確実に届けたい情報がありますか？
臨時休業や障害など、新しいお知らせに押されて埋もれては困る情報の扱いです。固定するかは「重要そうか」ではなく、読み手への影響の大きさと期限で決めます。
| 情報の性質 | 向く見せ方 |
|---|---|
| 期限のある重要なお知らせを、お知らせの欄の中で先頭に残したい | 重要なお知らせ固定型 |
| サイト全体に関わる緊急の情報で、どのページでも見てもらいたい | ページの上部で知らせる（告知型 ファーストビュー） |
| 期限がなく、ずっと先頭に置くことになる | 固定しない。恒常的に見せる必要がある情報は、よくある質問・ヘルプ・専用の案内ページなど恒久的なページへ移す |
お知らせの型の比較
| 型 | 役割 | 置く場所 | 向く状況 |
|---|---|---|---|
| 日付リスト型 | 並べ方 | トップページ、会社のページ | 文字だけで内容が伝わるお知らせを、少ない面積で見せたい |
| サムネイル付きリスト型 | 並べ方 | お知らせの一覧ページ | 画像と抜粋で、開く前に内容を伝えたい |
| カード型 | 並べ方 | トップページ | 写真のある話題を、見た目で目に留めてもらいたい |
| カテゴリ切り替え型 | 探しやすさ | お知らせの一覧ページ | 種類が3〜5つあり、読み手ごとに見たい話題が違う |
| 重要なお知らせ固定型 | 優先の付け方 | トップページ、お知らせの一覧ページ | 臨時休業など、期限まで確実に伝えたい情報がある |
| 年別アーカイブ型 | 探しやすさ | お知らせの一覧ページ | 何年分も積み重なり、過去の発表を探しに来る読み手がいる |
すべての型に共通する設計の原則
お知らせの型を作る中で、型が違っても繰り返し出てきた原則です。どの型を選んでも、次の点は同じように確かめます。
- 日付の書き方をサイト全体で1つにそろえ、HTMLでは time 要素と datetime 属性で示す
- 題名だけで要点が伝わる書き方にする。「お知らせ」「ご案内」だけの題名にしない
- 「新着」の印は、手作業ではなく公開からの日数で自動的に外す
- 1件全体を1つのリンクにする。同じ行き先のリンクを1件の中に重ねない
- 画像は内容の理解に役立つ場合に付ける。カードなど見た目を優先する型でも、日付と種類は見える位置に置く
- 種類や重要さは、色だけでなく文字のラベルでも示す
- 絞り込みや年の切り替えは、選んでいる状態を aria-pressed・aria-current と文字で示す。ページを移るならリンク、ページ内で切り替えるならボタンで組む
- お知らせの欄を置く前に、誰がどのくらいの頻度で更新するかを決める。更新が止まった欄は、サイト全体が放置されている印象を与える
- 内容は実際のお知らせに合わせる。決まっていない場合は「表示例」と明記する
組み合わせの例
- 会社のサイトのトップページ：日付リスト型で最新の5件前後を置き、臨時休業のときだけ重要なお知らせ固定型で先頭に残す
- お知らせの一覧ページ：サムネイル付きリスト型で内容を伝え、種類が多ければカテゴリ切り替え型を加える
- プレスリリースを長く出してきた会社：年別アーカイブ型で年ごとにページを分け、各年の中は日付リスト型で並べる
- 催しや新商品の話題が多い店舗：トップページはカード型で写真を見せ、一覧のページはサムネイル付きリスト型で日付と内容を読み比べてもらう
よくある質問
お知らせは、トップページに置いたほうがよいですか?
更新が続く見込みがあるなら、トップページに最新の数件を置くと、会社が動いていることが伝わります。更新が年に数回しかない場合は、古さが目立つため、トップページには置かず一覧のページだけにする方法もあります。トップページに置く場合は、最新の3〜5件程度が目安です。
お知らせとブログは、同じ一覧にまとめてもよいですか?
休業日や価格の変更など事実を知らせる情報と、考えや事例を伝える読み物は、分けたほうが探しやすくなります。更新の量が少ない場合は、1つの一覧にまとめて種類のラベルで分ける方法もあります。
「新着」の印は、どのくらいの期間表示すればよいですか?
更新の頻度によって変わるため、決まった日数はありません。次のお知らせが出る前に外れる長さにし、手作業ではなく公開からの日数で自動的に外すと、印の意味が保たれやすいと考えられます。
型は、組み合わせて使ってもよいですか?
組み合わせられます。トップページは日付リスト型、一覧のページはサムネイル付きリスト型にカテゴリ切り替えを加える、といった使い分けがよく見られます。