サウンドアセットの
切り替えClick here to switch
sound assets
様々なインタラクションに対応したシンプルなサウンドキットです。すべての音を、音の最小要素である正弦波をベースにデザインしました。比較的再生能力の低いスピーカーでも再生可能な周波数帯域を中心に、できるだけシンプルに、小さなファイル容量でデザインされているので、ウェブ、アプリ、サイネージなど様々なシーンでご利用いただけます。
土屋泰洋 サウンドデザイナー/リサーチャー
The simple sound kit for designing a variety of interactions. All sounds are designed based on sine waves; the smallest pure element of sound. It is designed to be as simple as possible with a small file size, focusing on a frequency range that can be reproduced even by speakers with relatively low playback capabilities, so it can be used in a variety of situations such as web, applications, and digital signage.
Yasuhiro Tsuchiya, Sound Designer / Researcher
利用規約Terms of Service
本サイトでダウンロードできるUIサウンド素材（以下「本素材」という）は、
本規約に定める条件の範囲内であれば、個人、法人、商用、非商用を問わず無料でご利用いただけます。
使用にあたってのご連絡は不要ですが、より多くの方に知っていただけるきっかけをつくるためにも、
可能な範囲で当サイトへのリンクまたはクレジット表記をいただけますと幸いです。
以下の行為は禁止しています。
・本素材自体を未加工のまま単体で再配布、販売する行為
・本素材を未加工のままサウンドロゴ等として商標的に使用する行為（商標登録を含みます）
また以下の項目に該当する場合は、ご利用をお断りします。
・公序良俗に反する目的での利用
・政治活動、宗教活動、反社会的勢力や違法行為に関わる利用
・その他、著作者または本サイトを運営する株式会社電通（以下「当社」という）が不適切と判断した場合
知的財産権について
本素材は無料でご利用いただけますが、著作権その他の一切の知的財産権はクレジットされているサウンドデザイナー（著作者）または当社に帰属いたします。
免責・差し止め請求について
当社は、本素材を利用することにより発生したトラブル、損害について、当社に故意または重過失がない限り、一切の責任を負いません。
素材の利用が禁止事項に抵触する場合、または抵触するおそれがあると当社が判断する場合、利用を停止いただくことがあります。
利用者が、本利用規約に反する行為を行ったこと等により当社に損害を与えた場合、
利用者には全ての損害を賠償していただきます。
本規約は予告なく変更する場合がありますので、予めご了承ください。All the UI sound assets on this website (hereinafter referred to as the "the materials") are made available for free personal, business, commercial, and non-commercial uses under the Terms of Use.
You do not need to notify us of your use of the materials. However, we would appreciate it if you could link or credit this site to the extent possible so that more people can learn about it.
The following acts are prohibited when using the materials.
・Redistributing or selling the materials by itself as unprocessed.
・Using the materials as a sound logo in an unprocessed form as a trademark (including trademark registration).
Use of the materials is prohibited for purposes that are:
・Against the laws and regulations of the public order and good morals.
・Associated with any political, religious, anti-social, or illegal activities.
・Otherwise judged inappropriate by the copyright holder or operator of website Dentsu Inc. (hereinafter referred to as "the company")
Copyrights
The materials may be used free of charge, but the copyright and all other intellectual property rights belong to the credited sound designer (author) or the company.
Disclaimer
The company shall not be liable for any trouble or damage caused by the use of the materials, unless the company is intentionally or grossly negligent.
In the event that the use of the materials violates or is deemed by the company to violate any of the prohibited items, the use of the materials may be suspended.
In the event that a user causes damage to the company due to an act in violation of these Terms of Use.
The user shall be required to compensate for all damages.
The provisions of these Terms of Use are subject to change without prior notice.
利用規約をご確認の上ダウンロードしてください。ダウンロードした素材は、利用規約に記載の禁止事項等に該当しない限り、著作権者への許可なく自由にご利用いただけます。Be sure to read the Terms of Use before downloading the data. You may freely use the downloaded materials without permission from the copyright holder, as long as you do not engage in any of the prohibited acts stipulated in the Terms and Conditions of Use.
スマートスピーカーの普及や、ワイヤレスイヤホンの普及などよって、インタラクションデザインにおける音の重要性は日々増しつつあります。しかしながら、インタラクションデザインにおけるビジュアルやアニメーションに関する多くの研究と実践と比べると、音によるインタクションデザインについては、ゲームなど一部の分野をのぞけば、まだ十分な知見が共有されていないように感じます。
インタラクションとは、本来テキストやビジュアルだけに限定されたものではなく、より豊かなものであるはずです。インタラクションをより豊かに、より強いものにしていくためにも、音についてはもっと議論が進んでも良いのではないでしょうか。
といっても、インタラクションデザインの領域では、デザイナーやプログラマーに比べて、どうしてもサウンドデザイナーの数が少ないこともあり、音をつくるというところで障壁があることも確かです。
そこで、UX開発者が、音によるインタラクションデザインの領域の議論をさらに探究していただくために、ライセンスを気にせずに無料で使えるUIサウンド・アセットを開発しました。
複数のサウンドデザイナーと共同で開発したUIサウンドアセットは、昨今のUIに多く採用されているコンポーネントにフィットするようにデザインされています。複数のアセットはそれぞれ異なるコンセプトでデザインされていますので、音を入れ替えることで、質感やトーンの変化を感じることができます。
ぜひ、みなさまが開発中のアプリやサービス、プロダクトのUXのクオリティをもう一段磨きをかけるためのリソースとしてご活用いただき、これがサウンドデザインの重要性についてご検討いただけるきっかけとなれば幸いです。
当サイト『SND』で公開されている、すべてのUIサウンドは、商用・非商用関係なく無料でご使用いただけます。そのため、プロトタイプだけではなく、そのままサービスに実装いただくことも可能です。*詳しくは利用規約をご確認ください。
With the spread of smart speakers and wireless earphones, the importance of sound in interaction design is increasing day by day. However, compared to many researches and practices in the fields of visual design and animation in interaction design, it seems that not enough knowledge has been shared about interaction design with sound, except in some fields such as games.
Interaction should not be limited to text and visuals, but should be richer than that. In order to make the intensity of interaction richer and stronger, we should have more discussion about sound.
However, in the area of interaction design, there are fewer sound designers than visual designers and programmers, and there are certainly barriers to creating sound.
To encourage UX developers to further explore discussions in the area of interaction design with sound, we have developed UI sound assets that can be used for free without worrying about licensing.
UI sound assets, developed in collaboration with multiple sound designers, are designed to fit the components used in many modern UIs. Each asset is individually designed with a different concept, so you can feel the change in texture and tone by switching the sounds.
We hope that you will use it as a resource to further refine the quality of UX for your apps, services, and products under development, and that it will help you to explore the field of sound design.
All UI sounds published on "SND" can be used for free, regardless of whether they are commercial or non-commercial. Therefore, you can use them not only for prototyping, but also for implementation in your services. *Please check the terms of use for details.
様々なインタラクションに対応したシンプルなサウンドキットです。すべての音を、音の最小要素である正弦波をベースにデザインしました。比較的再生能力の低いスピーカーでも再生可能な周波数帯域を中心に、できるだけシンプルに、小さなファイル容量でデザインされているので、ウェブ、アプリ、サイネージなど様々なシーンでご利用いただけます。
土屋泰洋 サウンドデザイナー/リサーチャー
The simple sound kit for designing a variety of interactions. All sounds are designed based on sine waves; the smallest pure element of sound. It is designed to be as simple as possible with a small file size, focusing on a frequency range that can be reproduced even by speakers with relatively low playback capabilities, so it can be used in a variety of situations such as web, applications, and digital signage.
Yasuhiro Tsuchiya, Sound Designer / Researcher
すべての音はスタインウェイ・グランドピアノで演奏されています。通常の奏法だけでなく、弦をハンマーで叩いたり、表面を擦るなど、実験的な奏法も取り入れています。シンプルでありながら、生楽器ならではの豊かで艶やかな響きを持ったサウンドアセットです。
谷口彩子 音楽家
All sounds are played with a Steinway grand piano. Not only by usual techniques, but also experimental techniques such as hammering and scratching surface. Simple but with rich lustrous sound asset that only live instruments can provide.
Ayako Taniguchi, Musician
全国各地の工場をたずね、収集した工場音ライブラリーから、魅力的な製造機械の駆動音をUIサウンドとして再編集しました。静的なインターフェイスに活き活きとした駆動音を取り戻すサウンドアセットです。
INDUSTRIAL JP 工場音楽レーベル
From the library of factory sounds produced by factories and machines recorded at various factories throughout Japan, we have re-edited the attractive sounds of manufacturing machines as UI sounds. UI sound assets that will bring living mechanical sounds back to the static interface.
INDUSTRIAL JP Record Label of Factory
本サイトで公開しているサウンドアセットはオーディオファイルのため、様々な開発環境に必要に応じて読み込んでご使用いただく形を想定しています。しかし、特に多くの利用を想定しているウェブサイト、あるいはJavaScriptベースでのアプリ開発において、より気軽に本アセットが活用できるように、少ないコードで簡単にSNDのサウンドライブラリを実装できるJavaScriptライブラリを公開しています。The sound assets available on this site are audio files, and are intended to be loaded and used as needed in various development environments. However, in order to make it easier to use these assets, especially for websites and JavaScript-based application, we have developed a JavaScript library that makes it easy to implement the SND sound library with a few lines of codes.
Github
htmlに1行追加し、音を割り当てたいhtml要素にクラスをつけるだけで、自動的に音が追加されます。読み込むjsライブラリ名の後ろのkit=##の数字を変えることで割り当てるサウンドアセットを切り替えることができます。Simply add a line to your html and add a class to the html element you want to assign the sound to, the sound will be automatically added. You can switch the sound assets to be assigned by changing the number of kit=## paramter behind the js library name loaded.
デモDemo
HTML + CSS
<html>
<head>
<!-- Load JavaScript file from CDN -->
<script src='https://cdn.jsdelivr.net/gh/snd-lib/snd-lib@v1.2.3/dist/browser/snd.js?kit=01'></script>
</head>
<body>
<!-- Button sound on click -->
<a href='https://github.com/' class='snd__button'>Link</a>
<!-- Type sound on keydown -->
<input type='text' class='snd__type' />
<!-- Celebration sound on click -->
<input type='submit' class='snd__celebration' value='Submit' />
</body>
</html>より細かな音の割り当てや、条件を設定したい方はJavaScriptでイベントを指定することが可能です。npmでライブラリをインストールし、sndクラスのインスタンスを作成してください。※クラス内部で最初のポインターイベントを監視し、無音の音を再生することで、ブラウザ音声を有効化しています。If you want to assign sounds more finely, you can specify the events in JavaScript. Install the library via npm and create an instance of the snd class. *In this library, browser audio is enabled by monitoring the first pointer event inside the class and playing a silent sound.
デモDemo
sh
$ npm install snd-libJavaScript
import Snd from 'snd-lib';
const snd = new Snd();
// Get all anchor elements.
const links = document.getElementsByTagName('a');
// Event handler for click
const onClick = (e) => {
snd.play(Snd.SOUNDS.TAP);
}
// Load audio file
snd.load(Snd.KITS.SND01).then(() => {
// Listen click event of all anchor elements.
for (let i=0; i<links.length; i++) {
links[i].addEventListener('click', onClick)
}
})
各サウンドの動作を確認するためのプレイグラウンドです。それぞれに音が割り当てられた擬似的なUI要素に触れることで、音による触覚の変化を感じることができます。サウンドアセットは、画面下部のメニューで切り替えることができます。This is a playground for testing the behavior of each sound. By tinkering with the each pseudo UI elements with sound assigned, you can feel the tactile changes caused by the sounds. The sound assets can be switched in the menu at the bottom of the screen.
Tapとは異なり、ボタンのように特定の機能を実行するUI要素を押下したということをユーザに明示するために鳴らす音です。ビジュアル効果とあわせることによって、ユーザーに対して「特定のボタンを確実に押した手応え」を演出することができます。Unlike Tap sound, this sound is played to clearly indicate to the user that they have pressed a UI element that performs a specific function, such as a button. In combination with visual effects, it can provide the user the feeling that they have definitely pressed a specific button.
要素として存在はするが、特定の状況化で無効化されているボタンを押した時に鳴らす音です。後述のCautionほど強く注意を促すものではなく、シンプルにボタン自体が無効である、ということを明示するための音です。Buttonと比較するとやや響きが濁ったような音になっています。This sound is played when you press a disabled button. The sound is not as strong as the Caution sound described below. The sound is simply to indicate that the button itself is invalid.
トグルスイッチのように、明確に「オン」と「オフ」二つの状態を明示するUIが動作する時に鳴らす音です。オンの時には低い音から高い音へ、オフの時から高い音から低い音へと、オンとオフに対応するようにデザインされています。オンの音とオフの音を適切に割り当てることによって、トグルスイッチによって何かしらの機能を有効化した、あるいは無効化したということがより直感的に伝わります。This sound is played when a UI that clearly indicates two states, "ON" and "OFF", such as a toggle switch, is activated. The sound is designed to correspond to the ON and OFF states, from low to high when it is ON, and from high to low when it is OFF. By properly assigning the ON and OFF sounds, it enables users to clearly notice the toggle switch has enabled or disabled some function.
ユーザーが画面上でタップやクリックといったアクションを行った際、そのアクションをプログラムが認識していることをユーザに提示するために鳴らす音です。UIによっては鳴る頻度が高い音のため、同じ音色で微妙に響きが違う音を5種類用意しています。ユーザのインタラクション毎にこれらの音をランダムに鳴らすことで、繰り返し同じ音が鳴ることによる不快感を軽減することができます。この音はあくまでも手応えを感じさせるためのものです。ボタンなど、任意の機能が割り当てられたUIエレメントには以下のアセットの中から適切な音を割り当てるようにしてください。This sound is played to indicate to the user that the program recognized the user's action such as tapping or clicking on the screen.Since program would play the sound frequently, we have prepared five different sounds with the same tone but slightly different sound. By randomly playing these sound for each user action, it enables interface to reduce the discomfort of hearing the same sound repeatedly.This sound is only for the purpose of making the user "feel responsive". For UI elements that have certain functions assigned such as buttons, be sure to assign appropriate sound from the following sound assets.
スワイプや、ページャーボタンによって横遷移が行われる時に鳴らす音です。UIによっては、鳴る頻度が高いサウンドのため、同じ音色で微妙に響きが違う音を5種類用意しています。ユーザのインタラクション毎にこれらの音をランダムに鳴らすことで、繰り返し同じ音が鳴ることによる不快感を軽減することができます。This sound is played when a user swipes or presses the pager button to make a horizontal-transition. Since program would play the sound frequently, we have prepared five different sounds with the same tone but slightly different sound. By randomly playing these sound for each user action, it enables interface to reduce the discomfort of hearing the same sound repeatedly.
チェックボックス、ラジオボタン、チョイスチップ、入力フォームなど、特定のエリアを選択した際に鳴らす音です。ビジュアル効果とあわせることによって、ユーザーに対して「特定のエレメントを確実に選択した手応え」を演出することができます。This sound is played when a specific UI element is selected such as a checkbox, radio button, choice chip, or input form. In combination with visual effects, it can be used to create a responsive feeling to the user that they have definitely selected a specific element.
スワイプやページャーによる同一階層内での横遷移ではなく、モーダルウィンドウなどによってUIの階層の縦方向の遷移が行われる時に鳴らす音です。トグルスイッチと同様、オープンとクローズの調号になっているので、モーダルが開く時、閉じる時それぞれに適切に割り当てることによって、階層の遷移がより伝わりやすくなります。Unlike Swipe sound which is for horizontal-transition within the same hierarchy, this is a sound is played when a hierarchical-transition is made by a modal window, etc., As with Toggle sounds, there are OPEN and CLOSE sounds. By assigning them appropriately to modal opening and closing, hierarchical transitions can be notified to the user properly.
ローディング、ドラッグなど、何かしらのタスクが処理中であることを明示するために鳴らす音です。タスクが動作している間はループ再生されることを前提にデザインされています。タスクが完了した後には、タスクの種類に合わせて作業が完了したことを知らせる音を鳴らすと良いでしょう。ただし、処理時間が非常に長くなることが想定される場合や、処理が頻繁に発生する場合は、ずっと音が鳴り続けることになってしまうので、音を割り当てるべきタスクは慎重に検討しましょう。This sound is played to clearly indicate that some task is being processed, such as loading, dragging, etc. It is designed to be played in a loop while the task is running. After the task is completed, it is a nice to play a sound to indicate that the work has been completed according to the type of task. However, if the processing time is expected to be very long, or if the processing occurs frequently, the sound will be played all the time, so consider carefully which task to assign the sound to.
文字を入力する際に文字が入力されていることをユーザーにフィードバックするために鳴らす音です。キー入力中繰り返し再生されるサウンドのため、同じ音色で微妙に響きが違う音を5種類用意しています。ユーザのキー入力毎にこれらの音をランダムに鳴らすことで、繰り返し同じ音が鳴ることによる不快感を軽減することができます。This sound is played to provide feedback to the user when typing text. For the sound to be played repeatedly during keystrokes, we have prepared five different sounds with the same tone but slightly different. By randomly playing these sound for each user input, it enables to reduce the discomfort of hearing the same sound repeatedly.
通知音。アプリ側から何かしらの通知がある際に、ユーザーの注意を喚起するために鳴らす音です。Notification sound. This sound is played to alert the user when there is some kind of notification from the app.
警告音。何か問題が発生したことをユーザに提示するために鳴らす音です。Notificationよりもややネガティブな響きを持ちます。A caution sound. This sound is played to indicate to the user that something is wrong, has a slightly more negative sound than Notification.
Check me all.
それぞれのアプリにおける最大の目標を達成した瞬間をお祝いするために鳴る音です。例えば、メールアプリだったらメールを送信した時、タスク管理アプリだったら最後のタスクにチェックを入れた時…といったシーンを想定しています。アプリのUXの中でのクライマックスを演出します。This is a sound to celebrate the moment when user have achieved the biggest goal of each application. For example, when user send an email in an email app, or when user has checked the last task in a task management app. It creates a climax in the app's UX.
Notification、Cautionに比較して注意喚起のレベルが最も高い音です。ユーザーがアクションを行うまでループ再生されることを前提にデザインされています。呼び出し音やアラーム音としての利用を想定しています。This is the sound with the highest level of alert compared to Notification and Caution. It is designed to be played in a loop until the user takes action. It is intended to be used as a ringing sound or alarm sound.
電通CXクリエーティブ・センターでは、音によるユーザーエクスペリエンス向上を目指し音や音声による表現の研究、開発を行っています。UIサウンド開発依頼を始め、音に関するプロジェクトのご相談、講演依頼、取材のお申し込みなど、こちらからお気軽にお問い合わせください。Dentsu Customer Experience Creative Center conducts research and development on sound for better user experience, please feel free to contact us for UI sound development requests, consultations on sound-related projects, requests for lectures, and requests for interviews.
スピーカーをONにしてご覧ください
Please unmute the sound to explore.