UWP アプリのコンテンツ デザインの基本Content design basics for UWP apps

どのようなアプリでも、主な目的はコンテンツへのアクセスを提供することです。The main purpose of any app is to provide access to content. アプリはさまざまな目的で存在するため、コンテンツにも多くの形式があります。たとえば、写真編集アプリでは写真がコンテンツであり、旅行アプリでは地図と旅行の目的地に関する情報がコンテンツです。Since apps exist for many different purposes, content comes in many forms: in a photo-editing app, the photo is the content; in a travel app, maps and information about travel destinations is the content; and so on.

この記事では、アプリでコンテンツを表示する方法の概要を説明します。This article provides an overview of how you can present content in your app. 形式にかかわらずコンテンツを表示するために使用できる、一般的なページ パターンと UI 要素について説明します。We describe common page patterns and UI elements that you can use to display your content, whatever form it may be in.

一般的なページ パターンCommon page patterns

多くのアプリは、これらの一般的なページ パターンの一部またはすべてを使用して、さまざまな種類のコンテンツを表示します。Many apps use some, or all, of these common page patterns to display different types of content. また、これらのパターンを自由に組み合わせて、アプリのコンテンツを最適化します。Likewise, feel free to mix and match these patterns to optimize for your app's content.

ランディングLanding

ランディング ページ

通常、ランディング ページ (ヒーロー画面とも呼ばれる) は、アプリのエクスペリエンスのトップ レベルに表示されます。Landing pages, also known as hero screens, often appear at the top level of an app experience. 大きいサーフェス領域は、ユーザーが参照および使用する可能性があるコンテンツを、アプリが強調表示するためのステージとして機能します。The large surface area serves as a stage for apps to highlight content that users may want to browse and consume.

コレクションCollections

ギャラリー

コレクションを使用すると、ユーザーはコンテンツやデータのグループを参照することができます。Collections allow users to browse groups of content or data. グリッド ビューは写真またはメディアを中心とするコンテンツに適していて、リスト ビューはテキストが多いコンテンツやデータに適しています。Grid view is a good option for photos or media-centric content, and list view is a good option for text-heavy content or data.

マスター/詳細Master/detail

マスター/詳細

マスター/詳細モデルは、リスト ビュー (マスター) とコンテンツ ビュー (詳細) で構成されます。The master/details model consists of a list view (master) and a content view (detail). 両方のウィンドウは固定されていて、垂直方向にスクロールできます。Both panes are fixed and have vertical scrolling. リスト項目とコンテンツ ビューの間には明確な関係があります。マスター ビューで項目が選択されると、詳細ビューがそれに応じて更新されます。There is a clear relationship between the list item and the content view: the item in the master view is selected, and the detail view is correspondingly updated. 詳細ビューのナビゲーションが提供されるだけでなく、マスター ビュー内の項目を追加および削除することができます。In addition to providing detail view navigation, items in the master view can be added and removed.

詳細Details

複数のビュー

ユーザーが探していたコンテンツを見つけたときに、無駄な情報がないページを表示できるように、専用のコンテンツ表示ページを作成することを検討します。When users find the content they are looking for, consider creating a dedicated content-viewing page so that users can view the page free of distractions. 可能であれば、コンテンツを画面全体に拡張し、他のすべての UI 要素を非表示にする、全画面表示のオプションを作成します。If possible, create a full-screen view option that expands the content to fill the entire screen and hides all other UI elements.

画面サイズの変化を調整するために、必要に応じて UI 要素の表示/非表示を切り替えるレスポンシブ デザインの作成も検討します。To adjust for changes in screen size, also consider creating a responsive design that hides/shows UI elements as appropriate.

フォームForms

フォーム

フォームは、ユーザーからデータを収集して送信するコントロールのグループです。A form is a group of controls that collect and submit data from users. すべてではなくても、ほとんどのアプリが、設定ページ、ログイン ポータル、フィードバック Hub、アカウントの作成などのために、何らかのフォームを使用しています。Most, if not all apps, use a form of some sort for settings pages, log in portals, feedback hubs, account creation, or other purposes.

一般的なコンテンツ要素Common content elements

これらのページ パターンを作成するには、個々のコンテンツ要素を組み合わせて使用する必要があります。To create these page patterns, you'll need to use a combination of individual content elements. コンテンツの表示によく使われるいくつかの UI 要素を次に示します。Here are some UI elements that are commonly used to display content. UI 要素の全一覧については、「コントロールとパターン」をご覧ください。(For a complete list of UI elements, see controls and patterns.

カテゴリCategory 要素Elements 説明Description
オーディオとビデオAudio and video

media transport control
メディア再生コントロールとメディア トランスポート コントロールMedia playback and transport controls オーディオとビデオを再生します。Plays audio and video.
画像ビューアーImage viewers

flip view
フリップ ビュー画像Flip view, image 画像を表示します。Displays images. FlipView は、コレクション内の画像 (アルバム内の写真や製品の詳細ページ内の項目など) を一度に 1 つずつ表示します。The flip view displays images in a collection, such as photos in an album or items in a product details page, one image at a time.
コレクションCollections

list view
リスト ビューとグリッド ビューList view and grid view 対話型のリストまたはグリッド内に項目を表示します。Presents items in an interactive list or a grid. これらの要素を使うと、ユーザーは新着の一覧からムービーを選んだり、在庫を管理したりすることができます。Use these elements to let users select a movie from a list of new releases or manage an inventory.
テキストとテキスト入力Text and text input

text box

テキスト ブロックテキスト ボックスリッチ エディット ボックスText block, text box, rich edit box

テキストを表示します。Displays text. 一部の要素を使うと、ユーザーがテキストを編集することができます。Some elements enable the user to edit text. 詳しくは、「テキスト コントロール」をご覧ください。For more info, see Text controls.

テキストの表示方法のガイドラインについては、「文字体裁」をご覧ください。For guidelines on how to display text, see Typography.

マップMaps

map control
MapControlMapControl シンボリックまたは写実的な地球のマップを表示します。Displays a symbolic or photorealistic map of the Earth.
WebViewWebView WebViewWebView HTML コンテンツをレンダリングします。Renders HTML content.