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

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

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

アプリ設定ページに属するアプリ オプションの例を次に示します。

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

一般的なアプリ ワークフローの一部であるコマンド (アート アプリのブラシ サイズの変更など) は、設定ページに含めることはできません。 コマンドの配置の詳細については、「 コマンドデザインの基本を参照してください。

一般的な推奨事項

• 設定ページをシンプルにし、バイナリ (オン/オフ) コントロールを使用します。 切り替えスイッチは、通常、バイナリ設定に最適なコントロールです。
• ユーザーが最大 5 つの相互排他的な関連オプションのセットから 1 つの項目を選択できるようにする設定では、 radio ボタンを使用します。
• アプリの設定ページで、すべてのアプリ設定のエントリ ポイントを作成します。
• 設定をシンプルに保ちます。 スマートな既定値を定義し、設定の数を最小限に抑えます。
• ユーザーが設定を変更すると、アプリはすぐに変更を反映する必要があります。
• 一般的なアプリ ワークフローの一部であるコマンドは含めないでください。

エントリーポイント

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

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

NavigationView レイアウトの場合、アプリ設定はナビゲーションの選択肢の一覧の最後の項目であり、下部にピン留めする必要があります。 NavigationView には、この目的のための組み込みの設定項目が用意されています。 IsSettingsVisible プロパティを true に設定すると、ナビゲーション ウィンドウの下部に [設定] エントリが自動的に表示されます。

コマンド バー

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

レイアウト

アプリ設定ページが全画面表示で開き、ウィンドウ全体が表示されます。 最大幅が制限されたスクロール可能なレイアウト (約 1000 ~ 1100 px) を使用して、ワイド ディスプレイでコンテンツを読み取ることができるようにします。 BodyStrong テキスト スタイルを使用して、セクション ヘッダーの下の関連設定をグループ化します。

SettingsCard および SettingsExpander コントロールを使用して、Windows Community Toolkit から設定ページを作成します。 これらのコントロールは、ヘッダー、説明、アイコン、およびカードの右側に配置されたアクション コントロールを備えた、一貫性のあるアクセシビリティの高いレイアウトを提供します。

完全な実装例については、WinUI ギャラリーの設定ページ および Windows Community Toolkit SettingsControls サンプルを参照してください。

設定カード

個々の 設定には SettingsCard を使用します。 各カードには、 カードのコンテンツとして配置されたヘッダー、省略可能な 説明、省略可能な HeaderIcon、およびアクション コントロール ( ToggleSwitch、 ComboBox、 Buttonなど) があります。 IsClickEnabled プロパティを true に設定すると、カード全体がクリック可能になり、ナビゲーション スタイルのエントリに便利です。

設定展開ツール

設定に必要に応じて表示するサブオプションがある場合は、 SettingsExpander を使用します。 エキスパンダーは、ヘッダー行のプライマリ アクション コントロールと、SettingsCard コレクション内の追加のItems項目を表示します。 これにより、ページがコンパクトに保たれた状態で、高度なオプションが表示されます。 1 レベルより深い展開機能を入れ子にしないでください。

アプリテーマの設定

アプリでユーザーがアプリのカラー モードを選択できる場合は、内のSettingsCardを使用してこれらのオプションを表示します。 オプションには、次の情報が表示されます。

• 光
• 暗い
• システム設定を使用する

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

セクションについて

Aboutセクションを、SettingsExpanderを使用して、設定ページの下部に配置することをお勧めします。 折りたたまれたヘッダー行には、アプリ名、アイコン、バージョン番号が表示されます。 展開領域には、次のものが含まれます。

• アプリのリポジトリまたは Web サイトへのリンク。
• ファイルのバグや要求機能へのリンク。
• HyperlinkButton コントロールとしての依存関係と参照の一覧。
• 著作権表示、使用条件、プライバシーに関する声明のリンクなどの法的情報。

推奨されるページ コンテンツ

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

• 類似または関連する設定を 1 つのセクション ヘッダーの下にグループ化します。

• 設定の合計数を最大 4 または 5 に保つようにします。

• アプリのコンテキストに関係なく、同じ設定を表示します。 特定のコンテキストに関連しない設定がある場合は、SettingsCardを IsEnabled に設定してfalseを無効にします。

• 設定ヘッダーには、わかりやすい 1 単語のラベルを使用します。 たとえば、アカウント関連の設定には、"アカウント設定" ではなく "Accounts" という設定に名前を付けます。

• 設定が Web に直接リンクしている場合は、クリック可能な SettingsCard と IsClickEnabled="True" と適切なアクション アイコンを使用して外部ナビゲーションを示します。

• 使用頻度の低い設定を SettingsExpander に組み合わせて、共通の設定がそれぞれ独自の SettingsCardを持てるようにします。 情報のみを含むコンテンツまたはリンクを [概要] セクションに配置します。

• 必要に応じてスクロール可能な 1 つの列にコンテンツを上から下に表示します。

• アプリ設定には、次のコントロールを使用します。

  • 切り替えスイッチ: ユーザーが値をオンまたはオフに設定できるようにします。
  • ラジオ ボタン: ユーザーが相互に排他的な関連するオプションを 5 つまでのセットから 1 つの項目を選択できるようにします。
  • コンボ ボックス: ユーザーがコンパクトなドロップダウンで一連のオプションから選択できるようにします。
  • テキスト入力ボックス: ユーザーがテキストを入力できるようにします。 メールやパスワードなど、ユーザーから取得するテキストの種類に対応するテキスト入力ボックスの種類を使用します。
  • ハイパーリンク: ユーザーをアプリ内の別のページまたは外部 Web サイトに移動します。
  • ボタン: ユーザーが直ちにアクションを開始できるようにします。

• いずれかのコントロールが無効になっている場合は、わかりやすいメッセージを追加します。 Descriptionの SettingsCard プロパティを使用して、設定が使用できない理由を説明します。

• ユーザーが設定を変更すると、アプリはすぐに変更を反映する必要があります。確認ボタンは必要ありません。

関連記事

• SettingsCard と SettingsExpander (Windows Community Toolkit)
• コマンド設計の基本
• 進行状況コントロールのガイドライン
• アプリ データの保存と取得