このワイヤーの特徴
画面の上を空けたまま、お知らせの入口を置く
つまみだけを画面の端に置き、ヘッダーやファーストビューの上には何も出していません。
帯で本文が押し下げられることがなく、写真を大きく使うサイトでも見た目を崩しません。
つまみに件数を添えて、中身があることを伝える
つまみには「お知らせ」の文字と件数を縦に並べています。
押す前から、お知らせが何件あるかが分かります。
パネルの中は、カードで読みやすく並べる
引き出したパネルには、日付・カテゴリ・題名とリンクのカードを並べています。
帯1行より書ける量が多く、写真を添えることもできます。
開閉の手順を、キーボードでもたどれるようにする
開くと閉じるボタンに移り、閉じるとつまみに戻ります。
Escキーでも閉じられ、パネルの外の本文はそのまま読めるようにしています。
制作時のよくある失敗
つまみが小さく、何なのか分からない
アイコンだけの小さなつまみは、押せるものだと気づかれません。
「お知らせ」の文字を入れ、押せる範囲を十分に取ります。
ほかの追従する部品と、場所がぶつかる
チャットのボタン、先頭へ戻るボタン、追従するCTAなどと同じ端に置くと、重なって押せなくなります。
画面の端に出す部品を洗い出し、置く位置を分けます。
急ぎのお知らせを、つまみの中だけに入れる
つまみは押した人にしか届かず、見落とされやすい置き場所です。
全員に届けたい内容は、帯でも伝えます。
パネルを開くと、本文が操作できなくなる
パネルを画面全体を覆うモーダルにすると、読みかけの本文に戻りにくくなります。
お知らせを読むだけなら、本文を覆わない横のパネルにとどめます。
よくある質問
つまみは、画面のどこに置けばよいですか?
PCでは右端の中ほどがよく使われます。
SPでは指の届きやすい下寄りに置き、追従するCTAやチャットのボタンと重ならない位置を選びます。
つまみの文字は、縦書きでもよいですか?
短い言葉なら縦に並べても読めます。
読み上げでは普通の文字として読まれるので、ボタンの名前を「お知らせを開く」のように分かる形にしておきます。
お知らせがないときは、つまみを消したほうがよいですか?
掲載しているお知らせがないときは、つまみを出さないほうが、押しても何もない状態を避けられます。
