アラート & 空状態

アラート & 空状態に分類されるWeb表現技法11件。インラインアラート、告知バナー、Cookie同意バー、検索結果なしなど。ライブデモとコピーできるコード付き。

成功・情報・警告・エラーの4種類を色とアイコンで区別できるインラインアラート。左ボーダーとアイコンで意味を伝え、閉じるボタンはCSSのみで開閉します。

ページ最上部に表示する全幅の告知/警告バナー。閉じるとスライドアップで消え、ページ内の「もう一度表示する」ボタンからいつでも復帰できます。

画面下部に固定表示されるCookie同意バー。読み込み後にスライドインし、「同意する」または設定パネルでの選択保存で自然に消えます。

虫眼鏡のイラストと「0件」バッジで検索結果が無いことを優しく伝える空状態。条件をクリアすると結果ありの表示に切り替わる小さな体験も内蔵しています。

空のカートイラストと車輪が回転するアイドルアニメーションを添えた空状態。CTAを押すとカートが弾み、買い物へ促す導線をやわらかく示します。

点線の枠とプラスアイコンで「まだ何もない」ことを伝えるオンボーディング型の空状態。作成ボタンを押すたびに最初のプロジェクトが増えていく体験付きです。

雲とアイコンで接続エラーを穏やかに表現する空状態。再読み込みを押すと読み込み中を経て一時的に復旧表示へ切り替わり、繰り返し試せます。

チェックマークが描かれ、紙吹雪が漂う「すべて完了」の空状態。ボタンを押すたびに紙吹雪が弾け、達成感を演出します。受信箱ゼロの表示に最適です。

操作の直後に画面下部へ一時表示されるスナックバー。「元に戻す」アクションと自動消滅の進捗バーを備え、連続操作で通知が積み重なります。

削除など破壊的な操作の前に表示する確認ダイアログ。オーバーレイの外側クリックやEscキーでも閉じられ、誤操作を防ぎます。

ベルアイコンと未読数バッジを備えた通知パネル。クリックで開く一覧は種別ごとに色分けされ、クリックで既読化、新着も自動で届きます。