モバイルアプリのジェスチャー、よくある操作と開発のポイント
モバイルアプリのジェスチャー、よくある操作と開発のポイント
スマートフォンなどのディスプレイにタッチしたり、触れながら移動したりする操作をジェスチャーといいます。現在、スマートフォンのジェスチャーは3本以上の指を使うマルチタッチに進化しています。ジェスチャーの機能を熟知していると、モバイルアプリの開発のUIの設計にも役立ちます。基本的なジェスチャーを整理し、開発のポイントをまとめてみました。
モバイルアプリのジェスチャーとUIの進化
そもそもジェスチャー（gesture）とは、他人に言葉を使わずに身振り、手振りで伝えようとすることです。このことから、モバイル端末のディスプレイに指で触れる操作をジェスチャーと呼ぶようになりました。ジャイロセンサーなどを用いて、端末そのものを持って傾ける操作もジェスチャーのひとつと考えられています。
ジェスチャーは直感的な操作を可能にするため、幼児にでも操作ができます。紙の絵本をジェスチャーでめくろうとして「ページが変わらない！」と怒ってしまう赤ちゃんの笑い話なども聞かれるほどデジタルデバイスのジェスチャーは浸透しました。
まずインターフェースの進化とジェスチャーの関連性を考察します。この考察を前提としてジェスチャーをとらえることにより、直感的な操作のポイントが明確になるはずです。
インターフェースの進化
インターフェース（interface）は複数のものをつなぐ接点を意味します。デジタルデバイスの機器どうしの接続もインターフェースですが、人間との接点はヒューマン・インターフェースまたはユーザーインターフェース（UI）と呼ばれます。
インターフェースをどのようにデザインするかによって、操作性つまりユーザビリティが変わります。パーソナルコンピューターが登場したばかりの1970年頃には、キーボードのインターフェースしかありませんでした。つまりコマンドの文字列を入力しなければ操作ができなかった状況です。ハードディスクの中身を見るだけでも文字を入力しなければならなかったので、とても面倒でした。
その後、Appleのマッキントッシュがマウスを採用し、Microsoft社のWindowsによってGUI（Graphical User Interface）が浸透しました。さらにスマートフォンやタブレットにタッチスクリーンとジェスチャーが採用されることにより、子どもたちにも簡単に使うことができるようになったのです。
ジェスチャーとユーザビリティ
タッチパネルが実用化された当初は、銀行のATMのようなボタンを押す操作だけしかできませんでしたが、iPhoneが登場して人気を集めるにつれて画面に触れる操作は大きな変貌を遂げました。
現在のiPhoneのタッチパネルは「静電容量方式」のタッチパネルを採用しています。縦と横に張り巡らされたセンサーが静電気の変化によって認識できるため、複数の指を使ったマルチタッチを実現しています。電荷を感知する仕組みであることから、ボールペンを近づけても反応しません。
現在のスマートフォンでは3本指による複雑な操作も可能です。さらに操作自体をカスタマイズできます。しかし、だからこそユーザビリティやアクセシビリティを考慮する必要があります。
複雑なジェスチャーはユーザーを混乱させるだけでなく、操作を覚えるのが面倒です。スマートデバイスがスマート（洗練された操作性）であるためには、直感的な操作という基本的な特長をしっかり理解しておくことが大切です。
基本的なジェスチャーの8つの種類
モバイルデバイスのジェスチャー自体は2009年頃に登場しました。既に無意識のうちに使いこなしている人が多いかもしれませんが、アプリのUIを考察する上で、あらためて基本操作を確認します。
基本的なジェスチャーには、次の8種類があります。
タップ
指1本で画面を1回タッチする操作です。パソコンのマウスのクリックに相当します。「Tap」は軽く叩くという意味であり、一瞬だけ触れて指を離すと機能します。指を離さずにおくと、長押しの状態になります。
ダブルタップ
指1本で画面を2回タッチします。パソコンのダブルクリックに相当します。すばやく2回連続でタップすることがポイントであり、タップの間隔が速すぎる場合、あるいは間隔が空きすぎる場合は認識されないことがあります。
Androidの端末では、ダブルタップでアルファベットの大文字の連続入力ができます。画面をダブルタップすることによりオン／オフができる端末もありますが、設定が必要です。
長押し
指1本で画面にしばらく触れる操作です。反応があるまで画面のアイテム（ターゲット）を長押しします。長押しの反応時間は、Androidではいくつかの段階、iOSでは「速い」と「遅く」から選択できます。
ピンチイン／ピンチアウト
ピンチインはアイテムの縮小を行い、指2本で画面のアイテムに触れてそのまま移動して幅を狭めます。ピンチアウトは逆にアイテムを拡大する操作で、指2本で画面のアイテムに触れてそのまま幅を拡げます。ちなみにWebアプリの開発においては、ズームの機能を無効にしたい場合があります。このときはJavaScriptで記述します。
ドラッグ&ドロップ
指1本で画面のアイテムをタッチしてそのまま移動し、指を離したときに操作が完了します。タッチするターゲットと組み合わせて使う操作であり、テキスト、画像、オブジェクトなどコンテンツの移動ができます。Androidのマルチウインドウのモードでアプリ間のドラッグ&ドロップも可能です。基本的には開始、ドラッグ中、ドロップ、終了という4つのプロセスで構成されている操作です。
スワイプ
指1本で画面にタッチした指を滑らせて上下もしくは左右に移動して指を離します。上に滑らせる操作をスワイプアップ、下方向に滑らせる操作をスワイプダウンといいます。スワイプ（swipe）は「大振りで打つ」という意味を持っています。スライドと呼ばれることもあります。
フリック
文字入力の際、メニューに指1本で触れてすばやく動かす操作です。フリック（flick）は「はじく」という意味で、日本以外ではあまり利用されていません。スワイプとの違いは画面に触れて動かす距離と移動時間であり、フリックはスワイプよりも動かすポイント間の距離が短く、さっとはじくように操作することが特徴です。
iOSのマルチタップジェスチャー、触感タッチ
iPhoneやiPadなどApple製のモバイル端末のiOSでは、3本以上の指で操作するマルチタップジェスチャーを採用しています。iPadでは4～5本の指で操作するマルチフィンガーアクションを利用することも可能です。
さらにiPhoneには触感タッチ（iOS 12以前のHaptic Touch）が搭載されています。長押し機能の拡張ですが、長押しをした状態でさらに軽く振動させてフォースフィードバックが使えます。iPhone 6S以降では3D Touchという機能がありましたが、ボタンを押し込む操作が浸透しなかったために、現在は触感タッチに代替されています。
iOSのマルチタップジェスチャーの例
親指、人差し指、中指で可能なマルチタップジェスチャーの例を挙げます。画面の表示以外にコピー＆ペーストなどを3本指で操作できます。
メニュー呼び出し
3本指のシングルタップの操作です。テキストの入力中などにカット、ペースト、取り消しなどのメニューを呼び出すことができます。
コピー＆ペースト
3本指でターゲットとなるアイテムをピンチインして、ペーストする場所に3本指でピンチアウトします。たとえば、テキストなどをコピー&ペーストする場合は、テキストの必要な部分を範囲選択します。範囲選択が表示されている状態で、その文書上で3本指によるピンチインを行ってコピー完了です。次に、ペースト先に3本指でピンチアウトすることでコピーした文書を貼り付けることができます。
カット
3本指でピンチインを2回行います。コピー&ペーストと同じやり方になりますが、メモで文書を作成した文書をカットしたい場合には、まず範囲を指定して、選択した範囲上で3本指を中心に向けたピンチインを2回行います。
取り消し／やり直し
3本指で画面の左にスワイプすると取り消し、画面の右にスワイプするとやり直しができます。取り消しの操作としては、シェイクや背面タップが知られています。3本指によるマルチタップジェスチャーの操作では、確認のダイアログが表示されません。
Androidのジェスチャーナビゲーション
Android には「ジェスチャーナビゲーション」という操作があります。Android 10以降に搭載された機能で、ナビゲーションバーを使わずにジェスチャーでホームに戻ったりアプリを切り替えたりできます。
ジェスチャーナビゲーション採用にあたっては、デベロッパーによって断片化したナビゲーションを標準化し、より魅力のあるエクスペリエンスを提供する目的があったそうです。ユーザーの動作をヒートマップ（行動のデータを濃淡で可視化したもの）で分析し、親指の位置が届きやすい位置の検討などを行ったことを開発者のブログで述べています。
Androidのジェスチャーナビゲーションの例
Androidのジェスチャーナビゲーションの基本操作を４つ紹介します。
ホーム画面に戻る
画面下から上に向かってスワイプします。ディスプレイ下部の白い部分に触れなくても、ホーム画面に戻ることが可能です。
ひとつ前の画面に戻る
左右のどちらかの端から中央に向かってスワイプします。ディスプレイの端に左にスワイプであれば「<」、右にスワイプであれば「>」が表示されるので、この状態で指を離すことによって直前に表示していた画面に戻ります。
他のアプリに切り替える
ディスプレイ下部の白い部分を右にスワイプします。カード状に表示された起動中のアプリから、利用したいアプリを選択します。下部を少し上にスワイプして待機することによって、起動中のアプリのタスク履歴を表示させて選ぶこともできます。
Googleアシスタントの呼び出し
画面の右端または左端から、ディスプレイの中央に向けてスワイプするとGoogleアシスタントが表示されます。ジェスチャーナビゲーション搭載以前にはホームボタンの長押しによって呼び出していましたが、ジェスチャーによって呼び出せるようになりました。
ジェスチャー機能で考慮すべき3つのポイント
ジェスチャーは便利な機能ですが、アプリ開発の設計段階で機能に加えるときは、以下の４つのポイントに留意すべきです。
ガイドラインに従うこと
Appleでは開発者向けにiOSのジェスチャーに関するガイドラインを設けています。標準的なジェスチャーに独自操作の関連付けをしたり、複雑なカスタムジェスチャーを搭載したりしないように注意を促しています。審査を無事に通過させるためにもドキュメントを読み、確認しておくべきです。以下のリンクから読むことができます。
参考：https://developer.apple.com/design/human-interface-guidelines/platforms/designing-for-ios/
OSのメジャーアップデート時の機能追加では、ジェスチャーの操作に関わる変更点に注意する必要があります。
ユーザーの視点で考えること
スマートフォンの操作は、必ずしも端末を持った反対の手の人差し指で操作するとは限りません。通勤電車に乗っていて片手でスマートフォン操作する場合は、親指を使って方でだけで操作することがあります。海外の事例では、ボタンの大きさは44ポイント以上がよいとする「ファットフィンガールール」と呼ばれるルールもあるそうです。ユーザビリティを向上させるためには、常にユーザーの視点から操作性を考える必要があります。
アニメーションと組み合わせること
スマートフォンの直感的な操作性を向上させるためには、メタファ（暗喩）をうまく使うことがコツです。たとえば、電子書籍をはじめブラウザや画面を次のページに進める操作は、紙の本をめくるスワイプの操作に置き換えられます。このとき指先の操作にしたがって本がめくられるようなアニメーションを加えると使いやすくなります。
ジェスチャーによって画面を変化させたり、重要な部分をハイライトさせたりすると操作性を高めることができます。メニューを折りたたむ、スクロールするときの変化も大切な要素です。過剰な演出を加える必要はありませんが、UI/UX設計のアイデアのひとつになります。
ジェスチャーを上手く採用すると操作性を改善できますが、ユーザーにとって分かりにくい複雑なジェスチャーは、ユーザビリティを低下させます。ボタン操作を設置したほうが使いやすい場合もあり、プロトタイプを作成してテストと検証をすべきです。
まとめ
モバイルアプリのユーザビリティを考える上でジェスチャーの理解は大切です。OS独特の操作があり、iOSとiPadOSによっても異なります。複数の指による操作が可能であったとしても、無理な指の使い方、忘れてしまうようなジェスチャーは避けるべきでしょう。ユーザー視点を軸に据えた直感的な操作を実現することが設計のポイントです。