loading...

サウンドデザインから考えるCXNo.1

UIサウンドから考える「プロダクトの官能性」

2022/06/03

この 連載では、「音」というメディアにフォーカスした電通のさまざまな取り組みをご紹介していきます。

音によるコミュニケーションというと、ぱっと思い浮かぶのは電話やラジオでしょう。テレビや映画、ゲームにも音声はついていますが、あくまで「画面の情報を補助するもの」という認識の方も多いかもしれません。

しかし、昨今の情報環境の変化を眺めてみると、実はあらゆるコミュニケーションにおいて、音の重要性が高まってきているのです。

今回は、Dentsu Lab Tokyo 土屋泰洋が、過去から現在に至るUI(ユーザーインターフェイス)とサウンドデザインの関係をひもときます。

“UIサウンド”  がデジタルツールにもたらす官能性とは?そして、UIサウンドを無償提供するプロジェクト「SND」(エスエヌディー)の狙いとは? 

SND
SND https://snd.dev/
アプリやサービスのUIに応じた28種類1パックのサウンド・アセット(素材)とjavascriptによるライブラリを、UI/UX開発者向けに無償で提供。現在、第1弾としてDentsu Lab Tokyo 土屋泰洋によるSND01“sine”と音楽家、谷口彩子氏によるSND02“piano”が公開中。
<目次>

音によるコンピュータとユーザー の関係性のデザイン  

UIデザインのトレンド変遷、そしてサウンドUIによる新しい体験へ 

「音」と「感触」の組み合わせが生み出す、インターフェースの官能性 

「SND」からはじめる、サウンドデザイン×CX 

 

音によるコンピュータとユーザーの関係性のデザイン

まずは簡単に「UIとサウンドの歴史」を振り返ってみましょう。

ゲーム機やテレビ画面向けのUIでは、比較的早い時期から「音によるフィードバック」が採用されていました。ゲームでは世界観の演出のために。テレビの場合は、赤外線リモコンの反応速度が遅かったため、「ユーザーの操作がプログラム側にしっかり伝わった」ことを伝える音を出す必要がありました。

ウェブサイトのUIはどうでしょうか。かつてリッチなウェブ表現を可能とするFlashコンテンツが全盛だった頃、多くのウェブコンテンツが「音のフィードバック」を採用していました。コンテンツの世界観を演出するBGM、マウスオーバーされたことをユーザーにフィードバックするホバー音、クリック音など、さまざまな「音」による演出が行われました。

しかしその後、ウェブ閲覧の主流がスマートフォンに移ると、ユーザーは屋外で音をミュートした状態で使うことが増えたため、ウェブコンテンツにおいて音のフィードバックはあまり採用されなくなっていきました。

そして現在、スマートスピーカーや完全ワイヤレスイヤホンの普及により、ユーザーとコンピュータ間のインタラクションの手法として、再び「音」に注目が集まっています。オーディオブックやPodcast、「Clubhouse」「Twitter Spaces(スペース)」のような音声ベースのサービスも人気です。

また、今後さまざまな活用が期待されるVRにおいてもサウンドは重要なデザイン領域です。VR空間でのUX設計は、ユーザーがどこを注視しているのか分からないため、うまくユーザーの視線を誘導する必要があります。

そのため、優れたVRコンテンツでは、音の定位(音が聞こえてくる方向)や、インタラクションに連動する音色などを用いて、ユーザーが何をしていいか分からなくならないよう、周到にUXがデザインされています。

SND
Metaが開発するVRミーティングアプリ「Horizon Workrooms」では、話者の場所によって声が聞こえる場所が立体的に変化するなど、サウンドデザイン上の工夫が多くなされている。

そして筆者自身の生活を顧みても、コロナ禍でリモートワークが中心になり、ヘッドホンをつけて仕事をすることが多くなりました。

その結果、メールやグループウェアの通知音をはじめ、それまであまり気にしていなかった、さまざまなサービスにおけるサウンドデザインを意識するようになったのです。

このように、生活の中で「音」の重要性が高まる中、改めて音によるユーザーとコンピュータの関係性のデザインについて考えてみたい、と思ったのが、「SND」のプロジェクトをはじめたきっかけでした。


UIデザインのトレンド変遷、そしてサウンドUIによる新しい体験へ

ここからは、UIの、主にビジュアル面でのトレンド変遷を駆け足でご紹介しながら、今筆者がUIサウンドに注目する理由について考えてみたいと思います。

①物理的なスイッチやボタンを模した「スキューモーフィズム」

「スキューモーフィズム」は、スマートフォンやタブレット登場後に登場したデザイン手法です。物理的なスイッチやボタンのないフラットなタッチスクリーンでは、その特性上、ユーザーのインタラクションに対するフィードバックの多くを「視覚情報」に頼らざるを得ません。そこで、スマートフォン黎明(れいめい)期のUIデザインにおいては、物理的なスイッチやボタンを模倣したようなデザインが多く採用されました。

