この記事から得られること
この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「About sound(サウンドについて)」の概要について学ぶことができます。
Material Design : Design section “About sound”
URL：https://material.io/design/sound/about-sound.html
なお、この記事は「約3〜5分」で読める内容となっています。
この記事の前提
この記事では、私が実際に「マテリアルデザイン」を読んだ経験から「理解しておくべき基本的な内容」を抜粋して紹介しています。
また、マテリアルデザインで使用されている専門用語は「英語のまま」使用しています。
理由は、日本語に翻訳しますと不自然な表現となるためです。
少し読みにくい部分もあるかもしれませんが、ご了承ください。
また、この記事は、記事上の各画像を細かく見ていただくためにも「パソコンでの閲覧」を推奨していますが、「スマホのブラウザ」でももちろん閲覧可能です。
なお、この記事を読み進めるなかで、もし分からない専門用語が多い場合は、「マテリアルデザイン」ガイドラインの最初の「概要編」の記事から順番に読み進めることをおすすめします。
マテリアルデザインにおける “Sound”
マテリアルデザインでは、サウンド(音)を、以下の3つの種類に分類しています。
- Sound design｜操作のフィードバック
- Music｜音楽
- Voice｜音声
それでは、それぞれのサウンドの特徴について解説します。
“Sound design”｜操作のフィードバック
1つ目の「Sound design」は、主にユーザーの「操作のフィードバック」に対して使用されるサウンドのことです。
「Sound design」を使用することによって、視覚情報のほかに、聴覚の情報として、ユーザーに「操作のフィードバック」を与えることができます。
例えば、以下のシーンで「Sound design」は使用されます。
- 通知
- 操作の完了通知
- UIのアニメーション時の補完
マテリアルデザインのWebサイト上で、各シーンの「Sound design」例を確認できますので、ご興味がありましたら、ご確認ください。
Material Design : Design section “About sound” > Sound design
URL：https://material.io/design/sound/about-sound.html#types-of-sound
“Music”｜音楽
2つ目の「Music」は、「UIの雰囲気(UIのストーリー)」を表現するために使用されます。
「Music」や画像などを組み合わせて使用することにより、ユーザーに対して、UIを操作した際の「楽しさ」や「UI全体の雰囲気」を伝えることができます。
こちらもマテリアルデザインのWebサイト上で、「Music」の例を確認できますので、ご興味がありましたら、ご確認ください。
Material Design : Design section “About sound” > Music
URL：https://material.io/design/sound/about-sound.html#types-of-sound
“Voice”｜音声
3つ目の「Voice」は、音声もしくは合成音声によって、「Sound design」「Music」とは異なる情報を表現するために使用されます。
「Voice」を使用することにより、UIでは表現しにくい「複雑な情報」をユーザーに伝えたり、「UIとの対話」をユーザーに提供することができます。
こちらもマテリアルデザインのWebサイト上で、「Voice」の例を確認できますので、ご興味がありましたら、ご確認ください。
Material Design : Design section “About sound” > Voice
URL：https://material.io/design/sound/about-sound.html#types-of-sound
まとめ
繰り返しとはなりますが、マテリアルデザインでは、サウンド(音)を、以下の3つの種類に分類しています。
- Sound design｜操作のフィードバック
- Music｜音楽
- Voice｜音声
それぞれのサウンドの役割を理解し、UIに対して活用することによって、UIデザインの表現の幅が広がると思いますので、サウンドについては理解しておくことをおすすめします。
最後までお読みいただきありがとうございます。
今回の記事は以上です。
この内容がみなさんのUIデザインの勉強になりましたらうれしいです。
引き続き、UIデザインの勉強を一緒にしていきましょう。
続きを学びたい方は
なお、「マテリアルデザインの続き」を学びたい方は、よろしければこちらの記事もご確認ください。
次のガイドラインを学びたい方は
一つ前のガイドラインを学びたい方は
