レイアウトを最適化するための推奨事項
この Power Platform Well-Architected エクスペリエンスの最適化チェックリストの推奨事項に適用されます:
| XO:06 | 画面サイズや解像度を問わず、使いやすく視覚的に魅力的なレイアウトを維持します。 適応型技術を使用して、さまざまな方法でコンテンツを動的にレンダリングします。 |
|---|
このガイドでは、さまざまなデバイス間で簡単にナビゲートし、スムーズに適応できる画面レイアウトを設計するための推奨事項について説明します。 このアプローチにより、ユーザーは使用しているデバイスに関係なく、一貫した最適な視聴エクスペリエンスを得ることができます。
定義
| 任期 | Definition |
|---|---|
| ビューポート | Web ブラウザーやモバイル アプリなど、コンテンツが表示されるデジタル インターフェースの表示部分です。 ビュー ポートの範囲は、多くの場合、画面の寸法と解像度に基づいてデバイス クラス (モバイル、タブレット、デスクトップ) に関連付けられます。 |
| ブレークポイント | 適応レイアウトの動作を決定するために使用されるビューポート範囲を定義する特定のピクセル値です。 |
主要な設計戦略
応答性の高いレイアウトは、さまざまなウィンドウ サイズにわたって柔軟で効率的なユーザー エクスペリエンスを提供します。 コンテンツを拡大縮小し、要素を再配置し、テキストと画像を選択的に表示することで適応します。 責任あるレイアウトは、画面サイズに関係なくユーザーのニーズを満たします。
一貫したアプリ フレームを決定する
アプリケーション フレームは、すべての画面で一貫して使用できるコントロールのセットで構成されます。 ヘッダー、ナビゲーション、コンテンツ領域という 3 つの主要なサブコンポーネントで構成されます。 シンプルなアプリではヘッダー コンポーネントを柔軟に使用できますが、より洗練されたアプリでは、サイド ナビゲーションを使用して複数のページを有効にすることがよくあります。 サブコンポーネントはカスタマイズ可能です。 たとえば、アプリの要件に合わせて、ヘッダーにグローバル検索を組み込んだり、サイド ナビゲーションに項目をグループ化したりすることができます。
アプリ フレームの 3 つの主要なサブコンポーネントは次のとおりです。
ヘッダー は、すべての内部アプリケーションの一部として設計されたコア コンポーネントです。 これは、ユーザーにシステム全体の機能へのアクセスを提供し、UI への理解を深め、エクスペリエンス全体で一貫性を提供するサブコンポーネントで構成されています。 これはアプリ フレームの上部に表示され、アプリのすべてのページに表示されます。 オプションで、検索、設定、通知、フィードバック、プロファイル、ヘルプなどのグローバル コマンドをホストできます。 アプリの名前は常に表示される必要があり、理想的にはホーム ページまたはランディング ページへのクリック可能なリンクとしても機能する必要があります。 ヘッダーはレスポンシブである必要があり、600 ピクセル以下のビュー ポートではコマンドがオーバーフロー コントロールに移動するはずです。 検索入力幅も 1023 ピクセル以下で応答します。
ナビゲーション は、ユーザーが情報を検索したりタスクを完了したりできるように連携して動作するコントロールのシステムです。 これは、ユーザーがアプリケーションのセクションからセクションに移動するのに役立ちます。 階層的には、どのページやセクションにも関連付けられていませんが、他のすべてのコンテンツの上に存在します。 これは常に存在し、ページ コンテンツ用の追加スペースを解放するために、折りたたまれた状態 (レール状態とも呼ばれます) に最小化される場合があります。 ウィンドウ サイズが小さい場合は、最小化してフライアウト メニューにすることができます。 最も一般的なナビゲーション形式には、トップ ナビゲーションとサイド ナビゲーションがあります。 両方を同時に使用しないでください。
コンテンツ領域 には画面のフォーカスが含まれます。 ブラウザ ウィンドウのサイズは、コンテンツ フレームとメイン コンテンツ領域で使用可能なスペースに影響します。 このフレームは、ブレークポイントと各コンポーネントの対応する応答動作に基づいて適応します。 詳細については、ブレークポイント マトリックスを作成する を参照してください。
コンテンツ領域には、ページ ヘッダー、インライン サイド ペイン、コンテンツにオーバーレイするパネルなど、一貫した要素配置に使用できる複数のサブ領域をオプションで含めることができます。
配色、タイポグラフィ、レイアウト構造を含む一貫したデザイン言語に従うことで、ユーザーは混乱することなくさまざまな要素をすばやく識別し、操作できるようになります。 アプリ フレーム パターンがすべての内部ビジネス アプリケーションで一貫して使用されるほど、ユーザーの記憶やメンタル モデルは強くなります。 業界標準または共通のプラットフォーム パターンに合わせることで、この効果がさらに高まります。
アプリ フレームが決定されると、各画面のレイアウトはアプリ フレームのコンテンツ領域内に配置されます。
コンテンツ領域を慎重に使用する
ユーザーは、情報に簡単にアクセスでき、テキストが読みやすく、見た目が使いやすさを妨げるのではなく向上する、シームレスなエクスペリエンスを切望しています。 重要な情報の最初の視認性を優先し、列全体での読みやすさを確保し、デザイン要素を調和させて美観が高まります。
画面を開いたときに、スクロールしなくても重要な情報がすぐに表示されるようにします。 ナビゲーション オプション、重要なコンテンツ、実行可能な項目などの重要な情報を画面上部近くに優先的に表示します。 十分なアイテムを表示することと、各アイテムの詳細な情報を提供することのバランスをとることは、常に課題となります。 逆に、最初のビューで可能な限りすべての情報を提供したくなるかもしれませんが、情報が多すぎると、ユーザーが圧倒され、重要な要素の重要性が薄れてしまうリスクがあります。 より詳細なコンテンツを垣間見ることができる簡潔な概要やプレビューの採用を検討し、ユーザーがさらに深く掘り下げるように促します。 ダッシュボードは、大量のデータを視覚化するという目的に合わせて最適化されています。
複数の列、セクション、またはグループを組み込んで、コンテンツを論理的に整理し、スペースを最大限に活用します。 列の幅に細心の注意を払い、テキストが過度に圧迫されることなく読みやすい状態を保つようにします。 列が狭すぎると、ユーザーは水平方向にスクロールする必要があり、インタラクションの流れが妨げられるため、列が狭すぎるのは避けてください。 逆に、列の幅が広すぎると可読性が損なわれ、ユーザーは長距離にわたって行を追跡する必要が生じる可能性があります。 利用可能なスペースを効率的に利用しながら、快適な読書を実現するバランスを追求してください。
視覚的要素のサイズと位置を適切に調整して、視覚的に快適でバランスの取れたインターフェイスを作成します。 キャプションを対応するビジュアルまたはタイトルに合わせて配置し、要素間の一貫した間隔を維持し、ユーザーのニーズに基づいた階層を遵守します。 不要な装飾を削除し、最も重要な要素にピクセルを慎重に割り当てます。 特にナビゲーションを多用するアプリやホームページでは、コンテンツとナビゲーション要素を優先して強調し、使いやすさを損なう余分な装飾は避けてください。
基礎となるグリッドは、要素を一貫して配置する際に役立ちます。 選択したグリッドの動作は、アプリ内のすべての画面のコンテンツ領域で一貫している必要があり、コンポーネント レベル (カードやサイド ペインなど) でも適用できます。 Web アプリケーションで使用される最も一般的なタイプのグリッド レイアウトは、列グリッドです。 レスポンシブな画面を実装する場合は、流動的 (またはストレッチ) なグリッド動作が推奨されます。
確立されたレイアウトとグループ化パターンを使用する
ユーザー インターフェイス内のコンテンツと要素を整理するため、一般的に認識されている構造と配置を使用します。 これらのレイアウトやパターンは、長い時間をかけて改良され、その効果が実証されてきたため、ユーザーにとって馴染みやすく直感的であると同時に、適応的なパターンを簡単に実装することができます。 コア シナリオと要素が特定されたら、それぞれを、最適なインタラクションを提供する確立されたレイアウトにマッピングします。 タスクの完了に重要なコンテンツと機能を優先します。 画面上に常に表示され、アクセスできるようにする要素と、非表示にしたり、他のメニューやアクションからアクセスできるようにする要素を決めます。
次のリストは、ビジネスまたは生産性アプリケーションで一般的に使用される確立されたレイアウトを網羅的に説明したものです。 すべてをメインコンテンツ領域内に配置できます。
ランディング/ホーム画面
起動およびホーム画面は、アプリケーションへのエントリ ポイントとして機能し、ユーザーにアプリケーションの提供内容や機能の概要を提供します。 通常、訪問者の注意を引き付け、初めてのタスクを完了したり、さらにコンテンツを探索したりするなど、特定のアクションの実行を促すことを目的としています。 多くの場合、ヒーロー画像とクリーンなナビゲーションオプションが含まれています。
ユーザーを歓迎し、主要な機能、ナビゲーションオプション、または行動喚起に素早くアクセスできるようにし、アプリの体験のトーンを設定するのに理想的です。 ユーザーを効果的にガイドするために、明瞭さ、シンプルさ、直感的なナビゲーションを優先します。
ダッシュボード
ダッシュボードは、アプリケーション内の集中ハブであり、関連するデータや情報の包括的な概要をユーザーに提示します。 多くの場合、カスタマイズ可能なウィジェットやモジュールで構成され、ユーザーは特定の測定基準を監視したり、アクションを実行したりできます。
ダッシュボードは、複雑なデータセットや多面的な機能を持つアプリケーションに適しており、ユーザーは一目で進捗状況を把握し、傾向を分析し、情報に基づいた意思決定を行うことができます。 分析プラットフォーム、プロジェクト管理ツール、財務管理アプリなどで特に役立ちます。
Form
フォームは、ユーザーからのデータ入力を容易にする構造化されたレイアウトであり、通常はテキスト、数値、日付、選択などのさまざまな種類の情報を入力するためのフィールドで構成されます。 フォームはユーザーの入力を収集し、トランザクションを処理し、アプリケーション内でのインタラクションを促進するために不可欠です。
これらは、登録フロー、チェックアウト プロセス、データ入力タスク、およびユーザー入力やフィードバックを必要とするあらゆるシナリオでよく使用されます。
エンティティ/プロファイル ビュー
エンティティまたはプロファイル ビューには、ユーザー プロファイル、製品リスト、コンテンツ アイテムなどの特定のエンティティに関する詳細情報が表示されます。 通常、説明テキスト、マルチメディア要素、関連するアクションやインタラクションなどが含まれます。
アプリケーション内の項目に関する詳細な情報を表示するのに適しています。 ユーザーに詳細な分析情報を提供し、意思決定を促進し、ソーシャルネットワーキングアプリのユーザープロフィールやeコマースプラットフォームの商品リストなど、特定のエンティティとのエンゲージメントをサポートします。
リスト ページ
リストまたはテーブルには、構造化された形式で項目またはエンティティのコレクションが表示され、多くの場合、線形またはグリッド レイアウトで表示されます。 通常、各項目の簡単な概要またはプレビューに加えて、参照やフィルタリングのためのナビゲーション コントロールが含まれます。
リスト ページは、大量のコンテンツやデータを消化しやすい形式で表示し、ユーザーが効率的にスキャン、検索、ナビゲートできるようにするために効果的です。 特定の行に対するアクションが有効になっている場合、そのプロセスは明確であるべきです。 リスト ページは、コンテンツ管理システム、ディレクトリ リスト、検索結果、ニュース フィードなどでよく使用されます。
ミニ レビュー (画面分割)
ミニレビューまたは分割画面により、インターフェースが 2 つの異なるセクションに分割され、左側にリストが表示され、右側にアイテム ビューが表示されます。 リストには通常、アイテムのコレクションが含まれますが、アイテム ビューには、リスト内で選択されたアイテムに関する詳細情報が表示されます。
このレイアウトは、一括操作の実施時など、ユーザーが品目のリストを素早く閲覧し、同時に各品目の詳細情報を表示する必要がある場合に特に効果的です。 製品カタログ、ドキュメント管理システム、電子メールまたは通信クライアント、タスク管理ツール (Azure Dev Ops クエリ ビューアーなど) は、通常、このパターンに当てはまるシナリオです。
ウィザード
ウィザードは、一連の連続したステップまたはタスクを通常は線形に実行して、複雑なプロセスを完了したり、特定の目標を達成したりするためにユーザーをガイドします。 多くの場合、進行状況インジケーター、プロンプト、検証チェックが含まれます。 ウィザードは、複雑なプロセスを簡素化し、認知負荷を軽減し、ユーザーに馴染みのないタスクやワークフローを案内する際に役立ちます。 これらは、オンボーディング フロー、セットアップ プロセス、複数ステップのフォーム、複雑な設定やトランザクションの構成などのタスクベースのインタラクションなどでよく使用されます。
特定の要件に合わせて標準レイアウトをカスタマイズして構築します。 このプロセスには、要素の追加または削除、要素のサイズと位置の調整、ブランド アイデンティティやビジュアル デザイン ガイドラインに一致するスタイルの適用などが含まれる場合があります。 標準レイアウトのさまざまな構成やバリエーションを試して、コンテンツと全体的なユーザー エクスペリエンスにとって最も効果的な配置を見つけてください。
すべてのデバイスのレイアウトを設計する
レイアウトは、定義されたルールとコンテンツの意図的な構成の集大成です。 コンテンツを思慮深い構造に組み込むことが重要ですが、プラットフォームや画面サイズにまたがる明確な階層ですべてが流れるようにするには、スケーリング ロジックが必要です。 アダプティブ デザインとレスポンシブ デザインは、個別にこの課題に対処できます。 場合によっては、アダプティブ デザインとレスポンシブ デザインを組み合わせることが適切な選択となります。
レスポンシブ デザイン では、コンテンツが流動的でフォーマット サイズの変化に適応できるレイアウトをひとつだけ使用します。 この設計手法では、メディア クエリを使用して特定のデバイスの特性を検査し、それに応じてコンテンツをレンダリングします。 レスポンシブ デザインを使用すると、機能を一度構築するだけで、あらゆる画面サイズで効果的に機能させることができます。
アダプティブ レイアウト は、表示される形式に基づいて完全に変化します。 アダプティブ デザインには複数の固定レイアウト サイズがあり、使用可能なスペースに基づいてブラウザーが特定のレイアウトを読み込むようにトリガーします。 アダプティブ デザインで構築されたWebサイトは、レスポンシブ デザインと同様に、メディア クエリを使用してブレークポイントを検出します。 また、デバイスの機能に基づいて追加のマークアップも使用します。 このプロセスは「プログレッシブ エンハンスメント」として知られています。
再ポジション
ページ要素の位置を変更します。
ウィンドウ サイズが大きくなるにつれて構成を最適化することで、コンテンツを整理し、読みやすく、バランスを保ちます。 たとえば、モバイル ビューポート上で垂直方向に積み重ねられた要素を、より大きなビューポート上で水平方向に再配置できます。 この変更により、左から右への自然な読み取り順序に従い、デザインのバランスが生まれ、ページ上の主要な要素への視覚的な焦点が維持されます。
サイズ変更
ページ要素のサイズと余白を調整します。
ページ要素のサイズを変更して、ウィンドウ上部により多くのコンテンツを表示し、垂直スクロールの必要性を減らし、豊かなユーザー エクスペリエンスを最適化します。 ページの余白を調整してレイアウトに余白とバランスを追加すると、コンテンツに呼吸ができ、デザインの視覚的な魅力が高まります。 たとえば、ヒーロー コンポーネントは、背景画像をより多く表示するために、ウィンドウの全幅まで伸びる場合があります。 画像の下のコンテンツは拡大される可能性がありますが、異なる余白を使用することでレイアウトに多様性が加わり、視覚的な階層を定義するのに役立ちます。
リフロー
ページ要素のフローを最適化します。
コンテンツを再配置することでウィンドウのサイズと方向を考慮して、ページ要素が完全に表示されるように調整します。 たとえば、小さいウィンドウ内の 1 列のコンテンツを大きいウィンドウにリフローして、2 列のテキストを表示できます。 この技術により、より多くのコンテンツを「上半分」に表示できるようになります。
表示/非表示
ウィンドウのサイズと方向に合わせてコンテンツを最適化します。
ページ要素を表示または非表示にして、ウィンドウのサイズと方向に合わせてコンテンツを最適化します。 この応答技術は、表示コンテキストに合わせて情報量を調整します。 たとえば、小さな画面に表示されるカテゴリでは、画像、タイトル、リンクなどのメタデータを限定的に表示し、ユーザーが集中できるように他の情報を見えるようにします。 大きな画面では、人物、日付、簡単な説明などのメタデータを追加して表示することができます。
再設計する
ページ要素やコンテンツを分割または折りたたむことで、重要な情報やアクションに集中することができます。
このアプローチは、デザインにおける「プログレッシブ ディスクロージャー」の実践に似ていますが、ウィンドウのサイズと向きが異なります。 たとえば、ウィンドウを展開すると、詳細の横に項目のリストが表示されます。 コンテンツ間のこの視覚的なリンクにより、ユーザーは別の項目を簡単に選択できます。 小さな画面でも、重要な情報の表示に重点が置かれます。
ブレークポイント マトリックスを作成する
ブレークポイント マトリックスは、さまざまな画面サイズや方向におけるアプリケーションのデザインの応答性や適応性の動作をグラフィカルに表現する役割を果たします。 通常、さまざまなブレークポイントでのデザインの応答を詳細に示す構造化されたグリッドまたはレイアウトが表示されます。 各セグメントは個別の画面幅に対応しており、デザイン構造、レイアウト、機能性についての分析情報を提供します。 ブレークポイント マトリックスには、画面幅、ビューポートの方向、デザイン要素、レイアウト構造、コンテンツ プレゼンテーション、ナビゲーション、メディア、インタラクティブ コンポーネントに関する考慮事項が含まれており、Web サイトまたはアプリのデザインがさまざまな画面サイズや方向にどのように反応するかを示します。 このアプローチは、各画面のデザインを最終決定するのに役立つだけでなく、主要なコンポーネントのプロパティの変更が明示的に追跡され、適切に伝達されることで実装が容易になります。
Power Platform の促進
モデル駆動型アプリのフォームレイアウトは Power Apps Studio を使用して構成します。 フォーム デザイナー を使用すると、作成者はグリッド構造に要素を追加できるため、フォーム ページを本質的にレスポンシブにすることができます。 カスタム ページ、 埋め込みキャンバス コンポーネント、 Power Apps コンポーネント フレームワーク コード コンポーネント などの埋め込みカスタム コンポーネントでは、実装にレスポンシブな動作を組み込む必要があります。 たとえば、カスタム ページが正しく機能するには、純粋なキャンバス アプリと同じ方法で応答性の高い動作を実装する必要があります。
キャンバス アプリでは、レスポンシブな動作を実装するために各コンポーネントを明示的に構成する必要があります。これによりエクスペリエンスをより細かく制御できるようになります。 画面サイズはアプリ定義で決定され、位置、動作、可視性、その他の関連プロパティを決定するために参照できます。