次の方法で共有

設計標準、規則、ガイドラインに従うためのレコメンデーション

  • [アーティクル]

この Power Platform Well-Architected Experience Optimizationチェックリストの推奨事項に適用されます:

02:02 02:02 確立された標準、規則、ガイドラインに従ってください。 一般的に使用される設計パターンを活用します。 設計要素、用語、インターフェイス全体の対話の一貫性を維持します。 一貫したパターンと標準を使用して、インターフェースを通じてユーザーをガイドし、一貫性のあるユーザー エクスペリエンスを作成します。

このガイドでは、ユーザー エクスペリエンスとアプリケーション全体の成功を向上させるユーザー インターフェイスを開発するための、設計標準、規則、およびベスト プラクティスを確立するためのレコメンデーションについて説明します。 ユーザー エクスペリエンスやアプリケーションの使いやすさに悪影響を与えないように、標準からの逸脱は慎重に検討する必要があります。

主要な設計戦略

設計標準に従うことで、設計の重要な側面を特定し、設計プロセスにおける意思決定の労力を軽減できます。 標準を理解することで、チームが適切に設計されたユーザー インターフェイスを実現する能力が明確になり、合理化されます。 このアプローチにより、開発サイクルが短縮され、使いやすさが向上し、ユーザー満足度が向上し、最終的には内部ソフトウェア システムの生産性と有効性の向上につながります。

設計原則を理解する

人間の認知に関する広範な研究は、視覚的なデザインやデジタル製品との対話に関する理解を深めるのに役立ちます。 この知識は多くのベスト プラクティスと標準の基礎となり、最終製品の約 80% を占めます。 設計原則は、標準ではカバーされていない残りの 20% の創造的なギャップを埋めることができます。 この知識に精通することで、開発チームは計画中の設計上の考慮事項をより深く理解できるようになり、設計リソースへの依存度が軽減され、設計リソースとの連携が向上します。

一般的なパターンや比喩に従う

普遍的なパターンとメタファーは、デジタル製品では広く認識され、期待されています。 必要に応じてこれらのパターンを組み込むと、ユーザーのオンボーディングと長期使用が簡素化され、トレーニングとサポートのコストが削減され、更新や再設計の必要性が減る可能性があります。 これらのプラクティスは、レイアウト構成、ナビゲーション構造、情報階層、インタラクション デザインなど、デザインのさまざまな側面にわたります。

標準的なアイコンのメタファーとセマンティック カラーに従うことが重要です。 アイコンは、ユーザーに機能を迅速かつ効果的に伝えるために、確立された視覚的な関連性を使用する必要があります。 同様に、エラーの場合は赤、成功の場合は緑などのセマンティック カラーは、ユーザーの期待やメンタル モデルに一致する視覚的なフィードバックを即座に提供します。 これらの規則に従うことは、親近感と快適さを促進することによって認知的負荷を軽減し、使いやすさを向上させるのに役立ちます。

デザイン システムの確立

デザイン システムは、ユーザー インターフェイスの構築に使用される再利用可能な機能レポート パーツの集合体です。 これらは、すべての要素がブランドの確立された標準に準拠するように、組織向けに特別に設計されています。 デザイン システムの 4 つの主要コンポーネントは、デザイン トークン、コンポーネント、パターン ライブラリ、ガイドラインです。

デザイン トークン は、色、タイポグラフィ、間隔などの側面を含む、ユーザー インターフェイスの基本的な視覚要素です。 これらは標準形式の変数として表現され、デザイン システムを使用したアプリケーションの作成と保守が容易になります。 特定のデザインに関係なく、デザイン トークンはデザインのコードへの変換を効率化します。 たとえば、指定された値を持つ「primary-color」という名前のトークンを定義することで、開発者はデザインをシームレスに統合できます。 特定の値をコードに直接埋め込む代わりに、これらのトークンを利用します。 デザイン トークンは組織のスタイル ガイドに合わせて一元管理できるため、使いやすいトークンを作成できます。

コンポーネントは、ユーザー インターフェイスの個別のモジュール単位を表します。 これは、アプリのインターフェイスを組み立てるための視覚要素として機能します。 適切に設計されたコンポーネントは、再利用性とモジュール性という 2 つの重要な特性を備えています。 ブランドのエコシステム内の複数のアプリケーションにわたって視覚的な一貫性が維持されるように設計し、毎回デザインを再作成する必要性を減らす必要があります。 単一のコンポーネントがさまざまなコンテキストでシームレスに機能する必要があります。

