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

UWP アプリでは、有効ピクセルを使用して、読みやすく、すべての Windows を利用したデバイスで使用可能な UI になることを保証します。UWP apps use effective pixels to guarantee that your UI will be legible and usable on all Windows-powered devices. このため、特定のデバイス ファミリー向けにアプリの UI をカスタマイズする理由がありません。So, why would you ever want to customize your app's UI for a specific device family?

  • 領域の最も効果的に使用して、移動する必要性が軽減するにはTo make the most effective use of space and reduce the need to navigate

    小さな画面を備えたデバイスで適切に表示するアプリを設計する場合は、タブレットなど、アプリはくらい大きく表示、PC 上で使用されますが、無駄な領域の一部でしょう。If you design an app to look good on a device that has a small screen, such as a tablet, the app will be usable on a PC with a much bigger display, but there will probably be some wasted space. 画面が特定のサイズを超える場合は、より多くのコンテンツを表示するように、アプリをカスタマイズできます。You can customize the app to display more content when the screen is above a certain size. たとえば、ショッピング アプリは、タブレットで同時に 1 つの商品カテゴリを表示が、PC またはノート パソコンに複数のカテゴリと製品を同時に表示します。For example, a shopping app might display one merchandise category at a time on a tablet, but show multiple categories and products simultaneously on a PC or laptop.

    より多くのコンテンツを画面に表示すると、ユーザーが実行する必要があるナビゲーションの量が減少します。By putting more content on the screen, you reduce the amount of navigation that the user needs to perform.

  • デバイスの機能を活用するにはTo take advantage of devices' capabilities

    一部のデバイスでは、特定のデバイス機能がある可能性が高くなります。Certain devices are more likely to have certain device capabilities. たとえば、ラップトップを持つ可能性が位置情報センサーとカメラ、TV いずれかがないです。For example, laptops are likely to have a location sensor and a camera, while a TV might not have either. アプリは、利用できる機能を検出し、それを使用する機能を有効にすることができます。Your app can detect which capabilities are available and enable features that use them.

  • 入力用に最適化するにはTo optimize for input

    ユニバーサル コントロール ライブラリは、すべての入力タイプ (タッチ、ペン、キーボード、マウス) と連携できますが、その場合も、UI 要素を再配置して、特定の入力タイプを最適化することができます。The universal control library works with all input types (touch, pen, keyboard, mouse), but you can still optimize for certain input types by re-arranging your UI elements. たとえば、画面の下部にナビゲーション要素を配置すると、携帯電話のユーザーにとってはアクセスしやすくなりますが、ほとんどの PC ユーザーは、ナビゲーション要素は画面の上部に表示されると想定しています。For example, if you place navigation elements at the bottom of the screen, they'll be easier for phone users to access—but most PC users expect to see navigation elements toward the top of the screen.

アプリの UI を特定の画面の幅に合わせて最適化することは、レスポンシブ デザインの作成と呼ばれます。When you optimize your app's UI for specific screen widths, we say that you're creating a responsive design. ここでは、アプリの UI のカスタマイズに使用できる 6 種類のレスポンシブ デザイン手法を紹介します。Here are six responsive design techniques you can use to customize your app's UI.

ヒント

UWP コントロールの多くは、これらの応答性の高い動作を自動的に実装します。Many UWP controls automatically implement these responsive behaviors. レスポンシブ UI を作成するをお勧めのチェック アウト、 UWP コントロールします。To create a responsive UI, we recommend checking out the UWP controls.

位置の変更Reposition

ウィンドウのサイズを最大限に活用する UI 要素の位置と場所を変更することができます。You can alter the location and position of UI elements to make the most of the window size. この例では、小さいウィンドウは、要素を垂直方向にスタックします。In this example, the smaller window stacks elements vertically. アプリ変換される場合より大きなウィンドウに、要素より多くのウィンドウの幅の利用できます。When the app translates to a larger window, elements can take advantage of the wider window width.

位置の変更

写真アプリ向けのこの設計の例では、写真アプリのコンテンツは大きな画面に再配置されます。In this example design for a photo app, the photo app repositions its content on larger screens.

サイズ変更Resize

