画面のサイズとレスポンシブ デザインのブレークポイント

対象デバイスと、Windows 10 エコシステム全体での画面サイズの数はあまりに多いため、そのそれぞれのために UI を最適化しても意味がありません。 その代わり、360、640、1024、および 1366 epx という 4 種類の主要なキー幅 ("ブレークポイント" とも呼ばれます) を設計することをお勧めします。

ヒント

特定のブレークポイント向けに設計するときは、アプリ (アプリのウィンドウ) で使用できる画面領域の量向けに設計します。 アプリが全画面表示で実行されているときは、アプリ ウィンドウが画面と同じサイズですが、それ以外の状況では、画面より小さいサイズです。

次の表は、さまざまなサイズ クラスを説明し、これらのサイズ クラスを調整するため一般的な推奨事項を示します。

レスポンシブ デザインのブレークポイント

サイズ クラス
一般的な画面サイズ (対角線) 4" ~ 6"" 7" ~ 12"、またはテレビ 13" 以上
一般的なデバイス 電話 ファブレット、タブレット、テレビ PC、ノート PC、Surface Hub
有効なピクセル単位の一般的なウィンドウ サイズ 320 x 569、360 x 640、480 x 854 960 x 540、1024 x 640 1366 x 768、1920 x 1080
有効ピクセル単位でのウィンドウの幅のブレークポイント 640 ピクセル以下 641 ピクセル~ 1007 ピクセル 1008 ピクセル以上
一般的な推奨事項
  • タブ要素を中央に配置します。
  • ウィンドウの左右の余白を 12 ピクセルに設定して、アプリ ウィンドウの左右の端の間で視覚的な区切りを作成します。
  • 手に届きやすいようにアプリ バーをウィンドウの下部にドッキングします。
  • 一度に 1 列/地域を使います。
  • 検索を表すアイコンを使います (検索ボックスを表示しない)。
  • ナビゲーション ウィンドウをオーバーレイ モードにして画面領域を節約します。
  • マスター/詳細要素を使用している場合は、上下に並べる表示モードを使用して画面領域を節約します。
  • タブ要素を左揃えにします。
  • ウィンドウの左右の余白を 24 ピクセルに設定して、アプリ ウィンドウの左右の端の間で視覚的な区切りを作成します。
  • アプリ バーなどのコマンド要素をアプリ ウィンドウの上部に配置します。
  • 最大 2 列/領域
  • 検索ボックスを表示します。
  • アイコンの幅の狭いストリップが常に表示されるようにナビゲーション ウィンドウを小片モードにします。
  • テレビのエクスペリエンスの調整を検討します。
  • タブ要素を左揃えにします。
  • ウィンドウの左右の余白を 24 ピクセルに設定して、アプリ ウィンドウの左右の端の間で視覚的な区切りを作成します。
  • アプリ バーなどのコマンド要素をアプリ ウィンドウの上部に配置します。
  • 最大 3 列/領域
  • 検索ボックスを表示します。
  • 常に表示されるようにナビゲーション ウィンドウを固定モードにします。

互換性のある Windows 10 Mobile デバイスの新しいエクスペリエンスである電話用 Continuum を利用すると、ユーザーは電話をモニター、マウス、およびキーボードに接続して、その電話をノート PC のように使うことができます。 特定のブレークポイント向けに設計するときは、この新機能に注意してください。携帯電話が常に小さいサイズのクラスで維持されるわけではありません。