みなさん、WebサイトやWebアプリを作るときに、「触覚」 まで意識したことはありますか？
普段のWeb制作では、ボタンを押したときのアニメーション、色の変化、ローディング表示、通知音など、視覚や音によるフィードバックを中心に考えることが多いと思います。
ただ、モバイル端末ではそれに加えて、触覚フィードバック を使った表現も取り入れることができます。
今回このテーマを書こうと思ったきっかけは、web-haptics の作者である Lochie Axon さんのX投稿でした。投稿では、Webにハプティクスを持ち込もうというメッセージとともに、強さや長さを調整した触覚パターンをWebのインタラクションに組み込めることが紹介されていました。
また、web-haptics はモバイルWeb向けの触覚フィードバックライブラリで、React / Vue / Svelte / Vanilla JavaScript に対応しています。プリセットも用意されているため、まずは小さく試してみたい人にとって入りやすい構成になっています。
今回、簡単に触って試せるデモサイトも用意してみました。
実際の雰囲気を先に見てみたい方は、以下から試してみてください。
そこで今回は、Web Haptics とは何かを整理しつつ、web-haptics を使ってモバイルWebに触覚フィードバックを取り入れる方法を紹介します。
この記事は、次のような人に向けています。
- Web Haptics という言葉を初めて知った人
- Webで新しいユーザー体験を作ってみたいフロントエンドエンジニア
- UI/UXの表現の幅を広げたいWebデザイナー
Web Haptics とは
Web Haptics は、Webで操作に対する手応えを返す仕組みです。
たとえばスマートフォンでは、
- ボタンを押したときに軽く反応する
- 保存成功のときに短く返す
- エラー時に少し強めに反応する
といった表現ができます。
普段のWebでは、色の変化やアニメーションで反応を伝えることが多いですが、Web Haptics はそこに触覚を加えるイメージです。
技術的には、Webでは Vibration API を使って端末を振動させることができます。
Webではまだ一般的ではありませんが、うまく取り入れると、少し新しくて気持ちいい体験を作りやすいのが面白いところです。
web-haptics とは何か
web-haptics は、モバイルWeb向けの触覚フィードバックライブラリです。
- 対応フレームワーク: React / Vue / Svelte / Vanilla JS
-
インストール:
npm i web-haptics -
呼び出し方:
trigger()で簡単に実行できる -
対応確認:
WebHaptics.isSupportedで端末の対応状況を判定可能
個人的に良いなと思うのは、最初はプリセットを呼ぶだけで試せるところです。
「触覚フィードバックに興味はあるけど、まず何から試せばよいかわからない」という場合でも、まずは1つボタンに入れてみるところから始めやすくなっています。
まずは最小構成で試してみる
ここでは React の例で、最小構成の使い方を見てみます。
まずはインストールです。
npm i web-haptics
次に、ボタンを押したときに success を発火させる例です。
import { useWebHaptics } from "web-haptics/react";
export function SaveButton() {
const { trigger } = useWebHaptics();
return (
<button onClick={() => trigger("success")}>
保存する
</button>
);
}
また、対応している環境かどうかを確認したい場合は、以下のようにサポート判定もできます。
import { WebHaptics } from "web-haptics";
if (WebHaptics.isSupported) {
console.log("この環境ではハプティクスを利用できます");
}
用意されているプリセット
web-haptics には、いくつかのプリセットが用意されています。
最初に試すなら、まずはこのプリセットを使うのがわかりやすいです。
利用できるものは以下です。
-
success- 保存完了、送信完了、チェックイン完了など、「うまくいった」ことを気持ちよく伝える場面に向いています。
-
nudge- 軽く注意を向けさせたいときや、次のアクションを促したい場面に向いています。
-
error- 入力エラーや処理失敗など、明確に失敗を知らせたい場面で使いやすいです。
-
buzz- 少し長めの反応がほしいときに使えます。ただし強めに感じやすいため、使いどころは慎重に考えた方がよさそうです。
実際のUIでは、次のように意味づけして使うと整理しやすいです。
- 保存成功 →
success - 注意喚起 →
nudge - バリデーションエラー →
error - 重要な警告 →
buzz
カスタムパターンで調整する
プリセットだけでも十分に試せますが、慣れてきたらカスタムパターンで調整することもできます。
たとえば、以下のように配列でパターンを指定できます。
trigger([100, 50, 100]);
これを使うと、
- 成功は短く軽く
- エラーは少し強めに
- 注意喚起は1回だけ軽く
- 危険操作は少し長めに
のように、UIの意味に合わせて細かく調整できます。
ただし、カスタムできるからといって複雑なパターンを増やしすぎるのはあまりおすすめしません。
触覚は視覚以上に説明しづらいので、意味が伝わる範囲でシンプルに使う方が実務では扱いやすいです。
まずはプリセット中心で始めて、本当に必要なところだけカスタムするのがよいと思います。
実務で使うときの注意点
触覚フィードバックは面白いですが、実務で使うなら注意したい点もあります。
端末やブラウザによって挙動が変わる
web-haptics はサポート判定を提供しており、対応環境を確認しながら使う前提になっています。つまり、すべての環境で同じように体験できるわけではありません。
そのため、使えたら体験が少し良くなるくらいの位置づけで考えるのが安全です。
デスクトップでは確認しづらい
触覚の体験は、やはりスマートフォンなどの実機で確認する前提になります。
デスクトップで見たときに「動いているかどうか」は確認できても、感触そのものはわかりません。
何でも振動させると逆効果
ボタンを押すたびに毎回反応すると、最初は面白くてもすぐにノイズになります。
たとえば、以下のような考え方だと使いやすいです。
- 成功・失敗など状態が明確に変わるときだけ使う
- 重要な操作だけに絞る
- 軽微な操作には入れすぎない
触覚だけに頼らない
触覚は便利ですが、全ユーザーが同じように体験できるわけではありません。
そのため、視覚やテキストによるフィードバックを補強するものとして使うのが安心です。
どんなUIと相性が良いか
個人的には、以下のようなUIはかなり相性が良いと思います。
フォーム送信
送信成功や入力エラーのタイミングは、意味もわかりやすく、触覚との相性が良いです。
保存・更新操作
設定保存、お気に入り登録、プロフィール更新など、
「反映された」ことを返したい操作に向いています。
トグル・セグメント切り替え
見た目の変化に加えて触覚があると、少し操作感が強くなります。
モバイルアプリっぽさを出したいときにも合っています。
ステップ型UI
予約フロー、購入フロー、オンボーディングなど、
1ステップずつ進む体験に軽い触覚を入れると、進行感を作りやすいです。
ゲーム的な体験や遊び心のあるUI
診断コンテンツやミニゲームのように、演出的な意味合いが強いUIでは、触覚が体験そのものの面白さにつながることもあります。
まとめ
今回は、Web Haptics とは何かを整理しつつ、web-haptics を使ってモバイルWebに触覚フィードバックを取り入れる方法を紹介しました。
Web制作では、どうしても視覚中心で考えがちですが、モバイル端末ではそこに触覚も加えることができます。
うまく使うと、UIの反応に少し手応えが生まれて、体験の印象が変わります。
web-haptics は、React / Vue / Svelte / Vanilla JS で比較的手軽に試せるので、最初の入口としてかなり扱いやすいライブラリです。まずは以下のような小さなところから試してみるのがおすすめです。
- 保存成功で
success - 入力エラーで
error - 注意喚起で
nudge
新しい体験を作りたいとき、つい派手なアニメーションや大きな機能追加を考えがちですが、こうした小さなフィードバックの積み重ねが、使い心地を変えることもあります。
モバイルWebの表現を少し広げてみたい方は、web-haptics を試してみると面白いかもしれません。
Discussion