次の方法で共有

Special Windows 10 issue 2015

Volume 30 Number 11

UI デザイン - ユニバーサル Windows アプリ向けレスポンシブ デザイン

Mike Jacobs | Windows 2015

ユニバーサル Windows アプリは、スマートフォンからタブレットや PC まで、あらゆる Windows デバイスで実行できます。ウェアラブル端末や家電製品などの小型デバイスで実行されるユニバーサル Windows アプリを作成することもできます。1 つのデバイス ファミリ (モバイル デバイス ファミリなど) のみにアプリの対象を限定することも、Windows を実行するすべてのデバイスで利用できるアプリにすることもできます。

このような幅広い種類のデバイスで適切に表示されるアプリをデザインするのは至難の業になり得ます。では、画面サイズや入力方式が大きく異る各種デバイスで、すばらしい UX を実現するアプリをデザインするにはどのように取り組めばよいでしょう。さいわい、ユニバーサル Windows プラットフォーム (UWP) には、まさにそのための組み込み機能やユニバーサル ビルディング ブロックが用意されています。今回は、UWP のデザイン機能について説明し、種類の異なるデバイスやフォーム ファクターに対応するレスポンシブ UI を作成する際の推奨事項を紹介します。

まず、ユニバーサル Windows アプリを作成する際に使用できる機能をいくつか説明します。これらの機能は UWP に組み込まれているため、特に設定などを行わずに利用できます。

そのような機能の 1 つがプラットフォームのスケーリングです。これは、使用している Windows デバイスの種類に応じて UI を最適化します。UWP では、コントロールやフォントなどの UI 要素の画面上での表示を正規化するアルゴリズムが使用されます。このスケーリング アルゴリズムは、表示距離と画面解像度 (1 インチあたりのピクセル数) を考慮して、体感的なサイズ (物理サイズではありません) を最適化します。このスケーリング アルゴリズムによって、10 フィート離れた Surface Hub での 24 ピクセルのフォントは、数インチ離れた 5 インチ サイズのスマートフォンの画面でも、同じく 24 ピクセルのフォントとして認識されます。このスケーリング システムのしくみにより、ユニバーサル Windows アプリをデザインするときは、実際の物理ピクセルではなく、有効ピクセルでデザインすることになります。

他の UWP 組み込み機能としては、スマート操作によるユニバーサル入力があります。特定の入力モードとデバイスを対象にアプリをデザインしてもかまいませんが、その必要はありません。ユニバーサル Windows アプリは、既定でスマート操作を利用するためです。つまり、クリックの発生元が実際のマウス クリックであるか、指によるタップであるかどうかを認識または定義しなくても、クリック操作をデザインすることができます。

ユニバーサル ビルディング ブロック

さらに UWP には、複数のデバイス ファミリに対応するアプリを簡単にデザインできる、便利なビルディング ブロックが用意されています。これらのビルディング ブロックには、ユニバーサル コントロール、ユニバーサル スタイル、ユニバーサル テンプレートなどがあります。

ユニバーサル コントロールは、スマートフォンから Surface Hub ディスプレイまで、すべての Windows デバイスで適切な動作が保証されます。オプション ボタンやテキスト ボックスなどの一般的なフォーム コントロールから、データ ストリームやテンプレートから項目の一覧を生成できるグリッド ビューやリスト ビューなどの高度なコントロールまで、あらゆるコントロールが実行されます。これらのコントロールは入力の違いを識別でき、各デバイス ファミリに適した、入力アフォーダンス、イベント状態、全体的機能の適切なセットと併せて配置されます。

また、UWP は、ターゲットの各フォーム ファクターでの表示を最適化する既定のスタイル セットを自動的にアプリに組み入れます。既定のスタイルはカスタマイズしたり、完全に置き換えたりして、独自の視覚的効果を実現できます。ユニバーサル スタイルには、次のようなさまざまな機能があります。

  • 一連のスタイル。任意の淡色や濃色のテーマをアプリに自動的に適用することや、ユーザーのアクセント カラーの設定を組み込むことができます。
  • すべてのデバイスでアプリのテキストを鮮明に表示する Segoe ベースの書体見本 (type ramp)。
  • 対話式操作向けの既定のアニメーション。
  • ハイ コントラスト モードの自動サポート。ユニバーサル スタイルはハイ コントラストを考慮してデザインされているため、アプリがデバイスでハイ コントラスト モードで実行されても、適切に表示されます。
  • その他の言語の自動サポート。既定のスタイルでは、Windows がサポートするすべての言語に対して、自動的に正しいフォントが選択されます。同じアプリで複数の言語を使っても、各言語は適切に表示されます。
  • 右から左への読み取りの組み込みサポート。

