UWP アプリ設計の概要

ユニバーサル Windows プラットフォーム (UWP) アプリは、電話からタブレット、PC まで、任意の Windows ベース デバイスで実行できます。

さまざまなデバイスでアプリが適切に表示されるようにデザインすることが重要な課題となります。 ユニバーサル Windows プラットフォーム (UWP) には、一連の組み込み機能とユニバーサルな構成要素が用意されており、さまざまなデバイス、画面、入力方式で十分に機能する UX を作成できます。 この記事では、UWP アプリの UI の機能と利点について説明し、UWP アプリを初めて作成する場合のいくつかの大まかな設計ガイダンスを紹介します。

ビデオの概要

UWP の機能

最初に、UWP アプリの作成時に利用できる一部の機能を見てみましょう。

有効ピクセルとスケーリング

UWP アプリは、すべてのデバイスで読みやすく、操作しやすいように、コントロール、フォント、およびその他の UI 要素のサイズを自動的に調整します。

デバイスでアプリを実行するとき、システムでは、UI 要素を画面に表示する方法を正規化するアルゴリズムを使います。 このスケーリング アルゴリズムでは、視聴距離と画面の密度 (ピクセル/インチ) を考慮して、体感的なサイズを最適化します (物理的なサイズではありません)。 スケーリング アルゴリズムによって、10 フィート離れた Surface Hub における 24 ピクセルのフォントが、数インチ離れた 5 インチ サイズの電話における 24 ピクセルのフォントと同じようにユーザーに読みやすい状態で表示されます。

さまざまなデバイスの視聴距離

スケーリング システムのしくみのため、UWP アプリをデザインするときには、実際の物理ピクセルではなく、有効ピクセルでデザインすることになります。 それでは、これは、アプリの設計方法にどのような影響を及ぼすでしょうか。

  • 設計時には、ピクセル密度と実際の画面解像度を無視できます。 その代わり、サイズ クラスの有効な解像度 (有効ピクセル単位の解像度) が向上するように設計します (詳しくは、「画面のサイズとブレークポイント」をご覧ください)。

  • システムによる UI のスケーリングは、4 の倍数単位で行われます。 外観が鮮明になるように、4x4 のピクセル グリッドにデザインをスナップします。余白、UI 要素のサイズと位置を、4 有効ピクセルの倍数にします。 この要件は、テキストには必要ありません。テキストのサイズと位置に制限はありません。

次の図は、4x4 のピクセル グリッドにマップされるデザイン要素を示しています。 デザイン要素には常に、はっきりした鮮明な縁があります。

4x4 のピクセル グリッドへのスナップ

ヒント

イメージ編集プログラムで画面のモックアップを作成するときは、DPI を 72 に設定し、画像サイズを、対象のサイズ クラスで有効な解像度に設定します サイズ クラスと有効な解像度の一覧については、「画面のサイズとブレークポイント」をご覧ください。

ユニバーサル入力とスマート操作

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

ユニバーサル コントロールとスタイル

UWP には、複数のデバイス ファミリに対応したアプリを簡単にデザインできる、便利な構成要素が用意されています。

  • ユニバーサル コントロール

    UWP には、すべての Windows デバイスで適切に動作することが保証されている一連のユニバーサル コントロールが用意されています。 この一連のユニバーサル コントロールには、オプション ボタンやテキスト ボックスなどの一般的なフォーム コントロールから、データ ストリームやテンプレートから項目の一覧を生成できるグリッド ビューやリスト ビューなどの高度なコントロールまで、すべてのコントロールが含まれています。 これらのコントロールは入力に対応しており、各デバイス ファミリに適した、一連の入力アフォーダンス、イベント状態、および全体的な機能と共に展開されます。

    これらのコントロールとこれらのコントロールに基づいて作成できるパターンの全一覧については、「コントロールとパターン」セクションをご覧ください。

  • ユニバーサル スタイル

    UWP アプリは、次の機能を実現できる既定のスタイル セットを自動的に取得します。

    • 一連のスタイルによって、アプリに淡色や濃色のテーマを自動的に適用したり (ユーザーが選ぶことができます)、ユーザーのアクセント カラーの設定を組み込んだりすることができます。

      淡色テーマと濃色テーマ

    • すべてのデバイスでアプリのテキストを鮮明に表示する Segoe ベースの書体見本 (type ramp)。

    • 対話式操作のための既定のアニメーション。
    • ハイ コントラスト モードを自動的にサポート。 適用するスタイルはハイ コントラストとなるようにデザインされているため、アプリがハイ コントラスト モードのデバイスで実行されているときに正確に表示されます。
    • その他の言語を自動的にサポート。 既定のスタイルでは、Windows がサポートするすべての言語に対して、自動的に正しいフォントが適用されます。 1 つのアプリで複数の言語を使って、正確に表示することもできます。
    • RTL の読み取り順序に対する組み込みサポート。

    これら既定のスタイルをカスタマイズして、アプリを個性的なものにしたり、既定のスタイルをユーザー固有のスタイルと完全に置き換えて、独自の視覚的効果を実現したりすることができます。 たとえば、独自の視覚スタイルを使った天気予報アプリのデザインを次に示します。

    独自の視覚スタイルを使った天気予報アプリ

