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

この Power Platform Well-Architected エクスペリエンスの最適化チェックリストの推奨事項に適用されます:

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

主要な設計戦略

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

設計原則を理解する

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

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

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

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

デザイン システムの確立

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

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

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

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

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

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

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

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

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

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

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

設計レビューを実施する

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

デザイン関連のアプリ メタデータの使用を検証する

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

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

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

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

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

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

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

補助ツール

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

• キーボード。 視覚障害のある人は、スクリーン リーダー ソフトウェアを使用して 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 の キーボード ショートカットを使用して構成できます。

参照

• Power Apps でのアクセシビリティ対応のキャンバス アプリの設計と構築
• キャンバス アプリにおけるアクセシビリティの制限
• Power Apps キャンバス アプリ アクセシビリティ ガイドライン ホワイトペーパー
• モデル駆動型アプリでスクリーン リーダーを使用する
• Web コンテンツのアクセシビリティに関するガイドライン (WCAG) 標準
• Microsoft インクルーシブ デザイン
• 流暢な UI アクセシビリティ ガイダンス

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

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