アプリ設定のガイドラインGuidelines for app settings

アプリ設定は、アプリの中でユーザーによるカスタマイズが可能な部分です。この設定は、アプリ設定のページに含まれています。App settings are the user-customizable portions of your app and live within an app settings page. たとえば、ニュース リーダー アプリのアプリ設定では、表示するニュース ソースや画面に表示する記事の数を指定できる場合があります。また、天気予報アプリのアプリ設定では、温度の既定の計測単位として摂氏または華氏を選ぶことができます。For example, app settings in a news reader app might let the user specify which news sources to display or how many columns to display on the screen, while a weather app's settings could let the user choose between Celsius and Fahrenheit as the default unit of measurement. この記事では、アプリ設定を作成し、表示する際のベスト プラクティスについて説明します。This article describes best practices for creating and displaying app settings.

アプリに設定ページを含めるかどうかShould I include a settings page in my app?

アプリ設定のページに含めるアプリのオプションには、次のようなものがあります。Here are examples of app options that belong in an app settings page:

  • アプリの動作に影響するが、頻繁な再調整を必要としない構成オプション。たとえば、天気予報アプリで温度の既定の単位として摂氏または華氏を選ぶ機能、メール アプリでアカウント設定を変更する機能、通知に関する設定、アクセシビリティ オプションなどです。Configuration options that affect the behavior of the app and don't require frequent readjustment, like choosing between Celsius or Fahrenheit as default units for temperature in a weather app, changing account settings for a mail app, settings for notifications, or accessibility options.
  • 音楽、効果音、配色テーマなど、ユーザーの設定に基づくオプション。Options that depend on the user's preferences, like music, sound effects, or color themes.
  • プライバシー ポリシー、ヘルプ、アプリのバージョン、著作権情報など、頻繁にはアクセスされないアプリ情報。App information that isn't accessed very often, such as privacy policy, help, app version, or copyright info.

アプリの通常のワークフローに含まれるコマンド (お絵かきアプリでのブラシ色の変更など) は設定ページに含めません。Commands that are part of the typical app workflow (for example, changing the brush size in an art app) shouldn't be in a settings page. コマンド配置について詳しくは、「コマンド設計の基本」をご覧ください。To learn more about command placement, see Command design basics.

一般的な推奨事項General recommendations

  • 設定ページは簡潔にし、バイナリ (オン/オフ) コントロールを利用します。Keep settings pages simple and make use of binary (on/off) controls. トグル スイッチは、一般に、二者択一の設定に最適とされているコントロールです。A toggle switch is usually the best control for a binary setting.
  • ユーザーが相互排他的な関連するオプション (5 個まで) の中から 1 つの項目を選ぶことができるようにする場合は、ラジオ ボタンを使います。For settings that let users choose one item from a set of up to 5 mutually exclusive, related options, use radio buttons.
  • アプリ設定のページに、すべてのアプリ設定のエントリ ポイントを作成します。Create an entry point for all app settings in your app setting's page.
  • 設定はシンプルにします。Keep your settings simple. 適切な既定値を定義し、設定の数は最小限にします。Define smart defaults and keep the number of settings to a minimum.
  • ユーザーが設定を変更したときは、変更がすぐにアプリに反映されるようにします。When a user changes a setting, the app should immediately reflect the change.
  • アプリの一般的なワークフローに関連するコマンドは追加しないでください。Don't include commands that are part of the common app workflow.

エントリ ポイントEntry point

ユーザーがアプリ設定のページにアクセスする方法は、アプリのレイアウトに基づいている必要があります。The way that users get to your app settings page should be based on your app's layout.

ナビゲーション ウィンドウNavigation pane

ナビゲーション ウィンドウ レイアウトの場合、アプリ設定は、選択肢が示されるナビゲーション リストの最後の項目として配置し、下部にピン留めすることをお勧めします。For a nav pane layout, app settings should be the last item in the list of navigational choices and be pinned to the bottom:

ナビゲーション ウィンドウでのアプリ設定のエントリ ポイント

アプリ バーApp bar

アプリ バーまたはツール バーを使っている場合、設定のエントリ ポイントを [その他] オーバーフロー メニューの最後の項目として配置します。If you're using an app bar or tool bar, place the settings entry point as the last item in the "More" overflow menu. 設定のエントリ ポイントを簡単に検索できることがアプリで重要となる場合は、オーバーフローではなく、アプリ バーに直接エントリ ポイントを配置します。If greater discoverability for the settings entry point is important for your app, place the entry point directly on the app bar and not within the overflow.

アプリ バーでのアプリ設定のエントリ ポイント

ハブHub

ハブ レイアウトを使っている場合は、アプリ設定のエントリ ポイントをアプリ バーの [その他] オーバーフロー メニュー内に配置することをお勧めします。If you're using a hub layout, the entry point for app settings should be placed inside the "More" overflow menu of an app bar.

タブ/ピボットTabs/pivots

