オーバーレイ・フィードバック

画面の上に重なるもの、状態や結果を知らせるもの

• モーダルウィンドウ 背景を暗くして、画面の上に重ねて表示する小さなウィンドウ。閉じるまで背後を操作できない。
• ダイアログ はい・いいえなど、その場での判断をユーザーに求める小さなウィンドウ。ブラウザ標準の dialog 要素で実装できる。
• ポップアップ 背景を暗くしないまま、画面の隅に時間差で表示される小さな窓。お知らせやキャンペーン告知に使われる。
• ツールチップ アイコンやボタンにマウスを重ねたときだけ表示される、小さな補足説明の吹き出し。
• ポップオーバー ボタンをクリックすると、その近くに見出し・説明文・ボタンなどを含む小さなパネルが開く部品。
• トースト通知 操作の結果を短く知らせ、数秒で自動的に消える小さな通知。複数出ると画面の隅に積み上がる。
• 通知バー 画面の上部に帯状で表示され、閉じるボタンを押すまで残り続けるお知らせ。
• クッキーバナー 画面下部に固定表示され、Cookie の利用に同意または拒否してもらうまで残るバナー。
• ライトボックス サムネイル画像をクリックすると、背景を暗転させたまま元の画像を拡大表示する仕組み。
• ボトムシート ボタンを押すと画面の下からスライドして出てくるシート。背景が暗転し、背景クリックか閉じるボタンで戻る。
• オーバーレイ 画面全体に重ねる半透明の暗い幕そのもの。背後の要素を目立たなくし、手前の内容に注意を集める。
• ローディングスピナー くるくると回り続ける輪の形のアニメーションで、処理が進行中であることを伝える。
• スケルトンスクリーン これから表示されるコンテンツの形を、グレーのブロックで先に見せておく読み込み中の表現。
• プログレスバー 処理がどこまで進んだかを、0 から 100 パーセントまで伸びる横長のバーで示す部品。
• エンプティステート 一覧や検索結果に表示するものが 1 件もないときに見せる、イラストと説明文、行動ボタンのまとまり。
• エラーページ 指定されたページが見つからないときに表示する、404 の案内と次の行動を示すページ。
• ローディング画面 ページの読み込み直後に全画面で表示され、数秒後にフェードアウトして本文が現れる演出。