お知らせ欄を8つの型に分け、AIへの指示文・動く見本・コードを載せています。
お知らせはどの型を選ぶか
お知らせ欄は、サイトが今も動いていることを伝え、休業日や行事のように日付の決まった情報を届ける場所です。型を選ぶときは、写真があるお知らせがどれだけあるか、種類がいくつあるか、何年分たまっているか、の3つを数えます。写真が少なければ日付リスト型、種類が3つ以上あればカテゴリ切り替え型、と決めていくと迷いません。
| こんなとき | 向いている型 |
|---|---|
| トップページに最新の数件だけを載せたい・写真が少ない | 日付リスト型 |
| 一覧ページで、写真と抜粋で中身を伝えたい | サムネイル付きリスト型 |
| イベントや新商品を写真で目立たせたい | カード型 |
| トップページで、写真つきのお知らせを縦に場所を取らずに何件も見せたい | 横スクロール型 |
| 臨時休業など、期限まで必ず見てほしいお知らせがある | 重要なお知らせ固定型（ほかの型と組み合わせる） |
| お知らせ・イベント・採用など、種類が3つ以上ある | カテゴリ切り替え型 |
| 数十件たまっていて、ページを移らずにさかのぼってほしい | もっと見る型 |
| 何年分ものお知らせがたまっている | 年別アーカイブ型 |
マウスを重ねたときのカードの動きは、アニメーション集のホバーの動き（カードがふわっと浮く）にあります。
重要なお知らせ固定型は、ほかのお知らせより先に見せるための型なので、日付リスト型やカード型の先頭に足して使います。
どの型でも守ること
- 日付は time 要素にする。
<time datetime="2026-10-01">のように機械が読める日付を持たせ、画面の書き方は全件でそろえます。 - リンクの範囲を1件まるごとに広げる。題名の文字だけでなく、日付や画像の上を押しても開けるようにすると、SP で押しやすくなります。
- 新しい順に並べる。重要なお知らせを固定するときも、その下は新しい順を崩しません。
- 一覧のページへの入口を置く。トップページに数件だけ載せるときは「一覧を見る」のリンクを見出しの近くに置き、過去のお知らせへたどれるようにします。
- 新着の印や固定は日付で自動にする。「NEW」の印や重要なお知らせの固定は、手で外すと必ず外し忘れが出ます。投稿日や期限の日付で、表示するときに決めます。
よくある質問 (FAQ)
日付リスト型なら3〜5件が目安です。トップに置くお知らせ欄の役目は、サイトが動いていることと直近の話題を見せることなので、それで十分です。古い知らせは「一覧を見る」のリンク先にまとめて載せます。更新の少ないサイトでは、半年前の日付が先頭に並ばないよう、件数を減らすほうが印象がよくなります。
写真を見れば内容がわかる知らせが多いサイトなら入れます。イベントや新商品なら写真が役立ちますが、休業日や料金の改定に写真は要りません。逆に、写真を用意できない知らせが半数以上なら、日付リスト型のほうが整って見えます。画像付きの型にするなら、画像のないお知らせ用の共通の画像を用意しておきます。
更新の間隔に合わせて、7日から14日くらいにします。月に数回しか更新しないサイトで3日にすると、印の付いたお知らせがほとんど出ません。手で外すと外し忘れが出るので、投稿日から何日以内かを表示するときに判定します。
件数が少なければボタン、多ければ種類ごとのページにします。数十件ならボタンでその場で絞り込むほうが速く探せます。数百件あり、種類ごとに検索から来てほしいときは、
/news/event/ のように種類ごとに URL を分けたページにします。