オーディオとHapticによる体験をデザインする

(音楽) (拍手)

(iPhoneのバイブレーションの音) 聞き慣れた音ですね もはや生活の一部です この体験を改善させる時です 私はインタラクションデザイナーの カミーユ･ムセ 私はサウンドデザイナーの ヒューゴ･フェルヴァイです サウンドと触覚の設計について お話しします このセッションで インスピレーションと サウンドと触覚を使った設計の 実用的なアイデアを得てください 正しく使えば 斬新なアプリケーションが作れます

私たちが話すトピックは３つです まず サウンドと触覚の体験の 基礎について 次に その体験を設計する際の原則を ３つ紹介します 最後に サウンドと触覚の 効果的な組み合わせの― 事例や コツを紹介します

サウンドと触覚を使った設計とは？ まず音を聞いてみましょう

(高音再生) この音を低くします (音再生) もっと低くすると… (音再生) 低すぎて聞こえなくなりました 人の耳には聞こえない音域です しかし スピーカーに指を当てれば 振動を感じます

Taptic Engineの目的は 触覚でしか知覚できない低音域を 再生することです これがiPhoneのTaptic Engineで 隣はスピーカーモジュールです

Taptic Engineが伝える触覚は スピーカーが発する音と同期しています

その結果 生まれるのが 聴覚と触覚が結びつく体験です 触覚は体感するものですが 今はスクリーンで見せるしかないので 想像力を働かせながら 話を聞いてください 触覚を伝えたい時は このようなイメージをお見せします

または触覚に似た こういう音を再生します (低いノックの音) 音に合わせ 視覚イメージも表示します また カミーユから “予告”の設計についてもお話しします

iOS 13から 触覚をカスタムで 設計できるAPIが導入されました Core Haptics APIです

このAPIで iPhoneのTaptic Engineを フル活用できます

Taptic Engineは 幅広い体験を演出できます カスタムのバイブレーションも作れます 例えば こういうサウンドと触覚です (ブーンという音)

今日は こういう波形と音で 触覚を表現します ヒューゴが言ったように これは触覚だと思ってください 聞く音でなく 感じる音です

こういう継続的な触覚の他に― 短く 詰まった触覚も作れます

波形１回分の いわば単発的な体験です 先ほどの触覚より瞬間的で 打撃やタップのような感じです

(マイクをたたく音) 瞬間的ですね この２種だけでなく― さらに複雑な触覚も作れます 触覚パターンの表現には 波形以外も使います 単発的な体験は長方形で表します Taptic Engineは秀逸な部品なので 様々な調節が利きます まず 振幅 つまり強さを調節できます

丸みのある 柔らかい感覚を作ることも可能ですし

歯切れのいい 明瞭な感覚も作れます 全部 Taptic Engineでできます

以上 サウンドと触覚の体験と Core Haptics APIの 基礎についてお伝えしました まず 強さという尺度が調節可能で 触覚的な鋭さという側面も 設計によって制御できます 継続的か単発的かという区別もあります

次に 触覚体験を設計する際の原則を ３つ紹介します

第１に因果関係 第２に調和性 第３に実用性です この３つの原則を基にして―

Appleでは設計を行います 皆さんのアプリケーションにも 役立つと思うので 例を挙げながら 私たちの考え方を説明します では始めます

まず因果関係 何によって事象が起きたか 明確でなければ無意味です

例えばサッカー選手がボールを蹴る時 得られるのは どんな体験でしょう？ (鋭い打音) この複数の知覚情報には 明らかな因果関係があります ボールに当たる足が見え 音が聞こえ 振動を感じるからです 音や触覚などの総合的な体験は この出来事に関わる事柄の 性質によって決まります 靴やボールの素材にもよりますし―

蹴りが強いか弱いかという 動きの力学的な側面も関係します スタジアムやフィールドの音響という 環境要因もあります この自然な組み合わせに 慣れているので 音が違ったりすると ひどい違和感を覚えます 極端な話 このような音なら？

(ガラスが割れる音) ものすごく変ですね フィードバックを設計する時は それらしい触覚と音にしてください 想像し得る限り 自然な感じにするのです

Apple Payの決済体験を作った時 チェックマークの動きと完璧に合う サウンドと触覚を追求しました

まず考えたのは― 支払い行為から連想する音です お金のサウンドとは？ また Apple Payを使った支払いに 関することでは 画面のチェックマークの動きも 大事です 決済が成功したという 肯定的な感覚が欲しいです

決済音と触覚の試作例を いくつか紹介します

１つ目は…(高音) 陽気ですが やや能天気すぎて不真面目です ２つ目はチェックマークの動きに ピッタリでした (ベルのような響き) しかし音質が 少しキツいように感じたのです そして最終的に選んだのが 皆さんもご存じの こちら 真面目すぎず 明らかに完了した感じです (ガラスのような響き) これでサウンドは完成したので 次は触覚です 最初は 音の波形を模倣すれば 完全に適合すると考えました しかし いくつか試した結果 軽いタップ２回が好印象でした

