UWP アプリ設計の概要Introduction to UWP app design

サンプルの照明アプリ

ユニバーサル Windows プラットフォーム (UWP) の設計ガイダンスは、美しく洗練されたアプリを設計および構築するのに役立つリソースです。The Universal Windows Platform (UWP) design guidance is a resource to help you design and build beautiful, polished apps.

これは規範的な規則の一覧ではなく、進化する Fluent Design System、およびアプリ構築コミュニティのニーズに適応するように設計された生きたドキュメントです。It's not a list of prescriptive rules - it's a living document, designed to adapt to our evolving Fluent Design System as well as the needs of our app-building community.

この記事では、あらゆる UWP アプリに含まれているユニバーサル デザイン機能の概要を説明します。これらの機能により、さまざまなデバイス間で美しくスケーリングされるユーザー インターフェイス (UI) を構築できます。This introduction provides an overview of the universal design features that are included in every UWP app, helping you build user interfaces (UI) that scale beautifully across a range of devices.

有効ピクセルとスケーリングEffective pixels and scaling

UWP アプリは、テレビからタブレットまたは PC まで、すべての Windows 10 デバイスで実行されます。UWP apps run on all Windows 10 devices, from your TV to your tablet or PC. それでは、さまざまなデバイスや画面サイズで見栄えの良い UI をどのように設計しますか?So how do you design a UI that looks good on a wide variety of devices and screen sizes?

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

UWP は、すべてのデバイスと画面サイズで読みやすく、操作しやすいように、UI 要素のサイズを自動的に調整するのに役立ちます。UWP helps by automatically adjusting UI elements so that they're legible and easy to interact with on all devices and screen sizes.

デバイスでアプリを実行するとき、システムでは、UI 要素を画面に表示する方法を正規化するアルゴリズムを使います。When your app runs on a device, the system uses an algorithm to normalize the way UI elements display on the screen. このスケーリング アルゴリズムでは、視聴距離と画面の密度 (ピクセル/インチ) を考慮して、体感的なサイズを最適化します (物理的なサイズではありません)。This scaling algorithm takes into account viewing distance and screen density (pixels per inch) to optimize for perceived size (rather than physical size). スケーリング アルゴリズムによって、10 フィート離れた Surface Hub における 24 ピクセルのフォントが、数インチ離れた 5 インチ サイズの電話における 24 ピクセルのフォントと同じようにユーザーに読みやすい状態で表示されます。The scaling algorithm ensures that a 24 px font on Surface Hub 10 feet away is just as legible to the user as a 24 px font on 5" phone that's a few inches away.

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

スケーリング システムのしくみのため、UWP アプリをデザインするときには、実際の物理ピクセルではなく、有効ピクセルでデザインすることになります。Because of how the scaling system works, when you design your UWP app, you're designing in effective pixels, not actual physical pixels. 有効ピクセル (epx) は仮想的な測定単位で、画面の密度とは無関係にレイアウトのサイズと間隔を表すために使用されます。Effective pixels (epx) are a virtual unit of measurement, and they're used to express layout dimensions and spacing, independent of screen density. (ガイドラインでは、epx、ep、および px を区別しないで使用しています。)(In our guidelines, epx, ep, and px are used interchangeably.)

設計時には、ピクセル密度と実際の画面解像度を無視できます。You can ignore the pixel density and the actual screen resolution when designing. その代わり、サイズ クラスの有効な解像度 (有効ピクセル単位の解像度) が向上するように設計します (詳しくは、「画面のサイズとブレークポイント」をご覧ください)。Instead, design for the effective resolution (the resolution in effective pixels) for a size class (for details, see the Screen sizes and breakpoints article).

ヒント

イメージ編集プログラムで画面のモックアップを作成するときは、DPI を 72 に設定し、画像サイズを、対象のサイズ クラスで有効な解像度に設定しますWhen creating screen mockups in image editing programs, set the DPI to 72 and set the image dimensions to the effective resolution for the size class you're targeting. サイズ クラスと有効な解像度の一覧については、「画面のサイズとブレークポイント」をご覧ください。For a list of size classes and effective resolutions, see the Screen sizes and breakpoints article.

4 の倍数Multiples of four

UWP アプリでは、UI 要素のサイズ、余白、および位置は、必ず 4 epx の倍数にする必要があります。The sizes, margins, and positions of UI elements should always be in multiples of 4 epx in your UWP apps.

