画面のサイズとブレークポイントScreen sizes and breakpoints

UWP アプリは、Windows 10 を実行している任意のデバイスで実行できます (電話、タブレット、デスクトップ、テレビなど)。UWP apps can run on any device running Windows 10, which includes phones, tablets, desktops, TVs, and more. Windows 10 エコシステム全体にわたって多数のデバイスターゲットと画面サイズがあるため、各デバイスの UI を最適化するのではなく、いくつかのキー幅のカテゴリ ("ブレークポイント" とも呼ばれます) を設計することをお勧めします。With a huge number of device targets and screen sizes across the Windows 10 ecosystem, rather than optimizing your UI for each device, we recommended designing for a few key width categories (also called "breakpoints"):

  • 小 (640 ピクセル以下)Small (smaller than 640px)
  • 中 (641 ピクセル ~ 1007 ピクセル)Medium (641px to 1007px)
  • 大 (1008 ピクセル以上)Large (1008px and larger)

ヒント

特定のブレークポイント向けに設計するときは、画面のサイズではなく、アプリ (アプリのウィンドウ) で使用できる画面領域の量に対して設計します。When designing for specific breakpoints, design for the amount of screen space available to your app (the app's window), not the screen size. アプリが全画面表示で実行されているときは、アプリ ウィンドウのサイズは画面と同じですが、アプリが全画面表示でないときは、ウィンドウは画面より小さくなります。When the app is running full-screen, the app window is the same size as the screen, but when the app is not full-screen, the window is smaller than the screen.

ブレークポイントBreakpoints

次の表で、さまざまなサイズ クラスとブレークポイントについて説明します。This table describes the different size classes and breakpoints.

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

サイズ クラスSize class ブレークポイントBreakpoints 一般的な画面サイズ (対角線)Typical screen size (diagonal) デバイスDevices ウィンドウ サイズWindow sizes
Small 640 ピクセル以下640px or less 4" ~ 6"; 20" ~ 65"4" to 6"; 20" to 65" 電話、テレビPhones, TVs 320 x 569、360 x 640、480 x 854320x569, 360x640, 480x854
Medium 641 ピクセル~ 1007 ピクセル641px to 1007px 7" ~ 12"7" to 12" ファブレット、タブレットPhablets, tablets 960 x 540960x540
Large 1008 ピクセル以上1008px or greater 13" 以上13" and larger PC、ノート PC、Surface HubPCs, laptops, Surface Hubs 1024 x 640、1366 x 768、1920 x 10801024x640, 1366x768, 1920x1080

なぜテレビは「小さい」と見なされるのですか。Why are TVs considered "small"?

ほとんどのテレビは物理的に非常に大きく (40 から 65 インチが一般的)、高解像度 (HD または 4K) ですが、10 フィート (約 3 m) 離れた場所から表示する 1080P のテレビの設計は、机上の 1 フィート (約 30 cm) 離れた場所に置かれる 1080p のモニターの設計とは異なります。While most TVs are physically quite large (40 to 65 inches is common) and have high resolutions (HD or 4k), designing for a 1080P TV that you view from 10 feet away is different from designing for a 1080p monitor sitting a foot away on your desk. 距離を考慮するときに、テレビの 1080 ピクセルは 540 ピクセルのモニターにより近くなります。When you account for distance, the TV's 1080 pixels are more like a 540-pixel monitor that's much closer.

UWP の有効ピクセルのシステムでは、視聴距離を自動的に考慮します。UWP's effective pixel system automatically takes viewing distance in account for you. コントロールまたはブレークポイントの範囲のサイズを指定するときは、実際には "有効" ピクセルを使用しています。When you specify a size for a control or a breakpoint range, you're actually using "effective" pixels. たとえば、1080 ピクセル以上に対応するコードを作成する場合は、1080 モニターでそのコードを使用しますが、1080p のテレビでは使用しません。これは、1080p のテレビの物理ピクセルは 1080 ですが、有効ピクセルは 540 しかないためです。For example, if you create responsive code for 1080 pixels and higher, a 1080 monitor will use that code, but a 1080p TV will not--because although a 1080p TV has 1080 physical pixels, it only has 540 effective pixels. このため、テレビの設計は、携帯電話の設計に似ています。Which makes designing for a TV similar to designing for a phone.

有効ピクセルと倍率Effective pixels and scale factor

UWP アプリは、すべての Windows 10 デバイスでアプリが判読可能であることを保証するために、UI を自動的に拡大縮小します。UWP apps automatically scale your UI to guarantee that your app will be legible on all Windows 10 devices. Windows では、ディスプレイの DPI (1 インチあたりのドット数) と、デバイスの視聴距離に基づいて各ディスプレイが自動的に拡大縮小されます。Windows automatically scales for each display based on its DPI (dots-per-inch) and the viewing distance of the device. ユーザーは、 [設定] > [ディスプレイ] > [拡大縮小とレイアウト] の設定ページに移動して既定値を上書きできます。Users can override the default value and by going to Settings > Display > Scale and layout settings page.

一般的な推奨事項General recommendations

Small

  • ウィンドウの左右の余白を 12 ピクセルに設定して、アプリ ウィンドウの左右の端の間で視覚的な区切りを作成します。Set left and right window margins to 12px to create a visual separation between the left and right edges of the app window.
  • 手に届きやすいようにアプリ バーをウィンドウの下部にドッキングします。Dock app bars to the bottom of the window for improved reachability.
  • 一度に 1 つの列/領域を使用します。Use one column/region at a time.
  • 検索を表すアイコンを使います (検索ボックスを表示しない)。Use an icon to represent search (don't show a search box).
  • ナビゲーション ウィンドウをオーバーレイ モードにして画面領域を節約します。Put the navigation pane in overlay mode to conserve screen space.
  • マスター/詳細要素を使用している場合は、上下に並べる表示モードを使用して画面領域を節約します。If you're using the master details pattern, use the stacked presentation mode to save screen space.

Medium

  • ウィンドウの左右の余白を 24 ピクセルに設定して、アプリ ウィンドウの左右の端の間で視覚的な区切りを作成します。Set left and right window margins to 24px to create a visual separation between the left and right edges of the app window.
  • アプリ バーなどのコマンド要素をアプリ ウィンドウの上部に配置します。Put command elements like app bars at the top of the app window.
  • 最大で 2 つの列/領域を使用します。Use up to two columns/regions.
  • 検索ボックスを表示します。Show the search box.
  • アイコンの幅の狭いストリップが常に表示されるようにナビゲーション ウィンドウを小片モードにします。Put the navigation pane into sliver mode so a narrow strip of icons always shows.
  • テレビのエクスペリエンスの調整を検討します。Consider further tailoring for TV experiences.

Large

  • ウィンドウの左右の余白を 24 ピクセルに設定して、アプリ ウィンドウの左右の端の間で視覚的な区切りを作成します。Set left and right window margins to 24px to create a visual separation between the left and right edges of the app window.
  • アプリ バーなどのコマンド要素をアプリ ウィンドウの上部に配置します。Put command elements like app bars at the top of the app window.
  • 最大で 3 つの列/領域を使用します。Use up to three columns/regions.
  • 検索ボックスを表示します。Show the search box.
  • 常に表示されるようにナビゲーション ウィンドウを固定モードにします。Put the navigation pane into docked mode so that it always shows.

ヒント

携帯電話の場合、ユーザーは互換性のある Windows 10 mobile デバイスをモニター、マウス、キーボードに接続して、携帯電話をラップトップのように機能させることができます。With Continuum for Phones, users can connect compatible Windows 10 mobile devices to a monitor, mouse and keyboard to make their phones work like laptops. 特定のブレークポイント向けに設計するときは、この新機能に注意してください。携帯電話が常にそのサイズ クラスで維持されるわけではありません。Keep this new capability in mind when designing for specific breakpoints - a mobile phone will not always stay in the size class.