この作業は ２つの音を使う ささやかな作曲だと考えます 聞こえる音と感じる音です この２つは 性質が異なっても 構いませんが 再生のテンポは一致すべきです 低音が触覚だと想像しながら 聞いてください (ガラスのような響き)

では チェックマークの動きと 一緒に見ましょう 手に響く触覚を 想像しながら見てください

(ガラスのような響き)

次は第２の原則 調和性についての話です ここで言う調和性とは 触覚 視覚 聴覚の一致のことです

実世界では―

聴覚 触覚 視覚が おのずと調和しています 因果関係があれば調和するのです

デジタルの世界では これを人為的に調和させます 追加的なプロセスで 新しい体験を作るわけです

インプットとアウトプットを デベロッパが設計せねばなりません 例えば こういう 単純な視覚インターフェイスがあります

球体が落ちてきて 画面の下辺に当たりました

これに音を追加しましょう

(こもった 弾む音) この音も設計しました 弾む球体にふさわしい音を 選んだのです 短く明瞭で 歯切れのいい音を― 下を打つ速度に合う強さにしました

さらに３つ目の 触覚フィードバックを足します

(こもった 弾む音) 手に響く触覚も 一緒に想像しましたか？ 画面の下辺を打つ球体と調和するように 触覚を設計します 単発的で 比較的鋭いイベントを選び 弾む速度に合った強さに調整します そして 仕上げに―

３つの感覚を同時に刺激するよう 設計することが大事です

３つが同期することで 弾むボールを見たかのような 錯覚が起こるのです このルールを破り 視覚だけ 早めた例をお見せしましょう (こもった 弾む音) 調和が崩れたので 弾むボールを 見た気にはなりません 厳密に設計しないと 調和は損なわれます しかし丁寧に作れば 魔法のような効果が生まれます

視覚 聴覚 触覚の相互作用や 全体の振る舞いが調和した例を いくつかご紹介します この緑色の円を これから動かします どういうサウンドや触覚が合うか 考えてみてください

素早い鼓動や― ゆっくりした明滅

それぞれ どんな音や触覚が 合うでしょうか または 大きな円だったら― 小さな円の時と 違う音がするでしょうか

動作や エネルギーの状態が 違ったらどうでしょう？ 注意を喚起するような 切迫した脈動をしているなら― 音や触覚を変えましょう 心拍のように落ち着いた動きなら 別のフィードバックが妥当です 動きのペースや エネルギー状態や アプリケーションの 他の要素も考慮してください 一貫性のある 統一的な フィードバックを設計するのです

Apple WatchのDigital Crownの サウンドと触覚を設計する際に 調和性を生かした経験を紹介します 誰もがスマートフォンの バイブレーションに慣れたあとに Taptic Engine搭載の Apple Watchが発売されました サウンドと触覚を厳密に合わせられる 初のデバイスでした Series 4では Digital Crownを回すと 触覚と かすかな音が発生します

カミーユが冒頭で紹介した 鋭い触覚は― Crownの回転で使ったものです しかしCrownが小さいので 振幅を弱めて 手首でなく Crownを回す指にだけ 触覚が伝わるようにしました

サウンドは 伝統的な腕時計の製造法に ヒントを得ようと あらゆる腕時計の音を聞き 録音しました こういう すてきな音もありました (速いチクタク音) 他に 実世界にある機械音も いくつか集めました 例えば自転車のハブの音です (速いカチカチ音) Apple Watchらしいサウンドを 見つけるためです 音を作り始める前に こうしてヒントを集めました

結果的に作ったこの音は 非常に静かで いかにも腕時計らしくできました (規則的なクリック音)

サウンドと触覚が 絶妙に呼応していて 竜頭を回している気になれます

アニメーション設計チームも この機械のような感覚を採用し 画面の回り方が サウンドと触覚に合うように変えました (速いクリック音) 触覚を視覚化した Crown部分にご注目を (速いクリック音)

明瞭で機械らしい触覚が生まれ 視覚や聴覚とも 完璧に調和した体験となります

そして３つ目の原則は 実用性についてです 聴覚と触覚のフィードバックを 追加するのは アプリケーション体験が 確実に向上する時だけにすべきです

節度を守り むやみに追加してはいけません

この点を説明する ARKitアプリケーションを作りました

バーチャルなタイマーの アプリケーションで 対象物との距離により インタラクションが変わります まずは見てください

(速いチクタク音)

(速いチクタク音)

ARインタラクションと ユーザ体験を補足するように フィードバックが設計されています タイマーが寄ったり離れたりすると 聴覚と触覚の体験が変わる仕組みです ３つの知覚に 一貫性と統一感があります 他の効果音や触覚は 追加しませんでした 他の要素とのインタラクションは 省いたのです

サウンドと触覚が余分な時も よくあります まずアプリケーションで フィードバックが欲しい箇所を探し 体験を高めたり 重要なことを 伝えたりする要素にだけ使うのです いろいろ足したくても控えましょう やりすぎるとユーザは圧倒されますし 要点がかすみます