ウィンドウ サイズの UI 要素のサイズと余白を調整することによって最適化できます。You can optimize for the window size by adjusting the margins and size of UI elements. たとえば、コンテンツ フレームを単純に拡大することによりより大きな画面での読みやすさを補強これでした。For example, this could augment the reading experience on a larger screen by simply growing the content frame.

デザイン要素のサイズ変更

再配置Reflow

デバイスと向きに応じて UI 要素のフローを変更すると、アプリでコンテンツの表示を最適化できます。By changing the flow of UI elements based on device and orientation, your app can offer an optimal display of content. たとえばより大きな画面になると、有意義なこと列の追加または拡大のコンテナーを使用して、別の方法でリスト項目を生成します。For instance, when going to a larger screen, it might make sense to add columns, use larger containers, or generate list items in a different way.

この例では、1 つの列のテキストの 2 つの列を表示するより大きな画面に折り返すことができますを小さな画面上のコンテンツを垂直方向にスクロールする方法を示します。This example shows how a single column of vertically scrolling content on a smaller screen that can be reflowed on a larger screen to display two columns of text.

デザイン要素の再配置

[表示]/[非表示]Show/hide

UI 要素は、画面領域に基づいて表示したり、非表示にしたり、デバイスが追加機能、特定の状況、または推奨される画面の向きをサポートする場合にあわせて、表示したり、非表示にしたりできます。You can show or hide UI elements based on screen real estate, or when the device supports additional functionality, specific situations, or preferred screen orientations.

デザイン要素の非表示

たとえば、メディア プレーヤーのコントロールは、小さい画面にボタンのセットを削減し、大きい画面で展開します。For example, media player controls reduce the button set on smaller screens and expand on larger screens. 大きなウィンドウで、media player がはるかに多くの画面に処理できる機能よりも小さいウィンドウのことができます。The media player on a larger window can handle far more on-screen functionality than it can on a smaller window.

表示/非表示の手法の一部には、より多くのメタデータを表示するタイミングの選択が含まれます。Part of the reveal-or-hide technique includes choosing when to display more metadata. 小さい windows では、最小限のメタデータを表示することをお勧めします。With smaller windows, it's best to show a minimal amount of metadata. 大きな windows は、大量のメタデータを表示できます。With larger windows, a significant amount of metadata can be surfaced. いくつかの例の場合またはメタデータを非表示には次のとおりです。Some examples of when to show or hide metadata include:

  • メール アプリでは、ユーザーのアバターを表示できます。In an email app, you can display the user's avatar.
  • 音楽アプリでは、アルバムやアーティストの詳細情報を表示できます。In a music app, you can display more info about an album or artist.
  • ビデオ アプリでは、キャストとスタッフの詳細表示など、映画やショーの詳細情報を表示できます。In a video app, you can display more info about a film or a show, such as showing cast and crew details.
  • どのアプリでも、列を分割して、さらに詳細な情報を表示できます。In any app, you can break apart columns and reveal more details.
  • どのアプリでも、縦に並べられたものを横に並べて配置することができます。In any app, you can take something that's vertically stacked and lay it out horizontally. 携帯電話やファブレットから大型デバイスに移行する場合、縦に並べられたリスト項目は、リスト項目の行とメタデータの列の表示に変更できます。When going from phone or phablet to larger devices, stacked list items can change to reveal rows of list items and columns of metadata.

置換Replace

この手法では、ユーザー インターフェイスの特定のブレークポイントを切り替えることができます。This technique lets you switch the user interface for a specific breakpoints. 次の例、ナビゲーション ウィンドウとその最適化では、一時的な UI は、小さな画面に適してがより大きな画面では、タブの方が適切可能性があります。In this example, the nav pane and its compact, transient UI works well for a smaller screen, but on a larger screen, tabs might be a better choice.

デザイン要素の置き換え

NavigationViewコントロールは、左または上にウィンドウの位置を設定することでこの応答性の高い方法をサポートしています。The NavigationView control supports this responsive technique, by letting users set the pane position to either top or left.

再構築Re-architect

アプリのアーキテクチャを折りたたんだり、分岐させたりして、対象となる特定のデバイスをより明確にすることができます。You can collapse or fork the architecture of your app to better target specific devices. この例で、ウィンドウの展開全体のマスター/詳細パターンが表示されます。In this example, expanding the window shows the entire master/details pattern.

ユーザー インターフェイスの再設計の例