songalobung/ui-ux-design

人間中心のUI/UXデザイン

役立つものを、それを必要とする人々にとって理解しやすく、アクセシブルで、信頼できるものにしましょう。視覚的な洗練は優れた体験を支えますが、誤った問題の解決、わかりにくいコンテンツ、アクセス不能なコントロール、テストされていないワークフローを補うことはできません。

運営原則

1. 人とその成果から始める。 誰が、何を、どのような状況で、どのような制約のもとで行おうとしているのかを理解する。ステークホルダーのリクエスト、機能、トレンドを検証されたユーザーニーズと混同しないこと。
2. 全体的なジャーニーをデザインする。 画面を磨く前に、ステップ、チャネル、ハンドオフ、成果、回復経路、サポートニーズを考慮する。
3. エビデンスと仮定を可視化する。 ユーザーが言ったことや研究が示したことと、解釈や仮説を区別する。ユーザー、研究、テスト、指標、推薦文、製品の事実を捏造しないこと。
4. しばしば除外される人々を含める。 能力、年齢、言語、リテラシー、文化、デバイス、接続性、時間、自信、プライバシー、環境の多様性を考慮する。可能な場合は、障害者を調査や評価に含める。
5. 明確さ、コントロール、回復を優先する。 現在の状態を説明し、次の有用なアクションを明らかにし、予見可能なエラーを防ぎ、適切な方法で戻るまたは回復する方法を提供する。
6. アクセシビリティを設計および実装要件として扱う。 該当する基準を正確に使用するが、技術的な準拠をユーザビリティの証明と誤解しないこと。
7. パターンと視覚効果をタスクのサービスとして使用する。 ユーザーがインターフェースを解読する必要がないように、首尾一貫していて、かつ特徴的であること。
8. 観察された問題から反復する。 早期にプロトタイプを作成し、代表的なユーザーで評価し、影響の大きい障壁を修正し、ローンチ後も学習を続ける。
9. 画面の前に製品について考える。 検証された価値、ビジネス/サービスの現実、ユーザーの目標、リスク、ライフサイクルを理解する。すべての製品を同じ流行のテンプレートにしないこと。
10. 視覚的なストーリーテリングを誠実に使う。 注意、雰囲気、イメージ、奥行き、リズムを形成して意味を明確にする。証拠を捏造したり、構成によって重要な情報を隠したりしないこと。
11. デザインの抑制を実践する。 グラデーション、ガラス、カード、モーション、3D、装飾は、その存在価値を獲得しなければならない。タスクの明確さ、アイデンティティ、または有用なフィードバックを向上させない効果は削除する。

学際的な運用モデル

重要なデザイン作業には、8つの補完的なレンズを順番に適用し、互いに挑戦させるようにします。プロダクトデザインはタスクとプロダクトの適合性をチェックし、UXリサーチはエビデンスと仮定をチェックし、クリエイティブディレクションは独創性と一貫性をチェックし、デザインシステムアーキテクチャは再利用性と一貫性をチェックし、フロントエンドエンジニアリングは実現可能性とレンダリング動作をチェックし、インタラクション/モーションデザインは状態、フィードバック、目的のある動きをチェックし、アクセシビリティ/ユーザビリティ監査は操作性と包含性をチェックし、そして容赦のないデザイン批評家は、結果がまだ失敗する可能性のある最も明確な理由を探します。批評家は、作品に対して厳格であり、人々に対して敬意を払うべきです。資格のある人間の専門家であると主張したり、行われなかった調査、監査、テストを実施したと主張しないでください。詳細な責任とレビューシーケンスは references/design-capability-playbook.md にあります。

適切な深さを選択する

小さなコンポーネントの変更には、近くの慣例を検査し、影響を受ける状態を特定し、実装し、適切なチェックを実行します。画面またはフローの場合は、以下の完全なデザインループを使用します。新しい製品、リスクの高いワークフロー、または曖昧な問題の場合は、洗練されたソリューションに着手する前に、ディスカバリーと検証を行います。小さなタスクをプロセス儀式に膨らませないこと。成果物が視覚的であるという理由だけで、人間とアクセシビリティの質問を決してスキップしないでください。

エンドツーエンドのデザインループ

1. 問題をフレーミングする

対象ユーザー、ユーザータスク、望ましい成果、ビジネスまたはサービスの制約、使用環境、プラットフォーム、コンテンツ、リスク、および明確に範囲外のものを特定します。変更する前に既存の製品とリポジトリを検査します。ナビゲーション、利用可能な場合は分析または調査の証拠、ルート、コンポーネント、デザイントークン、コピー、依存関係、プラットフォームの慣例などです。

問いかけ：その人は何を達成する必要があるのか？行動する前に何を知っている必要があるのか？成功、失敗、停止、または後で戻ってきた場合、何が起こるのか？どの仮定が未検証か？この体験を安全でなく、排他的で、混乱させ、またはコストが高くするものは何か？

人口統計学的ラベルが行動を説明するとは想定しないでください。観察可能なコンテキスト、目標、障壁、証拠を、ステレオタイプや架空のペルソナよりも優先します。重要なコンテキストが欠落している場合は、焦点を絞った質問をするか、そうでなければ控えめな仮定を述べて先に進みます。

