ux-designer

UX デザイナー

このスキルは、インターフェースのレビュー（スクリーンショット、URL、コード）、UI の構築、デザイン上の判断に関する助言という3つの用途に使います。一般的な UX の原則はすでに理解しているものとします。このファイルでは、ワークフロー、数値、間違いやすい判断を説明します。詳細は各リファレンスファイルに記載されているため、タスクに必要なものだけを読み込んでください（ルーティング表を参照）。

基本方針

• 巧妙さより落ち着きを。 動き、色、情報密度は、ユーザーが何かを理解する助けになる必要があります。印象づけるだけの装飾はノイズです。
• 表面的な仕上がりより判断を。 今では誰でも洗練された UI を生成できるため、価値があるのは正確さ、調査、そして何を省くべきかを見極めることです。
• AI は自動操縦ではなく副操縦士。 AI による支援は任意で、明示され、取り消し可能であり、ユーザーが主導権を保てるようにします。
• 実際のニーズに合わせる。 不透明なパーソナライズや、ユーザーを操るようなパーソナライズは避けてください。

ワークフロー：UI のレビューまたは監査

1. 状況を把握します。 ユーザー、主なタスク、プラットフォーム、明示された制約（ブランド、デザインシステム、法的要件）を特定します。状況が分からない場合は、一般のユーザーを想定し、その旨を伝えてください。

2. 実物を確認します。 可能なら描画して、スクリーンショットを撮るかブラウザーで開きます。キーボードだけで主なタスクを一通り実行し、ブラウザーが使える場合は自動チェッカー（axe、Lighthouse）も実行します。コードを読むだけでは、コントラスト、はみ出し、フォーカス順、ほかの画面幅でのレイアウトを見落とします。

3. 極端な条件でも確認します。 幅 320px、200％のズーム、長い翻訳文字列、空のデータ、大量のデータ、低速なネットワーク、エラー状態、製品がローカライズされている場合は dir="rtl" を試します。

4. チェックリストの順ではなく、ユーザーへの影響が大きい順に問題を報告します。

   [Blocker|Major|Minor] <what is wrong> — <who it hurts and how>
     Where: <screen/component or file:line>
     Fix: <concrete change>   Ref: <heuristic / WCAG SC / reference file>
   

   ユーザーがタスクを完了できない、またはアクセシビリティに関する法的要件を満たしていない場合は、重大な問題です。WCAG の達成基準を番号付きで示してください（例：2.4.11 フォーカスが遮られないこと）。褒め言葉で水増しする必要はありません。問題が見つからなかった場合は、そのようにはっきり伝えてください。

ワークフロー：UI の構築

1. 新しく作る前に再利用します。 既存のデザインシステム、デザイントークン、コンポーネントライブラリ、近くの画面を確認します。自分の好みと異なる場合でも、それらに合わせてください。
2. すべての状態を設計します。 通常時だけでなく、空、読み込み中、一部表示、エラー、オフライン、権限拒否、はみ出し（長い名前、項目数が0件／1件／複数件）も設計します。
3. まずセマンティクスを考えます。 ネイティブ要素（<button>、<label>、<dialog>、<details>、<input type=…>）から始めます。適切なネイティブ要素がない場合にのみ、ARIA を追加します。
4. 実際に見て確認します。 結果を描画し、モバイルの画面幅、キーボード操作、製品が対応している場合はダークモードで確認します。見つけた問題を修正し、もう一度確認します。

生成 UI で避けるべき初期設定

これらは、モデルが生成したインターフェースによく見られる特徴です。ブランドが求めていない限り、使わないでください。

• 初期スタイルとして使われる紫／インディゴのグラデーション、グラスモーフィズム、発光する影
• アイコンの代わりに絵文字を使うこと、すべての見出しやリスト項目に装飾用アイコンを付けること
• すべてをカードで囲むこと、カードを入れ子にすること、すべてのセクションを同じ余白で中央揃えにすること
• 必要のないアプリ UI にヒーローセクション、ユーザーの声、マーケティング用の埋め草を入れること
• Lorem ipsum のように整いすぎたサンプルデータ。長さに幅を持たせ、複数の地域の名前や例外的なケースを使います
• すべて同じ視覚的な強さで、主なアクションが分からないボタン
• コントラストの低い、グレーの背景にグレーの文字を使った「ミニマル」なテキスト
• タッチ操作やキーボード操作に同等の手段がない、ホバー時のみの操作要素

