Windows デバイスの UI に関する考慮事項UI considerations for Windows devices

デバイス

Windows アプリをサポートするデバイスを理解することは、各フォーム ファクター向けの最適なユーザー エクスペリエンスを提供するために役立ちます。Getting to know the devices that support Windows apps will help you offer the best user experience for each form factor.

Windows デバイス

特定のデバイス向けのアプリを設計するときは、アプリがデバイスにどのように表示されるか、そのデバイスでアプリがいつどこでどのように使われるか、ユーザーがそのデバイスをどのように操作するかについて、特に考慮する必要があります。When designing for a particular device, the main considerations include how the app will appear on that device, where, when, and how the app will be used on that device, and how the user will interact with that device.

PC とノート PCPCs and laptops

Windows PC とノート PC には、多種多様なデバイスと画面サイズがあります。Windows PCs and laptops include a wide array of devices and screen sizes. 一般に、PC やノート PC は電話やタブレットより多くの情報を表示できます。In general, PCs and laptops can display more info than phone or tablets.

画面サイズScreen sizes

  • 13" 以上13” and greater

PC

一般的な使い方Typical usage

  • デスクトップとノート PC のアプリは共有で使われますが、一度に使うことができるのは 1 人のユーザーだけであり、通常は長時間使われます。Apps on desktops and laptops see shared use, but by one user at a time, and usually for longer periods.

UI に関する考慮事項UI considerations

  • アプリは、ユーザーが決めたウィンドウ表示のサイズにすることができます。Apps can have a windowed view, the size of which is determined by the user. ウィンドウのサイズによっては、1 ~ 3 つのフレームを表示できます。Depending on window size, there can be between one and three frames. 大型のモニターでは、アプリは 3 つを超えるフレームを表示できます。On larger monitors, the app can have more than three frames.

  • アプリをデスクトップまたはノート PC で使う場合、ユーザーがアプリのファイルを制御できます。When using an app on a desktop or laptop, the user has control over app files. アプリの設計者は、アプリのコンテンツを管理するメカニズムを必ず用意してください。As an app designer, be sure to provide the mechanisms to manage your app’s content. [名前を付けて保存] や [最近使ったファイル] などのコマンドや機能を含めることを検討してください。Consider including commands and features such as "Save As", "Recent files", and so on.

  • システムの戻るボタンはオプションです。System back is optional. アプリの開発者が表示するように選択した場合、アプリのタイトル バーに表示されます。When an app developer chooses to show it, it appears in the app title bar.

入力Inputs

  • マウスMouse
  • キーボードKeyboard
  • タッチ (ノート PC とオールインワン型デスクトップ)。Touch on laptops and all-in-one desktops.
  • Xbox コントローラーなどのゲームパッドが使われることがあります。Gamepads, such as the Xbox controller, are sometimes used.

デバイスの標準的な機能Typical device capabilities

  • カメラCamera
  • マイクMicrophone

タブレットと 2 in 1Tablets and 2-in-1s

超軽量のタブレット コンピューターは、タッチスクリーン、カメラ、マイク、および加速度計を備えています。Ultra-portable tablet computers are equipped with touchscreens, cameras, microphones, and accelerometers. タブレットの画面サイズは、通常は 7" ~ 13.3" です。Tablet screen sizes usually range from 7” to 13.3”. 2 in 1 デバイスは、構成によって (通常は、画面をたたむか直立させて切り替えます)、タブレットまたはキーボードとマウスを使ったノート PC として利用できます。2-in-1 devices can act like either a tablet or a laptop with a keyboard and mouse, depending on the configuration (usually involving folding the screen back or tilting it upright).

画面サイズScreen sizes

  • タブレットの場合、7 ~ 13.3 インチ7” to 13.3” for tablet
  • 2 in 1 の場合は 13.3 インチ以上13.3" and greater for 2-in-1

タブレット デバイス

一般的な使い方Typical usage

  • タブレットは、約 80% がその所有者によって使われ、残りの約 20% が共有されています。About 80% of tablet use is by the owner, with the other 20% being shared use.
  • 最も一般的なのは、自宅でテレビを視聴しているときのコンパニオン デバイスとして使うことです。It’s most commonly used at home as a companion device while watching TV.
  • 電話とファブレットよりも長い時間使われます。It’s used for longer periods than phones and phablets.
  • テキストは一気に入力されます。Text is entered in short bursts.