2. ニーズとコンテキストを適切に調査する

当面の決定に答えられる最も軽量な方法を使用します。既存の調査とサポートフィードバックのレビュー、利用可能な場合は分析またはタスク結果の検査、ユーザーへのインタビューまたは観察、コンテキスチュアルインクワイアリの実施、ジャーニーのマッピング、またはプロトタイプのテストなどです。最近の実際の行動について、オープンエンドで非誘導的な質問をします。人々が言うことだけでなく、実際に行うことも観察します。プライバシーを保護し、適切な同意を得て、明確な必要性と保護策なしに機密データを収集しないでください。

関連するタスクとコンテキストを代表する人々を募集します。これには障害者やアクセス障壁に直面している人々を含めます。1人の参加者を集団全体の代表として扱わないでください。方法、サンプルの制限、証拠、未解決の質問を記録します。直接的な調査が利用できない場合は、そう述べ、推測されたニーズを後の検証のための仮説としてラベル付けします。

3. サービスと情報をマッピングする

トリガーから成功した成果までのエンドツーエンドのタスクをマッピングします。これには前提条件、決定、エラー、中断、ハンドオフ、ヘルプ、再訪を含めます。不要なステップ、繰り返しの入力、不明確な適格性、行き止まり、および人々が安心や人間による支援を必要とするポイントにマークを付けます。

コンテンツを組織の組織図ではなく、ユーザーの質問と行動に基づいて整理します。各ページまたはビューに明確な目的を与えます。説明的な見出し、意味のあるグループ化、予測可能なナビゲーションを使用します。ユーザーが必要なときに重要な情報と選択肢を可視化したままにします。重要な選択や次のステップを隠すことなく認知負荷を軽減する場合にのみ、プログレッシブディスクロージャーを使用します。

4. 優先順位を付け、成功を定義する

ユーザーへの影響、頻度、失敗の重大性、アクセシビリティリスク、不確実性によって優先順位を付けます。視覚的な新規性ではありません。成功が何であるかを観察可能な用語で定義します。タスクの完了、正しい情報の検索、エラーからの回復、または決定の理解などです。結果の測定は、それらが誠実に収集され、その限界とともに解釈できる場合にのみ使用します。コンバージョンの改善をでっち上げたり、視覚的なリデザインだけから因果関係を主張したりしないでください。

5. 着手する前に探索する

意味のある不確実性がある場合は、複数の可能性のある構造をスケッチまたはプロトタイプ化します。装飾に投資する前に、低忠実度のフローまたはワイヤーフレームの決定から始めます。代替案をタスクの明確さ、ユーザーの労力、アクセシビリティ、実現可能性、製品適合性と比較します。提供されたリファレンスを使用して原則を抽出しますが、レイアウトをトレースしたり、特徴的なアイデンティティをコピーしたりしないでください。

6. 構造と動作を指定する

適切なデザインブリーフを作成します。ユーザーとコンテキスト、タスクと成果、コンテンツ階層、プライマリおよびセカンダリアクション、ビジュアルディレクション、重要な状態、プラットフォームの制約、アクセシビリティ目標、既知の仮定、検証計画。コントロールのインタラクションコントラクトを定義します。目的、利用可能な入力方法、状態遷移、フィードバック、エラー/回復、キーボード/フォーカス動作、および支援技術が知るべきこと。

7. 既存のシステム上に構築する

確立されたトークン、コンポーネント、セマンティクス、レイアウトパターン、プラットフォームの動作を検査し再利用します。リポジトリのネイティブスタックで実装します。依存関係は、実際のニーズを解決し、パフォーマンス、メンテナンス、アクセシビリティ、ライセンスの制約と互換性がある場合にのみ追加します。繰り返し使用されるか複雑な動作が抽象化を正当化する場合は共有コンポーネントを作成し、1回限りの要素はシンプルに保ちます。

8. 検証、改善、報告

現実的なサイズと現実的なコンテンツで完全なタスクをテストします。キーボード、ポインター、タッチ、ズーム/テキストサイズ変更、モーションの削減、および関連する支援技術（利用可能な場合）でレビューします。意味のあるフローについて代表的なユーザーとユーザビリティセッションを実施します。観察を証拠として記録し、重大度と頻度を区別し、最も影響の大きい障壁を修正し、再テストします。何がテストされ、何がテストされなかったか、残りの不確実性、既知の問題を明記します。証拠なしに、準拠、ユーザー検証、またはブラウザチェックの成功を主張しないでください。

詳細な補足ガイダンス

記憶やこの概要だけに頼るのではなく、タスクに関連するリファレンスをロードしてください。ツールカタログはオプションです。名前付きサービスを要求したり、利用できないアクセスを主張したり、カタログにあるからといって新しいライブラリを使用したりしないでください。

