エクスポート (0) 印刷
すべて展開
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

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

Applies to Windows only

あらゆる Windows ストア アプリに既定で設定ウィンドウが用意されています。設定ウィンドウの上部には、アプリ設定の"エントリ ポイント"の一覧が表示されます。各エントリ ポイントから開いた設定ポップアップには、設定オプション自体が表示されます。このトピックでは、アプリ設定を作成し表示する際のベスト プラクティスについて説明します。

この機能の実際の使い方については「アプリの機能の概要」シリーズの次のトピックをご覧ください:  Windows ストア アプリ UI の概要

ユーザーが画面の端をスワイプしてチャームを表示し、設定チャームを押すと、設定ウィンドウが表示されます。

OneDrive アプリの設定ポップアップ。

  Windows ストア アプリのあらゆる設定ウィンドウには既定で [アクセス許可][評価とレビュー] という 2 つのエントリ ポイントが追加されます。アプリを Windows ストア経由でインストールしなかった場合 (たとえば、サイドローディングされた企業アプリである場合)、アプリの設定ウィンドウには [評価とレビュー] エントリ ポイントが表示されません。設定ウィンドウの下部には、音量、明るさ、電源などのシステム設定が表示されます。

アプリにアプリ設定を含めるかどうか

すべての Windows ストア アプリは設定ウィンドウを持ち、設定ウィンドウには既定で [アクセス許可][評価とレビュー] が表示されます。以下に、設定ウィンドウに追加する設定の例を挙げます。

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

アプリの通常のワークフローに含まれるコマンド (お絵かきアプリでのブラシ色の変更など) は設定ウィンドウに含めません。代わりに、よく使うコマンドは上部または下部のアプリ バーに配置します。コマンド配置について詳しくは、「コマンド パターン」をご覧ください。 「Guidelines for app bars」でアプリ バー使用時の推奨事項が説明されています。

推奨と非推奨

一般的な原則

  • 設定ウィンドウに、すべてのアプリ設定のエントリ ポイントを作成します。
  • 設定はシンプルにします。適切な既定値を定義し、設定の数は最小限にします。
  • 必要に応じて、アプリの UI 要素から設定ウィンドウにリンクすることや、特定の設定ポップアップにディープ リンクすることができます。たとえば、下部のアプリ バーにある "[ヘルプ]" ボタンや設定ウィンドウの "[ヘルプ]" エントリ ポイントからヘルプ設定ポップアップにリンクすることができます。
  • ユーザーが設定を変更したときは、アプリにすぐに変更が反映されるようにします。設定の変更は即座に適用するか、ユーザーがポップアップの操作を完了したらすぐに適用します。
  • WinJS (SettingsFlyout) と XAML (SettingsFlyout) で使用できる設定ポップアップ コントロールを使います。これらのコントロールは既定で UI 設計のガイドラインを実装しています (ガイドラインについては「設定 UI の設計」セクションで説明)。
  • お絵かきアプリでのブラシ色の変更など、アプリの通常のワークフローに含まれるコマンドはアプリ設定に含めないでください。そのようなコマンドは、アプリ バーまたはキャンバスに配置します。詳しくは、「コマンド パターン」で説明されている概念の概要と「アプリ バーのガイドライン」をご覧ください。
  • 設定ウィンドウのエントリ ポイントを使って、直接アクションを実行しないでください。エントリ ポイントは、設定ポップアップを開く必要があります。
  • 設定ウィンドウを移動に使わないでください。設定ウィンドウが閉じたときは、設定チャームをクリックしたときと同じアプリ内の位置に戻るようにします。移動には、上部のアプリ バーを使うことをお勧めします。
  • 設定ポップアップの各クラスを汎用のコントロールとして使わないでください。これは、設定ウィンドウのエントリ ポイントから起動される設定ポップアップにのみ使います。

エントリ ポイント

エントリ ポイントは、設定ウィンドウの上部に表示されるラベルで、設定ポップアップが開きます。設定ポップアップには、1 つ以上の設定オプションを表示できます。含める設定の一覧ができたら、エントリ ポイントに関する次のガイドラインを考慮してください。

  • 1 つのエントリ ポイントに類似したオプションや関連するオプションをまとめます。設定ウィンドウに 4 つを超えるエントリ ポイントの追加は避けます。
  • アプリのコンテキストに関係なく、同じエントリ ポイントを表示します。いくつかの設定が特定のコンテキストに適合しない場合は、設定ポップアップでそれらの設定を無効にします。
  • エントリ ポイントのラベルは、できればわかりやすい 1 単語にします。たとえば、アカウント関連の設定の場合は、エントリの名前を "アカウント設定" ではなく "アカウント" にします。設定のエントリ ポイントが 1 つだけ必要だが、設定のわかりやすいラベルが思い付かない場合は、"オプション" または "既定" を使います。
  • エントリ ポイントがポップアップではなく直接 Web にリンクされている場合は、ハイパーリンクとしてスタイルを設定した "ヘルプ (オンライン)" や "Web フォーラム" など、ユーザーに視覚的なヒントを与えます。Web への複数のリンクは、1 つのエントリ ポイントを使ってポップアップにまとめることを検討してください。たとえば、"バージョン情報" エントリ ポイントでは、使用条件、プライバシー ポリシー、アプリのサポートへのリンクを含むポップアップが開くようにします。
  • 使用頻度の高い設定にそれぞれ独自のエントリ ポイントを割り当てられるように、使用頻度の低い設定は 1 つのエントリ ポイントにまとめます。情報のみを含むコンテンツやリンクは、"バージョン情報" エントリ ポイントに配置します。
  • [アクセス許可] ウィンドウの機能と重複しないようにします。このウィンドウは既定で用意されており、その内容を変更することはできません。

