snackbarとtoastの違いまとめ
こんにちは！のドリーム・アーツのデザイナーです。
今回は、紛らわしいtoastとsnackbarの違いについて、業務中に「どっちなんだ～！」となったため、勉強がてらnoteでまとめてみたいと思います。
💡きっかけ
発端はエンジニアとのやり取り中
🎨「snackbarを出す形で・・・」
💻「なるほど〜toastだす形なんですね」
？？？
🎨「あれ、toastとsnackbarって同じですか？」
💻「いや違うはず・・・」
💻「toastってシステム側からの通知の時に出てくるアレですよね…？」
🎨「えっそれってsnackbarじゃないんですか！？」
💻「えっ」
🎨「えっ」
・・・
ーー「snackbarとtoastの違いは何か」？
これを求めて我々はジャングルの奥地へと足を踏み入れたのであったーー。
💡snackbarとtoastの違い（結論）
長い前置きは置いておいて、そこでさくっと調べたことをまとめてみたいと思います📓
ドリーム・アーツの主なUIの基準にしているMaterial Design（以下MD）によると、
🍿snackbar🍿
・ユーザーが行った（もしくは行う予定の）動作に直接関係する通知をする時
・アクションが起きた画面の中（文脈が読み取れる範囲＝画面が表示されている時）で使う
・画面外にスワイプできる
・１つだけアクションを持つことができる
・一度に表示できるスナックバー は１つだけ
toast🥪
・snackbarの種類のうちの一つ。
・ユーザーが行った動作に関連しないもの（システムからのお知らせや通知）を表示する場合はこっち
・（MDでは）androidにのみ存在している通知の種類
・ユーザーが動作を行った画面が前面にない時に使われる（android端末のみでの挙動）
・ユーザーに見せたい情報を表示しながらも、できるだけ目立たないようにすべし！
・画面外にスワイプできないし、toast自体も操作できないらしい
という形だそうです。
💡根拠
さくっとまとめてしまったので、より詳細な情報をこちらにまとめておきます。
まずは、MDでのsnackbarとtoastの定義です。
🍿Snackbar🍿
Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear. They disappear either after a timeout or after a user interaction elsewhere on the screen, but can also be swiped off the screen.
Snackbars can also offer the ability to perform an action, such as undoing an action that was just taken, or retrying an action that had failed.
snack barはアプリが実行した、または実施する予定の操作を、（画面の下部に一時的に表示し）ユーザーに知らせます。
ユーザーの行動を中断してはならず、ユーザーが選択や入力など操作した情報は消える必要はありません。
時間経過または他の画面でユーザーが操作した後に消え、スワイプして消すこともできます。一つだけアクションを入れることができて、「元に戻す」や「再試行」などのアクションを実行できます。
（ https://material.io/components/snackbars/android#snackbar )
つまり、時間経過と他の画面操作でユーザー自身が消すことができる通知です。詳しく知りたい方はMDのこちらのページをご覧ください👀
🥪toast🥪
一方toastはというと、MDのdesignのタブには個別項目がありません。
しかし、implementationのandroidの項目にのみ記載がありました。
Android also provides a Toast class with a similar API that can be used for displaying system-level notifications.
Generally, snackbars are the preferred mechanism for displaying feedback messages to users, as they can be displayed in the context of the UI where the action occurred.
Reserve Toast for cases where this cannot be done.
また、Androidではシステムレベルでの通知を表示するために使用することができる、（snackbarと）同様のAPIを持つクラスを提供しています。
通常スナックバーは、アクションが発生したUIの文脈で表示できる場所で、ユーザーにフィードバックメッセージを表示するための通知です。
この動作ができないところにトーストを使います。
（ https://material.io/components/snackbars/android#using-snackbars ）
ふむふむ・・・。androidではスナックバーが使えないところの予備としてトーストがあるんですね。
念のためリンクになっているandroidのページも見てみます。
When the view is shown to the user, appears as a floating view over the application. It will never receive focus. The user will probably be in the middle of typing something else. The idea is to be as unobtrusive as possible, while still showing the user the information you want them to see.
（中略）
Note that are preferred for brief messages while the app is in the foreground.
ユーザーに表示される時は、アプリケーション上にフローティングビューとして表示されます。それは決して集中を妨げてはいけません。ユーザーはおそらく何か他のものを入力している最中でしょう。アイデアは、ユーザーに見せたい情報を表示しながら、できるだけ目立たないようにすることです。
（中略）
アプリが前面にあるときの短いメッセージには 、 スナックバーが推奨されることに注意してください 。
( https://developer.android.com/reference/com/google/android/material/snackbar/Snackbar )
また、androidにはトーストの個別ページがあったので、それをみてみます。
トーストは、操作に関する簡単なフィードバックを小さなポップアップに表示します。 トーストでは、メッセージの表示に必要なスペースのみを使用します。現在のアクティビティは表示されたままになり、引き続き操作できます。トーストはタイムアウト後に自動的に消えます。
（ https://developer.android.com/guide/topics/ui/notifiers/toasts ）
な、なるほど〜〜〜！
つまり、MD的にトーストとは、
🥪snackbarの派生系の一種
🥪アンドロイドで使用されている通知のこと
🥪ユーザーが操作したその画面以外の場所（コンテキスト外）でも登場させたい場合に使う
🥪目立たせてはダメ
🥪アクションは持たせないっぽい
ということみたいです。
💡見た目での違いはあまりない
使い分けはわかりましたが、では見た目の違いってあるの？ということでざっくりとgoogleで画像検索をしてみました。
う〜〜〜ん、違いはわからないですね。
強いていうならトーストの方が高さがあってリッチ？という感じでしょうか。一般的に言われているtoastと、MDでのtoastの概念が違うことや、一般的に違いがはっきりあるわけではないのも一因にありそうです。
💡まとめ
さて、ここで最初に書いた二つの特徴をまた見てみましょう。
🍿Snackbar🍿
・ユーザーが行った（もしくは行う予定の）動作に直接関係する通知をする時につかう
・アクションが起きた画面の中（文脈が読み取れる範囲＝画面が表示されている時）で使う
・画面外にスワイプできる
・１つだけアクションを持つことができる
・一度に表示できるスナックバー は１つだけ
🥪toast🥪
・snackbarの種類のうちの一つ。
・ユーザーが行った動作に関連しないもの（システムからのお知らせや通知）を表示する場合はこっち
・（MDでは）androidにのみ存在している通知の種類
・ユーザーが動作を行った画面が前面にない時に使われる（android端末のみでの挙動）
・ユーザーに見せたい情報を表示しながらも、できるだけ目立たないようにすべし！
・画面外にスワイプできないし、toast自体も操作できないらしい
アクションを持つことができるかどうか、ユーザーが行った動作に直接関係するかどうか、という部分が二つの差別化ポイントになりそうです。
💡（おまけ）理論体系によって指すものが違うことも
調べていてややこしかったところが、同じ名前でも理論体系によって違うものを表すことがあることでした。
たとえば、マイクロソフトのページには「トーストバナー」という文言が登場しますが、MDでは「トースト」と「バナー」は別の概念のようになっています。
つまり、「スナックバー はこれ！」「バナーはこれ！」といった明確な定義は、UIデザインの中には無いんですね。
調べる時は、どのデザインガイドラインを採用するかという視点も必要になりそうです。
💡調べてみた結果
今回はtoastとsnackbarの違いについてまとめてみましたが、
記事に書いたとおり、一つの名前でも、理論体系によって違う意味になったりすることもあるので、UIデザインで出てくる用語の定義は難しいですね・・・。
しかし、調べみたところ、「ブラウザ上で提供するサービスには、トーストはあまり関係ないかも」という結果がわかったのは、ウェブサービスを提供する我々にとって大きい収穫でした！🙏
さて、長くなりましたが、ここまでお読みいただきありがとうございました！
また次回お会いしましょう〜！
・・・
ドリーム・アーツではデザイナーを募集しております。
2022年3月に4年制大学卒業・大学院修了・高等専門学校卒業見込みの方、ご応募お待ちしております。
(既卒でも卒業から2年以内・就業経験なしであればエントリー可能です。)
まずは、カジュアルにポートフォリオの勉強会にご参加いただければ幸いです！
