NotificationBar

操作の結果などをシステムからの通知として表示するためのコンポーネントです。

使用上の注意

フィードバックではないサービス運営上のお知らせなどを画面全体（ヘッダーの下）で使用しない

NotificationBarを画面全体（ヘッダーの下）で使用する場合は、ユーザーが行なった操作への応答や、操作が反映されている状態を示すなどの、システムからのフィードバックの表示に限定します。限定する理由は次のとおりです。

• 画面全体での表示はユーザーに強めの注意を促す効果があることから、一連の業務やタスクを遂行する上で必要なフィードバックを表示する一貫性を担保し、ユーザーに適切な操作を促すため
• サービス運営上の利用促進や訴求といった、システムからの通知ではないメッセージを画面全体で使用した場合、ユーザーに都度システムからの応答なのか運営者からの情報なのかの判断が必要になることを回避するため

システムからの応答としてのフィードバックではない、その他の重要なお知らせや情報などの表示が必要な場合は、ベースありや、InformationPanelなどを使用してください。

メッセージは省略表示しない

NotificationBarのメッセージは簡潔な一行程度の文章になるように調整し、LineClampで省略表示しないでください。 メッセージを省略すると、ユーザーにその後に続く適切な操作を促すことが難しくなるためです。

どうしても情報量や他の要素を併記する必要がある場合は、テキストリンクを設置し移動先のヘルプページなどに情報を記載するか、ベースありやInformationPanelなどを使用し、十分な表示領域を確保してください。

種類

フィードバックとして伝えたいことや、フィードバックする内容の重要度に合わせて5種類を定義しています。

状態

強調

ユーザーへのアテンションを高めたい場合は、boldにすることを検討します。代表的なユースケースは次のとおりです。

• ユーザーが行なった操作の成功・失敗などの結果を画面全体（ヘッダーの下）に表示する場合

アニメーション

メッセージが表示されたことを強調したい場合は、animateにすることでスライドインのアニメーション効果を追加できます。

レイアウト

ベースあり

画面内の操作UIの近くに、操作に必要な情報を補足的に表示する場合などでは、base="base"を使用します。 特定の操作範囲へのフィードバックなどBase内に配置する場合を除き、画面内に単体で配置する場合は基本的にbase="base"を使用してください。

フィードバックとしてのシステム通知だけでなく、画面内の操作を進めるにあたってユーザーに伝えるべきメッセージなどを表示する場合にも使用できます。

影

ベースありを使用するユースケースで、影の値の考え方に従って高低差を指定する場合は、layerを設定します。

nには、0から4までの数値を指定でき、それぞれ影のセマンティックトークンのLAYER0からLAYER4に対応しています。

その他

ボタンやテキストリンクを表示したり、常時表示したいときは「閉じる」ボタンを非表示にできます。

デザインパターン

ページ全体の操作へのフィードバック

主に「操作後に、ダイアログ内や画面全体が切り替わるとき」や「ダイアログで操作し、元の画面に戻るとき」などに使います。

• ユーザーにメッセージが表示されたことを強調するために、アニメーションを有効にします。
• ユーザーの明示的な操作で非表示にします。時間の経過で閉じることは非推奨です（※1）。

オブジェクトに関する操作を行なった直後にページ全体にフィードバックを表示

コレクションへのオブジェクトの追加・削除など、オブジェクトに関する操作を行なった直後に、結果を表示する典型的な例です。
以下の例では操作が成功したためtype="success"を表示しています。エラーの場合はtype="error"を指定します。

操作箇所から離れている場合はスクロール追従するようにフィードバックを表示

操作するボタンなどと、NotificationBarによるフィードバックが視覚的に離れている場合は、positon: stickyでスクロールに追従させ、フィードバックに気づきやすくすることを推奨します。
以下の例では、スクロールに関わらずNotificationBarを画面上部に固定表示しています。

特定の操作範囲へのフィードバック

主に「複数の要素が存在する画面内での操作後、特定の対象範囲にのみ反映されたとき」に使います。 画面内にオブジェクトに関する操作やアクションが複数存在する場合に、特定の対象範囲への結果を表示する目的で使用します。

操作を行なった直後に操作範囲内にフィードバックを表示

設定値の保存・適用や、ファイルの取り込み操作など、操作の結果を表示する典型的な例です。

以下の例では、「保存」操作が成功した結果として、操作範囲のBase内にtype="success"を表示しています。エラーの場合はtype="error"を指定します。

Props

参考文献

※1. Web Content Accessibility Guidelines - 2.2.1 タイミング調整可能を理解する別タブで開く