Power Apps は、ボタン、ドロップダウンなどの基本的なユニバーサル コンポーネントと、最新のテーブルなどのいくつかの複合コンポーネントの包括的なセットを提供します。 基本的なニーズにはこれらのコントロールをできる限り使用し、再現可能なユーザー インターフェイス パターンにギャップが存在する場合は複合コンポーネントを構築することを検討してください。

複合コンポーネントは、変更を加えることなく、そのまま使用することも、またはパラメーターを使用してわずかな変更を加えてさまざまなアプリのコンテキストで使用できるほど汎用性が高くなければなりません。 カスタム コンポーネントの例として、以下のものがあります。

  • 会社ブランドのヘッダーまたはフッター
  • ユーザーがフィードバックを提供し、IT サポートを受けるための画面サイズのリソース ページ コンポーネント
  • 著作権表示やリンクなどの汎用コンテンツ

パターン ライブラリ は、ユーザー インターフェイスを構築するための開始点としてメーカーが使用できる定義済みのデザイン パターンのセットを提供します。 これらのパターンは、一般的な設計課題に対する標準化されたソリューションとして機能します。 パターン ライブラリの主な目的は、巧みに作成されたパターンの集中コレクションを提供し、一貫性のある効果的なユーザー インターフェイスの作成を可能にすることです。 パターン ライブラリを使用すると、開発者は特定のパターンを使用し、確立された使用ガイドラインに従うことができるため、ユーザー インターフェイス デザイン全体の一貫性と効率性が確保されます。

ガイドライン は、コンポーネントとビジュアル スタイルを効果的に使用する方法に関するルールとベスト プラクティスをプロジェクト チームに提供します。 美観に重点を置いたスタイル ガイドラインとは異なり、デザイン システム ガイドラインは、コンポーネントの機能的な動作とユーザー操作の期待を定義します。 たとえば、デザイン システムが色を参照するためのデザイン トークン セットを提供する場合、これらの色をいつ使用するか、および開発者が Power Apps で対応する色にアクセスする方法をガイドラインで明確にする必要があります。 コンポーネントについては、正しい使用方法、入力および出力パラメータ、およびコンポーネントに予想される状態の変化に関するドキュメントが必要です。

集中型デザイン システムの取り組みにより、会社のロゴやその他のデザイン アセットなどのユニバーサル メディア アセットをリポジトリにホストして、広範囲にわたる迅速な開発を実現することもできます。

MicrosoftFluent UIは、広く採用されているオープンソースのデザイン システムの一例です。 これは、多くの設計上の決定を行う際に効果的な参考資料となる可能性があります。なぜなら、Power Apps 最新のコントロールはすべて Fluent (2) 設計システムのコンポーネントを利用しているからです。 Fluent UI などのデザイン システムでは、ユーザーのニーズを満たすコンポーネントの作成に多大な研究開発の労力が費やされています。 また、さまざまなデジタル製品やプラットフォームにわたってユビキタスで簡単に使用できるように設計されています。 各コンポーネントには、アプリケーションが意図したエクスペリエンスと一致していることを確認するための特定のガイドラインがあります。 研究に裏打ちされた知識を活用するには、Fluent 2 ガイダンスを参照してください。

重複した実装を避けるために共有することで、生産効率が向上するだけでなく、時間が経ってもエクスペリエンスの一貫性が保たれます。 共有要素への貢献は、エクスペリエンスを新鮮に保ち、組織全体からの専門知識を反映するのに役立ちます。 現在、コンポーネント、システム、プロセス、文化が共有されていないことが多く、一貫性が促進されず、貢献が困難であるため、一貫性が課題となっています。

設計レビューを実施する

アプリが確立された UI/UX 標準を確実に満たすためには、ユーザー エクスペリエンス設計をガイドするためのリソースへのアクセスが重要です。 一元化されたチームは、基本的な設計標準とベスト プラクティスを理解することを目指す必要があります。 デザイナーは通常、ユーザー エクスペリエンスについて知識がありますが、プロジェクト マネージャーもこれらのスキルを習得することで、チームに効果的に貢献できるようになります。

エクスペリエンスを検証する最も効果的な方法は、実際にそのエクスペリエンスを検証してみることです。 ただし、Power Apps アプリのメタデータはプログラムで読み取ることもできます。 これを実現する方法には、正しいテーマがアプリに適用されているかどうかを確認することや、テーマ トークン値がレガシ コントロールで参照されているかどうかを確認することが含まれる場合があります。

