はじめまして。今回のnoteを担当するDentsu Lab Tokyoの土屋泰洋と申します。Dentsu Lab Tokyoでは、クリエーティブ・テクノロジスト／リサーチャーとして、次々と登場する新しいテクノロジーについて調査したり、それらの活用方法を考えたり、今後の潮流を予測をしたりする仕事をしています。

私は以前より「音」という現象そのものに強い関心があり、Dentsu Lab Tokyoでも音に関わるプロジェクトをいくつか手掛けています。

最近は「SND」というUI/UX開発者のためのUIサウンドアセットを配布するプロジェクトをはじめました。このプロジェクトの取り組みについては電通報のこちらの記事に書かせていただいたので、noteではより実践的に、SNDのサウンドアセットのデザインアプローチについてまとめてみたいと思います。

UIサウンドについての調査

モダンなUIにフィットするサウンド集を考えるにあたって、どのようなアセットを用意するかは難しい問題です。ただ「クリック音」をつくればよいというものではなく、音によるUXの向上を実感できるアセットである必要があります。かといって、様々な用途やプラットフォームを想定するとバリエーションが増えすぎてしまい、ユーザとしても使いにくいものになってしまいます。

SNDのサウンドアセットの目的は、まず「UIサウンドっていいかも」と思ってもらい、そこからさらに「例えば自分ならこういう音もつけたいなあ」といった具合に、サウンドデザインへの考えを深めてもらうことです。なので、多少特殊な用途の音はあえて用意せず、最低限のアセットを設計することにしました。

そこで、まずUIデザインの領域でもサウンドについて言及をしているGoogleとMeta(Facebook)の取り組みを調べてみることにしました。（AppleのHuman Interface GuidelineにもAudioの項目があるのですが、これはどちらかというと、音のミュートや音量、バックグラウンド対応などアプリケーション上での音をどのようなマナーで扱うべきかという内容が中心ですので今回は参照しません）

Googleの提唱するデザインシステム、「Material Design」にはサウンドデザインについての項目があります。UIサウンドや音声、音楽の扱い方について、非常にわかりやすくまとまっています。オン、オフに対応する「調号」の考え方や、無音のデザインするという考え方、重要な瞬間を強調したり、感情を呼び起こしたり、お祝いの気持ちを表したりするときに使用する製品やブランドの表現する「ヒーローサウンド」の考え方など、非常に納得感があります。

以下の動画は、上記のMaterial Designのサウンドのガイドラインを策定したGoogleのHead of Sound DesignのConor O’Sullivan氏による2019年のGoogle I/Oでの講演です。上記ガイドラインの内容を簡潔に紹介してくれています。

Meta社も、Google Material Designほど体系化だててはいないものの、自社アプリで利用しているサウンドキットをプロトタイプ向けにOrigamiとFramer向けファイルで配布しています。

以下のリンクは、上記のサウンドキットのページからもリンクされている、MetaのSound Design DirectorのWill Littlejohn氏の記事です。UIサウンドデザインにおいて気を付けるべきポイントが非常にわかりやすくまとめられています。特に「反復耐性について考えること」という内容は今回のサウンドアセットをつくる際にも大きなヒントとなりました。

UIサウンドのカテゴリ分け

Google Material DesignやMetaのサウンドアセットをはじめとする様々な既存のUIサウンドのスタディや、複数のデザイナーへのインタビューなどをベースに、最小限のサウンドアセットの役割と音響的特徴を整理していきます。このリストが、実際のサウンドアセットをデザインしていく指標となります。

まずはUIサウンドを役割別にカテゴライズすることからはじめました。UIサウンドには様々な役割が考えられますが、ざっくりと整理するとその役割は以下の５つに分類されると考えました。

UIサウンドのリスト化

いよいよ役割別に整理したカテゴリから、想定されるUIサウンドをリスト化していきます。

まず最低限必要なものとして、クリックやタップといったユーザの最小限のインタラクションに対して、それが認識されたことをフィードバックするための「Tapサウンド」というUIサウンドを定義しました。

