Windows アプリ作成者用の Fluent Design SystemThe Fluent Design System for Windows app creators

Fluent Design のヘッダー

はじめにIntroduction

Fluent Design System は、順応性が高く、親近感があり、美しいユーザー インターフェイスを作成するためのシステムです。The Fluent Design System is our system for creating adaptive, empathetic, and beautiful user interfaces.

原則Principles

順応性:各デバイスで自然な Fluent エクスペリエンスを得られるAdaptive: Fluent experiences feel natural on each device

Fluent エクスペリエンスは環境に適応します。Fluent experiences adapt to the environment. タブレット、デスクトップ PC、Xbox で軽快な Fluent エクスペリエンスを得られます。Mixed Reality ヘッドセットでの動作も優れています。A Fluent experience feels comfortable on a tablet, a desktop PC, and an Xbox—it even works great on a Mixed Reality headset. PC の追加モニターなど、多くのハードウェアを追加しても、Fluent エクスペリエンスでそれらを活用できます。And when you add more hardware, like an additional monitor for your PC, a Fluent experience takes advantage of it.

親近感:Fluent エクスペリエンスは直感的で、強力であるEmpathetic: Fluent experiences are intuitive and powerful

Fluent エクスペリエンスは動作と意図を読み取ります。すなわち、必要なものを把握および予想します。Fluent experiences adjust to behavior and intent—they understand and anticipate what’s needed. ユーザーとアイデアが物理的に離れているかどうかに関係なく、それらを統合します。They unite people and ideas, whether they’re on opposite sides of the globe or standing right next to each other.

美しさ:Fluent エクスペリエンスは魅力的で、臨場感があるBeautiful: Fluent experiences are engaging and immersive

現実世界の要素を組み込むことで、Fluent エクスペリエンスでは基本的な機能を活用できます。By incorporating elements of the physical world, a Fluent experience taps into something fundamental. 直感的かつ本能的に情報を整理できるように、ライト、影、モーション、深度、テクスチャを使用します。It uses light, shadow, motion, depth, and texture to organize information in a way that feels intuitive and instinctual.

UWP によるアプリへの Fluent Design の適用Applying Fluent Design to your app with UWP

Fluent Design のロゴ

設計ガイドラインでは、アプリに Fluent Design の原則を適用する方法について説明します。Our design guidelines explain how to apply Fluent Design principles to apps. どのような種類のアプリでしょうか。What type of apps? ガイドラインの多くはあらゆるプラットフォームに適用できますが、Fluent Design をサポートするための UWP (ユニバーサル Windows プラットフォーム) を作成しました。While many of our guidelines can be applied to any platform, we created UWP (the Universal Windows Platform) to support Fluent Design.

Fluent Design 機能は UWP に組み込まれています。Fluent Design features are built into UWP. これらの機能のいくつか (有効ピクセルやユニバーサル入力システムなど) は、自動的に取り込まれます。Some of these features—such as effective pixels and the universal input system—are automatic. これらの機能を利用するために追加のコードを記述する必要はありません。You don't have to write any extra code to take advantage of them. 他の機能 (アクリル効果など) はオプションであり、それらの機能をアプリに取り込むには、機能を追加するためのコードを記述します。Other features, like acrylic, are optional; you add them to your app by writing code to include them.

Fluent Design 機能を使用して既存の WPF または Windows アプリケーションの外観や機能を高めることができるように、UWP コントロールをデスクトップに追加しています。We're bringing UWP controls to the desktop so that you can enhance the look, feel, and functionality of your existing WPF or Windows applications with Fluent Design features. 詳細については、WPF および Windows フォーム アプリケーションでの UWP コントロールのホストに関するページを参照してください。To learn more, see Host UWP controls in WPF and Windows Forms applications.

設計ガイダンスに加え、Fluent Design の記事では、設計を実現させるコードの記述方法も示されています。In addition to design guidance, our Fluent Design articles also show you how to write the code that makes your designs happen. UWP では、マークアップベースの言語である XAML が使用されます。これにより、ユーザー インターフェイスが作成しやすくなります。UWP uses XAML, a markup-based language that makes it easier to create user interfaces. 次に例を示します。Here's an example:

<Grid BorderBrush="Blue" BorderThickness="4">
    <TextBox Text="Design with XAML" Margin="20" Padding="16,24"/>
</Grid>

UWP を初めて開発する場合は、UWP の概要に関するページを参照してください。If you're new to UWP development, check out our Get started with UWP page.

最適なデザインを見つけるFind a natural fit

さまざまなデバイスでアプリを自然に操作してもらうにはどのようにすればいいですか?How do you make an app feel natural on a variety of devices? それぞれのデバイスに合わせて設計されたように感じさせることです。By making it feel as though it were designed with each specific device in mind. 無駄な領域がなく (密集しない)、異なる画面サイズに対応する UI レイアウトでは、使用するデバイス用に設計されたかのような自然な使用感を得られます。A UI layout that adapts to different screen sizes so there's no wasted space (but no crowding either) makes an experience feel natural, as though it were designed for that device.