たとえば、特定のテキスト要素で特定のデザイン トークンを使用する必要がある場合、テキスト コンポーネントの名前を特定の値に対応させ、コンポーネントのプロパティを特定のデザイン トークン マッピングと一致させる必要があります。

特定のコンポーネント タイプであり、特定の基準を満たす要素の数と、そうでない要素の数を評価します。 たとえば、名前が間違っているテキスト コンポーネント、または名前は正しいがプロパティ値のガイドラインに従っていないテキスト コンポーネントを考えてみましょう。 応答性の高いレイアウトを強制するために、特定のレイアウト コンテナーを特定の命名規則とプロパティ値 (LayoutWrap など) にマップできます。

アクセシビリティ基準を満たしてユーザー ベースを拡大する

包括的な設計原則を取り入れることで、あらゆる能力を持つ個人を含む多様な対象者に製品が対応できるようになります。 インクルーシブ デザインでは、あらゆる能力のユーザーが最終実装前に課題に対処する製品を作成する際の潜在的な障壁を特定しようとします。 相互作用の障壁を効果的に克服するには、対話の障壁につながる可能性のある機能的な側面を理解し、議論することが不可欠です。

Function パーパス
認知 情報を受け取り、解釈し、処理する私たちの能力は、多くの要因の影響を受けます。 これらの要素には、注意、認識、集中、記憶、判断、理解、問題解決、推論が含まれます。 新しいデバイスの使い方を学ぶ場合でも、教室で新しい情報を学ぶ場合でも、人の認知は学習方法に影響を与える可能性があります。 認知の多くの側面は相互に影響を及ぼします。
モビリティ 解剖的構造と筋肉は私たちに可動性を与えており、筋肉の制御は脳の信号に依存しています。 可動性には、把握、細かい運動能力、調整、制御 (随意運動と不随意運動)、速度、筋緊張、持久力、姿勢、および一時的な損傷が含まれます。 可動性は、状況的、一時的、進行的、または永続的な条件によって影響を受ける可能性があります。
ビジョン 環境からの視覚情報を見て理解する能力は、思考と動作を導きます。 視覚は身体的要因と神経学的要因の両方の影響を受けます。 視覚障害には、失明、弱視 (部分的視力低下)、視力低下、視野欠損、色覚異常、光恐怖症 (光感度)、さらには画面上のテキストの読みやすさに影響を与える明るい日光などがあります。
聴覚 環境からの音声を受け取って理解する能力も、思考と動作を導きます。 難聴の程度は広範囲にわたるため、日常のテクノロジーの使用にさまざまな障壁が生じます。 一時的または状況的な例には、音声再生が不可能な騒々しい環境や静かなゾーンが含まれます。
音声、スピーチ、およびコミュニケーション 私たちのコミュニケーション能力 (言語的または非言語的) は、私たちの欲求やニーズを表現し、感度を形成し、他の人に情報を伝達し、環境と相互作用するために不可欠です。
感覚と認識 感覚とは、触覚や体の位置などの感覚を感知する能力です。 知覚とは、脳がこれらの感覚を処理して伝達する方法です。 感覚の制限には、前庭障害、慢性疼痛、皮膚の完全性、感覚 (過敏および鈍感)、および固有受容覚が含まれます。

コンテンツへのアクセス方法

ユーザーはさまざまな方法でデジタル コンテンツにアクセスします。 マウスとポインター入力に加えて、キーボードやさまざまな補助テクノロジーも使用する場合があります。 これらのテクノロジーには、スクリーンおよび点字リーダー、拡大鏡、キャプション、音声認識、ハイコントラスト設定が含まれており、これらすべてがユーザーのニーズを満たすようにエクスペリエンスを調整します。

補助ツール

