レスポンシブ デザインとフォーム ファクター

ストア アプリは、デスクトップ、ノート PC、タブレット、携帯電話で利用できます。アプリは、さまざまなフォーム ファクターをすべて処理できるように設計します。ユーザーはさまざなデバイスを使い分けながら、入力方式を切り替えたり、画面の向きを変えたり、アプリを切り替えたりします。それに対応して、アプリは移動し、変化し、反応します。

アプリの柔軟なビュー

Windows では、ユーザーに主導権があります。アプリの UI は、ユーザーが使うあらゆるデバイス、入力モード、向き、状況で適切に表示される必要があります。

柔軟なビューを持つアプリを設計すると、アプリの UI は、モニターの向き、モバイル デバイス、入力方法の変更に応じて自動的に再配置します。Windows では、これらの動作を管理します。

向き

	横  横向きのビューを設計して、アプリがすべてのフォーム ファクターで適切に表示されるようにします。さまざまなフォーム ファクターが横向きビューにどのように影響するかを考慮します。新しい種類のデバイスでは、画面領域が変更される場合があります。
	縦   一部のデバイスは一般に縦向きで使われることが多く、また多くのデバイスが回転して使われることに注意してください。縦向きのビューのときのコンテンツのレイアウトを最適化し、できるだけ機能を維持します。横向きから縦向きに切り替わることで、アプリの幅が約 1/3 になります。したがって、縦向きの形式でデザインがどのようになるか考えることが重要です。

複数のアプリを含む柔軟なレイアウト:

サイズ変更できる Windows: Design の柔軟性を取り入れてアプリをデザインしてください。 柔軟なレイアウト ユーザーがアプリのサイズをどのように変更しても適切に表示するために重要なのは、一意の各ビューについてレイアウトを定義し、コンテンツを自動的に配置および配布する柔軟なコントロールを使うことです。

組み込みのグラフィックのスケーリング

ユーザーが複数のフォーム ファクターでアプリにアクセスできるということは、Windows が動作するすべての画面サイズに合わせて異なる UI を設計する必要があるということなのでしょうか。画面サイズは無数にあります。この疑問に対する答えは、"必要ありません" です。スケーリング機能により、アプリとコンテンツは、7 インチの小さなデバイスでも 30 インチの大きなモニターでも常に適切に表示されます。 必要なのは、柔軟なレイアウトを使い、スケーリング時にアプリのグラフィックが適切に表示されるようにすることだけです。

詳しくは、「ピクセル密度に合わせたスケーリングのガイドライン」をご覧ください。

入力パターン:

Windows: タッチ操作に対応したアプリを設計する場合、ペン、マウス、キーボードの操作は無料でサポートされます。ユーザーが入力方法を切り替えても、アプリの使いやすさは変わりません。タブレットにキーボードを接続しても、問題ありません。アプリは、ユーザーの選択に対して一貫して予想どおりに応答します。

詳しくは、「タッチ操作の設計」と「ユーザー操作への応答」をご覧ください。

デバイス機能

優れたアプリは、実行されているデバイスを最大限に活かします。Windows 8.1 には、こうしたデバイス機能のサポートが組み込まれています。

	加速度計やその他のセンサー  最新のデバイスはさまざまなセンサーを備えています。アプリでは、環境光に応じてディスプレイの明るさを調節したり、ユーザーがディスプレイの向きを変えたときに UI を自動的に再配置したり、物理的な動きに応じて処理を行ったりできます。 詳しくは、「デバイス、プリンター、センサーの統合」をご覧ください。
	地理位置情報  標準的な Web データまたは地理位置情報センサーからの地理位置情報を使って、ユーザーの移動や地図上での位置確認、または近くのユーザー、アクティビティ、目的地に関するユーザー通知を支援します。詳しくは、「地理位置情報の検出」をご覧ください。
	カメラ   ユーザーは内蔵型または接続型のカメラを使って、チャット、会議、ビデオ ブログの録画、プロファイルの写真の撮影、周囲の世界の記録など、アプリに応じた作業を行うことができます。
	近接通信   ユーザーは、複数のデバイスを物理的に "タップ" することで接続して、複数のユーザーが物理的に近くにいる必要がある状況 (マルチプレイヤー ゲーム) での使い勝手をよくすることができます。詳しくは、近接ジェスチャについてのページをご覧ください。

アプリの機能を計画する際は、アプリが実行されるデバイスについて考えます。アプリが適切に動作するためには、特定のデバイス機能が必要か。それとも、その機能がなくても動作できるか。アプリ マニフェストで、アプリがサポートする機能を宣言する必要がありますが、アプリ自体には、オプションの機能のフォールバックを用意することができます。たとえば、旅行用の地図アプリがあり、ユーザーが地図上で移動経路を追跡し、さまざまな場所にタグを付け、コメントを書き込み、ソーシャル メディアに送り、旅の写真や動画を追加できるとします。地理位置情報は必要な機能ですが、カメラのサポートはオプションにできます。デバイスにカメラが付いていない場合、ユーザーは別のデバイスで撮影した動画や写真をアップロードできます。優れたアプリはすべてのオプションに対応しています。

データのローミング

ユーザーが職場のデスクトップを終了して帰宅した後、自宅のタブレットを起動すると、どうなるでしょうか。ファイル、アプリの状態、アプリの設定も自宅に移動します。コンピューターやユーザー セッションが異なっていても、中断したところから作業を始められます。

詳しくは、アプリのデータのローミングに関するページと、「アプリ データの管理」をご覧ください。

関連トピック

ウィンドウ サイズと画面に合わせたスケーリングのガイドライン

縦長で幅の狭いレイアウトに対するウィンドウ サイズの変更のガイドライン

レイアウトの選択