アプリ設定のガイドライン

アプリ設定は、Windows アプリの中でもユーザーによるカスタマイズが可能な部分であり、アプリ設定ページからアクセスします。 たとえば、ニュース リーダー アプリでは、表示するニュース ソースや画面に表示する記事の数を指定できる場合があります。また、天気予報アプリでは、摂氏または華氏を選ぶことができます。 この記事では、アプリ設定の作成と表示に関する推奨事項とベスト プラクティスを示します。

設定ページを提供する場面

アプリ設定のページに含めるアプリのオプションには、次のようなものがあります。

  • アプリの動作に影響するが、頻繁な再調整を必要としない構成オプション。たとえば、天気予報アプリで温度の既定の単位として摂氏または華氏を選ぶ機能、メール アプリでアカウント設定を変更する機能、通知に関する設定、アクセシビリティ オプションなどです。
  • 音楽、効果音、配色テーマなど、ユーザーの設定に基づくオプション。
  • プライバシー ポリシー、ヘルプ、アプリのバージョン、著作権情報など、頻繁にはアクセスされないアプリ情報。

アプリの通常のワークフローに含まれるコマンド (お絵かきアプリでのブラシ色の変更など) は設定ページに含めません。 コマンド配置について詳しくは、「コマンド設計の基本」をご覧ください。

一般的な推奨事項

  • 設定ページは簡潔にし、バイナリ (オン/オフ) コントロールを利用します。 トグル スイッチは、一般に、二者択一の設定に最適とされているコントロールです。
  • ユーザーが相互排他的な関連するオプション (5 個まで) の中から 1 つの項目を選ぶことができるようにする場合は、ラジオ ボタンを使います。
  • アプリ設定のページに、すべてのアプリ設定のエントリ ポイントを作成します。
  • 設定はシンプルにします。 適切な既定値を定義し、設定の数は最小限にします。
  • ユーザーが設定を変更したときは、変更がすぐにアプリに反映されるようにします。
  • アプリの一般的なワークフローに関連するコマンドは追加しないでください。

エントリ ポイント

ユーザーがアプリ設定のページにアクセスする方法は、アプリのレイアウトに基づいている必要があります。

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

ナビゲーション ウィンドウ レイアウトの場合、アプリ設定は、選択肢が示されるナビゲーション リストの最後の項目として配置し、下部にピン留めすることをお勧めします。

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

コマンド バー

コマンド バーまたはツール バーを使用している場合は、設定のエントリ ポイントを [その他] オーバーフロー メニューの最後の項目の 1 つとして配置します。 設定のエントリ ポイントを簡単に検索できることがアプリで重要となる場合は、オーバーフローではなく、コマンド バーに直接エントリ ポイントを配置します。

コマンド バーのアプリ設定エントリ ポイント

ハブ

ハブ レイアウトを使っている場合は、アプリ設定のエントリ ポイントをコマンド バーの [その他] オーバーフロー メニュー内に配置することをお勧めします。

タブ/ピボット

タブやピボットのレイアウトでは、アプリ設定のエントリ ポイントをナビゲーション内のトップレベルのいずれかの項目として配置することはお勧めしません。 代わりに、アプリ設定のエントリ ポイントをコマンド バーの [その他] オーバーフロー メニュー内に配置することをお勧めします。

リストと詳細

アプリ設定のエントリ ポイントをリストと詳細ペイン内の深い位置に配置するのではなく、リスト ペインのトップ レベルに、最後のピン留めされた項目として配置してください。

レイアウト

アプリ設定のウィンドウは全画面で開き、ウィンドウ全体に表示されるはずです。 アプリ設定のメニューに 4 つまでの最上位グループが含まれる場合は、それらのグループが 1 列分右下がりで表示されるようにします。

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

"カラー モード" の設定

アプリでユーザーがアプリのカラー モードを選択できるようにする場合は、"アプリ モードを選ぶ" という見出しを持つラジオ ボタンまたはコンボ ボックスを使ってこれらのオプションを表示します。 オプションは次のようになっている必要があります。

  • 淡色
  • 濃色
  • Windows の既定

また、Windows 設定アプリの [色] ページへのハイパーリンクを追加して、ユーザーが現在の既定のアプリ モードにアクセスして変更できるようにすることもお勧めします。 ハイパーリンク テキストには "Windows の色の設定" という文字列を使用し、URI には ms-settings:colors を使用します。

バージョン情報セクションとフィードバック ボタン

