# General Translation Blog: Daniel White：音の物理法則に従うインターフェース
URL: https://generaltranslation.com/ja/blog/daniel-white.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: ページに生命感を与える細やかな工夫に Daniel がこだわる理由と、インターフェースデザインに新たな感覚をもたらす取り組みについて
Authors: Taylor Fang
Published: 2026-10-28

*About General Translation Open-Source Grants*

The open-source ethos is core to what we do at General Translation. Our flagship internationalization (i18n) libraries are open source under the MIT license.

[generaltranslation/gt](https://github.com/generaltranslation/gt)

We’re now supporting other open-source developers who build and maintain software for the public good, starting with $15,000 in no-strings-attached funds as well as $75,000 in GT platform credits across fifteen developers. Nominations are rolling and still open! Read more [here](https://generaltranslation.com/ja/blog/supporting-open-source-software).

オープンソース助成の新たな対象プロジェクトとして、[Daniel White](https://www.danielwhite.uk/) が開発した [Cuelume](https://cuelume.dev/) を発表します。

Cuelume は、**Web 向けのインタラクションサウンドを提供する、依存関係ゼロの軽量ライブラリ**です。ユーザーインターフェース向けに設計された 14 種類のキューを収録しており、*tap*、*type*、*open* といった操作から、*success*、*warning*、*loading* といった状態までをカバーしています。一般的な UI サウンドは録音を再生するものですが、Cuelume ではすべてのクリック音を、物体を叩いた音としてリアルタイムに合成します。**音声ファイルの読み込みは一切不要**で、インストールも必要ありません。ライブラリのサイズは minify・gzip 後でわずか 9 kB です。

<Carousel label="14 種類のキュー" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/cues.webp?v=20261028-2300" alt="Cuelume の 14 種類のキューを、操作（tap、type、select、toggle、open、close、navigate）と状態（success、error、warning、loading、ready、attention、count）の 2 つのグループに分けて示した図。各キューの横には、その長さ全体にわたる音量の推移が輪郭線で描かれ、tap は緑色で表示されている" />
</Carousel>

Cuelume は **Vercel の [fx](https://github.com/vercel-labs/fx) で採用されており**、Supabase、PostHog、Interfaces、Intercom、Nuxt のデザイナーからも高い評価を得ています。**GitHub のスター数は 2,000** に達しています。また、[Claude Code プラグイン](https://github.com/danielwh2/cuelume/blob/main/claude-code/README.md)としても提供されており、開発者がエージェントとより自然にやり取りするために活用されています。

<Spotlight name="Daniel White" href="https://www.danielwhite.uk/" image="/static/blogs/daniel-white/portrait.webp?v=20261028-2300" project="Cuelume" projectUrl="https://cuelume.dev" projectIcon="/logos/cuelume.png" githubUrl="https://github.com/danielwh2/cuelume">
  英国を拠点とするデザインエンジニアで、Cuelume の開発者。
</Spotlight>

Cuelume の開発者である Daniel White は、英国を拠点とするデザインエンジニアです。彼にとってキャリア初期の貴重なインタビューとなった今回、Web に欠けている感覚 (実は人間の感覚の中で最も速い感覚です！) 、Web ページの生命感、デザインエンジニアになるまでの道のり、そしてインターフェースをより人間らしく感じさせる聴覚フィードバックのライブラリをどのように作り上げたのかについて話を聞きました。

## マシンを分解する

Danielが家族の机に置かれたコンピューターの中で何が起きているのかを初めて知りたいと思ったのは、11歳のときでした。本人いわく、GoogleのAPIを使って検索エンジンを作り、続いて小さな物体がどのように落ち、跳ねるのかをシミュレートする2D物理エンジンをJavaで作ったそうです。この初期の試みからすでに、**現実世界の物理をWeb上で再現すること**への彼のこだわりがうかがえます。

「物事が根本でどう動いているのかを、いつも理解したいと思っていました」と彼は語ります。「人間の脳が時間をかけて創造し、学習できるのなら、**生み出せるものは事実上無限だ**と考えるようになったんです」

彼がフロントエンドエンジニアリングに惹かれたのは、そのフィードバックループゆえでした。「コードをちょっと変えるだけで、その変更がすぐにWeb上で形になって見える。そこにすっかり夢中になりました」

エンジニアとして最初に就いたのは、クルーズ会社での仕事でした。「航海を探したり、費用を問い合わせたりするためのWebサイトを作りました」と彼は[書いています](https://www.danielwhite.uk/voyage)。ページを軽量化して読み込みを速くしたり、安全なプロモーションを運用したり、ユーザーが見積もりを取得できるよう支援したりする一方で、「コンピューターにデッキプランを読ませて客室を見つけさせる作業に、楽しい数週間を費やした」そうです。

比較的最近登場したデザインエンジニアという職種について尋ねると、Danielはそれを自身や多くの人々の仕事が自然に進化した結果だと説明します。

「私はずっと、デザイナーというよりエンジニアでした。フロントエンドに携わっていると、UIやUXについてより深く考えざるを得ないので、自然とデザイン寄りになるんです」と彼は言います。当初はデザイナーから渡されたFigmaファイルを再現するのが仕事でした。しかし次第に、**デザイン上の判断を自ら下すことが増え**、特にマイクロインタラクションやフィードバックに取り組むようになりました。

個々のデザイン上の選択は積み重なり、より広範なデザイン判断のシステムへと発展しています。「これまでに下したすべてのデザイン判断を蓄積した自分専用の記憶脳を、ノートPC上にローカルで構築しました」と彼は言います。「今ではそれが私の考え方を理解していて、時間とともに自ら進化していくんです」

## 人間の最も速い感覚

Cuelume のアイデアは、**人間がインターフェースをどのように受け取っているのか**を考えたことから生まれました。「人は味わい、見て、聞きます」と Daniel は語ります。「UI や UX では視覚は使われていますが、Web には聴覚という感覚が欠けているんです」

デザインコミュニティの多くは、**視覚的なディテールを突き詰める一方で、聴覚的なディテールを見過ごしてきました。**

「Web を操作するとき、音を手がかりに脳がイメージを描くという部分が、これまで抜け落ちていたんです」と彼は言います。

Cuelume はこの空白を埋めるものです。彼の説明はシンプルで、「音を通じて、もっと手軽に Web とやり取りする方法」だといいます。

音は単なる装飾ではなく、**重要な認知的フィードバック**です。「ボタンを押してクリック音が鳴ったり、支払いに失敗したときに音が聞こえたりすると、何が起きているのかがずっと理解しやすくなります。物事を結びつけて捉えやすくなるんです」と彼は語ります。

彼の直感は、数多くの興味深い研究によって裏付けられています。特に注目すべきは、**聴覚が人間の最も鋭い感覚の一つである**という点です。

「人は**見るよりも 20〜100 倍速く聞いている**」と神経科学者の Seth Horowitz は[述べています](https://www.npr.org/sections/health-shots/2015/09/10/436342537/how-sound-shaped-the-evolution-of-your-brain)。脳内で聴覚のタイミング情報を受け取る細胞は、他のどのニューロンよりも高い頻度で発火でき、その回数は1秒あたり[最大 500 回](https://oreilly.com/library/view/mind-hacks/0596007795/ch04.html)に達します。

<Carousel label="聴覚と視覚" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/hearing.webp?v=20261028-2300" alt="2本のバー：視覚は1×、聴覚は20×まで実線で100×までディザ表示。出典：Seth Horowitz、NPR、2015年" />
</Carousel>

音が視覚よりも速く伝わるのは、神経回路がより単純だからです (よく知られた[例](https://www.edge.org/conversation/david_m_eagleman-brain-time)がスタートの号砲です。短距離走のスタートに閃光ではなく号砲が使われるのは、そのほうが反応が速いからです) 。進化の観点から見ても、音は危険を知るためのより確かな手がかりです。暗闇でも、どの方向からでも、さらには障害物越しでも届くからです。

インターフェースに関する研究では、[Brewster et al.](https://www.dcs.gla.ac.uk/people/personal/stephen/papers/Interact95.PDF) が、音を付加したボタンによってユーザーはエラーから大幅に速く立ち直れるようになり、参加者からも好まれたことを明らかにしています。

音は、Daniel が「**生きている感覚**」と呼ぶものを取り入れる余地が、Web の中でも大きく残された領域です。彼は、それぞれのインタラクションに合った自然で心地よい音によって、より多くのインターフェースに躍動感を与えられるよう Cuelume を作りました。

「Web の細かなディテールが本当に大好きなんです。ほかの人があまり気に留めないような小さな部分に気づくことがね」と彼は語ります。こうしたディテールこそが「**ページに命を吹き込むひと手間**」なのです。

## 音の物理

Cuelume は録音済みのサンプルを使いません。音は [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) を使って**再生のたびにリアルタイムで合成**されます。音は叩かれた物体や楽器を数学的にモデル化したもので、実在する物体が発する音の物理現象を数式で再現しています。

* **音は短い打撃から始まります**。実際に何かを叩くと、「マレット」が触れたまさにその瞬間に、ごく短いノイズのバーストが生じます。Cuelume は音程の前に短いバーストを加えることで、電子音がただ鳴り始めるのではなく、実際に何かを叩いたような音に近づけています。

<Carousel label="打撃" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/strike.webp?v=20261028-2300" alt="success キューの最初の 12 ms を同一スケールで表示：緑のノイズバーストは約 3 ms 以内に終わり、白い音程の波形はまだ立ち上がりの途中にある" />
</Carousel>

* **正弦波。** 音とは空気の圧力であり、時間軸に沿って描くと波になります。正弦波は単一の周波数を持つ、滑らかで均一な音です。ほとんどの音は、周波数の異なる複数の正弦波で構成されています。ところがシンセサイザーは、ブザーのような耳障りな音になりやすい別の波形 (矩形波、ノコギリ波) を出発点にすることがよくあります。Cuelume は、甲高い音域 (5 kHz) 未満では正弦波のみを使用します。

<Carousel label="正弦波" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/sine.webp?v=20261028-2300" alt="tap の 1,175 Hz における正弦波、矩形波、ノコギリ波と、それぞれの 0〜10 kHz の周波数成分：正弦波は 1 本の線だが、矩形波とノコギリ波には 5 kHz の線を超える倍音が加わる" />
</Carousel>

* **高い倍音ほど速く減衰します。** 物体が響くと、主となる音程に加えて倍音、つまりその上に重なる、より高く小さな音程の層が生まれます。実際の物体では、高い音程が先に消え、低い音程ほど長く鳴り続けます。Cuelume の数式はこの挙動を再現しているため、高い音は低い音よりも速くフェードアウトします。

<Carousel label="倍音" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/overtones.webp?v=20261028-2300" alt="ready キューのガラスの音とその 2 つの倍音を 0.5 秒間の帯として表示：392 Hz は 0.50 秒鳴り、より小さな 1,082 Hz と 2,117 Hz の倍音はそれぞれ 0.23 秒と 0.14 秒で終わる" />
</Carousel>

* **繰り返し再生しても同じ音にはなりません。** 頻繁に鳴るキューは、再生のたびに前回よりわずかに強く、または弱く鳴るため、2 回のタップがまったく同じ音になることはありません (結果を示すキューは毎回同じように再生されます) 。

<Carousel label="繰り返し再生" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/repeats.webp?v=20261028-2300" alt="tap の 8 回の再生ではピークが上下 12 パーセントの破線の範囲内で上下し、success の 8 回の再生ではピークが 1 本の線上に揃っている" />
</Carousel>

こうした音の特性のいくつかは、はるかに古い伝統、すなわち 1986 年に Apple の Bill Gaver が提唱した「聴覚アイコン (auditory icons) 」に由来しています。Gaver は、情報は**音楽的なビープ音ではなく日常的な音**で伝えるべきだと[主張しました](https://research.gold.ac.uk/id/eprint/15059/)。日常的な音は普段の環境で耳になじんでおり、音楽的な音に比べて気が散ったり不快に感じられたりしにくいためです。

さらに、合成音は今や本物と聞き分けられないほど進歩しています。[MIT で行われた](https://iro.uiowa.edu/esploro/outputs/abstract/Human-inference-of-force-from-impact/9984065470302771)研究では、聴き手が**合成音と実際の録音を区別できなかった**ことが示されています。合成モデルは非常にリアルで、聴き手は特定の音から「素材」や「衝撃の強さ」まで判断できたほどです。

サウンドデザインがあれば、インターフェースの体験は大きく変わります。

音は**ほかの感覚、とりわけ触覚にまで影響を及ぼす**ことが報告されています。[羊皮紙皮膚錯覚 (parchment-skin illusion) ](https://pubmed.ncbi.nlm.nih.gov/9512426/)の研究では、高い周波数の音を聞きながら両手をこすり合わせると、被験者は手がよりなめらかで乾いている (羊皮紙のような) と感じると報告しました。[大理石の手錯覚 (marble-hand illusion) ](https://pub.uni-bielefeld.de/record/2656678)の研究では、ハンマーで軽く叩かれながら大きな音を聞くと、参加者の手がこわばり、皮膚の電気伝導度が変化することが確認されています。

Cuelume では、14 種類の固定キューそれぞれに 4 つの[サウンドテーマ](https://cuelume-site.pages.dev/docs/#set-theme)を適用できます。テーマを使うと、各キューの個性やリアルさを調整できます。

```ts
import { play, setTheme } from "cuelume";

setTheme("mech"); // 乾いた質感の、機械加工されたパーツ
setTheme("bubble"); // ノック、しずく、コルクを抜く音、ゴクリと飲む音
setTheme("press"); // 深い低音に重なるクリック音と、離すときの軽いクリック音
setTheme("default"); // ガラス、木、空気、柔らかいマレット

play("select", { theme: "bubble" }); // 遊び心のある一瞬
```

<Carousel label="4つのテーマ" width="3840" height="2160">
  <CarouselItem src="/static/blogs/daniel-white/themes.webp?v=20261028-2300" alt="default、mech、bubble、press の各テーマにおける同じ 0.2 秒間の tap キュー。各線の上にクリック音、下に音程を示す。default では約 80 ms のガラスのような響き、mech では 20 ms 以内に消える乾いたクリック音、bubble ではクリック音のない音色のみ、press では膨らむように立ち上がる深い音にクリック音が重なり、離すときには 90 ms 後に軽いクリック音が鳴る" />
</Carousel>

ただし、生成できるサウンドは 14 種類のキューと 4 つのテーマの組み合わせに限られます。サウンドデザイナーモードはなく、周波数を自由に設定することもできません。

「100 万種類のサウンドを追加したら、まずエンジニアリング上の問題が生じます。各サウンドの周波数やグレインを管理しきれなくなり、保守が不可能になるんです」と Daniel は説明します。「それに、何百万ものサウンドでライブラリを肥大化させたくもありませんでした。Web でよくあるユースケースを洗い出し、それぞれが人にどう聞こえるかを考えました」

さまざまなサウンドパレットを、ぜひ Cuelume の[ウェブサイト](https://cuelume.dev)で聴いてみてください！[Cuelume を使う](https://cuelume.dev/docs#install)には、要素に `data-cuelume-*` 属性を追加して `bind()` を呼び出すだけです。

## 今後の展望

「Cuelume が Vercel のプロダクト fx に組み込まれたときは本当にうれしかったです」と Daniel は語ります。「Vercel は私のプロジェクトのスポンサーでもあります。オープンソースへの愛情という点では、とんでもなく素晴らしいチームですよ」

彼は最近、Cuelume 向けの Claude Code プラグインも追加しました。

「たくさんの人から DM で『これはゲームチェンジャーだ』と言われました。エージェントが作業中なのか、完了したのか、自分に何かを求めているのかが、音でわかるようになったからです」

Daniel は、Cuelume がプロダクトを理解し、**さらにはプロダクトに合ったサウンドを提案できる**ように改善したいとも考えていますが、これは一筋縄ではいかない課題です。サウンドは「そのプロダクトが何を実現しようとしているか」に基づいて厳選されるべきものです。しかし、音の良し悪しを判断するのは難しいことで知られており、AI にとってはなおさらです。Daniel は現在、周波数をプロットするためのルールや手法をまとめ、シンプルな推論モデルでも実装できるようにする方向で模索を続けています。

Daniel は最近、デザインエンジニアとして Attio に入社しました。現在も余暇を使って Cuelume のメンテナンスを続けているほか、slot-text、drawably、cube-motion、springline など、依存関係のない小さな UI ライブラリ群も手がけています。

Daniel は、**作ることと決めることのバランスが変わった**と考えています。「今では、エンジニアリング作業よりもデザインのセンスや創造性のほうがはるかに重要です。コードを書くこと自体の重要性はどんどん薄れていますから」と彼は言います。「優れたエンジニアになることも大切ですが、自分なりのセンスと道を育てることも同じくらい大切です」

彼によれば、センスは他のインターフェースから学ぶものではありません。デザイナーへの彼のアドバイスは、**インスピレーションの源を広げること**です。「本を読んだり、外に出かけたり、自然から何かを感じ取ったりして、デザイナーの目で日々の暮らしを見つめることに時間を使えばいいんです」

これは、彼が自身の選択を語るときの考え方でもあります。Web ではまだあまり開拓されていない要素であるサウンドのライブラリを作ったのも、その一つです。「100 人から『うまくいくからこうしろ』と言われると、私はまったく別の道を選びがちです。みんなが同じ方向を向いているときこそ、誰も試していない道を探そうとするんです」と彼は語ります。

「私たちは人間なのだから、他の人とまったく同じ道をたどるべきではありません」と彼は言います。「**自分の心に響く何かを見つけること**が大切なんです」

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.