片手で使えるUIを考える！ 〜苦なくタップできる領域とは?〜

生まれてからずっと手が小さいことが悩みでした。
とは言っても、手が小さくて困ることといえば体育の授業でハンドボールをする時くらいですが。
当時は片手でボールを掴めないので遠心力を使って投げていました。

しかし、現在問題になっているのがスマホのタップ領域です。
端末が物理的に大きくなるにつれて、片手でタップできない領域が増えました。
例えばタブバーの一番左はどう頑張っても片手で押せません。

そんな悩みを解決するために、この記事では

• どの範囲まで手は届くのか
• 手が届かない場合でも使いやすくするUI

について考えていきます。

平均と自分の手の大きさの比較

あるサイトによると手長(手首のシワより中指の先端)の平均は男性で183.4mm、女性は169.3mmとだそうです。
(ちなみに)自分の手の大きさは160mmくらいだったので男性平均と比べて20mmほど小さいことがわかりました。

参考: https://sizea.jp/palm-size/

親指ゾーンマップ(片手でタップできる領域を把握する)

では一般的に、親指でタップできる領域はどこなのでしょうか。
これは片手で親指がタップしやすい領域をヒートマップとして表示した図です。
緑の領域が苦なくタップできる領域です。
下の画像はiPhone6 Plusの図ですが、緑の領域は意外と小さいことがわかります。

https://uxmilk.jp/53903

ボタンを上に置かない

iOS safariは端末が年々大きくなるにつれて、タブバーが上から下に移動しました。
*ちなみに設定アプリから変更できます。今知りました。

なるべくよく使うボタンを画面下に置くことで"苦なくタップ"できるようにしています。

上にあるボタンをタップしないで押す方法

そうは言ってもUIの設計上ボタンを上に置かないといけないケースは多いと思います。
それでも要素をタップせずにタップした時と同じ挙動をさせる方法もあります。

画面を引っ張って検索する

よくみる例だと、検索TextFieldで使われている例があります。
上にある検索TextFieldをタップしなくても、画面を引っ張ることでTextFieldにフォーカスが当たりキーボードが出てきます。
引っ張る箇所は画面のどこでも良いので、手が届く範囲で操作できて簡単に使うことができます。

引っ張って更新するPull to refreshと似たような操作になりますね。
有名どころのアプリだとSlack、Things3などがあります。

タブバーを長押しで検索する

画面を引っ張る方法以外にもタブバーの長押しや2回タップでも検索にフォーカスする方法もありそうです。
よく使うアプリではX(Twitter)は検索タブを長押しで検索にフォーカスできますし、App Storeアプリや(旧)写真Appは検索タブを2回タップすることで検索にフォーカスできます。

スワイプバックのしすぎで親指の付け根が辛い

iOSは画面の左端をスワイプすることで画面を戻ることができます。

端末の左上にある戻るボタンを押すよりはスワイプバックの方が楽なので頻繁に使用しますが、やはり親指の付け根を痛めつけています。

よりスワイプバックをしやすくする方法として全画面をスワイプバックする方法もあります。
通常スワイプバックは画面の端をスワイプすることでしか行えないのですが、画面のどこでもスワイプできるようになります。

メジャーなアプリで対応されているのは、

• X(Twitter)
• Slack
• Discord
• Arc Search

らへんで対応されています。
他にもあれば教えてください。積極的に使おうかな。

Flutterで再現させる。

私はFlutterエンジニアなのでSwiftでの実装方法はわかりませんが、Flutterではswipeable_page_routeというpackageで実現することができます。
https://pub.dev/packages/swipeable_page_route

使い方はMaterialPageRouteやCupertinoPageRouteの代わりに使うだけです。

Navigator.of(context).push(SwipeablePageRoute(
  builder: (BuildContext context) => MyPageContent(),
));

他のスワイプジェスチャと競合しないように気をつける

他の要素のスワイプジェスチャと競合しないように気をつけた方が良さそうです。
そもそもOS標準で実装されていないのはそういう理由があると思います。

例えば、マテリアルデザインでいうところのTabBarViewや、横スクロールリストも横にスワイプするためジェスチャが被ってしまいます。

そもそういった画面、アプリでは画面左端以外でのスワイプバックは取り入れない方が無難です。
先ほど紹介したswipeable_page_routeはTabBarで実装されているページも考慮されていて、一番左のTabのみでスワイプバックできるようになっています。

左のボタンが押せない問題をデバイスを傾けて解決する

それでも、手から遠い方にボタンは押しづらい問題は残ります。
個人開発でAnoteというメモアプリを作っているのですが、ツールバーの端っこのボタンをどうにか押しやすくできないか考えていました。

そこで、デバイスを傾けたら傾けた方向にボタンが移動するインタラクションを考えてみました。
遠いボタンを押す時にデバイスを傾けて、頑張って親指を伸ばしていることに気づきました。
そこから"傾ける"というジェスチャを生かしています。

https://x.com/imasirooo/status/1852632689469489358

現在TestFlightで配信中なので試してみてください。
配布数は上限があります。随時配布数は増やして、Xでツイートしています！
https://testflight.apple.com/join/SJusMMsX

https://x.com/imasirooo

傾けた時と戻る時の角度の閾値を変える

こだわっているところは、傾けた時にボタンが移動する角度は40度ですが、逆に元に戻る時の角度は15度です。
同じ40度にしてしまうと、ボタンを押す瞬間に元に戻ってしまったりするため角度を変えています。

この傾けジェスチャ自体、他のアプリではなかなかみたことないし、人によっては使いづらさを感じてしまうかもしれません。
そこは、まあ、角度とか色々改善しながら使いやすいものを求めていきたいと思います。

最後に

片手で届かなかったら両手で...と思う方もかもしれませんが、電車に乗っていたりなど両手が使えないシーンは結構あると思います。
そんな時でも使えるような設計をたまには考えてみてもらえると自分みたいな手が小さい人でも笑顔で使えるプロダクトが増えたら嬉しいなと思います😀

X(Twitter)やZennでエンジニアリングやデザインの発信をしているので良かったらフォローお願いします！

https://x.com/imasirooo

参考

https://note.com/goando/n/n9346aea1b0ea

https://uxmilk.jp/53903