Google Stitch で通知UIを設計しようとして、迷ったことがある人は少なくないと思う。
「このメッセージ、トーストで出すべき？バナーにすべき？それともバッジで十分？」
通知の種類ひとつで、ユーザーが感じるUIの「うるさい/静か」「親切/冷たい」という印象が大きく変わる。でもその判断基準を体系的に説明しているリソースは案外少ない。
この記事では、Google Stitch を使って通知UIを繰り返し設計してきた経験から、トースト・バナー・バッジの使い分けについて、自分が整理した基準を書く。「通知UIで迷っている」という人に向けて、具体的な判断材料を提供したい。
結論から言うと
通知UIの選択は、「ユーザーに今すぐ行動を求めるか」「通知の重要度はどの程度か」「ユーザーの作業を中断させていいか」の3軸で判断できる。
一言で言えば、「重要で即時行動を要するならバナー、一時的なフィードバックならトースト、背景で溜まる情報ならバッジ」だ。
通知UIの3種類を定義する
トースト（Toast）とは
トーストとは、画面の端（主に右下または上部）に一時的にポップアップ表示され、数秒後に自動的に消える通知UIのことです。「ファイルを保存しました」「メッセージを送信しました」「リンクをコピーしました」のような、操作の完了・成功・失敗を短く伝えるフィードバックに使われる。
トーストの特徴は3つだ。時間制限がある（自動で消える）、ユーザーの作業を遮断しない、アクションを必須としない。ユーザーに「見てほしいが反応は不要」な情報に適している。
実際に Google Stitch でトーストを生成してみると、プロンプトに「右下に表示されるトースト通知。成功メッセージ。緑色のアイコン付き。×ボタンで閉じられる」と書くだけで、それらしいデザインが生成された。ただしアニメーション（フェードイン・フェードアウト）は静止画で表現できないため、「表示されている状態」のデザインが出てくる点に注意が必要だ。
バナー（Banner / Alert）とは
バナーとは、画面上部または特定のコンテンツエリアの上に固定表示される帯状の通知UIのことです。ページ全体に影響する重要な情報（サービスのメンテナンス告知、セキュリティ警告、利用規約の変更など）を伝えるために使われる。
バナーの特徴は、ユーザーが意図的に閉じるまで表示され続ける点だ。自動消滅しないため、「必ず読んでほしい」情報に向いている。ただし常に画面スペースを占有するため、使いすぎるとUIが圧迫される。
Stitch でバナーを生成するとき、「ページ上部に黄色の警告バナー。テキスト・リンク・閉じるボタン付き」というプロンプトが有効だった。情報の重要度に応じて色を変える（情報=青、成功=緑、警告=黄、エラー=赤）のが一般的なパターンで、Stitch にカラーを明示するとより適切なデザインが生成される。
バッジ（Badge）とは
バッジとは、アイコンやアバター、ナビゲーション項目などに付く小さな数字や丸印のことです。「未読メッセージが3件ある」「通知が5件溜まっている」「カートに2点入っている」のような、累積した情報量を示すのに使われる。
バッジの特徴は、ユーザーの作業を全く中断しない点だ。ユーザーは自分のタイミングでバッジに気づき、確認する。受動的な通知方法であるため、緊急性の低い情報に向いている。
Stitch でバッジを生成するとき、「ベルアイコンの右上に赤い丸バッジ。数字の3が表示されている」というプロンプトで正確なデザインが出た。バッジは小さな要素のため、サイズ・色・数字の有無を明示することがポイントだ。
使い分けの判断軸——3つの問い
問い1：ユーザーの作業を「今すぐ中断させる必要があるか」
通知の緊急性と割り込みの許容度を考えることが最初の問いだ。
「カードの支払いが失敗しました」「アカウントがロックされます」など、今すぐ確認・対応が必要な通知は、作業の流れを止めてでも伝える必要がある。このような場合はバナー（または場合によってはモーダルダイアログ）が適切だ。
「メッセージを送信しました」「設定を保存しました」のような操作完了の通知は、ユーザーの作業を中断させる必要はない。トーストで十分だ。
「未読メッセージが増えています」は別に今すぐ確認しなくていい。バッジで示し、ユーザーが自分のタイミングで確認できるようにする。
問い2：ユーザーに「アクションを求めるか」
通知を見たユーザーに何かをしてもらう必要があるかどうか、が2つ目の問いだ。
バナーはアクションを促す設計に向いている。「今すぐ更新する」「確認する」「閉じる」といったボタンを含めることができる。
トーストは基本的にアクションを求めない。ただし「元に戻す（Undo）」ボタンをトーストに含めるパターンは有効だ（Gmailのメール削除後のUndoトーストが典型例）。
バッジ単体では何もアクションを促さない。クリックしてバッジが指す画面（通知一覧など）に遷移する構造が必要だ。
問い3：通知は「一時的なもの」か「継続して存在するもの」か
通知の時間的性質も判断基準になる。
「ファイルを保存しました」は一時的なフィードバックで、数秒後には不要な情報だ。→ トースト
「メンテナンス予定があります（〇月〇日）」は、その日まで継続して表示する必要がある。→ バナー
「未読メッセージが溜まっている」は、ユーザーが確認するまで継続して存在する状態だ。→ バッジ
Google Stitch で通知UIを生成するときの実践ポイント
複数の通知状態を一画面に並べて生成する
Stitch の強みのひとつは、「複数のバリエーションを一度に生成できる」点だ。通知UIの設計では、この特性を活かして「成功・警告・エラー・情報の4種類のトーストを並べた一覧」を一度に生成するアプローチが効率的だ。
実際にプロンプトを「トースト通知の4パターン。上から順に：成功（緑）・エラー（赤）・警告（黄）・情報（青）。各トーストにアイコン・テキスト・閉じるボタン付き」と書いたとき、4種類が並んだデザインが一発で生成された。これをデザインシステムの参照画面として使えた。
「どこに表示されるか」を必ずプロンプトに含める
通知UIの設計で重要なのは、画面上のどの位置に表示されるかだ。Stitch にプロンプトを書く際、位置を明示しないと意図しない場所にデザインされることがある。
- トーストは「右下に表示」「上部中央に表示」など位置を指定する
- バナーは「ページ最上部（ヘッダーの直下）」「フォームの上部」など文脈を伝える
- バッジは「ナビゲーションアイコンの右上」「アバター画像の右下」など親要素と位置を明示する
「モバイルでどう見えるか」を別画面で確認する
通知UIはモバイル表示で崩れやすい。特にバナーは横幅いっぱいのテキストが長すぎて読みにくくなるケースがある。Stitch で通知UIを設計したら、「モバイル（375px幅）でのバナー表示」として別プロンプトで生成し直す確認工程を入れることをお勧めする。
よくある通知UIの失敗パターン
すべてをモーダルで表示してしまう
「重要な情報だからモーダルで」という発想で、本来トーストで十分な情報をモーダルダイアログで表示してしまうことがある。「ファイルを保存しました」をモーダルで出すと、ユーザーはそのたびに「OK」ボタンを押す手間が生じる。軽微な操作フィードバックにモーダルは過剰だ。
トーストが重なって表示される
短時間に複数の操作が連続した場合、トーストが画面上に重なって積まれる「スタック」状態になることがある。これはUXとして好ましくない。「最大○件まで同時表示」「新しいトーストが来たら古いものを押し出す」といった制御を実装側で検討する必要がある。Stitch のデザイン段階でも「複数トーストが重なった状態」を一度確認しておくと問題に気づきやすい。
バナーを使いすぎてUIが圧迫される
バナーはスペースを消費する。キャンペーン告知・メンテナンス予告・cookie同意・ブラウザ非対応など、複数のバナーが同時に表示されると、実際のコンテンツが画面の下に追いやられる。「バナーは最大1本まで」というルールを設計時に決めておくと、後から詰め込まれるリスクを防げる。
FAQ
Q1. Google Stitch でトースト通知のアニメーション（フェードイン）も作れますか？
Stitch が生成するのは静的なデザインのみです。トーストが表示される際のフェードインや、消えていくフェードアウトのアニメーションは Stitch では表現できません。「表示されている状態」の静止画として生成され、実際のアニメーションはCSSまたはJavaScriptで実装する必要があります。アニメーションの仕様はデザインにコメントとして書き添えておくと開発への引き継ぎがスムーズです。
Q2. エラーとwarningの通知UIはどう色分けすればいいですか？
広く使われているカラーガイドラインとして、エラー（赤系）・警告（黄・オレンジ系）・成功（緑系）・情報（青系）という4色体系があります。Google の Material Design でも同様のカラーシステムを採用しています。Stitch にプロンプトで「Material Design の通知カラーシステムに準拠した4種類のアラートコンポーネント」と書くと、この体系に沿ったデザインが生成されやすいです。
Q3. バッジの数字はどこまで表示すべきですか？
一般的には99件を超えた場合は「99+」と表示するパターンが広く使われています（iOS・Android共通のガイドラインに準拠）。3桁以上の数字をそのまま表示するとバッジが大きくなりすぎてUIを崩す原因になります。Stitch でプロンプトを書く際も「99+と表示されたバッジ」と指定すると、このパターンで生成されます。
Q4. サービス全体のメンテナンス告知はバナーとモーダルどちらが良いですか？
メンテナンスが数日後に予定されている場合はバナーが適切です。ユーザーがページを開くたびに確認でき、「今日で3日告知しているはずなのに気づいていなかった」というケースを防ぎやすい。メンテナンス当日・開始直前など緊急性が高い場合はモーダルで確認を求める方が確実です。Stitch でどちらのパターンも生成して、文脈に合わせて選ぶことをお勧めします。
Q5. Google Stitch はダーク／ライトモード両方の通知UIを作れますか？
はい。プロンプトに「ダークモード」「ライトモード」と明示することで各モードのデザインを生成できます。両方を一度に確認したい場合は、「同一画面にライトモードとダークモードを並べて表示」というプロンプトも有効です。ただし2つのモードのデザインは Stitch 上で自動同期されるわけではなく、修正時は両方のデザインを個別に更新する必要があります。
まとめ
通知UIの設計で迷ったとき、まず「作業を中断させる必要があるか」「アクションを求めるか」「一時的か継続的か」の3つを問うことで、トースト・バナー・バッジの選択が速く決まるようになる。
Google Stitch はこれらの通知コンポーネントを素早く生成できる。4パターンを並べて比較する、モバイル表示も確認する、といった使い方と組み合わせると、通知UIの設計品質は確実に上がる。
「通知」は画面の中で最もユーザーの感情に直結するUI要素だ。「うるさい」と感じさせず、「ちゃんと伝わった」と感じてもらうための設計に、これからも時間をかけていきたいと思っている。