UWP のスケールはデバイスによって異なり、100%、125%、150%、175%、200%、225%、250%、300%、350%、および 400% のスケール プラトーがあります。UWP scales across a range of devices with scaling plateaus of 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, and 400%. 基本単位は 4 になりますが、これは、整数以外の数値によってスケーリングできる唯一の整数であるためです (例: 4*1.5 = 6)。The base unit is 4 because it's the only integer that can be scaled by non-whole numbers (e.g. 4*1.5 = 6). 4 の倍数の使用によってすべての UI 要素のピクセル全体が整列し、UI 要素のエッジがすっきりとシャープになりますUsing multiples of four aligns all UI elements with whole pixels and ensures UI elements have crisp, sharp edges. (この要件はテキストには適用されません。テキストのサイズと位置に制限はありません)。(Note that text doesn't have this requirement; text can have any size and position.)

グリッド

レイアウトLayout

UWP アプリは、すべてのデバイスに合わせて自動的に拡大縮小されるので、すべてのデバイスの UWP アプリの設計は同じ構造になっています。Since UWP apps automatically scale to all devices, designing a UWP app for any device follows the same structure. UWP アプリの UI の最初から始めましょう。Let's start from the very beginning of your UWP app's UI.

Windows、フレーム、ページWindows, Frames, and Pages

Windows 10 デバイスで UWP アプリが起動されると、フレームがあるウィンドウで起動し、ページ インスタンス間を移動できます。When a UWP app is launched on any Windows 10 device, it launches in a Window with a Frame, which can navigate between Page instances.

Frame

アプリの UI は、ページのコレクションとして考えることができます。You can think of your app's UI as a collection of pages. 各ページに配置する項目や、ページ間の関係は、開発者が自由に決めることができます。It's up to you to decide what should go on each page, and the relationships between pages.

ページを整理する方法については、ナビゲーションの基本に関する記事を参照してください。To learn how you can organize your pages, see Navigation basics.

Frame

ページのレイアウトPage layout

それらのページの外観はどのようになるでしょうか。What should those pages look like? ほとんどのページでは一貫性を保つために一般的な構造に従うため、ユーザーはアプリのページ間およびページ内を簡単に移動できます。Well, most pages follow a common structure to provide consistency, so users can easily navigate between and within pages of your app. 通常、ページには次の 3 つの種類の UI 要素が含まれています。Pages typically contain three types of UI elements:

  • ナビゲーション要素は、表示するコンテンツをユーザーが選択できるようにします。Navigation elements help users choose the content they want to display.
  • コマンド要素は、操作、保存、コンテンツの共有などの操作を開始します。Command elements initiate actions, such as manipulating, saving, or sharing content.
  • コンテンツ要素は、アプリのコンテンツを表示します。Content elements display the app's content.

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

UWP アプリの一般的なパターンを実装する方法の詳細については、「ページのレイアウト」を参照してください。To learn more about how to implement common UWP app patterns, see the Page layout article.

Visual Studio で Windows Template Studio を使用してアプリのレイアウトを使い始めることもできます。You can also use the Windows Template Studio in Visual Studio to get started with a layout for your app.

コントロールControls

UWP の設計プラットフォームには、すべての Windows デバイスで適切に動作することが保証されている一連のコモン コントロールが用意されており、Fluent Design System の原則に従っています。UWP's design platform provides a set of common controls that are guaranteed to work well on all Windows-powered devices, and they adhere to our Fluent Design System principles. これらのコントロールには、ボタンやテキスト要素などの単純なコントロールから、一連のデータとテンプレートからリストを生成する高度なコントロールまで、すべてのものが含まれます。These controls include everything from simple controls, like buttons and text elements, to sophisticated controls that can generate lists from a set of data and a template.

UWP コントロール

UWP コントロールとコントロールに基づいて作成できるパターンの全一覧については、「コントロールとパターン」セクションをご覧ください。For a complete list of UWP controls and the patterns you can make from them, see the controls and patterns section.

スタイルStyle

一般的なコントロールは、システム テーマとアクセント カラーを自動的に反映し、すべての入力の種類に対応し、すべてのデバイスに合わせて拡大縮小されます。Common controls automatically reflect the system theme and accent color, work with all input types, and scale to all devices. このように、Fluent Design System を反映しているため、順応性が高く、親近感があり、優れた美しさを持っています。In that way, they reflect the Fluent Design System - they're adaptive, empathetic, and beautiful. 一般的なコントロールでは、既定のスタイルでライト、モーション、深度を使用しているため、コントロールを使用することで、アプリに Fluent Design System を組み込んでいることになります。Common controls use light, motion, and depth in their default styles, so by using them, you're incorporating our Fluent Design System in your app.