これをまず一つの指標とした後は、プラットフォーム関係なく、ポピュラーであると思われるUIコンポーネントを洗い出し、そのコンポーネントの役割から、Tapサウンドとは別の独自の音が必要と思われるものとそうでないものを以下のように整理しました。

UIサウンドの役割と音響的特徴の整理

さらに、リスト化したUIサウンドそれぞれの役割と、その役割に必要な音響的特徴を散文的に書き出していきました。これが音をデザインする際のガイドラインとなります。

それぞれの役割と音響的特徴については、すべての音についての解説を掲載すると長くなりすぎてしまうので、今回は「操作音」に絞って、どのように考えたかをご紹介します。

シンセによるUIサウンドデザイン

リストが完成したら、いよいよ具体的なサウンドデザインに入っていきます。

今回筆者がシンセサイザーを利用してデザインしたSND01"sine"というアセットを制作する上で意識したことなどを簡単にまとめてみました。これはあくまで基本的なシンセサイザーの音響合成を利用した場合の筆者のデザインアプローチで、正解/不正解があるものではないと思っていますが、新たにUIサウンドをつくってみよう！という方のヒントになれば幸いです。

まず、音によって、実際には存在しないインターフェイスの手触りや質量を感じさせることができるのがUIサウンドの面白さの一つだと思います。つまり、UIという画面上の実体のない仮想的な表面に触れたした時にどのような音が響くかを想像して音をデザインしていくことになります。

例えばワイングラスをピンと指で弾くと「ピーン」と高くて長く響く音が鳴ります。一方で、机のような大きく安定したものを指で弾くと「ゴッ」という比較的低くて短い音が鳴ります。プラスチックを弾くと「カコッ」、マットな質感のものを指で弾くと、音はほとんど響かず「ゴ」という感じでしょうか？

このように、物の特性によって音の響き方が変わってきます。これは、こうした音が、物を叩いたことによって発生した空気の振動によって発生する物理現象だからです。

物の質量や構造によって、
・発生する波形の形
・波形の密度（音の高低）
・波形の時間的変化（響き方）
が変化していくことになります。

実は、この考え方はまさにシンセサイザーでの音響合成の基本的な思想と重なるのが面白いところです。シンセサイザーの基本的な考え方として、以下の３つのデザイン要素があります。

１）オシレーター
音の元となる波形の発振器、音色と音の高低などを定義します
２）フィルター
特定の周波数成分を除いたり、弱めたりします。音の響き方を定義します
３）アンプ
音量の時間的変化を定義します

これらのそれぞれのパラメーターを、音の鳴りはじめてから鳴り終わるまでの間、どのように時間的に変化を与えていくかがシンセサイザーによる音響合成の基本となります。

ここからは、これらのパラメーターを用いてデザインしたTap、Active Button、Toggleの３つのサウンドのデザイン手法を解説していきます。

※シンセサイザーによる音作りの基礎は、Abletonが制作したWebサイト「Learning Synths」が初学者にもわかりやすく、ブラウザ上にシミュレートされたシンセを操作しながら様々な音作りに挑戦できる直感的なコンテンツでオススメです。（音楽を組み立てるための理論ではなく、純粋な音作りにフォーカスしたコンテンツになっているので、ドレミもわからないのに！という方でも安心してください）

Tapのサウンドデザイン

筆者がデザインしたSND01 "sine"は、できるだけインタラクションにカラーをつけず、できるだけ無機質なものをつくろうと考え、シンセサイザーを利用して「純音」と呼ばれる倍音成分が存在しない正弦波（ピーッという信号音です）をベースにつくることにしました。

まず、SNDのサウンドアセットのうち、一番基準となる音である「Tap」から作り、そこから様々なバリエーションを派生させていくことにしました。

Tapは、上記のUIサウンドの役割整理でも定義したように、ユーザーによる画面のタップをソフトウェア側が認識している時に出す音ですので、ある意味この音の響き方が、UIを適応するサービスの物的特性を印象づけるものになります。通常はそのUIの素材、薄さ、質量などなどをイメージしながらつくっていきますが、今回は様々なUIに適応されることを想定したアセットなので、UIの物的特性はあまり意識せず、上記でまとめた「役割と音響的特徴」をベースにチューニングしていきます。

