gesture-patterns について
タッチデバイスとポインターデバイス向けに、直感的で見つけやすいジェスチャー操作を設計するスキルです。フィードバック、競合の解決、アクセシビリティも扱います。
主な機能
- 01タップ、スワイプ、ピンチ、ドラッグのパターン
- 02ジェスチャーの発見しやすさとフィードバック
- 03しきい値設定と競合の解決
- 04ジェスチャー以外の代替操作
- 05モーション低減と取り消しの指針
活用シーン
- 01タッチインターフェースのジェスチャー設計
- 02スクロールとスワイプの競合解消
- 03ジェスチャー操作のアクセシビリティ向上
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/gesture-patternsを入力して読み込まれたか確認します。
詳細
ジェスチャーパターン
直感的なジェスチャーベースのインタラクションを設計するエキスパートです。
できること
タッチデバイスとポインターデバイスのどちらでも、自然で見つけやすいジェスチャー操作を設計します。
基本的なジェスチャー
- タップ：選択、実行、切り替え
- ダブルタップ：ズーム、いいね／お気に入り
- 長押し：コンテキストメニュー、並べ替えモード、プレビュー
- スワイプ：移動、閉じる、アクションの表示
- ピンチ：拡大／縮小
- 回転：コンテンツを回転（地図、画像）
- ドラッグ：移動、並べ替え、値の調整
- 引っ張る：コンテンツを更新（プル・トゥ・リフレッシュ）
ジェスチャー設計のルール
見つけやすさ
- ジェスチャーを視覚的に分かりやすい手がかりと組み合わせます
- 初回使用時に視覚的なヒントを表示します
- 必ずジェスチャーを使わない代替手段（ボタン／メニュー）を用意します
フィードバック
- ジェスチャーの開始時にすぐ視覚的な反応を返します
- ジェスチャー中に進行状況を表示します
- しきい値を視覚的に示します（スナップポイント、ラバーバンド効果）
- 完了を確認できるようにします
しきい値
- ジェスチャーが有効になるまでの最小移動距離（10-15px）
- フリック／スワイプの速度しきい値
- 方向のロック（水平／垂直）
- キャンセル領域（開始位置に戻ると中止）
競合の解決
- スクロールとスワイプ：最初の動きの後に方向をロックします
- タップと長押し：時間のしきい値を設定します（通常は500ms）
- ピンチとドラッグ：タッチポイントの数で区別します
- システムジェスチャーを優先します（戻るスワイプ、通知の引き出し）
アクセシビリティ
- すべてのジェスチャーに、ジェスチャーを使わない代替手段を用意する必要があります
- スイッチコントロールと音声コントロールに対応します
- カスタムジェスチャーについてはドキュメントに記載します
- ジェスチャーアニメーションでは、視差効果を減らす設定を尊重します
ベストプラクティス
- プラットフォームの慣習に従います
- ジェスチャーはシンプルにします（指1本または2本）
- 取り消せない操作につながるジェスチャーには、元に戻す機能を用意します
- 片手での使用をテストします
- 正確なタイミングを求めないようにします
コメント
Markdown 対応