一般的なコントロールは高度にカスタマイズでき、コントロールの前景色を変更することも、外観を完全にカスタマイズすることもできます。Common controls are highly customizable, too--you can change the foreground color of a control or completely customize it's appearance. コントロールの既定のスタイルを変更するには、軽量なスタイル設定を使用するか、XAML でカスタム コントロールを作成します。To override the default styles in controls, use lightweight styling or create custom controls in XAML.

アクセント カラーの gif

シェルShell

UWP アプリでは、Windows シェルのタイルと通知を使用して、幅広い Windows エクスペリエンスとの対話が実行されます。Your UWP app will interact with the broader Windows experience with tiles and notifications in the Windows Shell.

タイルは、[スタート] メニューとアプリの起動時に表示され、アプリで何が行われるのかを簡単に示します。Tiles are displayed in the Start menu and when your app launches, and they provide a glimpse of what's going on in your app. タイルのパワーは、背後にあるコンテンツ、および提供するインテリジェンスと技術によるものです。Their power comes from the content behind them, and the intelligence and craft with which they're offered up.

UWP アプリには 4 つのタイル サイズ (小、中、横長、大) があり、アプリのアイコンと ID でカスタマイズできます。UWP apps have four tile sizes (small, medium, wide, and large) that can be customized with the app's icon and identity. UWP アプリのタイルのデザインに関するガイダンスについては、「タイルとアイコン アセットのガイドライン」をご覧ください。For guidance on designing tiles for your UWP app, see Guidelines for tile and icon assets.

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

入力Inputs

UWP アプリではスマート操作が使用されます。UWP apps rely on smart interactions. クリックの発生元がマウスか、スタイラスか、指によるタップかを認識または定義しなくても、クリック操作に対応したデザインを行うことができます。You can design around a click interaction without having to know or define whether the click comes from a mouse, a stylus, or a tap of a finger. ただし、特定の入力モード向けにアプリを設計することもできます。However, you can also design your apps for specific input modes.

入力

デバイスDevices

デバイス

同様に、UWP では、さまざまなデバイスに合わせてアプリを自動的にスケーリングしますが、特定のデバイス向けに UWP アプリを最適化することもできます。Similarly, while UWP automatically scales your app to different devices, you can also optimize your UWP app for specific devices.

ユーザビリティUsability

最後に重要な点として、ユーザビリティの目的は、アプリのエクスペリエンスをすべてのユーザーに開かれたものにすることです。Last but not least, usability is about making your app's experience open to all users. すべての人が、本当に包括的なユーザー エクスペリエンスの恩恵を受けます。すべてのユーザーに対してアプリを使いやすくする方法については、「UWP アプリの操作性」をご覧ください。Everyone can benefit from truly inclusive user experiences - see usability for UWP apps to see how to make your app easy to use for everyone.

国際的なユーザーを対象に設計している場合は、グローバリゼーションとローカライズを確認することをお勧めします。If you're designing for international audiences, you might want to check out Globalization and localization.

視覚障碍、聴覚障碍、運動障碍を持つユーザーに関して、「アクセシビリティ機能」も検討してください。You might also want to consider accessibility features for users with limited sight, hearing, and mobility. アクセシビリティが最初から設計に組み込まれている場合は、アプリをアクセシビリティ対応にすることにほとんど時間と労力がかかりません。If accessibility is built into your design from the start, then making your app accessible should take very little extra time and effort.

ツールと設計ツールキットTools and design toolkits

基本的な設計機能がわかったので、UWP アプリの設計を開始しましょう。Now that you know about the basic design features, how about getting started with designing your UWP app?

設計プロセスで役立つさまざまなツールが用意されています。We provide a variety of tools to help your design process:

  • 設計ツールキットのページをご覧ください。XD、Illustrator、Photoshop、Framer、Sketch の各ツールキット、および追加の設計ツールやフォントのダウンロードが提供されています。See our Design toolkits page for XD, Illustrator, Photoshop, Framer, and Sketch toolkits, as well as additional design tools and font downloads.

  • コンピューターを設定して UWP アプリのコードを記述できるようにするには、「はじめに」 > 「準備」の記事をご覧ください。To get your machine set up to write code for UWP apps, see our Get started > Get set up article.

  • UWP の UI を実装する方法については、エンド ツー エンドの「サンプル UWP アプリ」をご覧ください。For inspiration on how to implement UI for UWP, take a look at our end-to-end sample UWP apps.

ビデオの概要Video summary

次へ: Fluent Design SystemNext: Fluent Design System

Fluent Design (Microsoft のデザイン システム) の背後にある原則や、UWP アプリに組み込むことができる多くの機能について確認する場合は、引き続き「Fluent Design System」をご覧ください。If you'd like to learn about the principles behind Fluent Design (Microsoft's design system) and see more features you can incorporate into your UWP app, continue on to Fluent Design System.