NEWS-001 公開  更新

日付リスト型 お知らせ

お知らせを新しい順に、日付・種類・題名の1行ずつで並べる設計です。
トップページや会社のページで、更新が続いていることと最新の話題を、少ない面積で伝えます。

ワイヤーフレーム(PC)

日付リスト型 お知らせ PC版ワイヤーフレーム

ワイヤーフレーム(SP)

日付リスト型 お知らせ SP版ワイヤーフレーム

SP版の特徴

  1. 日付と種類を題名の上に置く:横一列のままだと題名の幅が狭くなり、細かく折り返すためです。
  2. 一覧へのボタンを横幅いっぱいにする:指で押しやすくし、一覧の続きがあることを伝えるためです。

採用前の判断ポイント

向いているケース

  • お知らせの数が多く、題名だけで内容が伝わる
  • 休業日・営業時間の変更・資料の公開など、文字だけで済む話題が中心
  • トップページの一角に、最新の3〜5件程度を置きたい

向かないケース

このワイヤーの特徴

日付を先頭にそろえ、新しさが一目で分かる

読み手が最初に確かめたいのは、お知らせがいつのものかです。日付を行の先頭にそろえ、数字の幅が同じになる書体の設定(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つの一覧にまとめて種類のラベルで分ける方法もあります。

同じパーツのPattern

お知らせの型の選び方と一覧を見る

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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