UI に関する考慮事項UI considerations

  • タブレットは、横方向でも縦方向でも一度に 2 つのフレームを表示できます。In both landscape and portrait orientations, tablets allow two frames at a time.
  • システムの戻るボタンはナビゲーション バーに配置されます。System back is located on the navigation bar.

入力Inputs

  • TouchTouch
  • スタイラスStylus
  • 外部キーボード (ときどき)External keyboard (occasionally)
  • マウス (ときどき)Mouse (occasionally)
  • 音声 (ときどき)Voice (occasionally)

デバイスの標準的な機能Typical device capabilities

  • カメラCamera
  • マイクMicrophone
  • 移動センサー (複数)Movement sensors
  • 位置センサー (複数)Location sensors

注意

PC の考慮事項のほとんどが 2 in 1 にも当てはまります。Most of the considerations for PCs and laptops apply to 2-in-1s as well.

Xbox とテレビXbox and TV

ソファーに座りながらゲームパッドやリモコンを使って部屋の反対側にあるテレビを操作することを、 10 フィート エクスペリエンス といいます。The experience of sitting on your couch across the room, using a gamepad or remote to interact with your TV, is called the 10-foot experience . 通常は画面から約 10 フィート (約 3 m) の距離に座るため、このように呼ばれています。It is so named because the user is generally sitting approximately 10 feet away from the screen. この場合、たとえば PC の操作 ( 2 フィート エクスペリエンスと呼ばれます) には見られない、特有の課題があります。This provides unique challenges that aren't present in, say, the 2-foot experience, or interacting with a PC. テレビ画面に接続し、ゲームパッドやリモコンを使うこともある Xbox One やその他のデバイス向けアプリを開発している場合、この点を常に意識しておく必要があります。If you are developing an app for Xbox One or any other device that's connected to a TV screen and might use a gamepad or remote for input, you should always keep this in mind.

10 フィート エクスペリエンスを提供する Windows アプリの設計は、ここに記載されているその他のデバイス カテゴリでの設計とは非常に異なります。Designing your Windows app for the 10-foot experience is very different from designing for any of the other device categories listed here. 詳しくは、「Xbox およびテレビ向け設計」をご覧ください。For more information, see Designing for Xbox and TV.

画面サイズScreen sizes

  • 24 インチ以上24" and up

Xbox とテレビ

一般的な使い方Typical usage

  • 多くの場合は、複数のユーザーが共有して使用しますが、1 人だけで使用することもよくあります。Often shared among several people, though is also often used by just one person.
  • 通常は長時間使われます。Usually used for longer periods.
  • 最もよく使用される場所は自宅で、一か所に据え置かれます。Most commonly used at home, staying in one place.
  • ゲームパッドやリモコンを使ってのテキスト入力は時間がかかるため、テキスト入力が求められることはほとんどありません。Rarely asks for text input because it takes longer with a gamepad or remote.
  • 画面の向きは固定されています。Orientation of the screen is fixed.
  • 通常、一度に 1 つのアプリのみを実行しますが、画面の端にアプリをスナップできる場合があります (Xbox など)。Usually only runs one app at a time, but it may be possible to snap apps to the side (such as on Xbox).

UI に関する考慮事項UI considerations

  • アプリのサイズは、他のアプリが画面の端にスナップされていない限り、通常は変化しません。Apps usually stay the same size, unless another app is snapped to the side.
  • システムの戻るボタン、ほとんどの Xbox アプリで提供される便利な機能で、ゲームパッドの B ボタンを使用してアクセスします。System back is useful functionality that is offered in most Xbox apps, accessed using the B button on the gamepad.
  • 通常、ユーザーは画面から約 10 フィート (約 3 m) の距離に座るため、読み取れるように十分な大きさで明瞭な UI が必要です。Since the customer is sitting approximately 10 feet away from the screen, make sure that UI is large and clear enough to be visible.

入力Inputs

  • ゲームパッド (Xbox コントローラーなど)Gamepad (such as an Xbox controller)
  • リモートRemote
  • 音声 (Kinect やヘッドセットを使用する場合)Voice (occasionally, if the customer has a Kinect or headset)

デバイスの標準的な機能Typical device capabilities

  • カメラ (Kinect を使用する場合)Camera (occasionally, if the customer has a Kinect)
  • マイク (Kinect やヘッドセットを使用する場合)Microphone (occasionally, if the customer has a Kinect or headset)
  • 移動センサー (Kinect を使用する場合)Movement sensors (occasionally, if the customer has a Kinect)