SND
スキューモーフィズムは、元来GUI(Graphical User Interface)が実物のUI要素を直接的に表現することは 踏襲しているが、画面解像度があがったことで非常に精巧なデザインのものが登場した。画像は初期iOSにおけるスキューモーフィズムデザインの例。「メモ帳」は実物のノートパッドを、「ボイスメモ」は実物のマイクを模したデザインになっていた。

これはかつて、ろうそくが電球に置き換えられた時期に、「燭台の形をした電球ソケット」が多く作られていたことと同じ現象で、新しい技術への移行期では、「前の時代における同じ役割を持ったもの」をUIのモチーフにすることで、ユーザーの理解を早めることができる、という考え方をベースにしたデザイン手法です。

②タッチUIがコモディティ化すると、トレンドはシンプルで洗練された「フラットデザイン」へ

その後、タッチインターフェースが十分に一般化した現在においては、UIデザインのトレンドは「フラットデザイン」に移行しました。スキューモーフィズムとは異なり、現実のボタンなどを模倣せず、「シンプルな色のついたシンプルな図形」をベースにデザインする方法です。皆さんのスマホアプリなどでもきっと見慣れていることでしょう。

SND
iOSのメモ帳、ボイスメモともに実物のデバイスなどを模した意匠は削られ、レイアウトとカラースキームで操作可能なボタンなどが示されるフラットデザイン化された。

タッチインターフェースが浸透するにつれ、ユーザーはフラットなスクリーン上でも、「これはボタンである」と経験的・感覚的に分かるようになりました。

そこで、必要のない装飾を排して、UIデザインとして独自のデザインを洗練させていった結果、このようなスタイルが定着したわけです。建築におけるモダニズム的な動きといえます。

しかし、フラットデザインは視覚的には文字通りフラットで、どのボタンも同じようなボタンに見えることが多いため、タッチインターフェースに不慣れなユーザーには分かりにくいという問題はありました。

③フラットUIを微細なアニメーションで補強する「マイクロインタラクション」の登場

そこで、最近ではフラットなUIに微細なアニメーションをつけることで、ユーザーのインタラクションの感覚を補強する「マイクロインタラクション」と呼ばれるトレンドが出てきました。

画面上で押せないボタンを押した時にはボタンがブルブルッと震える。あるいは、ノートアプリで新しいノートを作成するときに、画面右上の「+」というボタンを押すとそのボタンが画面全体を覆うように広がり、1レイヤー上に新しいメモシートが広がったように感じさせたりする。こうした、細かなアニメーションによって、フラットデザインであっても、インタラクション可能な要素や、階層構造を認識しやすくする手法です。

SND
例えばTwitterでは、入力中の文字数に応じてTweetボタンの横の円形のゲージが変化していき、残り文字数が少なくなると1文字ずつカウントダウンされるアニメーションが表示される。また、140文字をオーバーするとゲージが赤くなるとともにTweetボタンの色が薄くなり、Tweetできないことをユーザーに明示するなど、さまざまなマイクロインタラクションが盛り込まれている。

④今後のインタラクションは「UIサウンド」が重要に?

そして今後ですが、個人的には、マイクロインタラクションと同様のアプローチで、「UIサウンド」が重要になってくると考えています。

人間は従来、複数の感覚よって情報を認識しています。インタラクションに対してフィードバックを提示する方法としては、視覚だけではなく、聴覚、触覚などを利用するなど、さまざまな手段が検討できるはずです。

エレベーターを想像してみてください。行き先のボタンを押すと、カチャリという音とともにライトが点灯します。これがもし、ボタンを押し込む感触もなく、ランプも点灯しなかったら、行き先の階に止まってくれるのか心配になってしまうでしょう。

このように、「ユーザーがインタラクションをおこなったとき、システムから何らかのフィードバックが得られる」ことは、安心感をもたらします。この「インタラクションに対するフィードバック」が、UIデザインでは重要です。

触覚的なフィードバックについては、ゲーム機のコントローラーなどに用いられてきた「ハプティクス技術」(振動子などによるフィードバックを行う技術)が、最近は多くのスマートフォンにも搭載され、UIのフィードバック演出としても使われるようになりました。

一方で、聴覚的なフィードバックについては、スピーカーはどのようなスマートフォンやデバイスにも基本的に搭載されているのですから、活用しない手はありません。エレベーターの例を思い出してください、スイッチを押した時に、手の感触とあわせて「カチャリ」という音がすると、より安心感がありますよね。

SND
初期のiPodには大量の音楽ファイルをブラウズ(流し見・拾い読み)するためにクリックホイールと呼ばれる物理的なインターフェースが用意されていた。指でホイールを回転させるとカリカリと音が鳴ることで、ファイルのスクロールやメニューの遷移が直感的に分かるようにデザインされていた。

今後は視覚的な情報や導線設計だけではなく、聴覚や触覚といったさまざまな感覚を組み合わせてデザインすることによって、五感を使った  使い心地の良さをデザインしていくことが重要になっていくと考えています。


「音」と「感触」の組み合わせが生み出す、インターフェースの官能性

