このワイヤーの特徴
日付を先頭にそろえ、新しさが一目で分かる
読み手が最初に確かめたいのは、お知らせがいつのものかです。日付を行の先頭にそろえ、数字の幅が同じになる書体の設定(font-variant-numeric: tabular-nums)にして、縦に目を走らせるだけで新しさを比べられるようにしています。
種類のラベルで、自分に関係があるかを判断できる
題名だけでは、休業のお知らせなのか催しの案内なのかがすぐに分かりません。日付の隣に種類のラベルを置き、題名を読む前に関係のある話題かどうかを判断できるようにしています。
ラベルの幅をそろえ、題名の書き出し位置が行ごとにずれないようにしています。
1行全体を押せる範囲にする
題名の文字だけがリンクだと、押せる範囲が狭くなります。日付から題名までの1行全体をリンクにし、行にマウスを乗せたときの背景の変化で押せることを伝えています。
SPでは、日付と種類を題名の上に置く
SPで横一列に並べたままにすると、題名の幅が狭くなり細かく折り返します。
SPでは日付と種類を1行目、題名を2行目にし、題名の幅を確保しています。
制作時のよくある失敗
日付の書き方が、お知らせごとに違う
「2026.9.5」と「2026.09.24」、「9月5日」が混ざると、日付の列がそろわず新しさを比べにくくなります。
書き方をサイト全体で1つに決め、HTMLでは time 要素と datetime 属性で日付を示します。
「新着」の印が、いつまでも消えない
手作業で付けた「新着」が残り続けると、どれが本当に新しいのか分からなくなります。
公開からの日数で自動的に外す仕組みにし、何日間表示するかを運用の前に決めておきます。
古いお知らせが、最新として残り続ける
更新が止まると、半年前の休業のお知らせが一番上に残り、サイト全体が放置されている印象を与えます。
お知らせの欄を置く前に、誰がどのくらいの頻度で更新するかを決めておくことが大切です。
題名が「お知らせ」「ご案内」だけになる
題名に中身がないと、読み手は開くまで内容が分かりません。
「年末年始の営業日」のように、題名だけで要点が伝わる書き方にします。
よくある質問
トップページには、何件くらい表示すればよいですか?
決まった件数はありませんが、3〜5件程度にして、残りは一覧のページへ案内する形がよく使われています。
更新の頻度が低い場合は、件数を減らしたほうが古さが目立ちにくくなります。
「新着」の印は、何日くらい表示すればよいですか?
更新の頻度によって変わるため、決まった日数はありません。
月に数回の更新なら1〜2週間程度など、次のお知らせが出る前に外れる長さにすると、印の意味が保たれやすいと考えられます。
お知らせとブログは、分けたほうがよいですか?
休業日や価格の変更など、事実を知らせる情報と、考えや事例を伝える読み物は、分けたほうが探しやすくなります。
更新の量が少ない場合は、1つの一覧にまとめて種類のラベルで分ける方法もあります。