本文へスキップ

モバイル・タッチ操作

スワイプ・長押し・ピンチ・固定CTA。指で使う画面の作法。

指で使う画面の作法を集めたカテゴリ。左右両側のスワイプアクション、浮いた主アクションのボトムナビ、スクロールで縮む FAB、サムが滑るセグメント、慣性スナップのページャー、長押しメニュー、ピンチズーム、スクロールで現れる固定 CTA、インセットグループリスト、スナップ位置のあるシート、スワイプで消す通知、タッチリップル、スキップできるオンボーディング、押し込みの手応えトグルがある。原則はフィッツの法則。指は太く、届く範囲は画面の下半分に偏るので、主操作は大きく・下に・近くに置く。PC の見本をそのまま縮めた画面を、指の物理に合わせて直すときに引く。

関わる原則: フィッツの法則14件

使い分け一覧の操作は swipe-actions-both か long-press-context、画面の移動は bottom-nav-raised / swipe-pager-dots。地図や詳細の上に重ねるなら sheet-snap-points、購入導線は sticky-cta-on-scroll。設定画面は inset-grouped-list をそのまま器にする。

まず見る3件

  • ドラッグ

    左右両側のスワイプアクション

    Two-Sided Swipe Actions

    メール一覧の行を右へスワイプすると「既読」、左へスワイプすると「アーカイブ／削除」が現れる。しきい値を越えると色が濃くなり、離した瞬間に実行される。

    • 右＝前向きな操作（既読）、左＝片付ける操作（アーカイブ・削除）に固定し、どのアプリでも指が覚えている向きに合わせる
    • しきい値の手前では戻り、越えると色が変わってラベルが太る。「離すと実行される」ことを指を離す前に伝える
    • 削除は最も遠い位置に置く。取り消しにくい操作ほど、届くまでの距離を長くして誤操作を減らす
    • JS
    コードを見る →
  • ドラッグ

    スナップ位置のあるシート実例あり

    Sheet with Detents

    地図の上に重なるシートを、ハンドルのドラッグで「閉じる／半分／全画面」の 3 段階に止める。離した位置と速さで最寄りの段へ吸い付き、全画面のときだけ中身がスクロールする。

    • 段は 3 つまで。閉じた状態でも見出しと 1 行が見える高さ（ピーク）を残し、シートの存在を消さない
    • 離したときは最寄りの段へ吸い付く。ただし速いフリックは距離に関係なく次の段へ送ると、指の意図に合う
    • 中身のスクロールは全画面のときだけ許す。半分の状態でスクロールできると、シートの引き上げと取り合いになる
    • JS
    コードを見る →
  • スクロール

    スクロールで現れる固定CTA実例あり

    Scroll-Revealed Sticky CTA

    商品ページを読み進めて価格が画面外に消えたところで、下から価格＋「カートに入れる」の帯が現れる。上へ戻って価格が見えると帯は引っ込む。

    • 帯を出す条件は「本文の価格が画面から消えた」こと。最初から出しっぱなしにすると本文の一部を常に隠す
    • 帯には価格と主 CTA と安心の一言（送料無料・返品可）だけ。副 CTA は本文側に残して主役を守る
    • 帯の高さぶん、本文の末尾に padding-bottom を足す。最後の段落やフッターが帯の裏に隠れる事故を防ぐ
    • JS
    コードを見る →

使い分け表

パーツ操作技術向く場面状態
左右両側のスワイプアクション
Two-Sided Swipe Actions
ドラッグJSメール・タスクなど行ごとに定番操作がある一覧・片手で既読・片付けを素早く済ませたい画面default / active / empty
浮いた主アクションのボトムナビ
Bottom Navigation with Raised Action
クリックJS主要な到達先が 3〜5 個のモバイルアプリ・「作る・投稿する」主アクションを常に出したい画面default / focus / active
スクロールで縮む拡張FAB
Extended FAB
スクロールJS一覧の上に「新規作成」を常に置きたい画面・本文を読む間はボタンを小さくしたい長いリストdefault / focus
スライドするサムのセグメント
Sliding Segmented Picker
クリックJS日／週／月のように排他の 2〜5 区分を切り替える・切り替えると同じ画面の数値が変わる集計表示default / focus
慣性スナップのスワイプページャー
Swipe Pager with Snap
ドラッグJS数枚のおすすめ・お知らせカードを横にめくる・指の速さで送りたいモバイルのカード面default / focus / active / disabled
長押しコンテキストメニュー
Long-Press Context Menu
長押しJS写真・ファイルのタイルに副操作を隠したい一覧・タップは開く、長押しは操作、と役割を分けたい画面default / hover / focus / active
ピンチズームのキャンバス
Pinch to Zoom
ドラッグJS地図・図面・大きな画像を指で拡大して見る・拡大の中心を指の間（カーソル位置）に固定したい場面default / focus / active
スクロールで現れる固定CTA
Scroll-Revealed Sticky CTA
スクロールJS商品ページで価格が画面外に消えたら購入導線を出す・長い説明の途中でも主 CTA へ届かせたいモバイルdefault / focus
インセットグループリスト
Inset Grouped List
クリックJSiOS 風の設定画面・「移動する行」と「その場で変わる行」を混ぜて並べるdefault / focus / active / disabled
スナップ位置のあるシート
Sheet with Detents
ドラッグJS地図の上に重ねる周辺情報のシート・閉じる／半分／全画面の 3 段で見せ方を変えたい面default / focus / active
スワイプで消せる通知スタック
Swipe-to-Dismiss Notification Stack
ドラッグJSロック画面・通知センター風に積んだ通知・1 枚ずつ払って消す操作が主役の一覧default / focus / active / empty
タッチリップル付きリスト
Touch Ripple List
クリックJSAndroid 風の連絡先・設定リスト・押した位置を返したい長い一覧default / focus / active
スキップできるオンボーディング
Onboarding Pager with Skip
ドラッグJS初回起動の 3 画面までの説明・1 画面 1 メッセージで価値を伝える導入default / focus / active
押し込みの手応えトグル
Press-Scale Toggle
クリックJS保存・通知・お気に入りのような即時反映のトグル・押した手応えを返したいモバイルのボタン群default / focus / active