専用のページとして、または独自のセクションで、アプリに "バージョン情報" セクションを配置することをお勧めします。 "フィードバックを送信する" ためのボタンが必要な場合は、そのボタンを "バージョン情報" を表示するページの下部に配置します。

"法的情報" サブヘッダーの下に、"使用条件" と "プライバシーに関する声明" を配置し (折り返しのあるテキストを使ったハイパーリンク ボタンにする必要があります)、著作権などのその他の法的情報も配置します。

アプリ設定のページに含める項目の一覧を作成したら、次のガイドラインを考慮してください。

  • 類似した設定や関連する設定は、1 つの設定ラベルにまとめます。

  • 設定の合計数は、4 つまたは 5 つ以下に制限してください。

  • アプリのコンテキストに関係なく、同じ設定を表示します。 いくつかの設定が特定のコンテキストに適合しない場合は、アプリ設定のポップアップでそれらの設定を無効にします。

  • 設定のラベルは、わかりやすい 1 単語にします。 たとえば、アカウント関連の設定の場合は、設定の名前を "アカウント設定" ではなく "アカウント" にします。 必要な設定のオプションが 1 つだけで、設定のわかりやすいラベルが思い付かない場合は、"オプション" または "既定" を使います。

  • 設定がポップアップではなく直接 Web にリンクされている場合は、ハイパーリンクとしてスタイルを設定した "ヘルプ (オンライン)" や "Web フォーラム" など、ユーザーに視覚的なヒントを与えます。 Web への複数のリンクは、1 つの設定を使ってポップアップにまとめることを検討してください。 たとえば、"バージョン情報" の設定では、使用条件、プライバシー ポリシー、アプリのサポートへのリンクを含むポップアップが開くようにします。

  • 使用頻度の高い設定にそれぞれ独自のエントリを割り当てられるように、使用頻度の低い設定は 1 つのエントリにまとめます。 情報のみを含むコンテンツやリンクは、"バージョン情報" の設定に配置します。

  • [アクセス許可] ウィンドウの機能と重複しないようにします。 このウィンドウは既定で用意されており、その内容を変更することはできません。

  • 設定ポップアップへの設定コンテンツの追加

  • コンテンツは 1 列で上から下に表示し、必要に応じてスクロールできるようにします。 スクロールの長さは画面の高さの 2 倍までに抑えます。

  • アプリ設定では次のコントロールを使います。

    • トグル スイッチ: ユーザーが値をオンまたはオフに設定できるようにする場合。
    • ラジオ ボタン: ユーザーが相互排他的な関連するオプション (5 個まで) の中から 1 つの項目を選択できるようにする場合。
    • テキスト入力ボックス: ユーザーがテキストを入力できるようにする場合。 ユーザーから取得するテキストの種類 (メール、パスワードなど) に応じた種類のテキスト入力ボックスを使います。
    • ハイパーリンク: アプリ内の別のページや外部 Web サイトに移動する場合。 ユーザーがハイパーリンクをクリックすると、設定ポップアップは閉じられます。
    • ボタン: ユーザーが現在の設定ポップアップを閉じることなく即座に操作を開始できるようにする場合。
  • 使用できないコントロールがある場合は、説明用のメッセージを追加します。 使用できないコントロールの上に、このメッセージを配置します。

  • 設定ポップアップとヘッダーがアニメーション化された後で、コンテンツとコントロールを単一のブロックとしてアニメーション化します。 enterPage または EntranceThemeTransition アニメーションを使って、100 ピクセル左のオフセットでコンテンツをアニメーション化します。

  • 必要に応じて、コンテンツの整理と明確化の助けになるように、セクション ヘッダー、段落、ラベルを使います。

  • 設定を繰り返し表示する必要がある場合は、UI の階層を追加するか、展開/折りたたみモデルを使います。階層の深さは 2 階層までに抑えます。 たとえば、天気予報アプリの都市別の設定では、都市の一覧を表示し、ユーザーが都市をタップしたときに、新しいポップアップを開くか、展開して設定オプションを表示できるようにします。

  • コントロールや Web コンテンツの読み込みに時間がかかる場合は、進行状況不定コントロールを使ってユーザーに読み込み中であることを示します。 詳しくは、「プログレス コントロールのガイドライン」をご覧ください。

  • 移動や変更をコミットするためのボタンは使いません。 別のページに移動するにはハイパーリンクを使います。また、ボタンを使って変更をコミットする代わりに、ユーザーが設定ポップアップを閉じたときにアプリ設定の変更を自動的に保存します。