スワイプジェスチャーUIパターン：削除・アーカイブ・更新・カード操作の設計

スワイプジェスチャーはモバイルUIの直感的なインタラクション手段です。リスト項目の削除・アーカイブ・プルトゥリフレッシュ・カードのTinder式スワイプなど、様々なUIパターンでスワイプが活用されています。本記事では、スワイプジェスチャーUIの主要パターンと設計のポイントを解説します。

スワイプアクション（Swipe Actions）

リスト項目を左または右にスワイプすると、アクション（削除・アーカイブ・ピン留め等）が現れるパターンです。

左スワイプ（破壊的アクション）：

左スワイプで削除・アーカイブなどの操作を表示します。赤い背景 + ゴミ箱アイコン（削除）・グレー背景 + アーカイブアイコンが一般的なビジュアルです。

右スワイプ（非破壊的アクション）：

右スワイプで既読・お気に入り・ピン留めなどの正の操作を表示します。緑・青の背景が一般的です。

スワイプ量に応じた変化：

スワイプ開始直後は小さいアイコンが現れ、スワイプを続けると完全表示・さらに続けると「離すとすぐ実行」のフルスワイプ状態に段階的に変化させると、ユーザーへの意図の伝達が明確になります。

ビジュアルフィードバックの設計：

スワイプ中はアクションのアイコン・背景色をアニメーションで表示します。スワイプを放すとデフォルト位置に戻るか（閾値以下）、アクションが実行されるか（閾値以上）を明確に区別します。

アクションのUNDO：

削除などの破壊的アクション実行後は「元に戻す」トーストを5〜7秒表示します。この実装で「誤って削除した」というユーザーのストレスを大幅に軽減できます。

プルトゥリフレッシュ（Pull to Refresh）

画面を上から下にプルして更新するジェスチャーです。

アニメーションの設計：

プル開始から一定の量まで: 更新アイコン（または矢印）がプル量に比例して回転・引き伸ばされる

閾値を超えた: 「離すと更新」のビジュアル変化（アイコンが完全回転・色変化等）

離した後: スピナーが表示されデータ取得を示す

更新完了: フィードバック（「更新しました」トーストまたはアニメーション）→ 元の位置に戻る

バネ（スプリング）効果：

プル中はゴムを引っ張るような抵抗感（プル量に対して線形でなく減速する動き）を与えることで、物理的なリアリティと「引けるもの」という認知が生まれます。

カードスワイプ（Tinder式）

カードを左右にスワイプして「いいね」「スキップ」を判定するパターン。

視覚的フィードバック：

スワイプ方向に応じてカードが傾き（rotate）、「いいね」（右）は緑のラベル・「スキップ」（左）は赤のラベルが不透明度でオーバーレイされます。

スタック表示：

複数のカードを後ろに少しずらして重ねることで「まだ候補がある」ことを示します。スワイプで一番上のカードが消えると、次のカードがアニメーションで前面に出てきます。

スワイプナビゲーション

画面間のスワイプ遷移：

左右スワイプでページ（タブ）を切り替えるナビゲーション。タブバーのアクティブタブが切り替わると同期されます。

戻るスワイプ（エッジスワイプ）：

iOSのエッジスワイプ（画面左端から右にスワイプで戻る）は、ネイティブアプリの標準動作です。Webアプリでも popstate イベントと連動したスワイプ遷移が実装可能です。

スワイプのアクセシビリティ

スワイプジェスチャーのみに依存するアクションは、運動障がいのあるユーザーが使えない可能性があります。スワイプアクションと同等の操作をボタン（三点メニュー・コンテキストメニュー）でも提供することが重要です。

まとめ

スワイプジェスチャーはモバイルUIの直感的なインタラクションを生み出しますが、スワイプのみに依存しないアクセシビリティ対応も重要です。リスト項目のスワイプアクション・プルトゥリフレッシュ・カードスワイプそれぞれのビジュアルフィードバックとUNDO設計を丁寧に実装することで、快適なモバイルインタラクションが実現します。UI ZUKANではスワイプUIの実装例を掲載しています。