KINTO Tech Blog
Creative

KINTO Unlimited appのサウンドデザイン

Cover Image for KINTO Unlimited appのサウンドデザイン

はじめに

KINTO Unlimited appのクリエイティブを担当している中村屋です。この度、アプリにサウンドを実装することになったので、そのプロセスや考え方などをお話ししていこうと思います。

KINTO Unlimitedプロジェクトのビジネス担当の方から、アプリを継続利用するユーザーを増やすべく、「つい気持ちよくなって続けてしまうような音」を入れたりできないですかねと軽い相談(クリエイティブに完全にお任せ!)がありました。

サウンドを搭載したアプリは様々にありますが、なんかいい感じって思うアプリってサウンドも洒落てますよね?ここぞとばかりに「ほほう、あのサウンドデザイナー/アーティストに依頼して、、」と思ったのも束の間、オリジナルで作る予算はないよと。。大きく思い描いたのに残念。。

とはいえ、クオリティは譲れなかったので、品質が高いと言われるサウンドサービスを色々調べた結果、Spliceという有料サービス(https://splice.com/sounds)を利用することにしました。

メインの業務の傍らの案件かつ、経験があまりない領域ではありましたが、

  • 膨大にあるサウンドからどうやって選んで組み立てるのか?
  • サウンド実装までのデザインプロセスを知りたい
  • クリエイティブが開発にどう関わってんの?

と思う方はぜひ見ていってください。

Unlimitedのサウンド世界観は?

app_image

まずはディレクションです。

ここが後工程に大きく響いてくるキモとなる部分です。アプリのサウンド世界観を言語化し説得力のある進め方にすること、サウンドの検討に判断軸を持ち、膨大な時間をかけないようにするためにも必要です。

  • スコープを定義:実験的な実装という位置付けのため、最小単位での特定の一連の体験に実装します。ユーザー操作のフィードバックSE(Sound Effect)、BGMをターゲットとします。
  • Unlimitedのサービスは、購入後のクルマが、技術とともにアップグレードしていく新しいクルマの持ち方であり、そのキーワードは未来的・革新的・最適化・スマート・安心感です。その「らしさ」をサウンドに込めます。

ここから連想するサウンドは、「環境に溶け込みながらもモダンで心地よいデジタルサウンド」(仮説)でした。アイデアや表現の幅を狭めないよう、遊びが効くレベルで仮説コンセプトを立てていきます。心が落ち着く要素もありながら、クールでハリのある感じ、、とイメージを膨らませながらサウンドを検索していきます。

そしてすぐに、これではNGだと気づきます。音のプロでない者が感覚で選んだサウンド群が、調和の取れた一貫性のあるものになるわけがないと。しかし、、ありました!質を担保し、効率的な方法が。

Spliceにはサウンドパックが提供されていて、ゲームやUIなどのアプリ向けのパックがあったのです。そこで、モダンでSFの要素がありつつ心地よいテーマを持つサウンドパックを選び、サウンド候補を選んでいきます。そして、Adobe Premiere Proを用いてアプリの操作動画にSEを当てこみ、さらに候補を絞り込みます。

方向転換

完成度を高めず、早めにプロジェクトメンバーにバリエーションを聞いてもらって、方向性の意見をもらいます。基本はいいねという意見でしたが、「いいんだけど、もうちょっと俗的な感じの方がいいのかな?」という意見に目が止まりました。

アプリ・サービスに深く関わっているメンバーからの意見です。この感覚をクリエイティブが拾い上げ、言葉にできない違和感を解釈する必要があると思いました。

俗的=一般的、洗練されていない、ありきたりということですが、言葉通りに受け取らず、デザイン的に思考します。洗練された未来的なサウンドは適していない→ユーザーに提供する価値はそこではない→ビジョンよりもリアルなユーザーに寄り添い、共感を呼ぶべきであると解釈します。

冒頭の「アプリ継続利用促進のため」にもあるように、初心者向けコンテンツやゲーミフィケーションをベースにした施策などをアプリでは行ってきており、一方的な価値提供ではなく、リアルなユーザーにフォーカスした利用促進を行っています。

当初考えたコンセプトは間違いではないが、アプリコンセプトが緩やかに変化しており、それに伴ったアップデートが必要ということがわかりました。そこで、サウンドコンセプトを「最新の技術を親しみやすく、共に成長していく安心感のある体験の提供と再構築しました。
sound_concept

このコンセプトで再度サウンドを練り直したサンプルの一部がこちら。
https://www.youtube.com/watch?v=oeGNNqRJs50
自分の記憶にあるような親しみのあるサウンド、遊び心が効いてクセになりそうなイメージになったのではないでしょうか。

実装する前に

決まったサウンドデータをエンジニアさんに渡してあとはよろしく!では終わりません。ユーザー体験を形作る上で、ここからの設計フェーズも非常に重要です。

例えば、アニメーションの見せどころの視覚変化にサウンドが密接に同期するととても気持ちいいですよね(例:コインがキラッと光った瞬間に音が鳴る)。逆に、ここにズレがあると違和感が生まれ、ストレスを与えます。

また、ボタンを押した際に鳴るSEを考えた時に、押した瞬間0.00秒ジャストに鳴ると硬い印象になり、数十ミリ秒のわずかな遅延再生させるとより自然で洗練された印象になります。※テーマによって考え方が変わります。

このような考え方を取り入れて、どこで・いつ・どのように再生されるのかを、再現性を担保できるように仕様書にまとめます。(まずは、フィジビリを考えすぎずユーザー体験の理想として落とし込んでいきます)特にサウンドの専門アプリではないので、専門的な概念まで踏み込まず、以下のように実装仕様書をまとめます。

  • 管理ID/サウンドファイル名/対象画面
  • 再生トリガー:「〇〇ボタンタップ時」「△△アニメーション表示時」など、どのようなユーザー操作やイベントで音が鳴るかを明記。
  • ループ再生の有無
  • 音量:BGMやキャンセル音などは抑えめになど、サウンドの意味や関係性を元に設計。
  • 遅延再生:この項目はトリガーを起点として再生のタイミングを調整できるので、トリガー内容が複雑になるのを防ぎます。
  • フェードイン:音の始まりの調整、SEとBGMの競合回避に役立てることもできます。
  • フェードアウト:BGMが突然途切れるのではなく、余韻を残して停止させると丁寧な印象です。
  • 備考:再生タイミングの意図など、疑問が生まれないように記載していきます。
    explanatory_note1.jpg

そして、データについてです。アプリがインストールされるデバイスはユーザーのもの、つまりユーザーデバイスに負荷をかけないよう、アプリ容量には気を配らなければなりません。以下のデータ仕様は最上位品質ではないものの、高品質なラインで定めています。

  • SE:WAV形式 または AAC形式*
  • BGM:AAC形式
    *重要なサウンド(ブランドSE)や頻度の高いSEはWAV推奨、200KB超え+1秒以上のSEはAACを検討
    AAC圧縮後の基本ライン:ステレオ音源256 kbpsの可変ビットレート(VBR)、サンプリングレート44.1/48kHz

SEは瞬間に再生される用途なので、データがそのまま再生されるWAV(非圧縮・最高品質)が適しており、AAC(圧縮)は再生にデコード処理が走るためほんの少し遅延が起きるようです。※近年のスマートフォンの処理では、プロ以外にはその差は感じられないと思われますが。

この他にもオーディオの割り込み、プリロード(事前メモリ読み込み)など事細かに定義しなければならないこともありますが、ある程度のところでプロデューサー・エンジニアさんと共有し、詳細を詰めていきます。よくわからないところは悩む前に知見のある人と一緒に前に進める、内製開発のメリットです。

おわりに

開発の内容としてはまだ続きますが、一つの区切りとして、ここまでとさせていただきます。

熟知しない領域でここまで進められたわけは、ChatGPTをはじめとしたAIの活用でした。必要な観点を洗い出し、壁打ち相手として利用していき、説得力のある形になるまで考えを深めることができました。しかし、サウンド理論など掘っても掘っても全く底が見えない。。そこで、私には社内で共通認識を持つことのできる範囲での定義をすることが重要でした。専門的になりすぎず、プロジェクト内で理解されやすい仕様書を作ることやコミュニケーションに気を配っています。(例えば、音量はdBFS値を使わず、基準点を設けて相対スケール値で表し、理解しやすい0.0-1.0の数値で定義するなど)

それでもなお、サウンドは非常に奥深く、ここでは欠けた内容も多いことは承知しています。また、音楽は人によって(もっというとその時の精神状態によって)感じ方が異なる感性の塊のようなものです。そういう類のものをユーザー体験の中に落とし込んでいったプロセスを紹介しました。

最後に、KINTOテクノロジーズの開発ではMVP(Minimum Viable Product)の考えが浸透していますので、共感を得られれば、アイデアをスピーディに組み立てて開発まで進めることができます。そして、ユーザーの反応を見ながら、アップデートを繰り返していくことができます。これはその一つの事例でもあり、そのような開発にクリエイティブがどう関わっているか、その一端を感じていただけたなら嬉しく思います。最後までお読みいただき、ありがとうございました。

Facebook

関連記事 | Related Posts

We are hiring!

【UI/UXデザイナー】クリエイティブ室/東京・大阪

クリエイティブ室についてKINTOやトヨタが抱えている課題やサービスの状況に応じて、色々なプロジェクトが発生しそれにクリエイティブ力で応えるグループです。所属しているメンバーはそれぞれ異なる技術や経験を持っているので、クリエイティブの側面からサービスの改善案を出し、周りを巻き込みながらプロジェクトを進めています。

【フロントエンドエンジニア】新車サブスク開発G/東京・大阪・福岡

新車サブスク開発グループについてTOYOTAのクルマのサブスクリプションサービスである『 KINTO ONE 』のWebサイトの開発、運用をしています。​業務内容トヨタグループの金融、モビリティサービスの内製開発組織である同社にて、自社サービスである、TOYOTAのクルマのサブスクリプションサービス『KINTO ONE』のWebサイトの開発、運用を行っていただきます。

イベント情報

Mobility Night #3 - マップビジュアライゼーション -