![見出し画像](https://assets.st-note.com/production/uploads/images/120586529/rectangle_large_type_2_a388578bc89fba8847a98bb43651d15d.png?width=800)
【マテリアルデザイン】Snack bars
画面を操作しているときに、「ボタンを押したけど反応ない、、ちゃんと操作が反映されたかな?」と、不安に感じることがあります。
特にスマホが普及されて以降インタラクションな画面が増えたからだと推測していますが、「反応がない」というのが不安に感じる要素かなと思っています。
このとき、Snackbarを適切に使うことが出来れば、この不安感も拭えるよなあと思い、調べてみました。
(後述しますがSnackbarには操作の取り消しアクションなども付与することができ、操作の可逆性が担保されている点も個人的には推しポイントです!)
Snack bars
スナックバーは、アプリが実行した、または実行する予定の処理をユーザーに知らせます。スナックバーは一時的に画面の下に表示される。
ユーザーエクスペリエンスを妨げるものであってはならず、またスナックバーを消すためにユーザーの操作を必要としない(自動的に消えるものにする)。表示させる最小時間は4秒、最大時間は10秒ほど。
スナックバーは1つのアクションを含むことができる(Dismiss または cancel アクション)。
ただし、アクションを含めるときは通常テキストとアクションの色を分ける必要がある。また、アクションを強調するような塗りつぶしもNG。
![](https://assets.st-note.com/img/1698908393525-crOFzIaTEg.png?width=800)
一度に表示できるスナックバーは1つのみ。また、スナックバー内のテキストは2行に収める。
![](https://assets.st-note.com/img/1698908233386-HNYFGKcHzX.png)
スナックバーの中にアイコンを使ってはならない。
![](https://assets.st-note.com/img/1698908169162-RHImB5x0rd.png)
ダイアログとスナックバーの違い
ダイアログ
優先順位が高い。
ユーザーはダイアログの表示を消すために操作が必要
スナックバー
優先順位が低い。
スナックバーは自動的に消える。
Snackbarを配置する場所
スナックバーはUIの最下部、メインコンテンツの前に配置する。
場合によっては、FABやボトムアプリバーなど、下部付近の他のUIエレメントと重ならないように、スナックバーを上方に寄せることも可能。
頻繁に使用するタッチターゲットやナビゲーションの前にスナックバーを配置することは避ける。
![](https://assets.st-note.com/img/1699325263133-pUnxKuqmdw.png?width=800)
FABが設置されている画面においては、スナックバーはFABの上に表示させる。
![](https://assets.st-note.com/img/1699325354523-PdY0NOvYhg.png?width=800)
![](https://assets.st-note.com/img/1699325369047-nRQyuMrH2Z.png?width=800)
重複して表示させるのはNG
レスポンシブレイアウトの対応
スマートフォンなど、小さいスクリーンの場合
スナックバーは画面の前端、後端、下端から一定の距離を保ちながら、1行または2行のテキストを収容するために、48dpから64dpまで垂直に拡大する。
タブレットやPC画面など、大きなスクリーンの場合
スナックバーは長いテキスト文字列を収容するために水平方向に拡大する必要がある。
注意する点として、テキストの理想的な行の長さは一般的に40~60文字であることを念頭に置く。
(※英語で記述されている文章のため、理想の文字数についてはあくまで英語の場合を想定しているかも?日本語だとまた理想の文字数が異なるかも。)スナックバーは画面の後端からの距離を自由に設定できる。可能な限り、中型および大型ディスプレイのスナックバーは、オプションのボタンを備えた1行のテキストを目指すべきである。
![](https://assets.st-note.com/img/1699324596931-8SGT9yP9AO.png?width=800)
![](https://assets.st-note.com/img/1699324642248-3ugn5Tloc8.png?width=800)
![](https://assets.st-note.com/img/1699325024028-X5PjGyySyY.png?width=800)
![](https://assets.st-note.com/img/1699324846209-kI1wvwhynr.png?width=800)
FABの位置をアニメーションでずらしてはならない
この記事が気に入ったらサポートをしてみませんか?