電話とファブレットPhones and phablets

すべてのコンピューティング デバイスの中で最も広く使われている電話では、限られた画面領域と基本的な入力方法を使って、さまざまな操作を行うことができます。The most widely-used of all computing devices, phones can do a lot with limited screen real estate and basic inputs. 電話にはさまざまなサイズがあり、大きい電話はファブレットと呼ばれます。Phones are available in a variety of sizes; larger phones are called phablets. ファブレットでのアプリのエクスペリエンスは、電話でのエクスペリエンスと似ていますが、画面領域が大きくなることで、コンテンツ操作時に重要な変更が可能になります。App experiences on phablets are similar to those on phones, but the increased screen real estate of phablets enable some key changes in content consumption.

互換性のある Windows 10 Mobile デバイスの新しいエクスペリエンスである電話用 Continuum を使用すると、ユーザーが電話をモニターに接続し、マウスやキーボードを使用して、その電話をノート PC のように使うことができます。With Continuum for Phones, a new experience for compatible Windows 10 mobile devices, users can connect their phones to a monitor and even use a mouse and keyboard to make their phones work like a laptop. 詳しくは、「電話用 Continuum」をご覧ください。(For more info, see the Continuum for Phone article.)

画面サイズScreen sizes

  • 電話の場合、4" ~ 5"4'' to 5'' for phone
  • ファブレットの場合、5.5" ~ 7"5.5'' to 7'' for phablet

Windows Phone

一般的な使い方Typical usage

  • 主に縦向きで使われます。これはほとんどの場合、片手で電話を持つのが簡単であること、その方法で完全に電話を操作できることが理由ですが、写真やビデオの表示、本の閲覧、テキストの作成など、横向きが適切なエクスペリエンスもあります。Primarily used in portrait orientation, mostly due to the ease of holding the phone with one hand and being able to fully interact with it that way, but there are some experiences that work well in landscape, such as viewing photos and video, reading a book, and composing text.
  • ほとんどの場合、そのデバイスの所有者である 1 人のユーザーによって使われます。Mostly used by just one person, the owner of the device.
  • 常に手近にあり、通常はポケットやバッグに入れられます。Always within reach, usually stashed in a pocket or a bag.
  • 短時間使われます。Used for brief periods of time.
  • ユーザーは、電話を使うときによくマルチタスクを実行します。Users are often multitasking when using the phone.
  • テキストは一気に入力されます。Text is entered in short bursts.

UI に関する考慮事項UI considerations

  • 電話の画面の小さいサイズでは、横方向でも縦方向でも、一度に 1 つのフレームのみを表示できます。The small size of a phone's screen allows only one frame at a time to be viewed in both portrait and landscape orientations. 電話のすべての階層型ナビゲーション パターンでは「ドリルダウン」モデルを使い、ユーザーが単一フレームの UI レイヤーを移動するようにします。All hierarchical navigation patterns on a phone use the "drill" model, with the user navigating through single-frame UI layers.

  • 電話と同じように、縦モードのファブレットには、一度に 1 つのフレームのみを表示できます。Similar to phones, phablets in portrait mode can view only one frame at a time. ただし、ファブレットで使うことができる画面領域は大きいため、ユーザーはファブレットを横方向に回転させてそのまま保持することで、2 つのアプリ フレームを同時に表示できます。But with the greater screen real estate available on a phablet, users have the ability to rotate to landscape orientation and stay there, so two app frames can be visible at a time.

  • 横方向と縦方向の両方で、スクリーン キーボードが表示されているときに、アプリ バーを表示するための十分な画面領域があることを確認します。In both landscape and portrait orientations, be sure that there's enough screen real estate for the app bar when the on-screen keyboard is up.

入力Inputs

  • TouchTouch
  • 音声Voice

デバイスの標準的な機能Typical device capabilities

  • マイクMicrophone
  • カメラCamera
  • 移動センサー (複数)Movement sensors
  • 位置センサー (複数)Location sensors

Surface Hub デバイスSurface Hub devices

Microsoft Surface Hub は、複数のユーザーによる同時使用のために設計された大画面のチーム コラボレーション デバイスです。Microsoft Surface Hub is a large-screen team collaboration device designed for simultaneous use by multiple users.