また、UWP には Adobe Illustrator 用テンプレートと Microsoft PowerPoint 用テンプレートが用意されています。UWP には、UWP アプリのデザインを始めるために必要なものがすべて含まれています。これらのテンプレートは、すべてのユニバーサル デバイスのサイズ クラスに対応したユニバーサル コントロールとユニバーサル レイアウトを備えています。テンプレートをダウンロードするには、Windows デベロッパー センターの「デザインに関するダウンロード」のセクション (https://dev.windows.com/ja-jp/design/assets) を参照してください。

デバイスの理解

できる限り優れた UX をアプリで実現するには、UWP がサポートする各種デバイス ファミリについて詳しい知識を身に付ける必要があります。特定のデバイス向けにデザインするときは、主に、そのデバイスでアプリはどのように表示されるか、ユーザーはそのアプリをどのように操作するか、そのデバイスでアプリはいつ、どこで、どのように使用されるかを考えます。

スマートフォン: すべてのコンピューティング デバイスの中で最も広く使用されています。スマートフォンは、サイズの小さい画面で、基本の入力に制限がありながら、多彩な機能を備えています。スマートフォンにはさまざまなサイズがあります。画面対角 4 ～ 6 インチが最も一般的で、6 インチを超えるスマートフォンは、ファブレットとも呼ばれます。ファブレットでのアプリのエクスペリエンスは、標準サイズのスマートフォンと同様ですが、画面が大きくなると、コンテンツ利用に大きく影響する変更を行うことができます。

スマートフォンは、主に縦向きに使用されます。その方が、スマートフォンを操作するときに片手で持ちやすいためです。横向きが適している作業には、写真やビデオの閲覧、読書、文章の作成などがあります。サイズや使用モードにかかわりなく、スマートフォンにはいくつか共通の特徴があります。基本的にスマートフォンは、その所有者である 1 人のユーザー専用になり、通常、ポケットやバッグなど、常に手の届く範囲に置かれる傾向があります。また、スマートフォンを使うのは、通常、短時間です。

ユーザーは、タッチや音声を使って、スマートフォンを操作します。ほとんどのスマートフォンには、カメラ、マイク、運動センサー、位置情報センサーが搭載されています。

タブレット: 非常に持ち運びが容易なタブレット コンピューターは、スマートフォンとノート PC のギャップを埋めます。タッチスクリーン、カメラ、マイク、加速度計が搭載されていることが多く、通常 7 インチ～ 約 13 インチの画面サイズを誇っています。スマートフォンと同様、タブレットは基本的にその所有者である １ 人のユーザー専用になります。自宅で使用されることが最も多く、スマートフォンよりも長時間使用されます。タブレットの操作には、タッチやスタイラスのほか、キーボードとマウスが使用されることもあります。

デスクトップ PC とノート PC: Windows PC には、幅広い種類のデバイスと画面サイズがあります。一般に、デスクトップ PC とノート PC は、スマートフォンやタブレットよりも多くの情報を表示できます。通常、画面サイズは 13 インチ以上です。デスクトップ PC とノート PC では、アプリが共有されることがありますが、一度に使用するのは 1 ユーザーのみで、通常は長時間利用します。アプリは、ウィンドウ形式のビューに表示でき、ウィンドウのサイズはユーザーが決めます。デスクトップ PC とノート PC では、基本的にマウスとキーボードを使ってアプリを操作しますが、多くのノート PC と一部のデスクトップ PC は、タッチ操作もサポートします。デスクトップ PC とノート PC には、他のデバイスほど多くのセンサーは組み込まれておらず、カメラとマイクしか搭載されていないのが大半です。

Surface Hub デバイス: Microsoft Surface Hub は、複数のユーザーが同時に使用することを想定した大画面のチーム コラボレーション向けデバイスです。Surface Hub は、55 インチ画面と 84 インチ画面で提供されています。Surface Hub の場合、アプリは会議などで、短時間に複数のユーザーが使用します。表示モードは 4 種類で、フィル (利用可能なステージ エリアを使う固定表示)、全画面 (標準の全画面表示)、スナップ (ステージの右端または左端を使う可変表示)、バックグラウンド (アプリの実行中は非表示になり、タスク スイッチャーで利用可能) のいずれかの状態で表示されます。Surface Hub は、タッチ、ペン、音声、キーボードによる操作をサポートし、カメラとマイクを内蔵しています。

Windows IoT (モノのインターネット) デバイス: この新しいタイプのデバイスは、物理的なモノに内蔵された小型エレクトロニクス、センサー、接続機能が中心になります。IoT デバイスは、通常、ネットワークまたはインターネット経由で接続され、検知した実データを報告し、場合によってはそのデータを基にアクションを起こします。IoT デバイスは、画面がないもの ("ヘッドレス "デバイス) や、3.5 インチ以下の小型画面に接続されるもの ("ヘッド付き" デバイス) があります。入力とデバイスの機能は、デバイスによって大きく異なります。

特定のデバイス向けデザイン

どのデバイスでも UI が読みやすく、適切に機能するよう、Windows がバックグラウンドで処理するため、特定のデバイスや画面サイズに合わせてアプリをカスタマイズする必要はありません。ただし、特定のデバイスや画面サイズに合わせてカスタマイズしたい場合もあります。たとえば、アプリをデスクトップ PC またはノート PC で実行するときは、スマートフォンなど小型のデバイスの画面では煩雑になる追加のコンテンツを表示することが考えられます。

すぐ簡単に実行できるものもあれば、少し手間のかかるものもありますが、特定の画面サイズに合わせてアプリの表示を向上する方法はたくさんあります。

まず、有効ピクセルについてもう少し詳しく説明します。前述のとおり、ユニバーサル Windows アプリをデザインするときには、実際の物理ピクセルではなく、有効ピクセルでデザインすることになります。有効ピクセルでは、UI 要素の実際に認識されるサイズのみを考えることができ、ピクセル密度やデバイスとユーザーとの距離を気にする必要がありません。たとえば、1 x 1 インチの要素をデザインするとき、その要素はどのデバイスでもほぼ 1 インチで表示されます。この UI 要素の物理ピクセル数は、高解像度の超大型画面では 200 x 200 になり、スマートフォンなどの小型デバイスでは 150 x 150 になる可能性があります。

では、これはアプリのデザインにどのように影響するでしょう。デザイン時には、ピクセル密度や実際の画面解像度を無視し、任意のサイズ クラスの有効解像度 (有効ピクセルでの解像度) に合わせてデザインすることになります。サイズ クラスの解像度については、後ほど詳しく説明します。また、テクニックとして、画像編集プログラムで画面のモックアップを作成するときは、必ず PPI を 72 に設定し、対象のサイズ クラスの有効解像度に合わせて画像サイズを設定することをお勧めします。

表示を崩さずにアプリがスケーリングされるようにするには、4 のルールに従うことが重要です。つまり、4 x 4 ピクセルのグリッドをデザインの基準にし、UI 要素の余白、サイズ、位置 (テキスト位置も含む) が 4 の倍数の有効ピクセル数になるようにします。図 1 に 4 x 4 ピクセルのグリッドにマップしたデザイン要素を示します。このようなデザイン要素は、常に境界が鮮明にくっきりと表示されます。対照的に、4 x 4 グリッドにマップしていないデザイン要素は、デバイスによっては境界がぼやけ、不鮮明になります。

テキストと画像を鮮明に表示するには 4 x 4 ピクセルのグリッドを基準にデザイン
図 1 テキストと画像を鮮明に表示するには 4 x 4 ピクセルのグリッドを基準にデザイン

これらのリソースや機能にもかかわらず、特定のデバイス ファミリ向けにアプリの UI のカスタマイズが必要になることもたしかにあります。たとえば、領域をできるだけ有効活用し、ユーザーのナビゲーションの負担を軽減する必要があります。スマートフォンなど、画面の小さなデバイスで適切に表示されるようにデザインしたアプリは、それよりもかなり画面が大きい PC でも使用できますが、無駄な余白が生じると思われます。特定のサイズよりも画面が大きい場合に、表示するコンテンツを増やすようにアプリをカスタマイズできます。ショッピング アプリを例にすると、スマートフォンでは表示する商品カテゴリは 1 つだけで、デスクトップ PC やノート PC では同時に複数のカテゴリや製品を表示できます。画面に表示するコンテンツを増やせば、ユーザーが実行しなければならないナビゲーションが削減されます。

その他に思いつくシナリオとしては、たとえば、デバイスの機能をフル活用する必要がある場合です。たとえば、スマートフォンには通常位置情報センサーとカメラが搭載されていますが、PC にはどちらも搭載されていない可能性があります。アプリによって、利用可能なデバイス機能を検出し、そのデバイス機能を使用するアプリの機能を有効にすることができます。

また、入力に合わせて最適化することもあります。ユニバーサル コントロール ライブラリは、どの種類の入力 (タッチ、ペン、キーボードとマウス) にも対応しますが、UI 要素を並べ替えて、特定の種類の入力に合わせて最適化することもできます。たとえば、ナビゲーション要素を画面最下部に配置すると、スマートフォン ユーザーにはアクセスしやすくなりますが、ほとんどの PC ユーザーは、ナビゲーション要素は画面上部にあるものと考えます。

レスポンシブ デザイン手法

特定の画面幅に合わせてアプリの UI を最適化すると、レスポンシブ デザインが作成されます。アプリの UI のカスタマイズに使用でき、各種デバイスの画面領域と利用可能な機能を最大限有効に活用できる便利なデザイン手法が複数あります。検討すべき手法としては、位置変更、サイズ変更、リフロー、表示、置換、再設計の 6 つがあります。

UI 要素の位置変更は、各デバイスの特徴を最大限活かすことができる方法の 1 つです。図 2 に示すように、スマートフォンやファブレットの縦向きの画面では、1 度に 1 フレームしか完全に表示できないため、スクロール UI が必要です。同じアプリを、2 フレームを完全に画面に表示できるタブレットや他のデバイスで表示すると、縦向きでも横向きでも、フレーム B の位置を移動して専用の領域に表示できます。配置にグリッドを使用している場合は、UI 要素の位置変更にも同じグリッドを使用できます。

大きい画面サイズを活かすためのフレームの位置変更
図 2 大きい画面サイズを活かすためのフレームの位置変更

余白と UI 要素のサイズを変更して、大小サイズの異なる画面を利用できるように、フレームを最適化することもできます。たとえば、コンテンツ フレームを拡大してテキストの表示領域を広げ、スクロールの量を減らすことで、大画面での読み取りをより快適なものにすることができます。同様に、フレーム サイズを変更することで、デバイスや向きに応じて UI 要素をリフローすることもできます。たとえば、大画面に移行する場合、よりサイズの大きなコンテナを使い、列を追加して、スマートフォンとは違う方法でリスト アイテムを生成すると、よい効果が得られる場合があります。

UI 要素の表示は、特定のデバイスでサポートされている機能 (スマートフォンのカメラなど) を提示できる強力な手法で、画面サイズや向きの違いを活かすカスタマイズも可能にします。UI の表示または非表示の一般的な例としては、メディア プレーヤーのコントロールが挙げられます。ボタンセットのサイズが小型デバイスでは小さくなり、大型のデバイスでは大きくなります。たとえば、メディア プレーヤーは、PC ではスマートフォンと比べて格段に多くの画面上の機能を扱うことができます。

表示と非表示を切り替える手法としては、状況に応じてメタデータの表示量を調整することも挙げられます。画面サイズがごく小さいデバイスでは、最小限のメタデータを表示し、ノート PC やデスクトップ PC では、大量のメタデータを表示します。メタデータの表示と非表示を切り替える方法には、次のような例があります。

  • メール アプリ: ユーザーのアバターの表示
  • ミュージック アプリ: アルバムやアーティストについての詳細情報の表示
  • ビデオ アプリ: 出演者やスタッフの詳細など、映画や番組の詳細の表示
  • アプリ全般: 列を分割して詳細を表示
  • アプリ全般: 縦に並べられた要素を横方向に配置。大型のデバイスでは、縦並びのリスト アイテムを、リスト アイテムの行とメタデータの列を表示するように変更できます。

残り 2 つのレスポンシブ UI 手法は、置換と再設計です。置換では、特定のデバイス サイズ クラスまたは向きに合わせて UI を切り替えることができます。たとえば、小型デバイスでは一連の縦並びのボタンを表示し、より大きな画面では、それらのコントロールをタブに置き換え、画面上部に横並びに表示できます。

アプリのアーキテクチャの折りたたみや分岐を行い、特定のデバイス向けにカスタマイズすることもできます。図 3 では、左のデバイスから右のデバイスに移るにつれて、ページが組み合わせて表示される例を示しています。これはスマート ホーム アプリの画像で、サイズの大きな画面では、スマート ホーム機能のコントロールと設定ウィンドウを 1 画面にまとめています。サイズの小さいデバイスでは、コントロールと設定が別々の画面で表示されます。

異なる画面サイズに合わせてアプリの表示を再設計
図 3 異なる画面サイズに合わせてアプリの表示を再設計

デザイン ブレークポイント

Windows 10 エコシステムで提供される対象デバイスの種類や画面サイズはあまりに豊富で、個別に UI の最適化を気にかけることはできません。そこで、有効ピクセルで 320、720、1024 ピクセルの 3 種類の幅 (ブレークポイントとも呼びます) を基準にデザインすることをお勧めします。図 4 にブレークポイントの説明を示します。

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

サイズ クラス 小 中 大
有効ピクセルでの幅 320 720 1024
代表的な画面サイズ (対角) 4 ～ 6 インチ 6 インチ超 ～ 12 インチ 13 インチ以上
代表的なデバイス スマートフォン タブレット、画面の大きなスマートフォン デスクトップ PC、ノート PC、Surface Hub

特定のブレークポイントを対象にデザインする場合は、アプリが使用できる画面領域 (アプリ ウィンドウ) の量を考慮します。アプリを全画面表示で実行する場合、アプリ ウィンドウは画面と同じ大きさになりますが、それ以外の場合は画面よりも小さくなります。

小さい UI をデザインするときは、1 ピクセルも無駄にできないため、基本用途に必須ではない機能は、メニューやツールバーに配置して非表示にすることができます。1 度に 1 列または 1 領域のみを表示する、検索ボックスの代わりに検索を表すアイコンを使用する、といった方法も利用できます。

中サイズの UI では、増えた領域を利用して検索ボックス (ある場合) を表示したり、2 つの列や領域を使用して基本コンテンツを配置できます。大サイズの UI では、さらに多くの機能やコンテンツを表示でき、コンテンツへのアクセスや操作の実行に必要なクリック数や UI 操作を削減できます。

有効ピクセルで 320 の幅の場合、アプリはスマートフォンで実行されることも、大画面の PC 上の小さなウィンドウで実行されることもある可能性に注意し、デバイスの基本入力方法、つまり、マウスかタッチかを考慮します。タッチ デバイスでは、ナビゲーション要素やコマンド要素を画面の最下部に配置すると、親指で簡単にアクセスできるので、片手でのデバイスのナビゲーションや操作が簡単になります。しかし、マウスを使う場合は、ナビゲーション要素は画面上部に表示されることが期待されます。アプリで Windows.UI.ViewManagement.UIViewSettings.UserInteractionMode プロパティを使うと、基本入力デバイスを検出し、それに従って UI 要素を調整できます。

UWP により、画面の小さいウェアラブル端末から Surface Hub まで、さまざまなデバイスにアプリを提供できるようになります。レスポンシブ デザイン手法を取り入れ、UWP 組み込みの機能やビルディング ブロック (コントロールやスタイル) を活用することで、あらゆるサイズや形状のデバイス向けに魅力的な UI を作成できます。

Mike Jacobs は、マイクロソフトのシニア コンテンツ開発者です。長年にわたり、Direct2D から Windows Presentation Foundation や Silverlight まで、マイクロソフト テクノロジのグラフィックやプレゼンテーション関連のドキュメントを作成してきました。

この記事のレビューに協力してくれたマイクロソフト技術スタッフの Jeff Arnold、Eugene Gavrilov、Ross Heeter、Chigusa Sansen、Joe Tobens と Mike Bottemiller (Murphy & Associates) に心より感謝いたします。
Jeff Arnold は Windows のシニア デザイン リードです。彼のチームは、開発者プラットフォーム チームと緊密に連携して、発展する UWP の物語の中で、独創的かつ現実的なソリューションを生み出しています。
Mike Bottemiller は、マイクロソフト関連の執筆をしている Murphy & Associates のシニア コンサルタントです。ソフトウェア テスト、コンテンツ パブリッシング、プロジェクト管理のキャリアを経て、デザインとユーザー エクスペリエンス関連のライターに落ち着きました。Visual Studio、Xbox、UWP アプリのデザイン ガイドや記事を執筆しています。
Eugene Gavrilov
Ross Heeter はマイクロソフトのシニア デザイン リードです。デバイスやプラットフォーム、入力にまたがる分野が専門で、コンソール ダッシュボード、SmartGlass コンパニオン、インディーズ ゲーム開発者クラブ エクスペリエンス関連の Xbox のデザインを手掛けてきました。現在は、Windows およびデバイス部門でアプリ エクスペリエンスのデザインに携わっています。
Chigusa Sansen は、マイクロソフトのシニア プログラム マネージャーで、Windows CE から Windows Mobile、PC、スマートフォン、タブレット、Xbox までさまざまな種類のデバイスの UI エクスペリエンスに携わってきました。Windows Phone や Windows 10 (UWP) に至る主な UX の発展に、UI フレームワークの面から貢献してきました。
Joe Tobens は、マイクロソフトのシニア デザイナーです。Windows 10 用の各種デバイスやアプリに対応するレスポンシブ UI のデザインと執筆を行いました。現在は、Windows およびデバイス部門で、入力関連を担当しています。