NEWS-005 公開  更新

重要なお知らせ固定型 お知らせ

臨時休業や障害など、期限のある重要なお知らせだけを一覧の先頭に固定し、期限を過ぎたら通常の並びに戻す設計です。
新しいお知らせが増えても、読み手に確実に届けたい情報が埋もれないようにします。

ワイヤーフレーム(PC)

重要なお知らせ固定型 お知らせ PC版ワイヤーフレーム

ワイヤーフレーム(SP)

重要なお知らせ固定型 お知らせ SP版ワイヤーフレーム

SP版の特徴

  1. 「重要」のラベルを題名の上に置く:横に並べると題名の幅が狭くなり、細かく折り返すためです。
  2. 要点の文を残す:SPでは開かずに読むことが多いため、枠の中だけで内容が伝わるようにしています。

採用前の判断ポイント

向いているケース

  • 臨時休業・営業時間の変更・障害など、期限まで確実に伝えたい情報がある
  • お知らせの更新が多く、重要な話題がすぐに下へ流れてしまう
  • 掲載をやめる日(期限)を決められる

向かないケース

  • 重要なお知らせに期限がなく、ずっと先頭に置くことになる(恒常的に見せる必要がある情報は、お知らせに固定せず、よくある質問・ヘルプ・専用の案内ページなどに移します)
  • サイト全体に関わる緊急の情報で、どのページでも見てもらう必要がある(告知型 ファーストビューのように、ページの上部で知らせる形が向きます)

このワイヤーの特徴

期限まで、重要な情報が埋もれない

新しい順に並べるだけでは、あとから出たお知らせに押されて、臨時休業のお知らせが下へ流れてしまいます。重要なお知らせを一覧の先頭に固定し、期限までは新しいお知らせが増えても最初に目に入るようにしています。

枠と「重要」のラベルで、ほかと区別する

固定したお知らせは太い枠で囲み、「重要」の文字のラベルを付けています。
色だけに頼らず、枠の形と文字でも通常のお知らせと区別できるようにしています。

いつまで表示するかを、画面に書く

固定したお知らせにいつまで表示するかを書いておくと、読み手は情報がまだ有効かを判断できます。
掲載日と「10月1日まで先頭に表示」を並べて書いています。

期限を過ぎたら、通常の並びに戻す

期限を過ぎたお知らせは固定を外し、日付の順の一覧に戻しています。
デモでは、見本の操作で期限の翌日の表示に切り替えられます。

制作時のよくある失敗

固定したお知らせを、外し忘れる

期限を過ぎた臨時休業のお知らせが先頭に残ると、読み手は今も休業中かと誤解します。
固定するときに期限を入力し、期限が来たら自動で外れる仕組みにします。

重要なお知らせを、いくつも固定する

固定が3件、4件と増えると、どれが本当に重要なのか分からなくなり、通常のお知らせも下へ押し出されます。
固定するかは、読み手への影響の大きさと期限で決め、原則1件、多くても2件までに抑えます。

赤い文字だけで、重要さを伝える

色だけで区別すると、色の見え方が違う人には伝わりません。
「重要」の文字と枠の形を合わせて使います。

お知らせの欄の外にも、同じ情報を出さない

お知らせの欄がトップページの下のほうにあると、固定しても読み手の目に入らないことがあります。
予約や来店に関わる情報は、問い合わせのページや予約の画面にも同じ内容を出しておきます。

よくある質問

重要なお知らせは、ページの上部の帯で知らせたほうがよいですか?

サイト全体に関わる緊急の情報で、どのページでも見てもらう必要がある場合は、上部の帯のほうが届きやすいと考えられます。
お知らせの欄の中で十分な場合は、このワイヤーのように先頭に固定する形で足ります。

期限は、どのように決めればよいですか?

休業日なら休業が終わる日、障害なら復旧を確認した日など、お知らせが役目を終える日を期限にします。
期限が決められない情報は、固定せず通常のお知らせとして出す方法もあります。

固定を外したあと、お知らせは削除したほうがよいですか?

削除せずに通常の一覧に残すと、いつ何があったかの記録になります。
内容が誤解を招く場合は、題名や本文に「終了しました」と書き足しておくと安心です。

同じパーツのPattern

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

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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