この記事から得られること
この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Applying sound to UI(UIへのサウンド適用)」の概要について学ぶことができます。
なお、マテリアルデザインのWebサイト上に「サウンドのサンプル」がありますので、実際の音を確認しながら、この記事を読み進めることをおすすめします。
Material Design : Design section “Applying sound to UI”
URL：https://material.io/design/sound/applying-sound-to-ui.html
また、この記事は「約4〜6分」で読める内容となっています。
この記事の前提
この記事では、私が実際に「マテリアルデザイン」を読んだ経験から「理解しておくべき基本的な内容」を抜粋して紹介しています。
また、マテリアルデザインで使用されている専門用語は「英語のまま」使用しています。
理由は、日本語に翻訳しますと不自然な表現となるためです。
少し読みにくい部分もあるかもしれませんが、ご了承ください。
また、この記事は、記事上の各画像を細かく見ていただくためにも「パソコンでの閲覧」を推奨していますが、「スマホのブラウザ」でももちろん閲覧可能です。
なお、この記事を読み進めるなかで、もし分からない専門用語が多い場合は、「マテリアルデザイン」ガイドラインの最初の「概要編」の記事から順番に読み進めることをおすすめします。
サウンドのユースケース
サウンドを使用するユースケースは、以下の通りいくつかのパターンがあります。
フィードバックとしてのサウンド
「ユーザーの操作」や「UIの状態変化」は、サウンドによって表現することができ、「ユーザーへのフィードバック」を提供することができます。
また、サウンドによって、そのUIデザインの特徴を表現することもでき、このフィードバックのサウンドは、マテリアルデザインでは「earcon」と呼びます。
「earcon」に対して、現実の世界で使用されている馴染みのあるサウンドを使用することを「スキューモーフィズム」と呼びます。
「スキューモーフィズム」の例として、ロック画面のロックを解除するときの「earcon」に「カギを解錠するときの音」が当てはまります。
また、「earcon」に対して「抽象的なサウンド」を使用することもできます。
「抽象的なサウンド」は「スキューモーフィズム」とは異なり、UIデザインの特徴に合うようなサウンドとして使用することができます。
UIデザインの「テーマの表現」としてのサウンド
UIデザインの「テーマの表現」として、サウンドを活用することもできます。
「テーマの表現」としてのサウンドの使用は、UIの表現が豊かになりますが、使用するかは慎重に決める必要があり、多用することは推奨されていません。
サウンドを使用しないユースケース
サウンドを使用することによってユーザーの集中が途切れてしまうケースがあります。
そのため、サウンドを使用しない考え方も重要です。
なお、具体的に以下ユースケースでは、マテリアルデザインとして、サウンドの使用は推奨されていません。
- プライバシーや慎重さを必要とするUI
- 頻繁に使用される操作
- 割り込みを望んでいないユーザーに対するUI
それでは次に、具体的なサウンドのパターンについて説明します。
Hero sounds｜ヒーローサウンド
「Hero sound」とは、UIの操作において「重要な瞬間」や「お祝い」を表現するために使用されるサウンドのことです。
例えば、「Hero sound」は以下のユースケースで使用します。
- ユーザーの操作に対して「お祝い」をする
- ユーザーが新しくUIを使用した際の「歓迎」をする
- UIにおける「重要な機能」を操作したときの「確認」をする
なお、「Hero sound」は頻繁に使用することは推奨されておらず、使用する場合は、そのユースケースを統一する必要があります。
Notifications｜通知サウンド
「Notification」は「ユーザーの注意を引きつけるサウンド」のことです。
「Notification」は他のサウンドよりも頻繁に使用されることから、基本的には「Hero sound」よりも短く、多く使用されることを考慮したサウンドとする必要があります。
また、「Notification」は、ユーザーが聞く時の距離や周りの環境に関わらず、聞こえるように作成する必要があります。
具体的には、リズムや音色、周波数の変化などを使用することにより、聞こえやすいサウンドにすることが望ましいです。
さらに「Notification」は、ユーザーによって変更できることが望ましいとされています。
なお、アラートとして使用する「Notification」は、ユーザーの注意を強く引きつける必要があるため、明るい音色にすることが望ましいです。
また、着信音やアラーム、タイマーなどの「Notification」では、UIのテイストに合わせたサウンドや、ユーザーの好みに合わせて変更できることが望ましいとされています。
System sounds｜システムサウンド
「System sound」は基本的に「OS(オペレーティングシステム)から提供されるサウンド」のことであり、ユーザーに「操作のフィードバック」を提供するために作成します。
例えば、以下のユースケースのサウンドとして使用します。
- ナビゲーションの移動時
- ショートカット操作の実行時
- テキスト(データ入力)時
「System sound」はシンプルで控えめなサウンドにし、システム全体と調和するようなサウンドにする必要があります。
そして「System sound」は頻繁に発生することから、煩わしさを感じさせないサウンドにする必要もあります。
なお、この頻繁に使用される「System sound」のことを「Primary UX sound」と呼びます。
また、「Primary UX sound」ほどは頻繁に使用されませんが、「UIの状態の変化」や「まれなアクションであること」を通知するための「System sound」のことを「Secondary UX sound」と呼びます。
Ambient sounds｜周囲のサウンド
「Ambient sound」はUIの「個性やブランド」を伝えるためのサウンドのことです。
例えば、以下のユースケースのサウンドとして使用します。
- UIの初回使用を歓迎する
- ホーム画面でユーザーの現在地を通知する
「Ambient sound」は、UIの雰囲気を提供しますが、ユーザーの操作を邪魔しないサウンドにする必要があります。
また、サウンドのトーンを変えることによって「UIの状態の変化」をユーザーに通知することもできます。
まとめ
マテリアルデザインでは、UIに対してサウンドを使用する場合、ユースケースに合ったサウンドを適用する必要があります。
そして、適切なサウンドを使用することによって、ユーザーに対して「操作のフィードバック」や「UIの雰囲気」を伝えることができます。
マテリアルデザインのWebサイト上に、それぞれのユースケースの「サウンドのサンプル」がありますので、確認してみることをおすすめします。
Material Design : Design section “Applying sound to UI”
URL：https://material.io/design/sound/applying-sound-to-ui.html
最後までお読みいただきありがとうございます。
今回の記事は以上です。
この内容がみなさんのUIデザインの勉強になりましたらうれしいです。
引き続き、UIデザインの勉強を一緒にしていきましょう。
続きを学びたい方は
なお、「マテリアルデザインの続き」を学びたい方は、よろしければこちらの記事もご確認ください。
次のガイドラインを学びたい方は
一つ前のガイドラインを学びたい方は
アツシさん
今月から、こちらのアツシさんの記事で勉強させていただいております
Justine Toshi Ohyaと申します！
本当に、本当に、助かっています！！！
これからも楽しく学ばせていただきたいです。
ありがとうございます！！
という感謝をお伝えできればと思いました。
Justine
Justineさん、コメント、感謝の旨、ありがとうございます。
UIデザインの勉強にお役に立てているようで、私もうれしいです^^
不定期の更新とはなりますが、引き続き参考にしていただければと思います^^