すべての見本（14件）

  • ドラッグ

    左右両側のスワイプアクション

    Two-Sided Swipe Actions

    メール一覧の行を右へスワイプすると「既読」、左へスワイプすると「アーカイブ／削除」が現れる。しきい値を越えると色が濃くなり、離した瞬間に実行される。

    • JS
    コードを見る →
  • クリック

    浮いた主アクションのボトムナビ実例あり

    Bottom Navigation with Raised Action

    5枠のボトムナビ。中央に浮いた「投稿」ボタンを置き、選んだタブの下でインジケータが滑る。通知タブには未読バッジ。タップで画面のタイトルが変わる。

    • JS
    コードを見る →
  • スクロール

    スクロールで縮む拡張FAB実例あり

    Extended FAB

    ラベル付きの「＋ 新規作成」ボタンが、一覧をスクロールしている間はアイコンだけに縮んで本文を隠さず、指が止まると再びラベル付きに戻る。

    • JS
    コードを見る →
  • クリック

    スライドするサムのセグメント

    Sliding Segmented Picker

    「日／週／月／年」の4区分。選ぶと白いサムが選択位置へ滑り、下の集計値が切り替わる。矢印キーでも移動でき、iOS 型の見た目をボタンだけで作る。

    • JS
    コードを見る →
  • ドラッグ

    慣性スナップのスワイプページャー

    Swipe Pager with Snap

    4枚のカードを横スワイプでめくる。指の速さで次へ飛ぶか戻るかを決め、必ず1枚の位置にスナップする。ドットが連動し、PC ではドラッグと矢印ボタンで操作できる。

    • JS
    コードを見る →
  • 長押し

    長押しコンテキストメニュー

    Long-Press Context Menu

    写真タイルを長押し（PC は押し続け）すると、タイルがわずかに縮んで「押している」手応えを返し、450ms 後にメニューが浮かぶ。離すか外側をタップすると閉じる。

    • JS
    コードを見る →
  • ドラッグ

    ピンチズームのキャンバス

    Pinch to Zoom

    2本指のピンチで拡大・縮小し、1本指でパンする地図風キャンバス。ダブルタップで 2 倍と等倍を往復、PC ではホイールで拡大・ドラッグで移動。倍率は 1〜4 倍に制限。

    • JS
    コードを見る →
  • スクロール

    スクロールで現れる固定CTA実例あり

    Scroll-Revealed Sticky CTA

    商品ページを読み進めて価格が画面外に消えたところで、下から価格＋「カートに入れる」の帯が現れる。上へ戻って価格が見えると帯は引っ込む。

    • JS
    コードを見る →
  • クリック

    インセットグループリスト実例あり

    Inset Grouped List

    iOS の設定画面の型。角丸の白いグループを灰色の地に浮かせ、セクション見出し・アイコン・値・シェブロン・トグルを行に並べる。トグルはその場で切り替わる。

    • JS
    コードを見る →
  • ドラッグ

    スナップ位置のあるシート実例あり

    Sheet with Detents

    地図の上に重なるシートを、ハンドルのドラッグで「閉じる／半分／全画面」の 3 段階に止める。離した位置と速さで最寄りの段へ吸い付き、全画面のときだけ中身がスクロールする。

    • JS
    コードを見る →
  • ドラッグ

    スワイプで消せる通知スタック

    Swipe-to-Dismiss Notification Stack

    ロック画面風に積まれた通知を、横スワイプで 1 枚ずつ払って消す。しきい値を越えると流れて消え、下の通知が詰め上がる。「すべて消去」で一括、空になると案内文が残る。

    • JS
    コードを見る →
  • クリック

    タッチリップル付きリスト実例あり

    Touch Ripple List

    Android 型のリスト。押した位置から波紋が広がって「どこを押したか」を返す。スクロール中は指が動いた量で判定してリップルを出さず、タップだけに反応する。

    • JS
    コードを見る →
  • ドラッグ

    スキップできるオンボーディング

    Onboarding Pager with Skip

    初回起動の 3 画面。スワイプか「次へ」で進み、右上の「スキップ」でいつでも抜けられる。最後の画面だけボタンが「はじめる」に変わり、押すと本編へ。

    • JS
    コードを見る →
  • クリック

    押し込みの手応えトグル

    Press-Scale Toggle

    「保存」「通知」「お気に入り」の 3 つのトグル。押している間だけ 0.96 倍に沈み、離すと弾んで戻る。切り替わった瞬間に navigator.vibrate があれば 10ms 震える。

    • JS
    コードを見る →