設定 UI の設計

  WinJS と XAML で使用できる設定ポップアップ コントロールは、ヘッダーと境界線の色に関係する部分を除いて、既定で以下のガイドラインに従っています。これらのコントロール (SettingsFlyout (HTML) または SettingsFlyout (XAML)) を使うと、設定ポップアップが確実に UI のガイドラインに従い、一貫したユーザー エクスペリエンスを提供できます。
  • 設定ポップアップは常に設定ウィンドウのエントリ ポイントから起動します。
  • メイン アプリのコンテンツの上に表示され、ポップアップの外側をクリックしたり、アプリのサイズを変更すると非表示になる簡易非表示サーフェスを使います。これによって、ユーザーが設定をすばやく変更して、アプリの操作に戻ることができます。
  • 設定ポップアップは、チャームおよび設定ウィンドウと同じ側に表示されるようにします。画面のどちらの側に設定チャームを表示するかを決めるには、SettingsEdgeLocation プロパティを使います。
  • ポップアップは、画面の上端や下端からではなく、設定ウィンドウと同じ側からスライドさせます。
  • ポップアップは、向きにかかわらず全画面の高さでなければならず、狭い幅の場合は 346 ピクセル、広い幅の場合は 646 ピクセルにする必要があります。コンテンツに適した幅を選びます。カスタム サイズは作成しません。
  • ポップアップのヘッダーには戻るボタン、ポップアップを開いたエントリ ポイントの名前、アプリのアイコンを表示する必要があります。
  • ヘッダーの背景色は、タイルの背景色と同じにする必要があります。
  • 境界線の色は、ヘッダーと同じ色にしますが、20% 濃くします。
  • 設定のコンテンツは白い背景で表示します。

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

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

    • トグル スイッチ: ユーザーが値をオンまたはオフに設定できるようにする場合。
    • ラジオ ボタン: ユーザーが相互排他的な関連するオプション (5 個まで) の中から 1 つの項目を選択できるようにする場合。
    • テキスト入力ボックス: ユーザーがテキストを入力できるようにする場合。ユーザーから取得するテキストの種類 (メール、パスワードなど) に応じた種類のテキスト入力ボックスを使います。
    • ハイパーリンク: アプリ内の別のページや外部 Web サイトに移動する場合。ユーザーがハイパーリンクをクリックすると、設定ポップアップは閉じられます。
    • ボタン: ユーザーが現在の設定ポップアップを閉じることなく即座に操作を開始できるようにする場合。
  • 使用できないコントロールがある場合は、説明用のメッセージを追加します。使用できないコントロールの上に、このメッセージを配置します。
  • 設定ポップアップとヘッダーがアニメーション化された後で、コンテンツとコントロールを単一のブロックとしてアニメーション化します。enterPage または EntranceThemeTransition アニメーションを使って、100 ピクセル左のオフセットでコンテンツをアニメーション化します。
  • 必要に応じて、コンテンツの整理と明確化の助けになるように、セクション ヘッダー、段落、ラベルを使います。
  • 設定を繰り返し表示する必要がある場合は、UI の階層を追加するか、展開/折りたたみモデルを使います。階層の深さは 2 階層までに抑えます。たとえば、天気予報アプリの都市別の設定では、都市の一覧を表示し、ユーザーが都市をタップしたときに、新しいポップアップを開くか、展開して設定オプションを表示できるようにします。
  • コントロールや Web コンテンツの読み込みに時間がかかる場合は、進行状況不定コントロールを使ってユーザーに読み込み中であることを示します。詳しくは、「プログレス コントロールのガイドライン」をご覧ください。
  • 移動や変更をコミットするためのボタンは使いません。別のページに移動するにはハイパーリンクを使います。また、ボタンを使って変更をコミットする代わりに、ユーザーが設定ポップアップを閉じたときにアプリ設定の変更を自動的に保存します。

関連トピック

デザイナー向け
レイアウト
コマンド パターン
Guidelines for app help
Guidelines for app bars
選択コントロールのガイドライン
開発者向け (HTML)
UI のレイアウト
WinJS.UI.SettingsFlyout
SettingsCommand
ApplicationSettings
Quickstart: Adding app settings
Quickstart: Add app help
コントロールの一覧
開発者向け (XAML)
UI のレイアウト
SettingsFlyout
SettingsCommand
ApplicationSettings
Quickstart: Add app settings
Quickstart: Add app help
コントロールの一覧
サンプル
アプリケーション設定のサンプルに関するページ

 

 

表示:
© 2015 Microsoft