mcpField
G
gesture-alternatives

gesture-alternatives

github.com/owl-listenerデザイン・UI10874 回インストール20 週間前に更新
リポジトリ

gesture-alternatives について

すべてのジェスチャーに、より簡単な代替手段を設けるためのデザインスキルです。運動機能に制約のある人も同じタスクを行えるよう、ジェスチャーの種類、代替操作、発見しやすさ、カスタマイズを扱います。

主な機能

  1. 01軌跡ジェスチャーにボタンの代替手段
  2. 02マルチポイント操作に単一点の選択肢
  3. 03デバイス動作に画面上のコントロール
  4. 04時間制限のある操作に非時間依存の手段
  5. 05ヒントとカスタマイズに対応

活用シーン

  1. 01スワイプ削除にボタンがあるか確認
  2. 02ピンチなしでズームできるようにする
  3. 03振って取り消す操作に表示ボタンを追加
  4. 04ジェスチャーの無効化や割り当て変更を確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/owl-listener/inclusive-design-skills --skill gesture-alternatives

インストール後、Claude Code で/gesture-alternativesを入力して読み込まれたか確認します。

詳細

ジェスチャーの代替手段

ジェスチャーを使った操作には、必ずより簡単な代替手段が必要です。特定の身体動作を必要とするジェスチャーは、運動障害や四肢の違い、震え、可動域の制限がある人を排除してしまいます。

基本原則

ジェスチャーはショートカットであり、アクセスを妨げるものではありません。ジェスチャーで実行できる機能には、必ず別の方法でもアクセスできるようにします。

ジェスチャーの種類と必須の代替手段

経路をたどるジェスチャー(スワイプ、描画、ドラッグ)

特定の経路をなぞる必要があり、多くのユーザーには実行できません。

  • スワイプして削除 → 常に表示される削除ボタン
  • スワイプして移動 → 前へ/次へボタン
  • 図形を描画 → メニューから図形を選択
  • ドラッグして並べ替え → 上へ/下へ移動するボタン、または番号入力
複数の接触点を使うジェスチャー(ピンチ、回転、2本指スクロール)

複数の接触点を同時に使う必要があります。

  • ピンチしてズーム → ズームボタン(+/−)とズーム倍率のテキスト入力
  • 2本指で回転 → 回転ボタン、または角度入力
  • 2本指スクロール → 1本指スクロール、または表示されるスクロールバー
  • 3本指スワイプ → 表示されるボタン、またはメニュー項目
デバイスの動き(振る、傾ける、回転)

デバイス全体を動かす必要があります。

  • 振って元に戻す → 常に表示される元に戻すボタン
  • 傾けて操作 → 画面上の方向操作
  • デバイスの回転でコンテンツを回転 → 手動で切り替える回転トグル
タイミングを要するジェスチャー(長押し、ダブルタップ)

正確なタイミングが必要です。

  • 長押しでコンテキストメニューを表示 → 表示されるメニュー起動ボタン(⋮ または ⋯)
  • ダブルタップしてズーム → ズームボタン
  • 長押しして録画 → 開始/停止の切り替えボタン

設計パターン

プログレッシブエンハンスメント
  • まずボタンを使ったバージョンを作成します
  • そのうえで、機能を拡張するものとしてジェスチャー操作を追加します
  • これにより、代替手段を常に利用できる状態にできます
見つけやすさ
  • ジェスチャーのショートカットは説明しますが、必須にはしません
  • 初回利用時にヒントを表示します(「スワイプして削除することもできます」)
  • 設定またはヘルプにジェスチャーガイドを用意します
  • ユーザーがジェスチャーの存在を知っていると決めつけないでください
カスタマイズ
  • ジェスチャー操作を完全に無効にできるようにします
  • 可能な場合は、ジェスチャーを再割り当てできるようにします
  • システムレベルのジェスチャー設定を尊重します

評価のための質問

  1. すべてのジェスチャーに、目に見える単一操作の代替手段がありますか?
  2. 複数の接触点を使うジェスチャーを実行できないユーザーも、すべてのタスクを完了できますか?
  3. デバイスの動きを使う操作は必須ではなく、画面上の代替手段がありますか?
  4. タイミングを要するジェスチャーを、時間制限のない操作に置き換えられますか?

コメント