Tap音は画面をタップした時にひとまずそのインタラクションをソフト側が認識した時に鳴らす音を想定していますので、場合によっては頻繁になることになります。そのため音としての持続時間が長いと音が重なってしまうため、非常に短い音が好ましいと考えました。イメージとしてはスマホやタブレットのガラスの表面を爪でコツコツと叩く音のイメージですね。

音の高さ（周波数）ですが、ある程度ざわざわした環境においても比較的聴き取りやすいよう、声などに比較するとかなり高めの1300Hzとしました。この高さの音は持続音だと「キーン」という深いな聴感になりますが、短い音であればそれほど不快な感じはしません。まさにガラスの表面をコツコツと叩いたような質感の音になります。そこで、アンプパートでは音の立ち上がりは0ms、音が減衰する時間を15msecと、非常に短い時間に設定しました。

あとは味付けですが、正弦波のままだと少し硬さが強い印象をうけたので、半分の周波数の正弦波を掛け合わせることで音を少しだけ揺らしてあげることで響きを若干濁らせました。

また、Tap音はUIによっては頻繁に鳴る音であるため、毎回音色に変化が出ない程度の微妙な変化を加えたバリエーションを用意してランダムに鳴るようにしています。これはSNDのアセットの特徴の一つです。

キーボードのタイプ音ってどのキーも同じ音が鳴っているように感じると思うのですが、実はキーの押し込み方、キーキャップの大きさ、キーの耳からの距離などによって、常に音が揺れています。それによって、一定の速さでキータイプしても同じ音がずっと鳴り続けることなく、不快感が軽減されています。

これと同様に、一度デザインしたTap音のピッチや減衰時間の微調整や、発生した音の特定の周波数帯の信号を大きくしたり小さくしたりするイコライジングと呼ばれる処理を行うことで、微妙な変化を加えて、5つのバリエーションを用意しました。

Active Buttonのサウンドデザイン

次に、ボタンなどの何かしらの機能を与えられた要素に触れたことをフィードバックするために鳴らす音「Active Button」のデザインです。

この音は、Tap以上に、ボタンを明確に「押した」という手触り/質感を感じさせる音にしたいと考えました。そこで、音の合成方法はTapよりももう少し複雑に、ピッチに時間的変化を与えることにしました。

ボタンのイメージとしては、少し弾力のあるボタンのようなものを考えました。反発のあるボタンは多くの場合、押し込むとじわじわとへこみ、いわゆるアクチュエーションポイントと呼ばれる一定の力を超えるとボタンが一気に押し込まれ、ボタンがアクティベートする機構になっています。

この機構をヒントに音をデザインしていくわけですが、ボタンという皮膜の奥にある不可視の機構の音をデザインする（例えばカチャンという音など）というよりも、皮膜そのものの動きによって音が発生するとするとどんな音かをイメージしながらデザインしました。

アクチュエーションポイントに至るまでは皮膜の動きは遅いので、よってその振動によって発生する音は低く、アクチュエーションポイントに至ったタイミングで一気に皮膜が押し込まれることでより大きく早い振動（高い音）になるというイメージです。

ここではピッチエンベロープというピッチの時間的変化をオシレーターに対して指定します。これによってアンプ部で指定する音量の時間的変化と同様に、周波数の変化を指定します。

すると「ペコン」という感じの弾力がある音が作ることができます。このピッチ変化のカーブの指定の仕方によって様々な質感をデザインすることが可能です。また、ベースの周波数を高くしたり低くしたりすることでも味わいが変わります。今回は少し低めの音にしました。

また、Active Buttonには、Tapのように音のバリエーションを用意することは意図的にしませんでした。Tapに比べると鳴る頻度が少ないということと、ボタンが提供する機能が同じことを音でも担保したいと考えたためです。（個人的には、何か重要な機能を持つボタンを押し込んだ時、少しだけいつもと違う音が鳴ると不安になる気がするので…）