一般的な支援ツールを以下に説明します。

  • キーボード。 視覚障害のある人は、スクリーン リーダー ソフトウェアを使用して Web サイトやアプリを操作します。このソフトウェアは、テキスト読み上げ技術を使用してコンテンツを読み上げ、音声で制御します。 視覚障害のある人は画面上のポインターを見ることができないため、標準的なマウスを使用することができません。 キーボードは、ポイントアンドクリック操作の代替入力として機能します。 スクリーン リーダーは、基本的なキーボード コマンド セットのサポートに加えて、複雑なキーボード コマンド セットも提供します。 これらのコマンドは、ユーザー インターフェイスをより効率的に操作するための強力な追加ツール セットをユーザーに提供します。
  • スクリーン リーダー。 スクリーン リーダーは、デジタル テキストを合成音声および点字出力に変換します。 ユーザーはコンテンツを聞きながらキーボードで操作できるようになります。 この技術により、視覚障害のある人や弱視の人も、他のユーザーと同じレベルの独立性とプライバシーを保ちながら情報技術を使用できるようになります。 スクリーン リーダーは、認知障害または学習障害のある人や、単にテキストよりも音声コンテンツを好むユーザーによっても使用されます。 これらのツールは Web 用を超えて拡張され、ドキュメント、スプレッドシート、オペレーティング システムのナビゲーションを支援します。
  • 触覚。 触覚対象は主に、画面をタップするのに問題がある可能性のある運動遅延のある人々をターゲットにしています。 より具体的には、触覚は意図しない (または登録されていない) 触覚による誤った入力の量を制限できるように設計されています。
  • 動的コンテンツ。 ランドマーク ロール、つまり ARIA ラベルは、スクリーン リーダー ユーザーに即座にメリットをもたらします。 8 つの役割があり、それぞれが Web ページで一般的に発生するコンテンツのブロックを表します。 これらを使用するには、関連する役割属性を HTML 内の適切なコンテナに追加します。これにより、スクリーン リーダー ユーザーがページのそのセクションにすばやく移動できるようになります。

視覚スタイル

さまざまな視覚機能を持つユーザー向けに包括的な製品を作成するには、色、コントラスト、テキスト サイズなどの視覚スタイルを考慮することが不可欠です。 これには、画像、アイコン、ボタン上のテキストを含むテキストとその背景との適切なコントラストを確保して、コントラストが低いユーザーまたは色覚異常を持つユーザーの読みやすさを向上させることが含まれます。 コントラストの高いコンテンツは、さまざまな照明条件下でも可読性を高め、すべてのユーザーに利益をもたらします。

標準テキストは、背景とのコントラスト比を少なくとも 4.5:1 に維持する必要があります。 大きなテキスト、インタラクティブ コンポーネント、データ視覚化の場合、背景色とのコントラスト比は最低 3:1 必要です。 ステータス インジケーターは、セマンティック カラー、タイプ、画像を効果的に使用して情報を伝達し、すべてのユーザーがコンテンツを認識できるようにする必要があります。 ハイ コントラスト カラー パレットのサポートを検討してください。これにより、少なくとも 7:1 のコントラスト比でコンテンツを表示するためのカラー パレットが正規化され、視認性と明瞭さが確保されます。 ダークモードを提供すると、可読性が大幅に向上し、目の疲れが軽減されます。

字体

タイポグラフィは、さまざまなニーズを持つユーザーにとって読みやすさを確保する上で重要な役割を果たします。 テキストは、さまざまなユーザー要件に対応できるように、十分な大きさと適切な間隔が必要です。 ユーザーは向きやズーム レベルなどの設定を調整でき、アプリケーションはそれに応じてコンテンツのレイアウトをシームレスに調整できる必要があります。 適切に設定されたタイポグラフィは、読みやすさを高めるだけでなく、ページの向きやナビゲーションを容易にし、ロー ビジョン、認知障害、色盲、およびスクリーン リーダーに依存している人にとって有益です。

特に視覚に重点を置くユーザーが素早くスキャンして理解できるように、見出しには大きな文字や太字の文字を使用する必要があります。 見出し要素を適切に適用すると、すべてのユーザーにとって効率的なナビゲーションが実現します。 行の幅と間隔は読みやすさに大きな影響を与えます。たとえば、行が広すぎると目が疲れ、行が短すぎるとリズムや理解が妨げられます。 読みやすさを高めるために、行の長さは 50～70 文字、行の高さはフォント サイズの 120%～145% になるようにしてください。

モバイル デバイスでは、コンテンツや機能性を損なうことなく、テキストのサイズを最大 200% まで変更できる必要があります。 この柔軟性により、ユーザーは好みやニーズに応じてテキスト サイズを調整でき、全体的なアクセシビリティが向上します。 さらに、ユーザーはインターフェースを拡大表示でき、ページ レイアウトは最大 400% の拡大レベルで水平スクロールせずにコンテンツをシームレスに再フローするように設計されている必要があります。 デバイスの画面サイズに関係なく、コンテンツがアクセス可能で読みやすい状態を維持できるようにすることで、すべてのユーザーにとってより使いやすいエクスペリエンスが実現されます。

画像、グラフ、および動き

