🤖
【Flutter】感触フィードバックでUX向上【android】

tolto
2025/05/04に公開
Android
Flutter
tech
ぽちぽちのつどいGW Advent(?) Calendar８日目の記事です！
一昨日のAdventCalendarの記事でやったNFC読み取りその中で読み取れた時に端末が震えることで読み取りができたことをユーザーに知らせる機能を今日はボタン押下に応用していい感じのアプリにできないか模索する内容です。
!この記事はAndroid向けの内容です。

テストには実機が必要です。

 感触フィードバックとは感触フィードバックとは、端末のバイブレーション機能を活用して、画面操作に対して「震え」で反応を返す機能のことです。ユーザーは視覚や音だけでなく「感触（フィードバック）」でも操作の手応えを感じられるため操作感が向上します。例えばユーザーにNFCデータ読み取りが完了したことを伝えるのに使用します。実際に先日実装した際は初期段階では実装していなかったのですが読み取れているのかいないのかがよくわからないと言うことがあったので取り入れてみました。

 Flutterでの実装方法実装については非常に簡単でフィードバックを与えたい箇所(ボタンなど)に１行付け加えれば完了です。
dart
import 'package:flutter/services.dart';
/*~~~~~~~*/
HapticFeedback.vibrate();

 サンプルdart
import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        scaffoldBackgroundColor: Colors.white,
      ),
      home: const SamplePage(),
    );
  }
}

class SamplePage extends StatelessWidget {
  const SamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('フィードバックサンプル')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            HapticFeedback.vibrate();//感触フィードバック
            log('Button pressed!');
          },
          child: const Text('Press here!'),
        ),
      ),
    );
  }
}


 種類Fluuterの感触フィードバックの種類５つを試してみました。

以下がその５つすべてです。
dart
ElevatedButton(
  onPressed: () {
    HapticFeedback.lightImpact();
    log('lightImpact');
  },
  child: const Text('lightImpact'),
),
ElevatedButton(
  onPressed: () {
    HapticFeedback.heavyImpact();
    log('heavyImpact');
  },
  child: const Text('heavyImpact'),
),
ElevatedButton(
  onPressed: () {
    HapticFeedback.selectionClick();
    log('selectionClick');
  },
  child: const Text('selectionClick'),
),
ElevatedButton(
  onPressed: () {
    HapticFeedback.mediumImpact();
    log('mediumImpact');
  },
  child: const Text('mediumImpact'),
),
ElevatedButton(
  onPressed: () {
    HapticFeedback.vibrate();
    log('vibrate');
  },
  child: const Text('vibrate'),
),
lightImpact：4つの中で一番感触としては強いと感じました。警告などにむいてるのかなといった印象を受けます。

heavyImpact:弱い感触でスライダーなどの感触があった方がいいけどしつこいのも嫌だというときに向いてそうだと感じます。

selectionClick:heavyImpactと同等かそれ以下くらいの感触でheavyImpact同様にあった方がいいけどしつこいのも嫌だというときに向いてそうだと感じます。

mediumImpact:lightImpactよりは弱いがselectionClickなどと比べると強い感触でlightImpactほど強い感触を必要としない場面に向いてると感じました。

vibrate:lightImpactとmediumImpactの中間くらいの感触で一番スタンダードなものかなという印象です。

実装方法や種類がわかったところで次はUX向上について考えます。

 UX向上を考えるUXとは一般的にUI（ユーザーインターフェース）がユーザーが見る画面である一方でUX（User Experience-ユーザーエクスペリエンス)はそのアプリやサービスでユーザーが体験するものの全てであると言われています。
UIを考える → ボタンの位置・色・大きさ・レイアウトなど、「見た目と操作性」を整えること
UXを考える → そのUIを通して、ユーザーが「気持ちよく・ストレスなく使えるか？」という体験全体を設計すること
感触フィードバックは、画面に直接“見える”わけではありません。