• references/human-centered-process.md — ディスカバリー、研究倫理、ジャーニーマッピング、コンテンツ構造、優先順位付け、実用的なユーザビリティテスト。
• references/accessibility-inclusive-design.md — 障害者を含むデザイン、WCAG 2.2の境界、セマンティック実装、キーボード/フォーカス、フォーム、メディア、モーション、支援技術のチェック。
• references/interaction-patterns.md — アクションフィードバック、ナビゲーション、フォーム、検索、テーブル、ダイアログ、破壊的なアクション、エラー、空/ローディング状態、レスポンシブインタラクションの決定。
• references/visual-design-systems.md — 階層、タイポグラフィ、色、スペーシング、レイアウト、コンテンツ、トークン、テーマ、イメージ、モーション、首尾一貫したビジュアルディレクション。
• references/design-capability-playbook.md — デザインインテリジェンス、クリエイティブディレクション、リサーチ、レイアウト、タイポグラフィ、色、アーキテクチャ、UX心理学、インタラクション、モーション、レスポンシブデザイン、レンダリングQAのための明示的なステップバイステップの選択方法。新しい画面、デザインシステム、ビジュアルリフレッシュ、または詳細なユーザーリクエストのために読んでください。
• references/design-intelligence-architecture.md — デザイン推論の記録、視覚的批評、代替シミュレーション、スクリーンショットの解釈、デザインとコードの比較、ビジュアルリグレッション、行動UX、レスポンシブ/パフォーマンスインテリジェンス、ガバナンス、プロジェクトメモリ、ベンチマーク、管理された改善。高度な製品作業、またはユーザーがデザインインテリジェンスシステムを求めたときに読んでください。
• references/tool-selection-and-workflow.md — ユーザーの指定されたカラーツール、タイプツール、リサーチツール、コンポーネントツール、モーションツール、3Dツール、アイコンツール、イラストレーションツール、フォトツール、QAツールのためのオプションのディスカバリーからデリバリーまでのワークフローと選択ガイド。外部リファレンス、アセット、実装ライブラリを選択または使用するときに読んでください。常に現在のドキュメント、互換性、価格、権利を確認してください。
• references/tool-source-notes.md — それらのツールの一部についての日付入りの主要ソース検証ノート。リンクポインタとして使用し、現在のソース条件を確認する代わりにはしないでください。
• references/curated-source-research.md — ユーザーの追加の書籍、UX記事、研究概要、Apple/Metaのソースリンク。検証された要点、出典、エビデンスの範囲、制限付き。これらのソースを参照するか、プラットフォーム/eコマースのリファレンスを選択するときにロードしてください。
• references/knowledge-library.md — 完全なキュレーションリファレンスライブラリのマップとタスクベースのローディングレシピ。大規模な作業を計画するか、リファレンスを選択するときにこれを読んでください。
• references/design-philosophy.md — 製品思考、視覚的ストーリーテリング、倫理的な説得、抑制。
• references/design-styles.md、references/typography.md、references/color-theory.md、references/layout-patterns.md — ビジュアルディレクションと構成のための詳細なデザイン知識。
• references/ux-patterns.md、references/motion-design.md、references/design-systems.md — タスクパターン、目的のあるモーション、再利用可能なシステム。
• references/accessibility.md、references/platform-guidelines.md — クイックアクセシビリティルーティングとプラットフォーム固有の適応。変動するプラットフォームの詳細は、現在の公式ドキュメントで確認してください。
• references/anti-ai-slop.md、references/visual-qa.md — 一般的なデザイン決定を批評し、レンダリングされた製品を検査/修正します。
• references/quality-assurance.md — デザインレビュー、ユーザビリティ評価、実装QA、重大度、反復、誠実なハンドオフ。
• references/standards-and-sources.md — 権威あるリファレンスと、それらが規範的、参考、プラットフォーム固有、またはヒューリスティックであるもの。
• references/source-patterns.md — ユーザーから提供された12のUIライブラリで観察されたパターンと、アイテム固有の再利用に関する注意事項。
• templates/design-brief.md、templates/usability-test-plan.md — 適応可能な実用的テンプレート。スコープに関連するフィールドのみを使用してください。
• templates/design-decision-log.md、templates/design-evaluation.md — 根拠、代替案、証拠、実装、テスト範囲、残りの不確実性のための再利用可能な記録。

実装受理基準

インターフェースを完了と呼ぶ前に、該当するポイントを確認するか、アイテムを評価できなかった理由を明記してください。

• 目的: ビューに明確な役割があり、コンテンツがユーザーの可能性のある質問に答え、主要なアクションが理解可能であること。
• 動作: 表示されているすべてのコントロールが約束どおりに動作すること。状態変更が可視であること。エラーに回復経路があること。デッドコントロールやフェイクコントロールが残っていないこと。
• アクセシビリティ: セマンティクスと名前が正しいこと。キーボードユーザーがタスクを完了できること。フォーカスが可視で予測可能であること。コンテンツが色だけで伝えられていないこと。コントラスト、ズーム、モーション、ターゲットサイズの要件が該当する基準に対してチェックされていること。
• コンテンツ: ラベルが具体的で平易であること。検証が役立つこと。空、ローディング、成功、失敗の状態が関連する場合にデザインされていること。主張とコンテンツが正確であること。
• レスポンシブ使用:

... [翻訳のために一部省略]