ジェスチャーナビゲーション — 仕組み、種類、実装方法

ジェスチャーナビゲーションとは

ジェスチャーナビゲーションは、タッチスクリーンによって認識されるタッチ、動き、押圧のシーケンスを通じてモバイルデバイスとユーザーが対話する方法です。従来のボタンとは異なり、ジェスチャは画面上に固定された位置を持たず、動きのパターンによって認識されます：端からのスワイプ、2本指のピンチ、ロングプレス。

ジェスチャーナビゲーションへの移行はiPhone Xから始まりました（2017年）。Appleはホームボタンを完全に廃止し、下端からのスワイプに置き換えました。GoogleはAndroid 10（2020年）でこのトレンドに追随し、ユーザーに3ボタンナビゲーション、2ボタンナビゲーション、フルジェスチャーナビゲーションの選択肢を提供しました。StatCounter（2025年）によると、Androidデバイスの75%以上とiOSデバイスの95%がジェスチャーナビゲーションを使用しています。

アーキテクチャ的には、ジェスチャ認識は3つの段階で構成されます：キャプチャ（タッチイベントの取得）、認識（動作パターンの特定）、アクション（割り当てられたアクションの実行）。システムレベルでは、AndroidとiOSに基本的なナビゲーションジェスチャ（スワイプバック、ホーム画面に戻る、アプリスイッチャーを開く）の組み込みハンドラがあります。開発者は自分のジェスチャをこのシステムに正しく統合するだけで済みます。

モバイルナビゲーションにおけるジェスチャの種類

すべてのタッチジェスチャは、目的と実行方法に基づいて3つのカテゴリに分類できます。各タイプには独自の処理ルールとインターフェースでの使用に関する推奨事項があります。

ナビゲーションジェスチャ

ナビゲーションジェスチャは画面間の移動を制御します：戻るための左端からのスワイプ（iOS）、アプリスイッチャーを開くための上スワイプ、ホーム画面に戻るための下端からのスワイプ。これらのジェスチャはウィンドウレベルでシステムによって処理され、アプリ内のカスタムジェスチャと競合してはいけません。

操作ジェスチャ

操作ジェスチャは画面上のオブジェクトの位置、サイズ、向きを変更します。ピンチ（2本指ズーム）、回転、パン（ドラッグ）、スワイプ（高速スワイプ） — これらすべてのジェスチャはViewまたはComposableレベルで処理され、システムナビゲーションには影響しません。

コンテキストジェスチャ

コンテキストジェスチャは別の画面に移動せずに追加機能をアクティブにします。ロングプレス（コンテキストメニュー用）、ダブルタップ（いいねやズーム用）、エッジスワイプ（Drawerを開く用）。これらのジェスチャはシステムナビゲーションジェスチャと重なる可能性があるため、最も注意深い実装が必要です。

Androidでのジェスチャーナビゲーション: GestureDetectorとMotionEvent

Android SDKは、低レベルのMotionEventから高レベルのGestureDetectorやGestureOverlayViewまで、多層的なジェスチャ処理システムを提供します。適切なレベルの選択は、ジェスチャの複雑さとパフォーマンス要件に依存します。

GestureDetector — 基本クラス

GestureDetectorは、MotionEventのシーケンスを特定のジェスチャ（onDown、onShowPress、onSingleTapUp、onScroll、onLongPress、onFling）に変換する高レベルクラスです。開発者はGestureDetector.SimpleOnGestureListenerの必要なメソッドをオーバーライドし、認識済みのイベントを受け取ります。GestureDetectorは、スケーリングを除くすべての標準ジェスチャに推奨されます — スケーリングにはScaleGestureDetectorがあります。

val gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() {
    override fun onFling(
        e1: MotionEvent?, e2: MotionEvent,
        velocityX: Float, velocityY: Float
    ): Boolean {
        val deltaX = e2.x - (e1?.x ?: 0f)
        return if (Math.abs(deltaX) > Math.abs(e2.y - (e1?.y ?: 0f))) {
            if (deltaX > 0) onSwipeRight() else onSwipeLeft()
            true
        } else false
    }
})

view.setOnTouchListener { _, event -> gestureDetector.onTouchEvent(event) }

カスタムターゲットのTouchDelegate

TouchDelegateはViewのタッチ領域を拡張するメカニズムです。ターゲット要素が最小タッチサイズの48dpより小さい場合に使用されます。例えば、画面の隅にある小さな「閉じる」ボタンは、表示サイズを変更せずにヒット領域を拡張するTouchDelegateを取得します。Googleは48x48dpより小さいすべてのインタラクティブ要素にTouchDelegateを推奨しています。

Jetpack Composeでのジェスチャ

Composeはジェスチャ処理のためのモディファイアを提供します：clickable、draggable、swipeable、combinedClickable（ダブルタップとロングプレス用）。内部的には、Composeは低レベル処理にPointerInputScopeを使用しますが、ほとんどの開発者には高レベルのモディファイアで十分です。カスタムジェスチャには、awaitPointerEventと共にpointerInputを使用します。

iOSでのジェスチャーナビゲーション: UIGestureRecognizerとSwiftUI

iOS SDKはUIGestureRecognizerアーキテクチャを使用します — UITouchのシーケンスを分析し、既知のジェスチャと一致するかどうかを判断する抽象基本クラスです。Appleは可能な限り標準のレコグナイザーを使用し、ユニークなジェスチャにのみカスタムサブクラスを作成することを推奨しています。

