UWP アプリの設計の基本Design basics for UWP apps

設計の基本のアイコン

ユニバーサル 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.

概要Overview

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

すべての種類の Windows デバイスで適切に対応するアプリを作成するためのベスト プラクティスと組み合わされた、UWP 機能の概要です。An introduction to UWP features combined with best practices for creating apps that scale beautifully on all types of Windows-powered devices.

Fluent Design SystemFluent Design System

Fluent Design System では、順応性が高く、親近感があり、優れた美しさを持つユーザー インターフェイスを作成するための目標や原則を示します。The Fluent Design System presents our goals and principles for creating adaptive, empathetic, and beautiful user interfaces.

基本Basics

ナビゲーションの基本Navigation basics

UWP アプリのナビゲーションは、ナビゲーション構造、ナビゲーション要素、システム レベルの機能から成る柔軟なモデルに基づいています。Navigation in UWP apps is based on a flexible model of navigation structures, navigation elements, and system-level features. この記事では、これらの構成要素を紹介します。また、これらの構成要素を組み合わせて使い、優れたナビゲーション エクスペリエンスを作成する方法について説明します。This article introduces you to these components and shows you how to use them together to create a good navigation experience.

コマンドの基本Command basics

コマンド要素は、ユーザーがメール送信、項目の削除、フォームの送信などの操作を実行できる対話型の UI 要素です。Command elements are the interactive UI elements that enable the user to perform actions, such as sending an email, deleting an item, or submitting a form. この記事では、ボタンやチェック ボックスなどのコマンド要素、それらの要素でサポートされる操作、それらの要素をホストするコマンド サーフェス (コマンド バーやショートカット メニューなど) について説明します。This article describes the command elements, such as buttons and check boxes, the interactions they support, and the command surfaces (such as command bars and context menus) for hosting them.

コンテンツの基本Content basics

どのようなアプリでも、主な目的はコンテンツへのアクセスを提供することです。たとえば、写真編集アプリでは写真がコンテンツであり、旅行アプリでは地図と旅行の目的地に関する情報がコンテンツです。The main purpose of any app is to provide access to content: in a photo-editing app, the photo is the content; in a travel app, maps and info about travel destinations is the content; and so on. この記事では、3 つのコンテンツ シナリオ (使用、作成、対話式操作) でのコンテンツの設計に関する推奨事項について説明します。This article provides content design recommendations for the three content scenarios: consumption, creation, and interaction.

チュートリアルTutorials

XAML と C# で基本的な写真編集アプリケーションを作成する方法について説明します。Learn how to create a basic photo-editing application in XAML and C#.

1.基本的な UI を作成する1. Create a basic UI

XAML を使用して基本的なユーザー インターフェイスを作成します。Use XAML to create a basic user interface.

2.アダプティブ レイアウトを作成する2. Create an adaptive layout

写真編集アプリケーションにアダプティブ レイアウトを提供します。Give the photo-editing application an adaptive layout.

3.カスタム スタイルを作成する3. Create custom styles

カスタム スタイルを作成することで、UWP コントロールに独自の外観を提供します。Give our UWP controls your own look and feel by creating custom styles.