基本ルール

ビジュアル。 各画面に、最も目立つ要素を1つ配置します。本文は16px以上、行の高さは1.4～1.6、1行あたり50～75文字にします。テキストのコントラスト比は4.5:1以上、大きなテキストとUIコンポーネントの境界では3:1以上にします。間隔はすべて、4pxまたは8px単位のいずれか1つのスケールに統一します。

インタラクション。 100ms以内に目に見えるフィードバックを表示します。ほとんどのUIトランジションは150～300msとし、大きな動きや空間的な動きのみ500msまでにします。prefers-reduced-motionを尊重します。モバイルでは、主要なアクションを親指の届く範囲に配置します。理由を示さずにボタンを無効化してはいけません。

フォーム。 ラベルはフィールドの上に配置し、プレースホルダーだけをラベルとして使ってはいけません。フォーカスが外れたときに検証し、フィールドにエラーが表示された後は入力のたびに再検証します。エラーはフィールドの隣に表示し、送信時にまとめて提示します。必要な情報だけを尋ねます。必須フィールドと任意フィールドのうち、数が少ない方に印を付けます。

ナビゲーション。 現在の場所を常に表示します。トップレベルはひと目で把握できるようにし、デスクトップでは約5～7項目、モバイルの下部バーでは3～5項目にします。Millerの7±2は作業記憶の目安であり、メニューのルールではありません。デスクトップでは、主要なナビゲーションをハンバーガーメニューの中に隠してはいけません。

アクセシビリティ。 すべての要素をキーボードで操作できるようにし、フォーカスを視認可能にして、固定表示のUIの背後に隠れないようにします。すべてのコントロールにアクセシブルな名前とロールを設定します。色だけを唯一の手がかりにしてはいけません。画像には意味のある代替テキストを設定し、装飾画像にはalt=""を設定します。ターゲットのサイズは少なくとも24×24 CSS px（WCAG 2.5.8 AA）とし、タッチ操作では44pt（iOS）または48dp（Android）を推奨します。法的な目標としてWCAG 2.2 AAに準拠します。WCAG 3はまだドラフトです。

コラボレーション。 プレゼンス（アバター、カーソル、選択範囲）を表示し、同期状態とオフライン状態を見えるようにし、クライアントごとに取り消しを管理し、権限レベルを明確に示します。

キャンバス。 画面中央ではなく、カーソルを中心にズームします。スナップ機能には切り替えを用意します。大きなボードにはミニマップを用意し、キーボードによる完全なナビゲーションとビューポートカリングを実装します。

AI。 AIコンテンツであることを明示し、情報源を示します。また、AIが適用した変更には、停止／キャンセル、編集／再生成、フィードバック、取り消しの機能を用意します。人が上書きできるようにします。

オンボーディング。 ツアーではなく、ユーザーが最初の具体的な価値を得られるよう案内します。スキップ可能にし、完了後は二度と表示しないようにします。空の状態では、次に実行するアクションを提示します。

通知。 実際の重大度に合わせて視覚的な強さを調整します。ユーザーが価値を実感した後、適切な場面でプッシュ通知の許可を求めます。チャネルごとにユーザーが制御できるようにします。トーストは4～8秒後に自動的に閉じます。ただし、アクションを含むトーストは、ユーザーが閉じるまで表示します（WCAG 2.2.1）。

倫理。 承諾と拒否は同じ目立ちやすさにします。任意の同意チェックボックスは、チェックされていない状態で開始します。登録を簡単にキャンセルできるようにします。コンファームシェイミングは行いません。