fpo の画像

適切なブレークポイントの設計Design for the right breakpoints

それぞれの画面サイズに合わせて設計する代わりに、いくつかの主要な幅 ("ブレークポイント" とも呼ばれる) に注目すると、設計とコードが非常に簡単になり、大小の画面に対応する魅力的なアプリを作成できます。Instead of designing for every individual screen size, focusing on a few key widths (also called "breakpoints") can greatly simplify your designs and code while still making your app look great on small to large screens.

画面のサイズとブレークポイントの詳細Learn about screen sizes and breakpoints

fpo の画像

レスポンシブ レイアウトの作成Create a responsive layout

アプリが自然に感じられるようにするには、そのレイアウトをさまざまな画面サイズやデバイスに適合させる必要があります。For an app to feel natural, it should adapt its layout to different screen sizes and devices. 応答性の高い UI を作成するために、自動サイズ変更、レイアウト パネル、表示状態、さらには XAML での独立した UI 定義を使用することができます。You can use automatic sizing, layout panels, visual states, and even separate UI definitions in XAML to create a responsive UI.

応答性の高い設計の詳細Learn about responsive design

fpo の画像

多様なデバイスの設計Design for a spectrum of devices

UWP アプリはさまざまな Windows ベースのデバイスで実行できます。UWP apps can run on a wide variety of Windows-powered devices. これは、利用可能なデバイス、デバイスの利用目的、デバイスの操作方法を理解するのに役立ちます。It's helpful to understand which devices are available, what they're made for, and how users interact with them.

UWP デバイスの詳細Learn about UWP devices

fpo の画像

入力方法に合わせた最適化Optimize for the right input

UWP アプリは、一般的なマウス、キーボード、ペンを自動的にサポートします。UWP apps automatically support common mouse, keyboard, pen, and touch interactions. 余分な操作をする必要がありません。There's nothing extra you have to do. ただし、必要に応じて、ペンや Surface Dial など、特定の入力方法に合わせてサポートを最適化することで、アプリの機能を強化することができます。But, if you'd like to, you can enhance your app with optimized support for specific inputs, like pen and the Surface Dial.

入力方法と操作方法の詳細Learn about inputs and interactions

直感的なものにするMake it intuitive

ユーザーの想像のとおりに動作するため、直観的に操作できます。An experience feels intuitive when it behaves the way the user expects it to. アクセシビリティとグローバリゼーションを実現するためにコントロールとパターンを確立し、プラットフォーム サポートを活用することで、操作の手間が省け、生産性が向上します。By using established controls and patterns and taking advantage of platform support for accessibility and globalization, you create an effortless experience that helps users be more productive.

共感を得るには、適切なタイミングで適切な処理を行います。Demonstrating empathy is about doing the right thing at the right time.

Fluent エクスペリエンスは一貫性のあるコントロールとパターンを使用するため、ユーザーが学習したとおりに動作します。Fluent experiences use controls and patterns consistently, so they behave in ways the user has learned to expect. Fluent エクスペリエンスでは幅広い物理的な機能を使用してユーザーにアクセスします。グローバリゼーション機能が組み込まれているため、世界中のユーザーが使用することができます。Fluent experiences are accessible to people with a wide range of physical abilities, and incorporate globalization features so people around the world can use them.

fpo の画像

適切なナビゲーションを提供するProvide the right navigation

適切なアプリ構造とナビゲーション コンポーネントを使用して、使いやすさを向上させます。Create an effortless experience by using the right app structure and navigation components.

ナビゲーションの詳細Learn about navigation

fpo の画像

対話性を高めるBe interactive

ユーザーは、ボタン、コマンド バー、キーボード ショートカット、コンテキスト メニューを使用してアプリと対話できます。これらは、静的なエクスペリエンスを動的なものに変えるツールです。Buttons, command bars, keyboard shortcuts, and context menus enable users to interact with your app; they're the tools that change a static experience into something dynamic.

コマンドの詳細Learn about commanding

fpo の画像

ジョブに最適なコントロールの使用Use the right control for the job

コントロールとはユーザー インターフェイスの構成要素です。最適なコントロールを使用すると、ユーザーの想像どおりに動作するユーザー インターフェイスを作成できます。Controls are the building blocks of the user interface; using the right control helps you create a user interface that behaves the way users expect it to. UWP には、単純なボタンから強力なデータ コントロールまで、45 を超えるコントロールがあります。UWP provides more than 45 controls, ranging from simple buttons to powerful data controls.

UWP コントロールの詳細Learn about UWP controls

インクルーシブの画像

インクルーシブに 適切に設計されたアプリは、障碍のある方も利用できます。Be inclusive A well-designed app is accessible to people with disabilities. いくつかのコーディングを追加すると、世界中のユーザーとアプリを共有できます。With some extra coding, you can share your app with people around the world.

ユーザビリティの詳細Learn about Usability