ですが、たとえば「ボタンを押したときに手に伝わる振動」があるとその操作がちゃんと認識された安心感や操作に対する納得感が得られます。

このように、感触フィードバックは視覚に頼らずUXを高めるための大きな手段となるのです。

 実際のアプリを調査する
 Amazon Fire TV私が普段からよく使用するアプリの中に感触フィードバックが実装されているアプリがありました。

これはFlutter製ではないですが感触フィードバックをうまく活用してる例になると思います。

このアプリはFireTVのリモコンのアプリなのですがリモコンのボタン押下時(上下左右移動など)に感触フィードバックが実装されています。これのおかげで移動時にスマホを確認しなくてもちゃんと押下できているかが感触でわかりとても助かっています。

https://play.google.com/store/apps/details?id=com.amazon.storm.lightning.client.aosp&hl=ja

 mixi2このアプリはFlutter製で感触フィードバックが使用されています。アプリ起動時のスプラッシュ画面でmixi2の文字が１つずつ出てくるタイミングで使用されています。

ここで実装されている意図はよくわからなかったですが、文字のアニメーションに連動しており体験としては面白いと感じます。

https://play.google.com/store/apps/details?id=social.mixi&hl=ja

 UXを向上させるには？実際にさまざまなアプリを調査してわかったのは、感触でのフィードバックを取り入れることで、ユーザーに操作結果を直感的に伝えることができるという点です。

特にアニメーションと組み合わせることで、よりリッチでワクワク感のあるユーザー体験を演出できることもわかりました。
また、先日実装したNFCの読み取り成功のような「状態を即座に伝える」用途にも、感触フィードバックは非常に効果的でした。

では、実際にUXを向上させるには、どういった場面での実装が向いているのでしょうか？

まず最初に思いついたのは、ログアウトやアカウント削除、ポスト削除などの重要な操作のタイミングです。

これらの操作では、多くの場合以下のようなダイアログを表示してユーザーに選択を求めるかと思いますがたとえば「削除ボタンを押したとき」だけに感触フィードバックを入れることで「今、重大な操作を実行した」ということを瞬時に伝えることができると感じました。

感触を通して「押した感」があるだけで、視覚＋触覚の2段階で意識的な操作として認識できる。これは特に誤操作が怖い場面では、ユーザー体験の安心感にもつながります。

GPTにも聞いてみました。
・ToDoアプリやメールアプリで、カードやリストアイテムをスワイプして「完了」「削除」した瞬間

・長押しでメニュー表示 or ドラッグ開始時に短いバイブさらに、ドロップ成功時にも別のバイブで完了を知らせる

・フォームのテキストフィールドに入力開始時、または完了ボタン押下時にフィードバック
なるほど確かにフォーム入力完了ボタンの押下でフィードバックあった方がユーザーとしては送信したかがわかって安心に繋がると感じます。また"スワイプして「完了」「削除」"のときにフィードバックを与えるのも良い手だと感じます。

 まとめ感触フィードバックはユーザー体験を向上させる手段としては大変良いアプローチであることがわかりました。特に視覚や音声に加えて「触覚」で情報を伝えることで、操作の確実性や満足感が高まります。

ただし、やりすぎには注意が必要で過剰に振動を加えてしまうとどの操作が本当に重要なのかが曖昧になり、ユーザーの混乱や誤操作につながる可能性もあります。またユーザーにとって自然で快適な操作体験を提供できると感じました。
というわけで、ぽちぽちのつどいGW Advent(?) Calendar ８日目は感触フィードバックでUX向上の内容でした！
ぽちぽちのつどいPublication
大阪大学非公認アプリ開発サークル「ぽちぽちのつどい」です！
感触フィードバックとは

Flutterでの実装方法

サンプル

種類

UX向上を考える

実際のアプリを調査する

Amazon Fire TV

mixi2

UXを向上させるには？

まとめ

Discussion
