タッチ操作に不慣れな人
こんな光景を見聞きしたことはないだろうか。
- おばあちゃんがタブレットを操作しようとしても，画面上のボタンがちっとも反応しない。
- おじいちゃんがスマートフォンを操作するとボタンが長押しになる。
- そもそも画面上のボタンが見つけられない。
これらは，スマートフォンやタブレットに慣れた人にとっての「ボタン」と，タッチ操作に慣れていない人にとっての「ボタン」との間に大きな隔たりがあり，それが生み出した光景といえる。
彼らはボタンをどのように「押して」いるのか
次の図は，タッチ操作に不慣れな人がやりがちな，指でタッチパネル上のボタンを「押している」ときの様子を真横から見たものだ。
タッチパネルに指が触れ始めたときから，指が深く沈み込むように押し込まれるまでにタッチパネル上の「押されている座標」が大きくずれる。
ずれるとタッチパネル上では「タップされた」とは認識されず，「ドラッグされた」と認識されてしまう。
ソフトウェア内でドラッグの処理を特に作り込んでいなくても，「タップされた」という認識にならないため，ボタンが反応しない。
ボタンを深く押すということは，その分ボタンに指が長い間触れていることにもなるため，ときおり「長押しされた」と認識され，意図せずコンテキストメニューなどが表示されてしまうことにもなる。
彼らにボタンはどう見えているのか
「しっかり」押さないといけないもの
彼らにとってボタンとは，指に何かしらの手応えがあるまで「しっかり」と押さなくてはならないもの。
指で「トンッ」と一瞬だけ叩くものはボタンとはほど遠い概念と考えている。
しかし，タッチパネル上の「ボタン」は指でいくら強く押し込んでも手応えがない。
自然と，指が深く沈み込むくらいに「押し込む」こととなる。
ボタンに見えていない
フラットなデザインのボタンだと，彼らはそれがボタンであることに気付けない。
ボタンとは，押す前は出っ張っていて押せば沈み込むものと考えているため，真っ平らな見た目のボタンのことはそもそも「ボタンだ」とは思わないのだ。
必要なボタンの仕様
以上のことから，タッチ操作に不慣れな人向けのボタンに必要な仕様が見えてくる。
次のようなものにすると良さそうだ。
- ボタンがタップではなくドラッグされた場合でもタップされた場合と同様に動作する。
- 長押ししてもコンテキストメニューは開かない。（開かないと使えない機能は不要と割り切る）
- 指で押している間は沈み込み，指を離すと元のように出っ張る。
- 立体感や陰影があり，物理的なボタンに似た見た目である。
つくったボタン
jQueryのみを使って，ボタンをつくってみた。
HTML上で touch-button クラスが付与されたボタン要素すべてに対して上記の仕様が適用されるようになる。
タッチパネルや各種ブラウザの検証ツールなどで動作が確認できる。
See the Pen Button for beginner on touch devices by Kusa Mochi (@kusa-mochi) on CodePen.