interface-affordances について
Interface Affordancesは、操作の手がかりが画面上で認識でき、見た目どおりに動作するかを確認するデザインスキルです。ポインター、タッチ、キーボード、支援技術向けの確認項目を備えています。
主な機能
- 01視覚的な手がかりと動作の一致
- 02重要な操作をホバーなしで表示
- 03入力方法に応じたターゲットの確認
- 04押下・選択・無効状態の確認
- 05アクセシブルな名前・ロール・状態の確認
活用シーン
- 01画面上の操作の見つけやすさのレビュー
- 02タッチとキーボードの操作手がかりの確認
- 03無効・読み込み中のコントロールの監査
- 04コントロールのラベルと状態の評価
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/interface-affordancesを入力して読み込まれたか確認します。
詳細
インターフェースのアフォーダンス
アフォーダンスは、可能な操作を認識できるようにします。何ができるか分からなければ、コードが動作していてもインタラクションは不完全です。
基本方針
- 視覚的な手がかりは、実際の動作と一致させます。
- 重要な操作をホバーだけに依存させてはいけません。
- ターゲット領域と間隔は、入力方法に合わせます。
- 状態の変化は、その意味が分かるようにします（押下、選択、展開、無効、読み込み中）。
- 装飾的な動きを、アフォーダンスと誤認させてはいけません。
推奨／非推奨
| 推奨 | 非推奨 |
|---|---|
| 主要な操作を常に示す手がかり | 重要なコントロールをホバー時だけ見つけられるようにすること |
| 押下／選択／展開状態を明確にすること | 通常時とアクティブ時のスタイルを同一にすること |
| ポインター／キーボード／タッチに適したターゲット | 視覚上のアイコンは大きいのに、クリック領域が小さいこと |
| 動作も無効化する無効状態のスタイル | グレーアウトしているのに、ハンドラーが実行されるコントロール |
| 操作内容を示すラベル | アクセシブルな名前のないアイコンのみのコントロール |
入力方法ごとの確認事項
- ポインター： ホバーで操作を補足しても、重要な操作をホバーでしか使えないようにしてはいけません。
- タッチ： タップできる領域を見えるようにし、ホバーに依存する UI は避けます。
- キーボード： フォーカススタイルはアフォーダンスの一部であり、後回しにしてはいけません。
- 支援技術： 名前、ロール、状態によって、視覚的に示されているものと同じ操作の可能性を伝えます。
レビューチェックリスト
- 初めて使う人にも、何がインタラクティブか分かりますか？
- すべてのインタラクティブ要素に、認識できる状態変化がありますか？
- 重要な操作は、ホバーしなくても見えますか？
- アイコンに名前がありますか？
- 無効状態と読み込み中の状態は、その見た目と動作が状態に合っていますか？
- モーションを減らす設定のユーザーやタッチ操作のユーザーでも、操作を見つけられますか？
関連エッセイ
- アフォーダンスについて
- プロダクトを魅力的にする10の原則
- モーションを減らすことについて
コメント
Markdown 対応