フォームを送信したときの「入力内容にエラーがあります」や、設定を変えたときの「保存しました」のように、画面がユーザーに何かを知らせる場面はたくさんあります。
こうしたアラート・通知は、種類や見せ方を間違えると、大事なエラーが見落とされたり、ささいな知らせで作業の邪魔をしたりしてしまいます。
この記事では、アラート・通知の種類(インラインのアラート・バナー・トースト/スナックバー・バッジ)と使い分け、重要度ごとの色とアイコンの付け方、伝わるメッセージの書き方を、見本を使って初心者向けに解説します。
この記事の見本は、サイトの配色ではなく、架空のサービスの配色(青系)で描いています。見本の部品は押しても動きません。
アラート・通知の基本
まずは、アラート・通知とは何か、どんな種類があり、どう使い分けるのかを押さえましょう。
アラート・通知とは
アラート・通知とは、操作の結果や、エラー・注意・お知らせなど、ユーザーに気づいてほしい情報を、ふだんの内容とは区別して知らせる部品のことです。
「アラート(alert)」は英語で「警報・注意」、「通知(notification)」は「知らせ」という意味ですが、Webデザインではどちらも「画面からユーザーへの知らせ」を広く指すことが多い言葉です。
ただし、部品の名前や定義はデザインシステム(部品の見た目や使い方のルールをまとめたもの)によって違い、たとえばデジタル庁デザインシステムでは、ページの上部などに表示するお知らせを「ノティフィケーションバナー」という名前の部品にしています(ノティフィケーションバナー|デジタル庁デザインシステム)。
知らせる内容によって、「どれくらい目立たせるか」「いつまで表示するか」が違うので、それに合わせて部品の種類を選ぶことが大切です。
アラート・通知の種類と使い分け
アラート・通知の代表的な種類は、インラインのアラート、バナー、トースト/スナックバー、バッジの4つです。
インライン(inline)は「その場に組み込まれた」という意味です。インラインのアラートは、ページの一番上や画面の端ではなく、入力を間違えた欄やフォームのすぐ近くに、ページの内容の一部として表示されます。
| 種類 | 表示される場所 | 消え方 | 向いている知らせ |
|---|---|---|---|
| インラインのアラート | 関係する内容のすぐ近く(フォームの上など) | 問題が解決するか、ユーザーが閉じるまで残る | 入力のエラー、手続きの注意点 |
| バナー | ページやアプリの上部など、目に入りやすい場所 | ユーザーが閉じるまで残る | メンテナンスのお知らせ、サイト全体に関わる注意 |
| トースト/スナックバー | 画面の下や隅に小さく重ねて出る | 数秒で自動的に消える | 「保存しました」のような操作の結果の軽い知らせ |
| バッジ | アイコンやメニューの右上などに小さく付く | 確認すると消える、または数が変わる | 未読の数、新着があることの目印 |
トーストは、Androidの公式ドキュメントで「操作に関する簡単なフィードバックを小さなポップアップに表示」し、タイムアウト後に自動的に消えるもの、と説明されています(トーストの概要 | Android Developers)。
スナックバーはGoogleのMaterial Designでの呼び方で、画面の下に短いメッセージを出し、「元に戻す」のようなボタンを添えられる点がトーストとの違いです(Snackbar – Material Design 3(英語))。
Webサイトでは、どちらも「自動で消える小さな知らせ」という意味で、区別せずに「トースト」と呼ぶことも多いです。
トーストという名前は、トースターからパンがポンと飛び出す様子が由来といわれています。食べ物の名前に戸惑うかもしれませんが、どちらも「小さく現れて、すぐに消える知らせ」と覚えておけば十分です。
4つの種類を、ワイヤーフレーム(画面の骨組みを簡単な箱で表した図)で並べてみましょう。
使い分けの基本は、「必ず読んで対応してほしいものは残す」「読み流してもよい軽い知らせは自動で消す」です。
バッジは、Material Designでは「ナビゲーションの項目やアイコンに、通知や件数、状態を表示する」部品とされ、数が大きいときは「999+」のように上限で止めて表示することもできます(Badge – Material Design 3(英語))。
なお、答えるまで先に進めない確認の窓はモーダルダイアログと呼ばれる別の部品で、デジタル庁デザインシステムでも、処理の完了や状態の変化を知らせる目的では使わないよう示されています。
アラート・通知のデザインのコツ
ここからは、重要度ごとの色とアイコンの付け方と、伝わるメッセージの書き方を見ていきます。
重要度ごとに色とアイコンを決める
アラート・通知は、内容の重要度に合わせて「成功」「情報」「警告」「エラー」の4種類に分け、それぞれに決まった色とアイコンを割り当てるのが一般的です。
種類ごとに見た目をそろえておくと、ユーザーは文字を読む前に「うまくいった」「何か問題がある」と見分けられるからです。
デジタル庁デザインシステムのノティフィケーションバナーでも、成功・エラー・警告・情報の種類があり、アイコンとタイトルを必ず付ける構成になっています(ノティフィケーションバナー 使い方|デジタル庁デザインシステム)。
見本では、成功を緑、情報を青、警告をオレンジ、エラーを赤にしています。
このような色の割り当ては多くのサイトで使われているため、見る人にとってもなじみがありますが、色の意味はサイトの中で必ず統一しておきましょう(色で情報の優先順位を伝える考え方は情報の優先順位と色とは?で解説しています)。
警告によく使われる黄色や明るいオレンジは、白い地の上の文字色にすると読みにくくなるので、見本のように文字やアイコンには濃いめのオレンジを使い、地には同じ系統の薄い色を敷きます。
色だけに頼らない
アラートの種類は、色だけでなく、アイコンの形や「エラー」のような言葉でも伝えるようにします。
色の見え方は人によって違い、赤と緑の区別がつきにくい人もいるため、色だけでは「成功」と「エラー」が同じに見えてしまうことがあるからです。
WCAG 2.2(Webのアクセシビリティの国際的なガイドライン)でも、色を情報を伝える唯一の手段にしないことを求めています(WCAG 2.2 達成基準1.4.1 色の用途・WAIC日本語訳)。
NGの見本は、文章もよく似ているため、枠線の色の違いに気づかないと、どちらが成功でどちらがエラーなのか読み違えてしまいます。
OKの見本では、「✓」と「×」のアイコンと、先頭の「成功」「エラー」という言葉があるので、色に頼らずに違いが分かります(色だけに頼らない考え方は色だけに頼らないデザインとは?で詳しく解説しています)。
メッセージは「何が起きて、どうすればいいか」を書く
アラートの文章には、「何が起きたか」と「ユーザーが次に何をすればいいか」を、短く具体的に書きます。
「エラーが発生しました」だけでは、ユーザーは何を直せばいいのか分からず、同じ操作を繰り返して困ってしまうからです。
NGの見本は、作った人にしか分からない言葉とエラーの番号だけで、ユーザーは次の行動を決められません。
OKの見本は、対象の項目と正しい入力のしかたを書いているので、読んだその場で直せます。
メッセージを書くときは、次の点を意識しましょう。
- 結論を先に書く
「送信できませんでした」のように、何が起きたかを最初に書きます。 - 直し方を添える
エラーや警告では、「〜してください」と次の行動を示します。 - ユーザーを責めない
「入力が間違っています」より「〜で入力してください」のほうが、落ち着いて直せます。 - 専門用語や内部の番号だけにしない
エラーの番号は、問い合わせのときに役立つ場合だけ、説明の後ろに添えます。
大事な知らせは自動で消さない
エラーや、ユーザーの対応が必要な知らせは、数秒で消えるトーストではなく、閉じるか解決するまで残る形で表示します。
自動で消える知らせは、読むのに時間がかかる人や、ちょうど画面から目を離していた人には届かないからです。
反対に、「保存しました」のような、読まなくても困らない成功の知らせは、トーストで出して自動で消すと、作業の流れを止めずに済みます。
なお、バナーに閉じるボタンを付ける場合、デジタル庁デザインシステムは、閉じたことをサイトが覚えておき、閉じた状態が続くようにすることを勧めています。
コーディングでアラートを作るとき
ここからは、Webサイトを自分でコーディング(HTMLなどのコードを書いてページを作ること)する人向けの補足です。
コードを書かない人は、読み飛ばして「実践のポイント」へ進んでも構いません。
画面の中で後から表示される知らせは、目で見ている人だけでなく、画面の読み上げソフトを使う人にも伝わるようにする必要があります(WCAG 2.2 達成基準4.1.3 ステータスメッセージ・WAIC日本語訳)。
例えば、画面を見ずに、読み上げソフトで内容を音声にして聞きながら操作している人は、画面の上のほうに赤いエラーが出ても、それが読み上げられなければ気づけません。次に紹介するroleの指定は、そうした人にも「今、知らせが出た」と伝えるためのものです。
HTMLでは、急ぎの知らせにはrole="alert"、急がない知らせにはrole="status"という属性を付けると、表示されたときに読み上げソフトが知らせてくれます(MDN: alert ロール、MDN: status ロール)。
<div role="alert">
送信できませんでした。通信状態を確かめて、もう一度お試しください。
</div>
<div role="status">保存しました</div>表示や自動で消す動きはJavaScriptで作ります(JavaScriptの学び方はJavaScript学習ロードマップで紹介しています)。
実践のポイント
アラート・通知のデザインで陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- 大事なエラーを、数秒で消えるトーストで出してしまうことがあります。
読み終わる前に消えてしまうので、エラーは直すまで残る形で表示しましょう。 - 画面のあちこちにアラートを出しすぎて、本当に大事な知らせが埋もれてしまうことがあります。
アラートは「ユーザーに必ず気づいてほしいこと」だけにしぼりましょう。 - フォームのエラーを、ページの一番上にだけ表示してしまうことがあります。
どの項目に問題があるのか分かるよう、該当する入力欄のすぐ近くにも表示しましょう。 - ブランドカラーが赤のサイトで、ボタンやリンクにも赤を使い、エラーと見分けがつかなくなることがあります。
エラーの赤とブランドの赤は役割が違うので、アイコンや言葉で区別できるようにしましょう。
よくある質問
- Q. トーストは何秒で消せばいい?
A. 決まった秒数はありませんが、メッセージを落ち着いて読み終えられる長さにする必要があります。
文章が長い場合や「元に戻す」のようなボタンがある場合は、表示時間を長めにするか、自動で消さない形を選びましょう。 - Q. バッジの数字はどこまで表示すればいい?
A. 桁が増えるとバッジが大きくなりアイコンを隠してしまうので、「99+」のように上限を決めて止める方法がよく使われます。
数がいくつかより「新着があること」だけを伝えたい場合は、数字のない小さな丸でも十分です。 - Q. ブラウザーで表示される「OK」だけの小さな窓もアラート?
A. サイトを見ている途中で突然割り込んできて、「OK」を押すまで閉じられない窓は、JavaScriptのalert()という命令で出す、ブラウザーが用意した窓です。
サイトの中に作るアラートとは別物で、見た目をサイトに合わせて変えられず、閉じるまでほかの操作ができません(このように、答えるまでほかを触れない窓を「モーダル」と呼びます。詳しくはモーダルとは?で解説しています)。
この記事で紹介したアラートの部品とは分けて考え、使う場面はしぼりましょう。
まとめ
アラート・通知とは、操作の結果やエラー・注意・お知らせを、ふだんの内容と区別して知らせる部品で、インラインのアラート・バナー・トースト/スナックバー・バッジを、重要度と表示し続ける必要があるかで使い分けます。
成功・情報・警告・エラーごとに色とアイコンと言葉をそろえて色だけに頼らず、メッセージには「何が起きて、どうすればいいか」を書くことがポイントです。
まずは自分がよく使うサービスでわざと入力を間違えてみて、エラーのメッセージが「どう直せばいいか」まで教えてくれるかを確かめてみてください。