タブやピボットのレイアウトでは、アプリ設定のエントリ ポイントをナビゲーション内のトップレベルのいずれかの項目として配置することはお勧めしません。For a tabs or pivots layout, we don't recommended placing the app settings entry point as one of the top items within the navigation. 代わりに、アプリ設定のエントリ ポイントをアプリ バーの [その他] オーバーフロー メニュー内に配置することをお勧めします。Instead, the entry point for app settings should be placed inside the "More" overflow menu of an app bar.

マスター-詳細Master-details

アプリ設定のエントリをマスター/詳細ウィンドウ内の深い位置に配置するのではなく、マスター ウィンドウのトップ レベルに、最後のピン留めされた項目として配置してください。Instead of burying the app settings entry point deeply within a master-details pane, make it the last pinned item on the top level of the master pane.

レイアウトLayout

デスクトップの場合でも、モバイルの場合でも、アプリ設定のウィンドウは全画面で開き、ウィンドウ全体に表示されるようにします。On both desktop and mobile, the app settings window should open full-screen and fill the whole window. アプリ設定のメニューに 4 つまでの最上位グループが含まれる場合は、それらのグループが 1 列分右下がりで表示されるようにします。If your app settings menu has up to four top-level groups, those groups should cascade down one column.

デスクトップ:Desktop:

デスクトップにおけるアプリ設定のページのレイアウト

モバイル:Mobile:

電話におけるアプリ設定のページのレイアウト

"カラー モード" の設定"Color mode" settings

アプリでユーザーがアプリのカラー モードを選択できるようにする場合は、"アプリ モードを選ぶ" という見出しを持つラジオ ボタンまたはコンボ ボックスを使ってこれらのオプションを表示します。If your app allows users to choose the app's color mode, present these options using radio buttons or a combo box with the header "Choose an app mode". オプションは次のようになっている必要があります。The options should read

  • 明るいLight
  • 暗いDark
  • Windows の既定Windows default

また、Windows 設定アプリの [色] ページへのハイパーリンクを追加して、ユーザーが現在の既定のアプリ モードにアクセスして変更できるようにすることもお勧めします。We also recommend adding a hyperlink to the Colors page of the Windows Settings app where users can access and modify the current default app mode. ハイパーリンク テキストには、"Windows の色の設定" という文字列を使用します。Use the string "Windows color settings" for the hyperlink text.

"モードを選ぶ" セクション

バージョン情報セクションとフィードバック ボタンAbout section and Feedback button

専用のページとして、または独自のセクションで、アプリに "バージョン情報" セクションを配置することをお勧めします。We recommend placing "About this App" section in your app either as a dedicated page or in its own section. "フィードバックを送信する" ためのボタンが必要な場合は、そのボタンを "バージョン情報" を表示するページの下部に配置します。If you want a "Send Feedback" button, place that toward the bottom of the "About this App" page.

"法的情報" サブヘッダーの下に、"使用条件" と "プライバシーに関する声明" を配置し (折り返しのあるテキストを使ったハイパーリンク ボタンにする必要があります)、著作権などのその他の法的情報も配置します。Under a "Legal" subheader, place any "Terms of Use" and "Privacy Statement" (should be hyperlink buttons with wrapping text) as well as additional legal information, such as copyright.

"バージョン情報" のセクションと "フィードバックを送信する" ためのボタン