画像やグラフィックにより、多くの人にとって、特に認知障害や学習障害のある人にとって、コンテンツがより快適かつ理解しやすくなります。 画像は視覚障害のある人にとって手がかりとして機能し、コンテンツ内で画像を認識するのに役立ちますが、Web サイトで多用するとユーザーにとって大きな障壁となる可能性があります。

メディア コンテンツに関するアクセシビリティの実践は、点字や画面のユーザー、帯域幅を節約するために画像をオフにして閲覧するユーザー、検索エンジンのクローラーに役立ちます。 また、難聴や認知障害を持つ人々を助けることもできます。

代替 (Alt) テキストを使用して、視覚的なコンテンツをアクセス可能にします。 Alt 属性は、画像のダウンロード中に表示されるテキストなどの視覚的なコンテンツを説明します。 Alt テキストを画像のコンテキストに適応します。 簡潔かつ有益な内容にしてください (150～250 文字を使用)。 テキスト コンテンツを複製する画像には装飾としてマークを付けることを忘れないでください。

対話

アクセシビリティが最も重要なのはインタラクションです。 ユーザーが製品をスムーズに操作してタスクを完了できない場合、その製品は真にアクセシブルとは言えません。 効率的なキーボードとタッチ操作は、スクリーン リーダー、点字リーダーのユーザー、およびキーボードを使用してナビゲートするユーザーを支援します。 典型的なインタラクションは次のとおりです。

  • ナビゲーション。 支援技術のユーザーは、タブ、検索、スクリーン リーダーの場合は見出しとリンクのリストを使用して Web ページを移動します。 ランドマーク、見出し、ショートカット (メインコンテンツへのスキップなど) を使用して、効率的なキーボード ナビゲーションを実現します。
  • ハイパーリンク。 ハイパーリンクを明確、簡潔、文脈に関係なく意味のあるものにすることで、ハイパーリンクの使いやすさとアクセシビリティを向上させることができます。 十分な色のコントラストを適用し、他のコンテンツと視覚的に区別します。
  • 表。 視覚的な手がかりだけに頼るだけでは、アクセシブルな表を作成するのに十分ではありません。 構造マークアップにより、支援技術はヘッダーとデータ セルを認識できるようになります。
  • フォーム。 さまざまな Web 操作に使用される入力フィールドは、スクリーン リーダーやキーボードを使用する個人にとってアクセシビリティに関する懸念を引き起こすことがよくあります。
  • 集中。 フォーカス可視性は、次に操作する要素を視覚的に示すことで、キーボードを使用してページを移動するユーザーに役立ちます。 エクスペリエンスを最適化するために、プログラム的にフォーカスを移動したり、特定の領域に限定しなければならないかもしれません。
  • 状態の変化。 状態の変更やアナウンスのテキストを指定します。 エラー状態を伝え、エラー回復 (情報の欠落やシステムの問題など) をユーザーに案内することが重要です。

Power Platform の促進

最新のコントロールは、キャンバス アプリとモデル駆動型アプリの両方で利用できます。

キャンバス アプリは最新のテーマをサポートしているため、アプリ内のすべてのコントロールにわたって一貫したブランド パレットを実装できます。 モデル駆動型アプリは、アプリのヘッダーの色、リンク、一部のフォーム アイコンなどの基本的なブランド要素を変更するための テーマ をサポートしています。

再利用可能なソリューション対応コンポーネントは、さまざまなアプリ タイプ向けに複数の形式で利用できます。 カスタム キャンバス コンポーネント は、キャンバス アプリまたはカスタム ページで使用でき、ローコードを使用して構築されます。 Power Apps component frameworkは、キャンバス アプリ、モデル駆動型アプリ、および Power Pages のコード コンポーネントを実装するために使用できます。

キャンバス アプリは、特定の支援技術機能にマップされる アクセス可能なプロパティ をサポートします。 スタジオ内ツール を使用して、アクセシビリティへの準拠を検証します。

モデル駆動型アプリは構成なしでアクセスできますが、アプリに追加されたすべての Web リソースにアクセス可能であることを確認してください。 カスタム ページを含む埋め込みキャンバス エクスペリエンスは、アクセシビリティ標準を満たすように手動で構成する必要があります。

モデル駆動型アプリには、フォームやビューを操作するための標準キーボード ショートカットが組み込まれています。

キャンバス アプリには、キーボード ショートカットを有効にするコード コンポーネントが必要です。キーボード ショートカットは、Creator Kit の キーボード ショートカットを使用して構成できます。

エクスペリエンスの最適化のチェックリスト

完全なレコメンデーションのセットを参照してください。

エクスペリエンス最適化チェックリスト