mcpField
U
user-preference-respect

user-preference-respect

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

user-preference-respect について

インターフェース設計者や開発者向けのアクセシビリティ設計スキルです。OSの設定に応じた表示の調整方法と、設定ごとの確認項目を示します。

主な機能

  1. 01視差効果の軽減設定に対応
  2. 02高コントラストと強制色に対応
  3. 03ライト・ダークテーマに対応
  4. 04透明効果を軽減
  5. 05設定の組み合わせで使いやすさを確認

活用シーン

  1. 01OSの視差効果軽減設定を実装
  2. 02高コントラストモードで操作要素を明確化
  3. 03ライト・ダークテーマで表示を検証
  4. 04複数のアクセシビリティ設定を併用して確認

インストール

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

$npx skills add https://github.com/owl-listener/inclusive-design-skills --skill user-preference-respect

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

詳細

ユーザー設定の尊重

オペレーティングシステムは、ユーザーが必要としているものをすでに把握しています。あなたの役割は、ユーザーの声に耳を傾けて応えることです。これらの設定は、ユーザーが意図を持って選択したものです。無視すれば、ユーザー自身が選んだアクセシビリティ設定を覆すことになります。

設定

prefers-reduced-motion

意味： ユーザーは動きによって不快感や害を感じます。 対応方法：

  • 装飾的なアニメーションをすべて無効にします
  • スライドやフェードのトランジションを、状態が即座に切り替わる動作に置き換えます
  • 必要な動き（読み込み中のスピナーなど）は維持しつつ、簡素化します
  • 視差効果、スクロールに連動するアニメーション、自動切り替えを無効にします
  • この設定を決して上書きしません

検出方法： @media (prefers-reduced-motion: reduce)

prefers-contrast

意味： ユーザーは、よりはっきりした視覚的な区別を必要としています。 対応方法：

  • WCAG の最低基準を超えるコントラストを確保します
  • 控えめな影やグラデーションを、はっきりした境界線に置き換えます
  • フォーカスインジケーターを太く、目立つようにします
  • 透明効果やぼかし効果を取り除きます
  • インタラクティブ要素の境界線を太くします

検出方法： @media (prefers-contrast: more)

prefers-color-scheme

意味： ユーザーはライトまたはダークのインターフェースを好みます。 対応方法：

  • 色を反転するだけではない、本格的なダークモードを提供します
  • どちらのモードでもすべてのコンテンツを読みやすくします
  • 画像、グラフ、アイコン、イラストが両方のモードで適切に表示されることをテストします
  • ダークモードでは純粋な黒（#000）を使わず、目の負担を軽減するために濃いグレー（#1a1a1a）を使います
  • ダークモードは単なる見た目の問題ではありません。目の疲れを軽減し、光に敏感な人の助けになります

検出方法： @media (prefers-color-scheme: dark)

forced-colors

意味： ユーザーは Windows のハイコントラストモードなどを有効にしています。 対応方法：

  • システムによる色の上書きを妨げないようにします
  • 境界線やアウトラインでインタラクティブ要素を示します（システムが色を取り除くためです）
  • 強制カラー表示モードで見えるようになる透明な境界線を使います
  • すべてのインタラクティブ要素を引き続き区別できることをテストします
  • 状態の表示を背景色だけに頼らないようにします

検出方法： @media (forced-colors: active)

prefers-reduced-transparency

意味： ユーザーは透明な要素を読み取りにくいと感じます。 対応方法：

  • 半透明の背景を不透明な背景に置き換えます
  • すりガラス効果や背景のぼかし効果を取り除きます
  • オーバーレイを完全に不透明にします

検出方法： @media (prefers-reduced-transparency: reduce)

実装の原則

プログレッシブエンハンスメント
  • まずアクセシブルなバージョンを構築します
  • 動き、透明効果、視覚的な装飾は拡張機能として追加します
  • 設定が検出されたら、体験を損なうのではなく、拡張機能を取り除きます
尋ねずに検出する
  • オペレーティングシステムですでに設定されているアクセシビリティ設定を、アプリでユーザーに設定させないようにします
  • 自動的に検出して対応します
  • 追加の設定を提供する場合も、システム設定を置き換えるのではなく、それに加える形にします
すべての設定をテストする
  • 各設定を個別に有効にしてテストします
  • 複数の設定を組み合わせてテストします（動きを減らす設定＋ハイコントラスト＋ダークモード）
  • どの状態でもインターフェースが完全で、使いやすいことを確認します
  • 自動テストではメディアクエリの存在を確認できますが、実際に機能することは手動テストで検証します

評価チェックリスト

  • prefers-reduced-motion が検出され、装飾的な動きがすべて停止する
  • prefers-contrast が検出され、視覚的なコントラストが高まる
  • prefers-color-scheme が検出され、テーマが切り替わる
  • forced-colors モードでもインタラクティブ要素が損なわれない
  • 複数の設定を組み合わせても正しく機能する
  • 設定が上書きされたり無視されたりしない

コメント

Markdown 対応