Windows アプリ デザインの概要

サンプルの照明アプリ

Windows アプリのデザイン ガイダンスは、美しく洗練されたアプリをデザインおよび構築するのに役立つリソースです。

これは規範的な規則の一覧ではなく、進化する Fluent Design System、およびアプリ構築コミュニティのニーズに適応するように設計された生きたドキュメントです。

この記事では、あらゆる UWP アプリに含まれているユニバーサル デザイン機能の概要を説明します。これらの機能により、さまざまなデバイス間で美しくスケーリングされるユーザー インターフェイス (UI) を構築できます。

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

UWP アプリは、テレビからタブレットまたは PC まで、すべての Windows 10 デバイスで実行されます。 それでは、さまざまなデバイスや画面サイズで見栄えの良い UI をどのように設計しますか?

さまざまなデバイス上にある同じアプリ

UWP は、すべてのデバイスと画面サイズで読みやすく、操作しやすいように、UI 要素のサイズを自動的に調整するのに役立ちます。

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

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

スケーリング システムのしくみのため、UWP アプリをデザインするときには、実際の物理ピクセルではなく、有効ピクセルでデザインすることになります。 有効ピクセル (epx) は仮想的な測定単位で、画面の密度とは無関係にレイアウトのサイズと間隔を表すために使用されます。 (ガイドラインでは、epx、ep、および px を区別しないで使用しています。)

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

ヒント

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

4 の倍数

UWP アプリでは、UI 要素のサイズ、余白、および位置は、必ず 4 epx の倍数 にする必要があります。

UWP のスケールはデバイスによって異なり、100%、125%、150%、175%、200%、225%、250%、300%、350%、および 400% のスケール プラトーがあります。 基本単位は 4 になりますが、これは、これらのプラトーに整数としてスケーリングできるためです (例: 4 x 125% = 5、4 x 150% = 6)。 4 の倍数の使用によってすべての UI 要素のピクセル全体が整列し、UI 要素のエッジがすっきりとシャープになります (この要件はテキストには適用されません。テキストのサイズと位置に制限はありません)。

グリッド

レイアウト

UWP アプリは、すべてのデバイスに合わせて自動的に拡大縮小されるので、すべてのデバイスの UWP アプリの設計は同じ構造になっています。 UWP アプリの UI の最初から始めましょう。

Windows、フレーム、ページ

Windows 10 デバイスで UWP アプリが起動されると、フレームがあるウィンドウで起動し、ページ インスタンス間を移動できます。

フレームがあるウィンドウのスクリーンショット。

アプリの UI は、ページのコレクションとして考えることができます。 各ページに配置する項目や、ページ間の関係は、開発者が自由に決めることができます。

ページを整理する方法については、ナビゲーションの基本に関する記事を参照してください。

コレクション ページのスクリーンショット。

ページのレイアウト

それらのページの外観はどのようになるでしょうか。 ほとんどのページでは一貫性を保つために一般的な構造に従うため、ユーザーはアプリのページ間およびページ内を簡単に移動できます。 通常、ページには次の 3 つの種類の UI 要素が含まれています。

  • ナビゲーション要素は、表示するコンテンツをユーザーが選択できるようにします。
  • コマンド要素は、操作、保存、コンテンツの共有などの操作を開始します。
  • コンテンツ要素は、アプリのコンテンツを表示します。

一般的なレイアウト パターン

UWP アプリの一般的なパターンを実装する方法の詳細については、「ページのレイアウト」を参照してください。

Visual Studio で Windows Template Studio を使用してアプリのレイアウトを使い始めることもできます。

コントロール

UWP の設計プラットフォームには、すべての Windows デバイスで適切に動作することが保証されている一連のコモン コントロールが用意されており、Fluent Design System の原則に従っています。 これらのコントロールには、ボタンやテキスト要素などの単純なコントロールから、一連のデータとテンプレートからリストを生成する高度なコントロールまで、すべてのものが含まれます。

UWP コントロール

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

スタイル

一般的なコントロールは、システム テーマとアクセント カラーを自動的に反映し、すべての入力の種類に対応し、すべてのデバイスに合わせて拡大縮小されます。 このように、Fluent Design System を反映しているため、順応性が高く、親近感があり、優れた美しさを持っています。 一般的なコントロールでは、既定のスタイルでライト、モーション、深度を使用しているため、コントロールを使用することで、アプリに Fluent Design System を組み込んでいることになります。

一般的なコントロールは高度にカスタマイズでき、コントロールの前景色を変更することも、外観を完全にカスタマイズすることもできます。 コントロールの既定のスタイルを変更するには、軽量なスタイル設定を使用するか、XAML でカスタム コントロールを作成します。

アクセント カラーの gif

Shell

UWP アプリでは、Windows シェルのタイルと通知を使用して、幅広い Windows エクスペリエンスとの対話が実行されます。

タイルは、[スタート] メニューとアプリの起動時に表示され、アプリで何が行われるのかを簡単に示します。 タイルのパワーは、背後にあるコンテンツ、および提供するインテリジェンスと技術によるものです。

UWP アプリには 4 つのタイル サイズ (小、中、横長、大) があり、アプリのアイコンと ID でカスタマイズできます。 UWP アプリのタイルのデザインに関するガイダンスについては、「タイルとアイコン アセットのガイドライン」をご覧ください。

スタート メニューのタイル

入力

UWP アプリではスマート操作が使用されます。 クリックの発生元がマウスか、スタイラスか、指によるタップかを認識または定義しなくても、クリック操作に対応したデザインを行うことができます。 ただし、特定の入力モード向けにアプリを設計することもできます。

さまざまな入力モードを指定するアイコンのスクリーンショット。

デバイス

デバイス

同様に、UWP では、さまざまなデバイスに合わせてアプリを自動的にスケーリングしますが、特定のデバイス向けに UWP アプリを最適化することもできます。

使いやすさ

さまざまな能力を持つ人々を描画する、棒人間のイラストの短いビデオ。

最後に重要な点として、ユーザビリティの目的は、アプリのエクスペリエンスをすべてのユーザーに開かれたものにすることです。 すべての人が、本当に包括的なユーザー エクスペリエンスの恩恵を受けます。すべてのユーザーに対してアプリを使いやすくする方法については、「UWP アプリの操作性」をご覧ください。

国際的なユーザーを対象に設計している場合は、グローバリゼーションとローカライズを確認することをお勧めします。

視覚障碍、聴覚障碍、運動障碍を持つユーザーに関して、「アクセシビリティ機能」も検討してください。 アクセシビリティが最初から設計に組み込まれている場合は、アプリをアクセシビリティ対応にすることにほとんど時間と労力がかかりません。

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

基本的な設計機能がわかったので、UWP アプリの設計を開始しましょう。

設計プロセスで役立つさまざまなツールが用意されています。

  • 設計ツールキットのページをご覧ください。XD、Illustrator、Photoshop、Framer、Sketch の各ツールキット、および追加の設計ツールやフォントのダウンロードが提供されています。

  • コンピューターを設定して UWP アプリのコードを記述できるようにするには、「はじめに」 > 「準備」の記事をご覧ください。

  • UWP の UI を実装する方法については、エンド ツー エンドの「サンプル UWP アプリ」をご覧ください。

ビデオの概要

次へ: Fluent Design System

Fluent Design (Microsoft のデザイン システム) の背後にある原則や、UWP アプリに組み込むことができる多くの機能について確認する場合は、引き続き「Fluent Design System」をご覧ください。