UWP と Fluent Design System

Fluent Design System では、ライト、深度、モーション、マテリアル、およびスケールが組み込まれた、モダンでクリーンな UI を作成できます。 Fluent Design は、さまざまな Windows 10 デバイスとアプリにわたって適用され、美しく、魅力的で直感的なエクスペリエンスを提供します。

アプリに Fluent Design を組み込む方法 組み込みを簡単にするための、新しいコントロールと機能が、継続的に追加されています。 UWP 向けの現在の Fluent Design の機能の一覧を次に示します。

  • アクリルは、半透明サーフェスを作成できる、ブラシの種類です。
  • 視差効果を使用すると、3 次元の視点、深度、および動きを追加できます。たとえばリストなどのスクロールするコンテンツに適用できます。
  • 表示は光を使用して、対話型の UI 要素を照らすホバー効果を作成します。
  • 接続型アニメーションはシーンをスムーズに切り替えます。コンテキストを維持し、継続性を実現することで、使いやすさを向上させます。

さらに設計ガイドライン (現在お読みの、このドキュメントです) が Fluent Design の原則に基づくように更新されました。

一般的な UWP アプリの構造

ここまで、UWP アプリの構成要素について説明しました。次に、それらを組み合わせて UI を作成する方法を見てみましょう。

最新のユーザー インターフェイスは複雑であり、テキスト、形状、色、アニメーションで構成されますが、それらは最終的には使っているデバイスの画面の個々のピクセルで構成されます。 ユーザー インターフェイスの設計を開始すると、選択肢が多すぎて圧倒されることがあります。

シンプルに考えることができるように、アプリの構造をデザインの観点から定義してみましょう。 アプリが画面とページで構成されるとしましょう。 各ページには、3 種類の UI 要素 (ナビゲーション、コマンド実行、コンテンツ) で構成されるユーザー インターフェイスがあります。

Navigation, command, and content areas of an address book app

ナビゲーション要素

ナビゲーション要素は、表示するコンテンツをユーザーが選択できるようにします。 ナビゲーション要素の例には、タブとピボットハイパーリンクナビゲーション ウィンドウなどがあります。

ナビゲーション要素の詳細については、「ナビゲーション デザインの基本」をご覧ください。

コマンド要素

コマンド要素は、操作、保存、コンテンツの共有などの操作を開始します。 コマンド要素の例には、ボタンコマンド バーがあります。 コマンド要素には、実際には画面に表示されないキーボード ショートカットも含めることができます。

コマンド要素の詳細については、「コマンド設計の基本」をご覧ください。

コンテンツ要素

コンテンツ要素は、アプリのコンテンツを表示します。 ペイント アプリでは、コンテンツは描画になり、ニュース アプリでは、コンテンツはニュース記事になります。

コンテンツ要素の詳細については、「コンテンツ デザインの基本」をご覧ください。

少なくとも、アプリは、スプラッシュ画面と、ユーザー インターフェイスを定義するホーム ページで構成されます。 一般的なアプリは複数のページと画面で構成され、ナビゲーション要素、コマンド要素、コンテンツ要素はページごとに変化します。

アプリに適切な UI 要素を決めるときには、アプリが実行されるデバイスや画面サイズも考慮に入れるかもしれません。

特定のデバイスと画面サイズに合わせたアプリの調整

UWP アプリでは、すべての Windows デバイスで、デザイン要素が見やすく操作しやすい効果的なピクセルが使用されます。 このため、特定のデバイス ファミリー向けにアプリの UI をカスタマイズする理由がありません。


先に進む前に知っておくべきですが、アプリが実行されている特定のデバイスをアプリが検出する手段は、Windows では提供されていません。 アプリが実行されているデバイス ファミリー (モバイル、デスクトップなど)、効果的な解像度、およびアプリが利用できる画面領域の量 (アプリのウィンドウのサイズ) は伝えることができます。

  • 最も効果的に領域を使用し、移動する必要を減らすには

    携帯電話など、画面の小さいデバイスで適切に表示するアプリを設計した場合、そのアプリは、はるかに大きいディスプレイを備えた PC でも使用可能ですが、おそらく、無駄な領域があります。 画面が特定のサイズを超える場合は、より多くのコンテンツを表示するように、アプリをカスタマイズできます。 たとえば、あるショッピング アプリでは、携帯電話には、一度に 1 つのカテゴリの商品が表示されますが、PC またはノート PC には、複数のカテゴリと製品が同時に表示されます。

    より多くのコンテンツを画面に表示すると、ユーザーが実行する必要があるナビゲーションの量が減少します。

  • デバイスの機能を活用するには

    一部のデバイスでは、特定のデバイス機能がある可能性が高くなります。 たとえば、電話では、位置センサーとカメラが付属している可能性が高く、PC では、どちらも付属していない可能性が高くなります。 アプリは、利用できる機能を検出し、それを使用する機能を有効にすることができます。

  • 入力用に最適化するには

    ユニバーサル コントロール ライブラリは、すべての入力タイプ (タッチ、ペン、キーボード、マウス) と連携できますが、その場合も、UI 要素を再配置して、特定の入力タイプを最適化することができます。 たとえば、画面の下部にナビゲーション要素を配置すると、携帯電話のユーザーにとってはアクセスしやすくなりますが、ほとんどの PC ユーザーは、ナビゲーション要素は画面の上部に表示されると想定しています。

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

