Web Haptics APIを語りたい

Web Haptics APIを語りたい Web UI 実装勉強会 #4 2026/09/16

お断り⚠️ 今日お話する内容は2026年9月現在、まだブラウザではまともに動かすことができません今後仕様が変わる可能性がありますのでご注意下さい

自己紹介 Infixer(インフィクサー) フロントエンドエンジニア HTMLとCSSが大好きなマークアップおじさんです。 X（Twitter） GitHub Blog Bluesky Cosense

いきなりDEMO！

振動するかどうか Androidの方「タップ」→「完了」→「エラー」を押す。振動の長さを変え、同じパターンをもう一度押す。ノッチのスライダーをなぞる。 iOSの方スイッチ本体と「お気に入り」を直接タップする。振動を感じない方エラーログを私宛にあとで教えてください！ OSの設定で触覚フィードバックがオフになっていないか確認！

そもそもHaptics（ハプティクス）とは？⼒・振動・動きなどを与えることで、ユーザーが「実際にモノに触れているような感触」を得ることが出来る、⽪膚感覚フィードバック技術ハプティクス- wikipedia https://pur.store.sony.jp/ps5/lineup/ps5_controller/ https://hokusai.anotherstory.world/experience/#ex03

スマートフォンでのハプティクス iOS、AndroidともにOSの機能として提供されている触覚フィードバックの提供ハプティクス設計の原則

Web Haptics API

Web Haptics APIとは Webアプリケーションをネイティブのハプティクス機能に接続する、セマンティックなクロスプラットフォームインターフェース https://github.com/WICG/web-haptics 現時点ではDraftの段階 Chromeが最近Intent to Prototypeになった
`navigator.vibrate()`で触覚フィードバックがそもそもあるが、モバイル端末に特化していて幅広いデバイスにはサポートが不足しているそもそもChromeしか動かないし。。

Web Haptics APIの提案内容（CSS）提案としてCSSの`@haptics`で使える想定 1 /* カートに追加するときに振動させる */ 2 .add-to-cart:active
{ 3 scale: 0.95; 4 @haptic align 0.8; 5 }

Web Haptics APIの提案内容（JavaScript）提案として`navigator.playHaptics()`で使える想定 1 // navigator.playHapticsでCSSのように振動のエフェクトとフィードバック時間を設定 2 navigator.playHaptics(effect,
intensity);

Web Haptics API

ライブラリ：web-hapticsの実装 https://haptics.lochie.me/ Androidは今回のデモとほぼ同じ作り iOSは違う（参照） inputのcheckbox switchをdisplay:noneで隠して requestAnimationFrame()でクリックを連打して擬似的に再現しているかなりの荒業

4つのエフェクト Web Haptics APIでは4つのエフェクトが提案されている hint edge tick align

hint 操作のきっかけを伝える操作できることを、そっと知らせる何らかのアクションが続く可能性がある入力欄にフォーカスしたときなど

edge 境界に達したことを伝えるエラーや、スクロールの限界値に達したときなどに強い信号として伝えるフォームなどでボタンを押してエラーを通知するときなど

tick 明確な変化を伝えるリストをスクロールしたり、スイッチを切替えたときなど TODOリストのチェック状態など

align オブジェクトが特定の位置に合わさったときに伝える DnDなどでドラッグしてスナップするなど

ハプティクスの可能性

振動するではなく操作を助けるのか触覚で、位置や操作の変化を伝えられる特に視覚障害者などには、有効な場合があるただし音声に比べると身体への負担はある手を動かす、振動の意味を判断することへの負荷、振動による心理的負担 https://www.nature.com/articles/s41598-025-21720-0

https://a11y-chiba.com/2026/ https://ontenna.jp/

「触っても分かる」Webへアクセシビリティの観点から言うとアクセスできる選択肢が増えるしかし、従来のアクセス方法とバッティングすると使いづらいものになる振動の強さではなく意味とタイミングを設計して触って分かるWebが作れることに期待できる！！（かも？）

参照 Web Haptics API: https://github.com/WICG/web-haptics 触覚フィードバックの提供: https://developer.apple.com/jp/design/human-interface-guidelines/playinghaptics ハプティクス設計の原則: https://developer.android.com/develop/ui/views/haptics/haptics-principles?hl=ja Web
Haptics: https://haptics.lochie.me/ Enhancing grasping ability with vibrational guidance for individuals who are blind or partially sighted: https://www.nature.com/articles/s41598-025-21720-0 Ontenna: https://ontenna.jp/

Web Haptics APIを語りたい

Web Haptics APIを語りたい

ryokatsuse

More Decks by ryokatsuse

Featured

Transcript