モバイルアプリのスワイプ — ジェスチャの種類と実装

モバイルインターフェースにおけるスワイプとは

スワイプは、ユーザーが指を画面上で特定の方向に滑らせてアクションを開始するジェスチャです。タップ（短いタッチ）とは異なり、スワイプはジェスチャ全体を通じて動きと画面との接触を伴います。

スワイプの歴史は2007年の初代iPhoneから始まりました。「slide to unlock」ジェスチャはモバイルインターフェースの象徴となりました。現在、スワイプは何千ものアプリケーションでナビゲーション、コンテンツ管理、情報整理に使用されています。

UX Planet (2025)によると、ジェスチャ操作（スワイプを含む）を備えたアプリケーションは、ユーザーエンゲージメントが18%向上しています。スワイプはボタンを押すよりも自然な操作として認識されており、オブジェクトの物理的な動きを模倣しています。

スワイプ認識パラメータ

主なパラメータとして、ジェスチャがスワイプかどうかを判断するものには、最小距離（通常30〜50ピクセル）、直線からの最大偏差（15〜20度以下）、最大接触時間（500ミリ秒まで）があります。指が画面に長時間留まると、そのジェスチャはドラッグまたは長押しとして分類されます。

方向別スワイプの種類

移動方向によって、スワイプは4つの主要なタイプに分類されます：左、右、上、下。各タイプには独自の目的と使用コンテキストがあります。

水平スワイプ（左/右）は、個々のアイテムの管理（削除、アーカイブ、めくり）に最もよく使用されます。垂直スワイプ（上/下）は、画面間の移動やコンテンツの更新に使用されます。Material Design Guidelines (2024)によると、水平スワイプは右利きの人にとってより快適です。右手では親指を左に動かす方が自然だからです。

マルチフィンガースワイプ

2本および3本指のスワイプは高度な操作に使用されます。2本指 — iPadでのデスクトップ切り替え、元に戻す（3本指スワイプ）。3本指 — 一部のデバイスでのスクリーンショット。ただし、マルチフィンガージェスチャは直感的ではなく、ユーザーの学習が必要です。

iOSでのスワイプ実装

iOSでは、ジェスチャ処理はUIGestureRecognizerに基づいています。これは、タッチイベントのシーケンスを分析し、特定のジェスチャに一致するかどうかを判断する抽象クラスです。

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let swipeLeft = UISwipeGestureRecognizer(
            target: self,
            action: #selector(handleSwipe)
        )
        swipeLeft.direction = .left
        view.addGestureRecognizer(swipeLeft)
    }

    @objc func handleSwipe(sender: UISwipeGestureRecognizer) {
        print("左にスワイプ")
    }
}

UISwipeGestureRecognizerは、方向とタッチ数（numberOfTouchesRequired）の設定をサポートしています。デフォルトでは、1本の指と右方向が必要です。他の方向を認識するには、方向を明示的に指定する必要があります：.left、.up、.down。

より高レベルのAPI — UICollectionViewLayoutはスワイプアクションをサポートしています。iOS 11以降、テーブルとコレクションはUISwipeActionsConfigurationによる組み込みのスワイプアクションをサポートしており、手動のジェスチャ処理なしで削除やアーカイブボタンを追加できます。

Androidでのスワイプ実装

Androidでは、スワイプ処理はGestureDetectorを介して構築されます。これはMotionEventsを分析し、対応するコールバックメソッドを呼び出すクラスです。

class SwipeActivity : AppCompatActivity() {
    private val swipeThreshold = 100

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() {
            override fun onFling(
                e1: MotionEvent, e2: MotionEvent,
                velocityX: Float, velocityY: Float
            ): Boolean {
                val dx = e2.x - e1.x
                if (dx > swipeThreshold) {
                    println("右にスワイプ")
                }
                return true
            }
        })
    }
}

GestureDetectorのonFlingメソッドは、ユーザーが画面上で指を素早くスワイプしたときに呼び出されます。開始座標と終了座標（e1、e2）、および移動速度（velocityX、velocityY）を受け取ります。方向を決定するために、X軸またはY軸に沿った座標の差を比較します。

AndroidXライブラリは、より便利なAPIを提供しています：プル・トゥ・リフレッシュ用のViewCompat.setSwipeRefreshLayout、リスト内のスワイプアクション用のRecyclerViewとItemTouchHelper。ItemTouchHelperは、アイコン、背景色、アニメーションなどの視覚的フィードバックを伴うスワイプ機能を追加できます。

ウェブアプリケーションでのスワイプ

ウェブ開発では、スワイプの処理にTouch Events API（touchstart、touchmove、touchend）と、Hammer.jsやSwiper.jsなどのラッパーライブラリが使用されます。

let startX = 0;
let startY = 0;
const threshold = 50;

element.addEventListener("touchstart", (e) => {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
});

element.addEventListener("touchend", (e) => {
    const dx = e.changedTouches[0].clientX - startX;
    const dy = e.changedTouches[0].clientY - startY;
    if (Math.abs(dx) > threshold) {
        console.log(dx > 0 ? "右にスワイプ" : "左にスワイプ");
    }
});

Touch Events APIは、ブラウザでジェスチャを処理するネイティブな方法です。touchstartイベントは開始座標を記録し、touchmoveは動きを追跡し、touchendは結果を判定します。しきい値（threshold）は偶発的なタッチを除外します。

Can I Use (2026)によると、Touch Events APIはブラウザの98%でサポートされています。複雑なジェスチャシナリオ（複数スワイプ、方向認識）には、低レベルの処理を抽象化し、明確なAPIを提供するHammer.jsライブラリの使用が推奨されます。

スワイプを使ったUXパターン

スワイプを使った成功したUXパターンは、モバイルインターフェースの長年の進化を経て形成されました。これらを使用することで、ユーザーは追加の学習なしでジェスチャの動作を理解できます。

「スワイプ・トゥ・デリート」パターンが最も一般的です。リストアイテムを左にスワイプすると削除ボタンが表示されます。iOS（SwipeActionsConfiguration）とAndroid（ItemTouchHelper）で標準化されています。ユーザーは左スワイプでアイテムが削除またはアーカイブされることを期待しています。

「スワイプ・トゥ・ゴー・バック」パターン — 画面の左端からスワイプして前の画面に戻ります。iPhone X以降、iOSで標準になりました。Androidでも、同様のナビゲーションがシステムジェスチャを通じて機能します。独自のアプリケーションでこのシステムジェスチャと競合しないことが重要です。

「プル・トゥ・リフレッシュ」パターン — 下にスワイプしてコンテンツを更新します。Loren BrichterがTweetie（2008）のために発明し、現在は何百万ものアプリケーションで使用されています。両プラットフォームの標準コンポーネントに実装されています。

• フィードバック — 要素は指とともに動き、スワイプ完了前に結果を示す必要があります
• ジェスチャの競合 — 同じ要素で水平スワイプとスクロールを同時にサポートしないでください
• 発見可能性 — 最初のスワイプアクションには視覚的なヒントを伴わせる必要があります
• キャンセル — ユーザーは指を元の位置に戻すことでスワイプをキャンセルできる必要があります