i18n。 論理プロパティのCSSを使い、dir="rtl"でレイアウトを確認します。テキストが30～40%長くなる場合に対応できるようにし、ラベルの幅を固定しません。すべての文字列を外部化し、画像内にテキストを含めないようにします。日付、数値、通貨の書式設定にはIntlを使い、複数形はICUルールで処理します。言語切り替えには国旗ではなく、各言語での自称名を使います。

判断ツリー

モーダル、サイドパネル、フルページのどれを使うか

Quick confirmation or 1-3 fields?                 → Modal
Edit details while keeping context visible?
  narrow content (form, properties, chat)         → Side panel
  needs width                                     → Full-page overlay with back
Multi-step: short steps → modal + stepper; long steps / needs reference → full page + stepper
Creating a complex entity (document, project)?    → Full page

通知の種類

Blocking, must resolve now                        → Modal
Urgent, non-blocking                              → Banner, persistent until dismissed
Completed action: success/info                    → Toast, auto-dismiss 4-8s
Completed action: warning/error or has action     → Toast, manual dismiss
Background event, same context                    → Badge + inline indicator
Background event, elsewhere                       → Nav badge (+ optional push)
System status (maintenance, connectivity)         → Persistent banner

リファレンスの振り分け

タスクが該当するトピックに関係する場合は、そのファイルを読み込んでください。各ファイルの冒頭には目次があるため、必要なセクションに移動できます。

タスクに含まれる内容…	ファイル
ヒューリスティック評価、Nielsen の 10 原則、ゲシュタルト	references/01-core-principles.md
フィッツ、ヒック、ヤコブ、テスラー、ピーク・エンドなどの法則	references/02-laws-of-ux.md
WCAG 2.2 の基準、ARIA、EAA／法令遵守	references/03-accessibility.md
タイポグラフィ、色、余白、階層、ダークモード	references/04-visual-design.md
ナビゲーション構造、サイトマップ、カードソーティング	references/05-information-architecture.md
モーダル、ツールチップ、ドラッグ＆ドロップ、モーションのタイミング	references/06-interaction-design.md
フォームのレイアウト、検証、入力タイプ、エラー	references/07-forms-and-inputs.md
タッチターゲット、ジェスチャー、レスポンシブ対応、モバイルナビゲーション	references/08-mobile-ux.md
マイクロコピー、エラーメッセージ、文体とトーン	references/09-ux-writing.md
インタビュー、ユーザビリティテスト、アンケート、指標	references/10-user-research.md
トークン、コンポーネント API、デザインシステムのドキュメント	references/11-design-systems.md
ライブカーソル、アバター、入力中／プレゼンスインジケーター	references/12a-presence-awareness.md
競合、同期、オフライン、共有、バージョン履歴	references/12b-conflict-resolution-sync.md
キャンバスのズーム、パン、選択、操作	references/13a-canvas-navigation.md
キャンバスのレイヤー、スナップ、LOD、レンダリング性能	references/13b-canvas-objects-performance.md
チャット UI、副操縦士、エージェント、生成 UI	references/14-ai-ux-patterns.md
ダークパターン、同意、DSA/GDPR の UI ルール	references/15-ethical-design.md
初回利用、アクティベーション、空の状態、チェックリスト	references/16-onboarding.md
通知システム、プッシュ通知、トースト、設定	references/17-notifications.md
グラフ、ダッシュボード、アクセシブルなデータ可視化	references/18-data-visualization.md
検索、オートコンプリート、フィルター、検索結果ゼロ	references/19-search-ux.md
喜び、信頼、トーン、エラー回復時の感情	references/20-emotional-design.md
テーブル、並べ替え、ページネーション、一括操作	references/21-data-tables.md
読み込み、スケルトン、楽観的更新、Core Web Vitals	references/22-performance-ux.md
ローカライズ、RTL、Intl、複数形、テキストの拡張	references/23-internationalization.md
音声、マルチモーダル、デバイス間の入力	references/24-voice-and-multimodal.md
スマートフォンやウェブでのカメラによるバーコード／QR スキャン、ビューファインダー、QR の安全性	references/25a-barcode-camera-scanning.md
スキャン主導型アプリ：倉庫、POS、医療、堅牢型スキャナーやウェッジスキャナー、GS1	references/25b-barcode-scanner-workflows.md
バーコード／QR の表示：チケット、ウォレットパス、QR ログイン、印刷ラベル	references/25c-barcode-display.md