アプリの UI を特定の画面の幅に合わせて最適化することは、レスポンシブ デザインの作成と呼ばれます。 ここでは、アプリの UI のカスタマイズに使用できる 6 種類のレスポンシブ デザイン手法を紹介します。

位置の変更

アプリの UI 要素の場所と位置を変更して、各デバイスを最大限に活用することができます。 この例では、電話やファブレットのビューが縦向きであり、完全なフレームが一度に 1 つだけ表示されるため、スクロール UI が必要です。 縦方向か横方向かを問わず、2 つの画面フレームを表示できるデバイスでアプリが使用される場合、フレーム B は、専用の領域を占有できます。 グリッドを使用して配置する場合は、UI 要素が再配置されるときに同じグリッドに従うことができます。

位置の変更

写真アプリ向けのこの設計の例では、写真アプリのコンテンツは大きな画面に再配置されます。

大きな画面にコンテンツに再配置するアプリの設計

サイズ変更

余白と UI 要素のサイズを調整して、フレーム サイズを最適化できます。 次の例が示すように、これにより、コンテンツ フレームを拡大するだけで、より大きな画面で画面を見やすくすることができます。

デザイン要素のサイズ変更

再配置

デバイスと向きに応じて UI 要素のフローを変更すると、アプリでコンテンツの表示を最適化できます。 たとえば、より大きな画面を対象にする場合は、より大きなコンテナーに切り替え、列を追加し、別の方法でリスト項目を生成することが効果的である可能性があります。

次の例は、携帯電話またはファブレットの縦にスクロールするコンテンツの 1 列をより大きな画面に再配置して、2 列のテキストを表示する方法を示しています。

デザイン要素の再配置

[表示]/[非表示]

UI 要素は、画面領域に基づいて表示したり、非表示にしたり、デバイスが追加機能、特定の状況、または推奨される画面の向きをサポートする場合にあわせて、表示したり、非表示にしたりできます。

タブを示す次の例では、カメラ アイコンがある中央のタブが携帯電話またはファブレットのアプリに固有であり、大型のデバイスには適用されません。そのため、右側のデバイスでは表示されています。 UI の表示/非表示のもう 1 つの一般的な例は、メディア プレーヤーのコントロールです。この場合、ボタン セットは、小型のデバイスでは縮小され、使用できる画面領域が大きい大型デバイスでは展開されます。 たとえば、PC では、メディア プレーヤーが処理できる画面上の機能は、携帯電話での機能よりもはるかに多くなっています。

デザイン要素の非表示

表示/非表示の手法の一部には、より多くのメタデータを表示するタイミングの選択が含まれます。 携帯電話やファブレットなど、領域が貴重である場合は、表示するメタデータの量を最小限にすることをお勧めします。 ノート PC やデスクトップ PC では、かなりの量のメタデータを表示できます。 メタデータの表示または非表示を処理する方法の例は、次のとおりです。

  • メール アプリでは、ユーザーのアバターを表示できます。
  • 音楽アプリでは、アルバムやアーティストの詳細情報を表示できます。
  • ビデオ アプリでは、キャストとスタッフの詳細表示など、映画やショーの詳細情報を表示できます。
  • どのアプリでも、列を分割して、さらに詳細な情報を表示できます。
  • どのアプリでも、縦に並べられたものを横に並べて配置することができます。 携帯電話やファブレットから大型デバイスに移行する場合、縦に並べられたリスト項目は、リスト項目の行とメタデータの列の表示に変更できます。

置換

この手法では、特定のデバイスのサイズ クラスまたは向きにユーザー インターフェイスを切り替えることができます。 次の例では、ナビゲーション ウィンドウとそのコンパクトで一時的な UI は小型デバイスに適していますが、大型デバイスには、タブの方が適しています。

デザイン要素の置き換え

再構築

アプリのアーキテクチャを折りたたんだり、分岐させたりして、対象となる特定のデバイスをより明確にすることができます。 次の例では、左側のデバイスから右側のデバイスに移動すると、ページが結合されます。

ユーザー インターフェイスの再設計の例

ここでは、スマート ホーム アプリの設計に適用される、この手法の例を示します。

レスポンシブ デザインの再構築手法を使用する設計の例

ツールと設計ツールキット

UWP アプリを設計するのに役立つさまざまなツールが提供されています。 設計ツールキットのページをご覧ください。XD、Illustrator、Photoshop、Framer、Sketch の各ツールキット、および追加の設計ツールやフォントのダウンロードが提供されています。

コンピューターを設定して実際に UWP アプリのコードを記述できるようにするには、作業の開始と準備の記事をご覧ください。