gesture-alternatives について
すべてのジェスチャーに、より簡単な代替手段を設けるためのデザインスキルです。運動機能に制約のある人も同じタスクを行えるよう、ジェスチャーの種類、代替操作、発見しやすさ、カスタマイズを扱います。
主な機能
- 01軌跡ジェスチャーにボタンの代替手段
- 02マルチポイント操作に単一点の選択肢
- 03デバイス動作に画面上のコントロール
- 04時間制限のある操作に非時間依存の手段
- 05ヒントとカスタマイズに対応
活用シーン
- 01スワイプ削除にボタンがあるか確認
- 02ピンチなしでズームできるようにする
- 03振って取り消す操作に表示ボタンを追加
- 04ジェスチャーの無効化や割り当て変更を確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ owl-listener/ inclusive-design-skills --skill gesture-alternativesインストール後、Claude Code で/gesture-alternativesを入力して読み込まれたか確認します。
詳細
ジェスチャーの代替手段
ジェスチャーを使った操作には、必ずより簡単な代替手段が必要です。特定の身体動作を必要とするジェスチャーは、運動障害や四肢の違い、震え、可動域の制限がある人を排除してしまいます。
基本原則
ジェスチャーはショートカットであり、アクセスを妨げるものではありません。ジェスチャーで実行できる機能には、必ず別の方法でもアクセスできるようにします。
ジェスチャーの種類と必須の代替手段
経路をたどるジェスチャー(スワイプ、描画、ドラッグ)
特定の経路をなぞる必要があり、多くのユーザーには実行できません。
- スワイプして削除 → 常に表示される削除ボタン
- スワイプして移動 → 前へ/次へボタン
- 図形を描画 → メニューから図形を選択
- ドラッグして並べ替え → 上へ/下へ移動するボタン、または番号入力
複数の接触点を使うジェスチャー(ピンチ、回転、2本指スクロール)
複数の接触点を同時に使う必要があります。
- ピンチしてズーム → ズームボタン(+/−)とズーム倍率のテキスト入力
- 2本指で回転 → 回転ボタン、または角度入力
- 2本指スクロール → 1本指スクロール、または表示されるスクロールバー
- 3本指スワイプ → 表示されるボタン、またはメニュー項目
デバイスの動き(振る、傾ける、回転)
デバイス全体を動かす必要があります。
- 振って元に戻す → 常に表示される元に戻すボタン
- 傾けて操作 → 画面上の方向操作
- デバイスの回転でコンテンツを回転 → 手動で切り替える回転トグル
タイミングを要するジェスチャー(長押し、ダブルタップ)
正確なタイミングが必要です。
- 長押しでコンテキストメニューを表示 → 表示されるメニュー起動ボタン(⋮ または ⋯)
- ダブルタップしてズーム → ズームボタン
- 長押しして録画 → 開始/停止の切り替えボタン
設計パターン
プログレッシブエンハンスメント
- まずボタンを使ったバージョンを作成します
- そのうえで、機能を拡張するものとしてジェスチャー操作を追加します
- これにより、代替手段を常に利用できる状態にできます
見つけやすさ
- ジェスチャーのショートカットは説明しますが、必須にはしません
- 初回利用時にヒントを表示します(「スワイプして削除することもできます」)
- 設定またはヘルプにジェスチャーガイドを用意します
- ユーザーがジェスチャーの存在を知っていると決めつけないでください
カスタマイズ
- ジェスチャー操作を完全に無効にできるようにします
- 可能な場合は、ジェスチャーを再割り当てできるようにします
- システムレベルのジェスチャー設定を尊重します
評価のための質問
- すべてのジェスチャーに、目に見える単一操作の代替手段がありますか?
- 複数の接触点を使うジェスチャーを実行できないユーザーも、すべてのタスクを完了できますか?
- デバイスの動きを使う操作は必須ではなく、画面上の代替手段がありますか?
- タイミングを要するジェスチャーを、時間制限のない操作に置き換えられますか?
コメント
Markdown 対応