画面サイズScreen sizes

  • 55" および 84"55” and 84''

Surface Hub

一般的な使い方Typical usage

  • Surface Hub 上のアプリは、会議などで短時間共有して使われます。Apps on Surface Hub see shared use for short periods of time, such as in meetings.

  • ほとんどの場合、Surface Hub デバイス固定された状態で使われ、移動することはめったにありません。Surface Hub devices are mostly stationary and rarely moved.

UI に関する考慮事項UI considerations

  • Surface Hub 上のアプリは 4 つの状態のいずれかで表示されます。全画面 (標準の全画面表示)、バックグラウンド (アプリの実行中に非表示になり、タスク スイッチャーで利用可能)、フィル (利用可能なステージ エリアを使う固定表示)、スナップ (ステージの右端または左端を使う可変表示) です。Apps on Surface Hub can appear in one of four states - full (standard full-screen view), background (hidden from view while the app is still running, available in task switcher), fill (a fixed view that occupies the available stage area), and snapped (variable view that occupies the right or left sides of the stage).
  • スナップ モードまたはフィル モードでは、Skype サイドバーが表示され、アプリは横方向に縮小されます。In snapped mode or fill modes, the system displays the Skype sidebar and shrinks the app horizontally.
  • システムの戻るボタンはオプションです。System back is optional. アプリの開発者が表示するように選択した場合、アプリのタイトル バーに表示されます。When an app developer chooses to show it, it appears in the app title bar.

入力Inputs

  • TouchTouch
  • ペンPen
  • 音声Voice
  • キーボード (スクリーン/リモート)Keyboard (on-screen/remote)
  • タッチパッド (リモート)Touchpad (remote)

デバイスの標準的な機能Typical device capabilities

  • カメラCamera
  • マイクMicrophone

Windows IoT デバイスWindows IoT devices

Windows IoT デバイスは、最新クラスのデバイスであり、主に小型のエレクトロニクス、センサー、接続機能が物理オブジェクト内に埋め込まれたものです。Windows IoT devices are an emerging class of devices centered around embedding small electronics, sensors, and connectivity within physical objects. 通常、これらのデバイスはネットワークまたはインターネット経由で接続され、感知した実際のデータについて報告します。場合によっては、それに対して処理を実行することもあります。These devices are usually connected through a network or the Internet to report on the real-world data they sense, and in some cases act on it. デバイスには、画面がない場合 ("ヘッドレス" デバイスとも呼ばれます) と、一般的に 3.5" 以下の小さい画面に接続される場合 ("ヘッド付き" デバイスとも呼ばれます) があります。Devices can either have no screen (also known as “headless” devices) or are connected to a small screen (known as “headed” devices) with a screen size usually 3.5” or smaller.

画面サイズScreen sizes

  • 3.5" 以下3.5'' or smaller
  • 一部のデバイスには画面がないSome devices have no screen

IoT デバイス

一般的な使い方Typical usage

  • 通常、ネットワークまたはインターネット経由で接続されており、感知した実際のデータについて報告します。場合によっては、それに対して処理を実行することもあります。Usually connected through a network or the Internet to report on the real-world data they sense, and in some cases act on it.
  • これらのデバイスは電話やその他の大型デバイスとは異なり、一度に 1 つのアプリケーションのみ実行できます。These devices can only run one application at a time unlike phones or other larger devices.
  • 常に操作するデバイスではありませんが、必要なときに利用でき、必要でないときに邪魔になりません。It isn’t something that is interacted with all the time, but instead is available when you need it, out of the way when you don’t.
  • アプリには専用のバック アフォーダンスはなく、これは開発者の責任です。App doesn’t have a dedicated back affordance, that is the developers responsibility.

UI に関する考慮事項UI considerations

  • "ヘッドレス "デバイスには画面がありません。"headless" devices have no screen.
  • "ヘッド付き" デバイスの画面は最小限で、画面サイズと機能が制限されているため、必要なもののみが表示されます。Display for “headed” devices is minimal, only showing what is necessary due to limited screen real estate and functionality.
  • ほとんどの場合、向きはロックされるため、アプリでは 1 つの表示方向を考慮するだけで済みます。Orientation is most times locked, so your app only needs to consider one display direction.

入力Inputs

  • デバイスに応じて可変Variable, depending on the device

デバイスの標準的な機能Typical device capabilities

  • デバイスに応じて可変Variable, depending on the device