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 アプリですべて実行Windows 10 デバイスタブレットや PC をテレビから。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

The sizes, margins, and positions of UI elements should always be in multiples of 4 epx in your UWP apps.

UWP scales across a range of devices with scaling plateaus of 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, and 400%. 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). 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.)

grid

レイアウト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

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

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

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 apps have four tile sizes (small, medium, wide, and large) that can be customized with the app's icon and identity. For guidance on designing tiles for your UWP app, see Guidelines for tile and icon assets.

tiles on start menu

入力Inputs

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.

inputs

デバイス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.