Toggleのサウンドデザイン

最後に、トグルスイッチやチェックボタンといった、明確に「オン」の状態と「オフ」の状態を切り替えるスイッチに割り当てることを想定した音のデザインについてご紹介します。

ベースのサウンドデザインはTapとほぼ同じアプローチで、違いはTapよりもより澄んだ感じを出すために、あえてモジュレーションは使わずに正弦波そのままの音にしているくらいです。

一番の違いは、オフからオンに切り替えたという音と、オフからオンに切り替えたという二つの状態変化を音で伝えるために、音を2音にして、低い音→高い音、高い音→低い音という組み合わせをつくったことです。

例えばエレベーターホールでエレベーターを待っている時にエレベーターが到着するチャイムの音も、低い音→高い音になっていると上の階行きのエレベーター、高い音→低い音になっていると下の階行きのエレベーターというのを音で表現している場合がありますが、これと同じメカニズムです。

このように音の工夫だけでもユーザのインタラクションを補強することができるのもサウンドUIの利点の一つだと思います。

まとめ

筆者がデザインしたSND01"sine"の場合は、このようにシンセサイザーを利用して様々なUIの仮想的な振る舞いを音でモデリングしながらデザインしていきましたが、もちろんUIサウンドのデザインアプローチはこのようなアプローチだけではありません。

SNDで配布しているもう一つのサウンドアセットであるSND02 "piano"では、音楽家の谷口綾子さんにご協力いただき、生のグランドピアノから発生する調性音（音階）/非性整音（ノイズ）をそれぞれのUIの振る舞いに振り付ける形でデザインされています。

SNDのサイトでは、アセットを切り替えてインタラクションの質感の違いを確かめることができるようになっています。SND01の無機質でシンプルな質感と、SND02の澄んだリッチな質感、音を切り替えることで、UIの手触りが大きく変わることを実感いただけると思います。

UIサウンドは、インタラクションを補強するだけではなく、UIの持つ質感や世界観を補強する側面もあります。それぞれに割り当てられた役割と、想像力によって様々なデザインが考えられると思います。例えばSF映画のようなハイテクなUIには、サンプリングした機械音や、シンセサイザーによるビープ音を組み合わせることでいかにもSF的なUIサウンドをデザインするというのもアリですし、木目調のスキューモーフィーズム的なUIであれば、実際に木を叩いた音をサンプリングして加工したり、木管楽器などをシミュレートできる物理シミュレーションシンセを利用した音作りなども相性がよさそうです。

例えばカメラのシャッター音による使用感の変化や、エンジン音による車やバイクの乗り心地の変化と同様に、普段使うものだからこそ、感性的な部分で今後UIサウンドがより重要になってくると考えています。

サウンドデザインは、ビジュアルデザイン同様非常に奥深い世界です。アプリやサービスのCX向上の一環として、ぜひこの機会にサウンドUIの導入を検討してみてはいかがでしょうか。

---------

土屋 泰洋
クリエーティブ・テクノロジスト／リサーチャー

プロダクト・サービスの研究開発、コンサルティング、ウェブ・アプリ制作、空間設計、イベント・ライブ演出など様々な領域の業務に従事。テクノロジーへの深い理解に根ざしたテクノロジストならではの企画と、クラフトにこだわった細やかなディレクションを得意とする。主な仕事に、数年先のビジネスやものづくりのビジョン形成をサポートするマガジン「THE TECHNOLOGY REPORT」責任編集、UIサウンド・アセット「SND.DEV」クリエイティブディレクションおよびサウンドデザインなど。

------
Dentsu Lab Tokyoは、研究・企画・開発が一体となったクリエーティブのR＆D組織です。日々自主開発からクライアントワークまで、幅広い領域のプロジェクトに取り組んでいます。是非サイトにもお越しいただき、私たちの活動を知っていただけると幸いです。

現在noteでは個性豊かなメンバーが、興味があることや好きなことを執筆する連載をお送りしています。多種多様な集団の頭の中を、ちょっと覗いてみてください。