UIKitでのUIGestureRecognizer

UIKitはすぐに使えるレコグナイザーのセットを提供します：UITapGestureRecognizer、UISwipeGestureRecognizer、UIPanGestureRecognizer、UIPinchGestureRecognizer、UIRotationGestureRecognizer、UILongPressGestureRecognizer。各レコグナイザーには状態があります（possible、began、changed、ended、cancelled、failed）— 開発者は状態を追跡してジェスチャの異なる段階で反応します。

let swipeBack = UISwipeGestureRecognizer(
    target: self,
    action: #selector(handleSwipeBack)
)
swipeBack.direction = .right
view.addGestureRecognizer(swipeBack)

@objc func handleSwipeBack() {
    navigationController?.popViewController(animated: true)
}

SwiftUIでのジェスチャ

SwiftUIはComposeと同様の宣言的ジェスチャモディファイアを使用します：onTapGesture、onLongPressGesture、MagnificationGesture、RotationGesture、DragGesture。SwiftUIはsimultaneousGesture、sequencedGesture、exclusiveGestureを通じてジェスチャ間の競合を自動的に処理します — これらは同時にトリガーされたときのジェスチャの優先順位を決定するモディファイアです。

Image("photo")
    .gesture(
        MagnificationGesture()
            .onChanged { scale in
                self.currentScale = scale
            }
            .sequenced(before: DragGesture())
    )

InteractivePopGestureRecognizer

InteractivePopGestureRecognizerは、UINavigationControllerのスワイプバックジェスチャを制御するシステムレコグナイザーです。デフォルトでは、ルート以外のすべての画面でアクティブです。アプリがカスタムNavigationBarを使用している場合、interactivePopGestureRecognizerが機能しなくなる可能性があります — navigationController.interactivePopGestureRecognizer?.delegateを介してプログラムでアクティブ化する必要があります。

システムジェスチャとカスタムジェスチャの競合

ジェスチャの競合は、ジェスチャーナビゲーションにおける最も困難な問題の一つです。カスタムジェスチャ（例えば、左端からのスワイプでDrawerを開く）がシステムジェスチャ（iOSやAndroidのスワイプバック）と一致する場合、システムはどちらのジェスチャに優先権があるかを判断する必要があります。この競合を正しく処理することはユーザーエクスペリエンスにとって重要です。

Androidでの解決策: InsetsとSystemGestureExclusionRects

Android 10+では、アプリがWindowInsetsを介して自身のジェスチャ用に画面領域を予約できます。ViewCompat.setSystemGestureExclusionRectsを使用して、システムジェスチャがトリガーされるべきでない領域を指定します。例えば、左側のDrawerの場合、システムのスワイプバックから画面の左端（幅200dpまで）を除外できます。Googleは制限を設けています：各側で最大200dpまで除外可能です。

val exclusionRect = Rect(0, 0, 200, height)
ViewCompat.setSystemGestureExclusionRects(
    drawerView,
    listOf(SystemGestureExclusionRect(exclusionRect))
)

iOSでの解決策: UIGestureRecognizerDelegate

iOSはUIGestureRecognizerDelegateのgestureRecognizerShouldBeginメソッドを提供し、カスタムレコグナイザーが認識を開始すべきかどうかを判断できるようにします。左端からのDrawerスワイプの場合、タッチ位置を確認できます：ユーザーがDrawerをドラッグしている場合（距離がしきい値を超えた場合）、カスタムジェスチャが制御を取得します。ジェスチャが認識されなかった場合、システムはInteractivePopGestureRecognizerに制御を戻します。

よくある間違いとベストプラクティス

ジェスチャーナビゲーションには慎重な設計が必要です。特にシステムジェスチャーナビゲーションを備えたデバイスでは顕著です。よくある間違いとその修正方法を見ていきましょう。

間違い: 画面端の競合ゾーンを無視する

最も一般的な間違いは、システムジェスチャゾーン（左右の端、下端）にインタラクティブ要素を配置したり、カスタムスワイプを実装したりすることです。ユーザーがアクションを実行しようとすると、代わりにシステムナビゲーションがトリガーされます。常にシステムジェスチャ用のマージンを確保し、exclusion rectsを通じて競合を処理してください。

間違い: AndroidとiOSで認識速度が異なる

ジェスチャパラメータ（速度しきい値、最小距離）はデフォルトでプラットフォーム間で異なります。アプリがクロスプラットフォームの場合、パラメータをあるプラットフォームから別のプラットフォームにコピーしないでください — 各ジェスチャをAndroidとiOSで個別にテストしてください。FlutterとReact Nativeは一部のパラメータを自動的に適応させますが、すべてではありません。

ベストプラクティス: 視覚的フィードバック

すべてのジェスチャには視覚的フィードバック（色の変更、変形、アニメーション）を伴わせる必要があります。ユーザーはジェスチャが認識され、アクションが実行されていることを理解できる必要があります。iOSでは、システムレコグナイザーが自動的に触覚フィードバックを提供します。AndroidではHapticFeedbackConstantsを介して追加する必要があります。

ベストプラクティス: ジェスチャのアクセシビリティ

すべてのユーザーがジェスチャを実行できるわけではありません — 運動能力が限られている人々はVoiceOverやTalkBackを使用してナビゲーションします。すべてのジェスチャにはボタンによる代替手段が必要です。GoogleとAppleは、すべてのジェスチャ操作をアクセシビリティで利用可能なコントロールで複製することを要求しています。