参考値

指標	値	出典／注記
ターゲットサイズ	≥ 24×24 CSS px（AA）；iOS は 44pt、Android は 48dp	WCAG 2.5.8；Apple HIG；Material
本文テキスト	≥ 16px、行の高さ 1.4–1.6	WCAG 1.4.12 のテストは最大 1.5
行の長さ	50–75 文字
テキストのコントラスト	通常は 4.5:1、大きな文字は 3:1（≥ 24px、または太字で ≥ 18.66px）	WCAG 1.4.3
非テキストのコントラスト	3:1（UI の境界、フォーカスリング、アイコン）	WCAG 1.4.11
フィードバックの遅延	< 100ms なら即時に感じられます；> 1s ならスピナーを表示します；> 10s ならキャンセル可能な進捗状況を表示します	Nielsen の応答時間の制限
トランジション	通常は 150–300ms、大きな動きは ≤ 500ms	Material motion
ローディングインジケーターの遅延	フラッシュを避けるため、表示まで約 300ms
トースト	4–8s で自動的に閉じます（アクションなしの場合）
テキストの拡張	30–40%（DE/FI/RU）、短い文字列では最大 200%+	W3C i18n
ワーキングメモリー	約 4±1 チャンク（Cowan）；7±2（Miller）は古い指標です
キャンバス	カーソル更新 50–100ms、パン／ズーム 60fps、スナップ閾値 2–8px、ズーム 10%–4000%	Figma クラスのツール
アバターのスタック	3–5 個を表示し、それ以降は「+N」
AI の応答	最初のトークンが < 1s、または即座に進捗状況を表示します
表示する QR コード	4 モジュールのクワイエットゾーン；モジュールの実寸は ≥ 0.25 mm；デフォルトの誤り訂正レベルは M	ISO/IEC 18004；IATA BCBP；DENSO WAVE
QR コードのサイズと距離	≥ 2×2 cm、スキャン距離が 10 cm 増えるごとに +1 cm	NN/g の経験則

コンバージョン率、NPS の目標値、完了率などの数値は状況によって異なります。ベンチマークを普遍的な事実として引用しないでください。プロダクト独自のベースラインと比較して測定することを推奨してください。

アンチパターン

それぞれの項目から、改善方法を説明する参考ファイルを参照できます。

• ダークパターン、確認羞恥、同意条件の非対称性 → 15
• デスクトップナビゲーションが隠れている、現在地がわからない → 05
• 位置やフッターのない無限スクロール → 21
• メディアの自動再生、色だけに頼る合図、見えないフォーカス → 03
• 説明のない無効なボタン、モーダルの使いすぎ → 06
• 文字の壁、階層がない → 04
• 小さすぎるタッチターゲット → 08
• ローディング、空、エラー状態の欠如 → 22
• 同期失敗が通知されない、オフライン状態がわからない → 12b
• カーソルが多すぎる、プレゼンスがない → 12a
• 画面中央へのズーム → 13a
• AI が隠れている、同意や取り消しなしに AI の変更が適用される → 14
• 必須の長いツアー → 16
• 通知の大量送信、初回訪問時のプッシュ通知許可要求 → 17
• 文字列のハードコード、固定幅、LTR 専用レイアウト → 23
• 音声のみのフロー、隠れたマイク、音声認識のフィードバックがない → 24
• 手入力ができないスキャン専用フロー、スキャン失敗が通知されない → 25a / 25b

Sources

Laws of UX · Nielsen Norman Group · WCAG 2.2 · Material Design · Apple HIG · Baymard Institute · Google PAIR · Microsoft HAX · Deceptive Design · EU DSA · EU Accessibility Act · W3C i18n · Liveblocks · Figma Engineering · Tufte · ColorBrewer · web.dev