改めて 体験を設計する際の原則を まとめます まず因果関係です サウンドと触覚を結びつけるのです サウンドと触覚と見た目が 調和すると すばらしい体験が生まれます そして 実用性です アプリケーションを使う 人間の視点から 体験を考えるのです

次は 実用的な事例やコツを 紹介します サウンドと触覚を組み合わせ いい体験を作り出すのです

第１に Core Haptics APIで使う 基本要素の話です

基本要素の選択肢は２つ まず 単発的な体験です 鋭く詰まった触覚体験で 打撃またはタップのような感じです または 継続的で持続的な 体験も選べます 持続時間は任意に決められます

単発体験の中で デベロッパは ２側面を制御できます 強さと鋭さという２つの側面です 鋭さを抑えれば 丸く柔らかい感覚になります 逆にすれば 機械らしく明瞭で 歯切れがよくなります 強さを変えれば 体験の振幅が変わります

継続体験でも 同様の２側面について設計します 鋭さと強さの２つです 有機的で不規則な感触が続くような 継続体験も作れます 鋭さの値を上げれば 機械らしく明瞭になります

Core Haptics APIでは 他にもいろいろできるので オンラインドキュメンテーションを 見てください

サウンドは 触覚に一番合うものを 作ってください 鋭く単発的な触覚には 短いチャイムの打音が合います (チャイムの打音) しかし なめらかなサウンドには 同じ触覚を使わない方がいいでしょう (ゆっくりした和音再生) こういう音には― 緩やかに増減する触覚が合います (ゆっくりした和音再生) 厳密なルールはないので いろいろ試す余地はあります たまに 第一印象と正反対の触覚が 適している場合もあります Apple Watchのアラームは まさにそんなケースでした (ベル音のアラーム再生) このサウンドには― 同じような触覚を加えると 合いそうです

(ベル音のアラーム再生) これでいいですか？ 試しに タイミングを逆にしたら どうでしょう

(ベル音のアラーム再生) 何かを予感させるように 触覚を徐々に強めて切り 直後に音を再生します するとサウンドが触覚への応答となり 因果関係ができます

Apple Watchのアラームの 成功例でした

次は 連続して起こる複数のイベントが 様々な体験を伝えるケースです 例えば こういう単発的な ４つの触覚体験では たまに１つ目を感じない人がいます 自覚しないのです

(打音４回再生) 彼らは 今の４タップが ３タップに感じると言います これは意外と チャンスかもしれません 無意識にしか感じていない１つ目を “予告”として使えるからです

watchOS向けに 他社が作ったアラートで このようなサウンドと触覚がありました (アラーム再生) 重要な通知なので ユーザが確実に はっきり気づくようにしたいものです 私たちなら 触覚が意識されない現象を 逆手に取り― 呼び水を与えます 触覚で注意を喚起し 本体のアラートに備えさせるのです 聞いてみましょう

(アラームと打音再生)

こうすることで 重要な通知を明確に提示し ユーザに確実に伝えます

よく似た体験を 触覚で区別することもできます

watchOSのナビゲーションで 左を示すサウンドは このような音です

(木製風鈴の音再生)

調和性の原則に従って― サウンドに合いそうな触覚を 組み合わせました ２回のタップとサウンドを合わせると こうなります (木製風鈴の音再生)

そして右を示すサウンドは― 左と似ていますが 少し違います (木製風鈴の音再生) 左と右のわずかな違いに 聴覚では気づけますね しかし 調和性の原則に従うなら― 左右で 同じ触覚パターンを 使うことになります そこで私たちが どうしたかというと― 右は 触覚の回数を倍にしました これで左右がはっきり区別できます 右を示すサウンドと触覚を 再生しましょう (木製風鈴の音再生) よく似た聴覚体験ながら 左右を区別できました

独自の体験を作る手段が だいぶ増えたと思います 締めくくりにもう１つ 例を見せます メッセージの フルスクリーンエフェクトです (急降下の音再生) (花火の効果音) サウンドと触覚が アニメーションと同期し 心躍る瞬間が生まれます もう１回 見ましょう (急降下の音再生) (花火の効果音) まだ試していないなら― ご自分のiPhoneで 触覚つきで体験してください

最後に 今日話した原則に加えて いくつか考慮すべき点をお伝えします

聴覚 触覚 視覚の設計を 連携させてこそ 最高の効果が生まれます 動きを作る人は― サウンドインタラクションデザイナーと 協力してください 統一的な体験を生むためです

あなたのアプリケーションを 初めて使うユーザに 何を聞き 感じてほしいですか 100回使ったあとでも― そのサウンドと触覚が 役立ちますか？ むしろ余計ですか？

自分で体験し― 不必要なものや無益なものは 外しましょう

積極的に実験して プロトタイプを作ってください 新しいことを試せば すばらしい体験にも出会えます

皆さんのアプリケーションを 視覚 聴覚 触覚で 味わう日が楽しみです セッションの詳細はこのURLで (拍手)