アプリ設定のページに含める項目の一覧を作成したら、次のガイドラインを考慮してください。Once you have a list of items that you want to include in your app settings page, consider these guidelines:

  • 類似した設定や関連する設定は、1 つの設定ラベルにまとめます。Group similar or related settings under one settings label.

  • 設定の合計数は、4 つまたは 5 つ以下に制限してください。Try to keep the total number of settings to a maximum of four or five.

  • アプリのコンテキストに関係なく、同じ設定を表示します。Display the same settings regardless of the app context. いくつかの設定が特定のコンテキストに適合しない場合は、アプリ設定のポップアップでそれらの設定を無効にします。If some settings aren't relevant in a certain context, disable those in the app settings flyout.

  • 設定のラベルは、わかりやすい 1 単語にします。Use descriptive, one-word labels for settings. たとえば、アカウント関連の設定の場合は、設定の名前を "アカウント設定" ではなく "アカウント" にします。For example, name the setting "Accounts" instead of "Account settings" for account-related settings. 必要な設定のオプションが 1 つだけで、設定のわかりやすいラベルが思い付かない場合は、"オプション" または "既定" を使います。If you only want one option for your settings and the settings don't lend themselves to a descriptive label, use "Options" or "Defaults."

  • 設定がポップアップではなく直接 Web にリンクされている場合は、ハイパーリンクとしてスタイルを設定した "ヘルプ (オンライン)" や "Web フォーラム" など、ユーザーに視覚的なヒントを与えます。If a setting directly links to the web instead of to a flyout, let the user know this with a visual clue, such as "Help (online)" or "Web forums" styled as a hyperlink. Web への複数のリンクは、1 つの設定を使ってポップアップにまとめることを検討してください。Consider grouping multiple links to the web into a flyout with a single setting. たとえば、"バージョン情報" の設定では、使用条件、プライバシー ポリシー、アプリのサポートへのリンクを含むポップアップが開くようにします。For example, an "About" setting could open a flyout with links to your terms of use, privacy policy, and app support.

  • 使用頻度の高い設定にそれぞれ独自のエントリを割り当てられるように、使用頻度の低い設定は 1 つのエントリにまとめます。Combine less-used settings into a single entry so that more common settings can each have their own entry. 情報のみを含むコンテンツやリンクは、"バージョン情報" の設定に配置します。Put content or links that only contain information in an "About" setting.

  • [アクセス許可] ウィンドウの機能と重複しないようにします。Don't duplicate the functionality in the "Permissions" pane. このウィンドウは既定で用意されており、その内容を変更することはできません。Windows provides this pane by default and you can't modify it.

  • 設定ポップアップへの設定コンテンツの追加Add settings content to Settings flyouts

  • コンテンツは 1 列で上から下に表示し、必要に応じてスクロールできるようにします。Present content from top to bottom in a single column, scrollable if necessary. スクロールの長さは画面の高さの 2 倍までに抑えます。Limit scrolling to a maximum of twice the screen height.

  • アプリ設定では次のコントロールを使います。Use the following controls for app settings:

    • トグル スイッチ:ユーザーができるようにするには、オンまたはオフ値を設定します。Toggle switches: To let users set values on or off.
    • ラジオ ボタン:ユーザー 5 相互に排他的では最大のセットから 1 つの項目を選択できるようにするには、オプションに関連します。Radio buttons: To let users choose one item from a set of up to 5 mutually exclusive, related options.
    • テキスト入力ボックス:ユーザーがテキスト入力をできるようにします。Text input box: To let users enter text. ユーザーから取得するテキストの種類 (メール、パスワードなど) に応じた種類のテキスト入力ボックスを使います。Use the type of text input box that corresponds to the type of text you're getting from the user, such as an email or password.
    • ハイパーリンク:アプリ内の別のページまたは外部の web サイトには、ユーザーを誘導します。Hyperlinks: To take the user to another page within the app or to an external website. ユーザーがハイパーリンクをクリックすると、設定ポップアップは閉じられます。When a user clicks a hyperlink, the Settings flyout will be dismissed.
    • ボタン:ユーザーが現在の設定のフライアウトを表示したまま、早急な対応を開始をできるようにします。Buttons: To let users initiate an immediate action without dismissing the current Settings flyout.
  • 使用できないコントロールがある場合は、説明用のメッセージを追加します。Add a descriptive message if one of the controls is disabled. 使用できないコントロールの上に、このメッセージを配置します。Place this message above the disabled control.

  • 設定ポップアップとヘッダーがアニメーション化された後で、コンテンツとコントロールを単一のブロックとしてアニメーション化します。Animate content and controls as a single block after the Settings flyout and header have animated. enterPage または EntranceThemeTransition アニメーションを使って、100 ピクセル左のオフセットでコンテンツをアニメーション化します。Animate content using the enterPage or EntranceThemeTransition animations with a 100px left offset.

  • 必要に応じて、コンテンツの整理と明確化の助けになるように、セクション ヘッダー、段落、ラベルを使います。Use section headers, paragraphs, and labels to aid organize and clarify content, if necessary.

  • 設定を繰り返し表示する必要がある場合は、UI の階層を追加するか、展開/折りたたみモデルを使います。階層の深さは 2 階層までに抑えます。If you need to repeat settings, use an additional level of UI or an expand/collapse model, but avoid hierarchies deeper than two levels. たとえば、天気予報アプリの都市別の設定では、都市の一覧を表示し、ユーザーが都市をタップしたときに、新しいポップアップを開くか、展開して設定オプションを表示できるようにします。For example, a weather app that provides per-city settings could list the cities and let the user tap on the city to either open a new flyout or expand to show the settings options.

  • コントロールや Web コンテンツの読み込みに時間がかかる場合は、進行状況不定コントロールを使ってユーザーに読み込み中であることを示します。If loading controls or web content takes time, use an indeterminate progress control to indicate to users that info is loading. 詳しくは、「プログレス コントロールのガイドライン」をご覧ください。For more info, see Guidelines for progress controls.

  • 移動や変更をコミットするためのボタンは使いません。Don't use buttons for navigation or to commit changes. 別のページに移動するにはハイパーリンクを使います。また、ボタンを使って変更をコミットする代わりに、ユーザーが設定ポップアップを閉じたときにアプリ設定の変更を自動的に保存します。Use hyperlinks to navigate to other pages, and instead of using a button to commit changes, automatically save changes to app settings when a user dismisses the Settings flyout.