魅力と臨場感を実現するBe engaging and immersive

Fluent Design に派手な効果はありません。Fluent Design isn't about flashy effects. 脳で効率的に処理するようにプログラムされたエクスペリエンスをエミュレートするため、ユーザー エクスペリエンスを拡張する物理的な効果が組み込まれています。It incorporates physical effects that truly enhance the user experience, because they emulate experiences that our brains are programmed to process efficiently.

ライトの使用Use light

ライトは、関心を集めるための方法です。Light has a way of drawing our attention. ライトによって、使用する場所の雰囲気や特徴が作り出されます。ライトは、情報に焦点を当てるための実用的なツールです。It creates atmosphere and a sense of place, and it’s a practical tool to illuminate information.

UWP アプリにライトを追加するAdd light to your UWP app:

fpo の画像

表示ハイライトReveal highlight

表示ハイライトは、ライトを使用して対話型の要素を目立たせます。ライトはユーザーが対話できる要素を照らし、隠れた境界線を表示します。Reveal highlight uses light to make interactive elements stand out. Light illuminates the elements the user can interact with, revealing hidden borders. 表示は、リスト ビューやグリッド ビューなど、いくつかのコントロールで自動的に有効になります。Reveal is automatically enabled on some controls, such as list view and grid view. 定義済みの表示ハイライト スタイルを適用すると、他のコントロールでも表示を有効にできます。You can enable it on other controls by applying our predefined Reveal highlight styles.

fpo の画像

表示フォーカスReveal focus

表示フォーカス はライトを使用して、入力フォーカスのある要素に注意を向けます。Reveal focus uses light to call attention to the element that currently has input focus.

奥行きの作成Create a sense of depth

私たちは、3 次元の世界で暮らしています。We live in a three-dimensional world. 奥行きを UI に意図的に組み込むと、視覚的な階層が作成され、フラットな 2-D インターフェイスを、より効果的に情報と概念を提示するインターフェイスに変換することができます。By purposefully incorporating depth into the UI, we transform a flat, 2-D interface into something more—something that efficiently presents information and concepts by creating a visual hierarchy. 奥行きは、階層化された物理環境では、物事が相互にどのように関連するかを再構成します。It reinvents how things relate to each other within a layered, physical environment

UWP アプリに奥行きを追加するAdd depth to your UWP app:

fpo の画像

視差Parallax

"視差" は、前景にあるアイテムを背景にあるアイテムよりも速く動くように見せて、奥行き感を作り出します。Parallax creates the illusion of depth by making items in the foreground appear to move more quickly than items in the background.

モーションの組み込みIncorporate motion

モーションのデザインは映画のようなものと考えてください。Think of motion design like a movie. シームレスな切り替えによって、ユーザーをストーリーに注目させておき、優れたエクスペリエンスを実現することができます。Seamless transitions keep you focused on the story, and bring experiences to life. モーションのデザインにそのような感覚を取り込むことで、あるタスクから別のタスクへ映画のようにスムーズにユーザーを移行させることができます。We can invite those feelings into our designs, leading people from one task to the next with cinematic ease.

UWP アプリにモーションを追加するAdd motion to your UWP app:

継続性 gif

接続型アニメーションConnected animations

"接続型アニメーション" を使用すると、ユーザーはシームレスなシーンの切り替えを作成することでコンテキストを維持することができます。Connected animations help the user maintain context by creating a seamless transition between scenes.

適切な素材を使用して作成するBuild it with the right material

現実の世界で私たちの周囲にあるものは、ある種の感覚と刺激を与えます。The things that surround us in the real world are sensory and invigorating. そういったものは、折れ曲がったり、伸びたり、弾んだり、砕かれたり、滑らかに動いたりします。They bend, stretch, bounce, shatter, and glide. こうした素材の質感をデジタル環境に取り込むことで、ユーザーが利用したいと思うようなデザインを実現できます。Those material qualities translate to digital environments, making people want to reach out and touch our designs.

UWP アプリに素材を追加するAdd material to your UWP app:

fpo の画像

AcrylicAcrylic

"アクリル" は、ユーザーに対してコンテンツのレイヤーを表示する半透明な素材です。UI 要素の階層を確立します。Acrylic is a translucent material that lets the user see layers of content, establishing a hierarchy of UI elements.

設計ツールキットとコード サンプルDesign toolkits and code samples

Fluent Design で独自アプリの作成を始めてみませんか。Want to get started creating your own apps with Fluent Design? Adobe XD、Adobe Illustrator、Adobe Photoshop、Framer、Sketch 用のツールキットを使用すると、設計をすぐに始められます。また、サンプルを使用すると、コーディングの時間が短縮されます。Our toolkits for Adobe XD, Adobe Illustrator, Adobe Photoshop, Framer, and Sketch will help jumpstart your designs, and our samples will help get you coding faster.

fpo の画像

設計ツールキットとサンプルのページDesign toolkits and samples page

設計ツールキットとサンプルのページを確認してください。Check out our Design toolkits and samples page