筆者がこのように考えるようになったきっかけは、実はリモートワークの間に、自宅の作業環境を快適にする一環として、PCキーボードにハマったことでした。

最近のラップトップPCに付属しているキーボードの多く使われている方式のひとつ  は、「メンブレン式」と呼ばれるものです。「キーキャップ」と呼ばれる文字がプリントされたパーツと、キー入力を認識する基盤の間にゴムの皮膜が挿入されており、ゴムの反発によってキーを「押し込む感覚」を作り出すというものです。ゴムのため、キーを押し込んだ時の音はあまりせず、「ペチペチ」「ムギュムギュ」といった使用感が特徴です。

一方、「メカニカル式」と呼ばれる方式のキーボードもあります。キーキャップの裏にゴムではなく、プラスチックとバネでできた物理的なスイッチが入っており、メンブレン式に比べると、しっかりとキーを押し込む感覚があります。そのため入力判定にシビアなゲーマー向けキーボードなどに多く採用されています。使っていると、昔ながらの「カチャカチャ」「カコカコ」という音がして、独特の爽快感があります。

SND
メカニカルキーボードはキーキャップの下にこのようにたくさんのスイッチが並んでいる。このスイッチによって押し込む感触や音が変化する。

PCキーボードは、非常に奥深い世界です。バネの強さや、プラスチックパーツ同士の摩擦具合、潤滑剤の種類、基盤を固定するプレートの材質などによって、使用感に大きな差が生まれます。

使用感とは、つまり「音」と「感触」のバリエーションです。同じ「感触」であっても、プレートの材質を変えたり、基盤とキーキャップの間にゴム素材を挟んだりすることで「音」が微妙に変化し、その結果「使用感」が全く変わります。これほど変わるのか!と驚くほどです。

図らずも、キーボード沼に片足をつっこんだことで、UXにおける「音」の重要性に気づくことになりました。

送信ボタンを押す音がすごく気持ちいい音だったら?
通知音が心地いい音だったら?

プロダクト/サービスとユーザーの関係性は、今よりももっとずっといいものになる可能性があるのではないでしょうか。

万年筆やノートがそうであるように、デジタルツールもまた、毎日使うものだからこそ、言語化できない気持ちよさ・心地よさがユーザーとブランドをインターフェースするものとして機能し、ブランドの価値を左右するようになってきているのではないかと感じます。

つい触ってみたくなるか、つい手元に置いてしまうかどうか。これはいわば「官能性」とでもいうべきものです。

SND
元来、ボタンやツマミなど人の手が直接触れるインターフェースは、つい触りたくなるような官能性(≒アフォーダンス)をまとっている。

“UIサウンド” について考えること、それはフラットデザインの普及とともにどんどん記号的になっていくユーザーインターフェイスに、物理的な道具がまとっているような「官能性」を取り戻すことにつながるかもしれません。


「SND」からはじめる、サウンドデザイン×CX

こうした考えをベースにしながら、電通CXCC /Dentsu Lab Tokyoでは、「SND」をスタートさせました。主にUI/UXデザイナーを対象にしたウェブサイトで、これをきっかけにインタラクション・デザイン領域におけるサウンドデザインの議論が活性化することを期待しています。

SND
SND https://snd.dev/
アプリやサービスのUIに応じた28種類1パックのサウンド・アセット(素材)とjavascriptによるライブラリを、UI/UX開発者向けに無償で提供。現在、第1弾としてDentsu Lab Tokyo 土屋泰洋によるSND01“sine”と音楽家、谷口彩子氏によるSND02“piano”が公開中。

 「ボタン」「トグルスイッチ」「フォーム」「モーダルウィンドウ」など、さまざまなUI要素に対応したサウンドを28タイプにまとめ、無償配布しています。これらのサウンド素材はオープンソースライセンスとして、商用/非商用関係なく自由に利用可能で、普段あまりコードを書かない人でも、最小限の作業量で“UIサウンド”の実装が可能です。

SNDは、CXの中でも、ユーザーとブランドのデジタル上での接点となる「UI領域」のサウンドデザインに注目した取り組みとしてスタートしました。しかし、サウンドの可能性はUI領域にどどまりません。CMなどでの音の重要性はいうまでもないですし、あらゆる顧客接点で音を効果的にデザインすることが、ブランド価値を高めていくことにつながります。

例えば、車のドアが閉まる音。カメラのシャッター音。バイクのエンジン音。こういった音は、プロダクトの手触りを補強するとともに、重要なブランドアイデンティティにもなり得ます。そしてサウンドデザインとは、同時に環境のデザインでもあります。音を出すときに、それが環境の中でどのように響くか、それがどのように私たちの音風景を変えてしまうのかにも注意を払っていく必要があるでしょう。

Dentsu Lab TokyoではSNDをはじめ、サウンドデザインによる新しいコミュニケーションのあり方を研究していきます。音に関するR&Dプロジェクトのご相談など、ぜひお気軽にお問い合わせください。
snd-contact@dentsu.co.jp

SND