mcpField
M
multi-modal-input

multi-modal-input

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

multi-modal-input について

キーボード、ポインター、タッチ、音声などでタスクを実行できるようにするインターフェース設計スキルです。テキスト入力、コントロール、複雑な操作の代替手段と評価項目を示します。

主な機能

  1. 01キーボードとポインター操作への対応
  2. 02音声入力、貼り付け、自動補完の利用
  3. 03選択コントロールの操作性向上
  4. 04ドラッグやジェスチャーにボタンの代替手段
  5. 05入力アクセシビリティの評価項目

活用シーン

  1. 01キーボードだけで操作できるか確認
  2. 02ドラッグ、地図、ジェスチャーの代替手段を用意
  3. 03音声や支援入力に対応するテキストフィールドの設計

インストール

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

$npx skills add https://github.com/owl-listener/inclusive-design-skills --skill multi-modal-input

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

詳細

マルチモーダル入力の設計

キーボード、マウス、タッチ、音声、スイッチ、視線追跡、またはその組み合わせなど、ユーザーが使いやすい入力方法であらゆるタスクを実行できるシステムを設計します。

基本原則

ユーザーがインターフェースをどのように操作するかを決めつけないでください。選択肢を用意し、ユーザー自身に選んでもらいましょう。

入力方法の幅

人々は多くの方法でテクノロジーを操作し、多くの場合、複数の方法を同時に組み合わせます。

  • キーボード — 物理キーボード、画面上のキーボード、またはスイッチで操作するキーボード
  • マウス/トラックパッド — 標準的なポインティングデバイス
  • タッチ — 指、スタイラス、または支援タッチ
  • 音声 — 音声コマンド、音声入力
  • スイッチデバイス — 選択肢を順に切り替える単一または二つのスイッチ
  • 視線追跡 — 視線による選択
  • ヘッドポインター — 頭の動きでカーソルを操作
  • 呼気スイッチ — 息で操作するスイッチ

デザインパターン

入力方法の同等性
  • すべての操作を、少なくともキーボードとポインター(マウス/タッチ)の両方で実行できるようにします
  • 実用的な場合は、第三の選択肢として音声入力も利用できるようにします
  • ある機能を単一の入力方法だけに限定しないでください
  • テスト:このタスクをキーボードだけで完了できますか? タッチだけでは? 音声だけでは?
柔軟なテキスト入力
  • 物理キーボード、画面上のキーボード、音声入力、クリップボードからの貼り付けに対応します
  • オートコンプリートや候補表示で、入力の負担を軽減します
  • フォームフィールドでの貼り付けを無効にしないでください(パスワードマネージャーや支援ツールは貼り付けに依存します)
  • 参照番号やコードを入力できるよう、スキャンや OCR に対応します
精密な操作を必要としない選択
  • ラジオボタンとチェックボックス:コントロールだけでなく、ラベルもクリックできるようにします
  • ドロップダウン:長いリストでは、入力による絞り込み検索を可能にします
  • 日付選択:カレンダーウィジェットと並べて、必ずテキストフィールドの代替手段を用意します
  • カラーピッカー:16 進数値や RGB 値を入力できるテキスト入力欄を用意します
複雑な操作
  • ドラッグ&ドロップ:ボタンによる並べ替え機能も必ず用意します
  • 描画/注釈:代替手段としてテキストによる説明を用意します
  • 地図の操作:地図上での選択に加えて、住所検索も用意します
  • ジェスチャー(スワイプ、ピンチ):必ずボタンで代替できるようにします

評価の質問

  1. すべてのタスクをキーボードだけで完了できますか?
  2. すべてのタスクをポインターだけで完了できますか?
  3. ドラッグ、ジェスチャー、描画などの複雑な操作に、より簡単な代替手段がないものはありますか?
  4. すべてのテキストフィールドで貼り付けが有効になっていますか?
  5. すべてのフォームコントロールにクリック可能なラベルがありますか?

コメント