Webパーツ辞典

通知・状態

いま何が起きているかを伝える部品。トースト・アラート・プログレスバー・スケルトンなど。

  • トーストToast

    画面の隅に少しだけ出て、しばらくすると自分で消える短い通知。トースターからパンが飛び出す様子が由来。

    • 通知
    • 一時表示

  • スナックバーSnackbar

    画面の下に出る、操作ボタンを1つ持った通知。「削除しました／元に戻す」のように、やり直しの機会を渡す。

    • 通知
    • 一時表示

  • アラートAlert

    その場に出しっぱなしにする、状態の知らせ。成功・注意・エラーを色とアイコンで区別する。

    • 通知
    • 常時表示

  • バナーNotification banner

    ページの上端に横いっぱいで出す帯状の知らせ。メンテナンス予告やキャンペーンの告知に使う。

    • 通知
    • 常時表示

  • プログレスバーProgress bar

    どこまで進んだかを、伸びる帯で示す部品。終わりが見えている処理に使う。

    • 状態
    • 進捗

  • ローディングスピナーSpinner

    処理が続いていることを、回り続ける印で示す部品。終わりが読めない待ち時間に使う。

    • 状態
    • 待ち

  • スケルトンスクリーンSkeleton screen

    読み込み中に、これから出る内容の形だけを灰色の箱で見せておく表示。空白やスピナーより待ち時間が短く感じられる。

    • 状態
    • 待ち

  • 空状態Empty state

    データが1件も無いときに出す画面。何も無い理由と、次にできることを書く。

    • 状態
    • 案内

  • バッジBadge

    状態や分類を短い文字で示す小さな札。「公開中」「NEW」など、一目で種類が分かるようにする。

    • 状態
    • 表示

  • 通知ドットNotification dot

    アイコンの右上に付ける小さな丸。新しいものがあることだけを伝え、件数を添えることもある。

    • 状態
    • 通知

  • Cookie同意バナーCookie consent banner

    Cookie や解析タグを使ってよいかを、訪問者に選んでもらうための知らせ。「同意する」と「拒否する」を同じ重みで並べる。

    • 通知
    • 同意

  • 結果画面Result page

    処理が終わったあとに、大きなアイコンと見出しで成功か失敗かを伝え、次に押すボタンを並べる画面。「送信が完了しました」がその例。

    • 状態
    • 案内

  • 通知一覧Notification center

    ベルのボタンを押すと開く、届いた通知を新しい順に並べたパネル。未読の印と時刻が付き、「すべて既読にする」でまとめて読んだことにできる。

    • 通知
    • 一覧

  • 円形プログレスCircular progress

    輪っかが時計回りに伸びて、どこまで進んだかを示す部品。真ん中に「72%」のように数字が入る。終わりが読めないときは輪が回る。

    • 状態
    • 進捗

  • メーターMeter

    決まった範囲の中で、いまどのくらいの量かを帯で示す部品。「7.2GB / 10GB」のストレージやバッテリー残量に使い、多すぎ・少なすぎで色が変わる。

    • 状態
    • 量

見分け方