レスポンシブ デザインの手法

UWP アプリでは、すべての Windows デバイスで、UI が見やすく操作しやすくなる効果的なピクセルが使用されます。 このため、特定のデバイス ファミリー向けにアプリの UI をカスタマイズする理由がありません。

• 最も効果的に領域を使用し、移動する必要を減らすには

  タブレットなど、画面の小さいデバイスで適切に表示するアプリを設計した場合、そのアプリは、はるかに大きいディスプレイを備えた PC でも使用可能ですが、おそらく、無駄な領域があります。 画面が特定のサイズを超える場合は、より多くのコンテンツを表示するように、アプリをカスタマイズできます。 たとえば、あるショッピング アプリでは、タブレットには、一度に 1 つのカテゴリの商品が表示されますが、PC またはノート PC には、複数のカテゴリと製品が同時に表示されます。

  より多くのコンテンツを画面に表示すると、ユーザーが実行する必要があるナビゲーションの量が減少します。

• デバイスの機能を活用するには

  一部のデバイスでは、特定のデバイス機能がある可能性が高くなります。 たとえば、ノート PC では、位置センサーとカメラが付属している可能性が高く、TV では、どちらも付属していない可能性が高くなります。 アプリは、利用できる機能を検出し、それを使用する機能を有効にすることができます。

• 入力用に最適化するには

  ユニバーサル コントロール ライブラリは、すべての入力タイプ (タッチ、ペン、キーボード、マウス) と連携できますが、その場合も、UI 要素を再配置して、特定の入力タイプを最適化することができます。 たとえば、画面の下部にナビゲーション要素を配置すると、携帯電話のユーザーにとってはアクセスしやすくなりますが、ほとんどの PC ユーザーは、ナビゲーション要素は画面の上部に表示されると想定しています。

アプリの UI を特定の画面の幅に合わせて最適化することは、レスポンシブ デザインの作成と呼ばれます。 ここでは、アプリの UI のカスタマイズに使用できる 6 種類のレスポンシブ デザイン手法を紹介します。

ヒント

多くの UWP コントロールでは、これらの応答性の高い動作が自動的に実装されます。 応答性の高い UI を作成するには、UWP コントロールを調べることをお勧めします。

位置の変更

UI 要素の場所と位置を変更して、ウィンドウ サイズを最大限に活用できます。 この例では、小さいウィンドウには要素が垂直方向に並べられます。 アプリによって大きなウィンドウに変換されると、要素で利用できるウィンドウの幅が大きくなります。

写真アプリ向けのこの設計の例では、写真アプリのコンテンツは大きな画面に再配置されます。

サイズ変更

余白と UI 要素のサイズを調整して、ウィンドウ サイズを最適化できます。 たとえば、これにより、コンテンツ フレームを拡大するだけで、より大きな画面で画面を見やすくすることができます。

再配置

デバイスと向きに応じて UI 要素のフローを変更すると、アプリでコンテンツの表示を最適化できます。 たとえば、より大きな画面を対象にする場合は、列を追加し、より大きなコンテナーを使用し、別の方法でリスト項目を生成することが効果的である可能性があります。

次の例は、小さな画面で縦方向にスクロールするコンテンツの 1 列をより大きな画面に再配置して、2 列のテキストを表示する方法を示しています。

表示/非表示

UI 要素は、画面領域に基づいて表示したり、非表示にしたり、デバイスが追加機能、特定の状況、または推奨される画面の向きをサポートする場合にあわせて、表示したり、非表示にしたりできます。

たとえば、メディア プレーヤー コントロールは、小さな画面ではボタン セットが縮小され、大きな画面では拡大されます。 たとえば、大きなウィンドウ上のメディア プレーヤーが処理できる画面上の機能は、小さなウィンドウよりもはるかに多くなります。

表示/非表示の手法の一部には、より多くのメタデータを表示するタイミングの選択が含まれます。 小さなウィンドウでは、表示するメタデータの量を最小限にすることをお勧めします。 大きなウィンドウでは、かなりの量のメタデータを表示できます。 メタデータを表示または非表示にする場合の例をいくつか次に示します。

• メール アプリでは、ユーザーのアバターを表示できます。
• 音楽アプリでは、アルバムやアーティストの詳細情報を表示できます。
• ビデオ アプリでは、キャストとスタッフの詳細表示など、映画やショーの詳細情報を表示できます。
• どのアプリでも、列を分割して、さらに詳細な情報を表示できます。
• どのアプリでも、縦に並べられたものを横に並べて配置することができます。 携帯電話やファブレットから大型デバイスに移行する場合、縦に並べられたリスト項目は、リスト項目の行とメタデータの列の表示に変更できます。

Replace

この手法では、特定のブレークポイント用にユーザー インターフェイスを切り替えることができます。 次の例では、ナビゲーション ウィンドウとそのコンパクトで一時的な UI は小さな画面に適していますが、大きな画面には、タブの方が適しています。

NavigationView コントロールは、ユーザーがウィンドウの位置を上または左に設定できるようにすることで、この応答性の高い手法をサポートしています。

再構築

アプリのアーキテクチャを折りたたんだり、分岐させたりして、対象となる特定のデバイスをより明確にすることができます。 この例では、ウィンドウを拡大すると、リストと詳細パターン全体が表示されます。

関連トピック

• 画面のサイズとブレークポイント
• XAML でのレスポンシブ レイアウト
• UWP コントロールとパターン