次の方法で共有


Windows ストア アプリの UX チェック リスト

アプリの認定をスムーズに進め、優れたユーザー エクスペリエンスを実現するには、このチェック リストを使ってアプリが UX ガイドラインに従っていることを確認してください。

必須

次の表に示しているのは、最も優先度の高いアプリ向け UX ガイドラインです。Windows ストアでアプリが認定されるには、このセクションに示したすべてのガイドラインに従う必要があります。

チェック 説明 ガイダンス
[ ] アプリがユーザーに独特かつ独創的な価値を提供する。 Windows ストア アプリの計画
[ ] アプリが単に Web サイトを Windows ストア アプリとしてラップしたものではない。 Windows ストア アプリの計画
[ ] 各アプリはインストール後にタイルを 1 つ表示すること。アプリのタイルの画像は、アプリのコンテンツに関連していると合理的に判断できる必要があります。 タイル、バッジ、トースト通知の操作 (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] アプリのタイルが標準のタイル テンプレートを使っている。 タイル、バッジ、トースト通知の操作 (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] アプリに広告を表示する目的で、説明、タイル、通知、アプリ バー、または端からのスワイプ操作を使っていない。 広告のガイドライン
[ ] アプリがタッチ入力を完全にサポートし、キーボード入力とマウス入力を完全にサポートしている。 ユーザー操作への応答 (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] タッチ ジェスチャとタッチ操作が Windows のタッチ言語に準拠している。Windows のタッチ言語にないタッチ ジェスチャを使用していない。 タッチ パターン
[ ] Windows 8 のマウス言語を使っている。 マウス操作への反応 (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] 対話型の UI 要素が視覚的なフィードバックを返す。対話型でない UI 要素が視覚的なフィードバックを返さない。 視覚的なフィードバックのガイドライン (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] ユーザーがアプリのサイズを変更したときにも (既定の最小サイズまで縮小されたときにも) アプリの機能が損なわれない。 サイズ変更のガイドライン」および「幅の狭いレイアウトのガイドライン
[ ] 横方向レイアウトで、アプリの表示サイズが 1024 x 768 の場合にアプリのすべての機能を利用できる。 画面に合わせたスケーリングのガイドライン
[ ] アプリ自身でプログラムを終了したり、アプリを終了するための UI 要素を表示したりしない。Windows 8 プロセス ライフタイム管理 (PLM) によって、Windows ストア アプリは自動的に終了します。 アプリの中断と再開のガイドライン
[ ] アプリを中断した後、適切な状態に再開できる。 アプリの中断と再開のガイドライン
[ ] アプリに下部のアプリ バーを実装する場合、下部から上にスワイプすることでそのアプリ バーが表示される。 アプリ バーのガイドラインとチェック リスト (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] アプリにナビゲーション バーを実装する場合、そのバーは上部から下部へのスワイプによって表示される必要があります。 アプリ バーのガイドラインとチェック リスト (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] アプリが通知のシステム設定に従い、通知が無効になっているときでも機能を維持する。 タイル、バッジ、トースト通知の操作 (JavaScript と HTML または C#/VB/C++ と XAML)

 

強く推奨

アプリがこのセクションのガイドラインに従うことを強くお勧めします。次のガイドラインは、適切に設計されたアプリを開発するために役立ちます。

チェック 説明 ガイダンス
アプリの目標
[ ] アプリにユーザー エクスペリエンスの明確な目標があり、"最適な条件" が明示されている。 Windows ストア アプリの計画
[ ] アプリのメイン ページまたはハブ ページが、Web サイトを埋め込んだ場合よりも機能性に優れている。 Windows ストア アプリの計画

ナビゲーション パターン
レイアウトと整列
[ ] コンテンツを整理するために、アプリのすべてのページとビューで整列、タイポグラフィ、空白を統一した方法で適用している。 アプリのページのレイアウト

文字体裁のガイドライン
[ ] アプリのコンテンツを整理する主要な手段としてクロム (直線、ボックスなどの UI 要素) を使っていない。 アプリのページのレイアウト

設計のケース スタディ: Web サイトから Windows ストア アプリへ
[ ] アプリにハブ ページがある場合、ハブ ページがアプリの他のページへの単なるメニューではない。ハブ ページには有用なコンテンツが含まれていることが必要です。 ナビゲーション パターン
グリッド
[ ] UI 要素がグリッドに合わせて配置されている。 アプリのページのレイアウト
シルエット
[ ] アプリのタイトルがすべてのページで一貫した方法で配置されている。 アプリのページのレイアウト
[ ] 余白がすべてのページで一貫している。 アプリのページのレイアウト
[ ] アプリに柔軟なレイアウトを使う場合、左余白が 120px 以上である。 アプリのページのレイアウト
[ ] 下余白が 50px 以上である。 アプリのページのレイアウト
パンとスクロール
[ ] ハブまたはメイン ページが水平方向にパンされる場合、垂直方向にスクロールする一覧でスナップ位置を使っている。 パンのガイドライン (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] ハブまたはメイン ページが垂直方向にパンされる場合、水平方向にスクロールする一覧でスナップ位置を使っている。 パンのガイドライン (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] フリーフォーム パンが必要なコンテンツ以外では、ページを垂直方向と水平方向の両方にパンしないようにしている。 パンのガイドライン (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] ページがスクロールに対応する場合、パン インジケーターを表示している。 パンのガイドライン (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] 水平方向にパンするページに、垂直方向にパンするリストが複数含まれていない。 パンのガイドライン (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] 垂直方向にパンするページに、水平方向にパンするリストが複数含まれていない。 パンのガイドライン (JavaScript と HTML または C#/VB/C++ と XAML)
文字体裁
[ ] アプリで一定の書体サイズと書体太さ (type ramp) を使っている。 文字体裁のガイドライン

フォントのガイドライン
[ ] フォントやフォント階層がすべてのページで一貫している。 文字体裁のガイドライン

フォントのガイドライン
[ ] 大文字と小文字の使い分けが一貫している。 文字体裁のガイドライン
[ ] アプリに誤字や脱字が含まれていない。 文字体裁のガイドライン
[ ] アプリに途中で途切れた文章が含まれていない。 文字体裁のガイドライン
ホストされた Web コンテンツ
[ ] ホストされた Web コンテンツがアプリのハブ ページの <iframe> に含まれていない。 クイック スタート: 単一ページ ナビゲーションの使用
アプリの <iframe> に、ホストされた Web コンテンツが含まれている場合、アプリに戻る方法を用意している。 クイック スタート: 単一ページ ナビゲーションの使用
[ ] アプリの直接的なコンテンツではない Web ページは、外部ブラウザーで開く。 リンクのガイドラインとチェック リスト
[ ] ホストされた Web コンテンツを、アプリのシルエットに合わせて配置している。 アプリのページのレイアウト
ブランド設定
[ ] アプリにスプラッシュ画面の画像 (620x320 ピクセル) を用意している。 スプラッシュ画面のガイドラインとチェック リスト
[ ] スプラッシュ画面に広告が含まれていない。 スプラッシュ画面のガイドラインとチェック リスト
[ ] スプラッシュ画面に、アプリやヘルプに関する情報など、アプリの基本的な情報が含まれていない。 スプラッシュ画面のガイドラインとチェック リスト
[ ] スプラッシュ画面からアプリの初期画面に移行するときに、空白の画面を表示しない。 スプラッシュ画面のガイドラインとチェック リスト
[ ] ロゴが、ページ タイトルの適切な配置の妨げにならず、他のコンテンツに干渉していない。 ブランド設定
[ ] ブランドなどのアプリ要素の中で Windows 以外のプラットフォームが参照されていない。 ブランド設定
[ ] コンテンツのスキャンや読み取りの支障にならない背景画像が使われている。 ブランド設定
アプリ バー
[ ] 下部のアプリ バーにナビゲーションが含まれず、コマンドのみが含まれている。 アプリ バーのガイドラインとチェック リスト (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] ナビゲーション バーにコマンドが含まれず、ナビゲーションのみが含まれている。 アプリ バーのガイドラインとチェック リスト (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] アプリ バーに、チャーム内の操作と同じ操作が含まれていない。ただし印刷操作は例外とします。印刷操作は下部のアプリ バーに配置できます。
[ ] ユーザーがページをタップしたとき、および画面の下端または上端からスワイプしたときに、アプリ バーが閉じられる。 アプリ バーのガイドラインとチェック リスト (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] ユーザーがスワイプして項目を選んだとき、アプリ バーが開き、選ばれている項目に対して実行できる操作が表示される。 アプリ バーのガイドラインとチェック リスト (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] アプリの下部のアプリ バーは一度に 1 つのみ表示される。 アプリ バーのガイドラインとチェック リスト (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] 状況依存のコマンドが下部のアプリ バーの左側に表示される (右から左に記述する言語の場合は右側)。 アプリ バーのガイドラインとチェック リスト (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] アプリ バーのボタンのテキストが中央揃えである。 アプリ バーのガイドラインとチェック リスト (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] アプリ バーに重複するコマンドがない。 アプリ バーのガイドラインとチェック リスト (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] 複数のページ間で共有されるコマンドが、アプリ バー内の同じ場所にできる限り近づけて配置されている。 アプリ バーのガイドラインとチェック リスト (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] アプリで既にあるグリフを新しい目的に使用していない。その操作またはコマンドに対応するアイコンが存在しない場合は、アイコンを作成してください。 WinJS.UI.AppBarIcon

AppBar ボタン スタイルのイメージ
ポップアップ
[ ] ユーザーがポップアップの内容を変更したときに、その変更内容がコンテンツにすぐに反映される。 ポップアップのガイドラインとチェック リスト
[ ] アプリの情報通知 UI または状況依存 UI としてモーダル ダイアログを使用していない。情報通知 UI にはポップアップを使い、状況依存 UI にはショートカット メニューを使います。 UI のレイアウト (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] ポップアップはユーザーがページをタップしたときに閉じるようになっているか、[閉じる] または [キャンセル] のコマンドが用意されている。 ポップアップのガイドラインとチェック リスト
[ ] ポップアップが、関連付けられているアプリ バーのボタンの近くに表示される。 ポップアップのガイドラインとチェック リスト
[ ] ポップアップが、ポップアップを開いたコマンドを覆い隠さない。 ポップアップのガイドラインとチェック リスト
[ ] ポップアップに、浮き出したり飛び出したり見えるようにするための影などの要素が含まれていない。Windows の各要素の表示はフラットとし、浮き出し効果は使いません。 ポップアップのガイドラインとチェック リスト
[ ] ポップアップにナビゲーションが含まれている場合、戻るボタンが含まれている。たとえば、設定ウィンドウで、ユーザーが [バージョン情報] や [フィードバック] などの設定ポップアップに移動できる場合、これらの設定ポップアップには設定ウィンドウに戻るための戻るボタンを設置します。 ポップアップのガイドラインとチェック リスト
[ ] デバイスの画面の端に沿って配置されるポップアップが、端をスワイプする操作の邪魔にならない。 ポップアップのガイドラインとチェック リスト
ショートカット メニュー
[ ] スワイプして直接選択できるオブジェクトが、ショートカット メニューを持たない。 ショートカット メニューのガイドラインとチェック リスト
[ ] アプリ バーとショートカット メニューでコマンドが重複していない。 ショートカット メニューのガイドラインとチェック リスト
メッセージ ダイアログ
[ ] エラー メッセージにスタック トレースまたはデバッグ情報が含まれない。 メッセージ ダイアログのガイドラインとチェック リスト
[ ] ダイアログに表示されるエラー メッセージまたは確認用の質問が、アプリ全体に適用される。 メッセージ ダイアログのガイドラインとチェック リスト

UI のレイアウト (JavaScript と HTML または C#/VB/C++ と XAML)
並べ替えとフィルター
[ ] アプリ バーから開かれるフィルターで、ポップアップを使っている。 ナビゲーション パターン
[ ] 並べ替えポップアップおよびフィルター ポップアップが、関連付けられているアプリ バーのボタンの近くに表示される。 ナビゲーション パターン

ポップアップのガイドラインとチェック リスト
[ ] 並べ替えポップアップおよびフィルター ポップアップが、ユーザーがページをタップしたときに閉じるようになっている。 ポップアップのガイドラインとチェック リスト
[ ] 並べ替えとフィルターの UI がキャンバスに配置され、アプリの並べ替え処理またはフィルター処理が複数の条件に基づいて実行される場合、並べ替えオプションとフィルター オプションがドロップダウン リストに表示される。 ナビゲーション パターン

ポップアップのガイドラインとチェック リスト
[ ] タブを模倣するなどの目的で、並べ替えやフィルターをナビゲーションに利用していない。並べ替えとフィルターは、ユーザーが簡単にデータを見やすく表示できるようにする目的で使用してください。 ナビゲーション パターン
コントロール
[ ] 独立した編集モードや並べ替えモードがなく、アプリで直接的に操作が実行できる。 コマンド実行の設計

設計のケース スタディ: iPad から Windows ストア アプリへ
[ ] 項目を選択して編集または並べ替えを実行するためのカスタム操作やカスタム ジェスチャがない。 クロススライドのガイドライン
[ ] 項目のチェック マークが、項目が選択されていることを示すためだけに使用されている。 クロススライドのガイドライン
[ ] ユーザーが項目を選択できる場合、選択された項目に関連付けられているコマンドが 1 つ以上ある。 クロススライドのガイドライン

アプリ バーのガイドラインとチェック リスト (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] ユーザーが先に進むために必要なコマンドがキャンバスに配置されている。 UI のレイアウト (JavaScript と HTML または C#/VB/C++ と XAML)
ナビゲーション
[ ] キャンバス領域、ページ領域、または下部のアプリ バーに、アプリのナビゲーション コントロールが配置されていない。ナビゲーション コントロールはナビゲーション バーに配置する必要があります。

  戻るボタンは例外であり、キャンバスに配置することができます。

ナビゲーション パターン
[ ] キャンバス上のタブをナビゲーションに使用していない。 設計のケース スタディ: Web サイトから Windows ストア アプリへ
[ ] セクション ヘッダーまたは詳細ヘッダーから、サポートするセクション ページまたは詳細ページが開かれる。 ナビゲーション パターン
[ ] セクション ヘッダーに、より多くのコンテンツを表示するための操作可能な UI が表示される。たとえば、山形のインジケーターや、[<x> をすべて表示] などのテキストです。 ナビゲーション パターン
[ ] 戻るボタンがページの左上隅またはナビゲーション バーの左端に配置されている。右から左方向に記述する言語の場合は、戻るボタンをページの右上隅またはナビゲーション バーの右端に配置します。 ナビゲーション パターン
[ ] ページまたはナビゲーション バーに、無効にされた戻るボタンがない。 ナビゲーション パターン
セマンティック ズーム
[ ] アプリ内の別のページに移動する目的で、セマンティック ズームを使っていない。セマンティック ズームは、同じページ内の別の場所に移動するために使います。 セマンティック ズームのガイドライン (JavaScript と HTML または C#/VB/C++ と XAML)

セマンティック ズーム コントロールのガイドラインとチェック リスト (C#/VB/C++ と XAML)
[ ] 現在のビューに 8 ページを超えるコンテンツが含まれている場合、セマンティック ズームを使っている。 セマンティック ズームのガイドライン (JavaScript と HTML または C#/VB/C++ と XAML)
タッチとジェスチャ
[ ] アプリの UI 要素、コントロール、その他の部分が、Windows の画面端のジェスチャまたは画面端のジェスチャに関連付けられた UI の邪魔になっていない。 一般的なユーザー操作のガイドライン (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] 選択された状態がない項目に、ジェスチャを選択するためのスワイプ操作が実装されていない。 クロススライドのガイドライン
[ ] 1 つの UI 要素に複数のコマンドが関連付けられていない。1 つの UI 要素に複数のコマンドが関連付けられていると、タッチ ジェスチャに多義性が生じます。 一般的なユーザー操作のガイドライン
[ ] タッチ ジェスチャが重ならない。アプリのスクロール可能なビューアーの中に表示される、スクロール可能なマップ コントロール、トグル スイッチ、スライダーなどのコントロールが、パンまたはスクロールの妨げにならない。 一般的なユーザー操作のガイドライン
タッチ ターゲット
[ ] タッチ操作がユーザーにフィードバックを返す。 タッチ パターン
[ ] 操作できない項目は、ユーザーにタッチのフィードバックを返さない。 タッチ パターン
[ ] タッチ ダウン時にコミットしない。操作を元に戻せるようにします。 タッチ パターン
[ ] ユーザーが項目のドラッグを中止した場合、タッチ操作が取り消される。 タッチ パターン
[ ] タッチ ターゲットが 5 mm より大きい。 ターゲットの設定のガイドライン (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] タッチ ターゲットの間に少なくとも 2 サブ単位 (10 ピクセル) の間隔が空けられている。 ターゲットの設定のガイドライン
テキスト入力
[ ] Windows ソフト キーボードまたは関連付けられている入力方式エディター (IME) を使っている。カスタム ソフト キーボードは使わないでください。 IME 開発のガイドラインとチェック リスト

タッチ キーボードと手書きパネルのガイドライン
[ ] ソフト キーボードが、テキスト入力シナリオを実行するために必要なコントロールを覆い隠していない。たとえば、ユーザー名またはパスワードのテキスト ボックスに入力する際に表示されるソフト キーボードが、サインイン ボタンを覆い隠さないようにします。 タッチ キーボードと手書きパネルのガイドライン
アニメーション
[ ] アプリの必要な場所にアニメーションを実装している。 UI のアニメーション化 (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] カスタム アニメーションによってパフォーマンスが低下せず、ユーザー エクスペリエンスが悪化していない。 アニメーション
[ ] アニメーションと切り替えのパフォーマンスが良好である。たとえば、ユーザーがタイルの再描画を意識しないようにすることが必要です。 アニメーション

アニメーションのスムーズ化
画面のサイズと向き
[ ] 柔軟なレイアウトのアプリが大きな画面での再配置に対応している。 レイアウトのガイドライン

画面に合わせたスケーリングのガイドライン
[ ] 大画面や高解像度画面で表示したときに、画像に不自然さや劣化を感じないようにする。 画面に合わせたスケーリングのガイドライン

ピクセル密度に合わせたスケーリングのガイドライン
[ ] デバイスとモニターの縦向き使用をサポートしている。アプリは、横幅よりも高さの方が大きくなるようなサイズ変更をサポートする必要があります。 サイズ変更のガイドライン
[ ] ユーザーがアプリのサイズを変更したときに、アプリのコンテキストと状態が維持される。 サイズ変更のガイドライン
[ ] 既定の最小サイズまで縮小したときにも、アプリのすべての機能を使用できる。アプリが既定よりも小さい最小サイズをサポートしている場合、その最小サイズでも、できるだけ多くの機能を維持する必要があります。 サイズ変更のガイドライン

幅の狭いレイアウトのガイドライン
[ ] ユーザーがアプリのサイズを変更したときに、アプリのレイアウトとすべてのコントロールが適切に変化する。UI とコントロールは、どのような大きさのウィンドウでも使用できる必要があります。 サイズ変更のガイドライン
[ ] アプリが 320 ~ 499 ピクセルの幅をサポートする場合、幅が狭いときに、幅の狭い縦表示に切り替える。垂直方向のパンに切り替え、余白、ヘッダー、戻るボタン、切り替えアニメーションのオフセットを小さくします。 幅の狭いレイアウトのガイドライン
[ ] プログラムからアプリのサイズを変更しない。ユーザーはアプリのサイズをいつでも変更できます。 幅の狭いレイアウトのガイドライン
[ ] ウィンドウのサイズが変更されたときにアプリの別の部分に切り替えない。 幅の狭いレイアウトのガイドライン
コントラクトとチャーム
[ ] アプリのキャンバスまたはアプリ バーで、設定、共有、またはデバイス チャームが重複していない。 コマンド実行パターン
[ ] アプリの画面上のサイズ、向き、位置にかかわらず、アプリがチャームの使用をサポートしている。チャームはユーザーが最後に使用したアプリに適用されます。 幅の狭いレイアウトのガイドライン
検索コントラクトと検索チャーム
[ ] アプリのページ内検索に検索コントラクトを使っていない。ページ内検索コントロールをアプリ バーに配置してください。 ページ内検索のガイドラインとチェック リスト (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] アプリの検索コントロールがキャンバスにある場合、検索コントラクトを開く。 検索のガイドラインとチェック リスト
共有コントラクトと共有チャーム
[ ] 共有機能が実装されている場合、共有チャームを使って共有する。 コンテンツの共有のガイドライン
[ ] アプリに共有チャームが実装されているが、現在のコンテキストに共有できるコンテンツがない場合、適切なメッセージが表示される。 コンテンツの共有のガイドライン
設定コントラクトと設定チャーム
[ ] 構成、オプション、アカウント管理を含むアプリ設定が、アプリのページやカスタム ポップアップではなく、設定チャームを使って実装されている。 アプリ設定のガイドライン
[ ] バージョン情報、プライバシーに関する声明、使用条件、ヘルプ、ご意見ご感想のページが、設定チャームを使って実装されている。 アプリ設定のガイドライン
[ ] アプリの設定ウィンドウでコントロールが一貫した方法で使われている。 アプリ設定のガイドライン
[ ] ユーザーがアプリをタップしたときに設定ウィンドウが閉じる。 アプリ設定のガイドライン
[ ] 設定ウィンドウに戻るボタンがある。 アプリ設定のガイドライン
[ ] 設定ポップアップがアプリの現在の幅に収まっている。 幅の狭いレイアウトのガイドライン
ファイル ピッカー
[ ] アプリでファイルを開く、保存する、アクセスする際にファイル ピッカーを使っている。 ファイル ピッカーのガイドライン

ファイル ピッカー コントラクトのガイドラインとチェック リスト
[ ] コンテンツの参照または使用を目的としてファイル ピッカーを使っていない。 ファイル ピッカーのガイドライン
タイル
[ ] アプリでワイド タイルを使う場合、タイル用のライブ コンテンツが用意されている。 タイルとバッジのガイドラインとチェック リスト
[ ] アプリのタイルの色、フォント、アイコンが、アプリの色、フォント、アイコンと一致している。 タイルとバッジのガイドラインとチェック リスト
[ ] タイルに表示されるアプリのアイコンまたはロゴが高品質であり、不自然な部分が目立たない。 タイルとバッジのガイドラインとチェック リスト
[ ] タイルに表示されるテキストに誤字や脱字がない。 タイルとバッジのガイドラインとチェック リスト
[ ] セカンダリ タイルが静的なコンテンツにリンクしていない。 セカンダリ タイルのガイドラインとチェック リスト
[ ] セカンダリ タイルが、ユーザーがアプリを操作するためのコマンド ボタンではない。 セカンダリ タイルのガイドラインとチェック リスト
[ ] セカンダリ タイルから関連コンテンツに直接移動できる。アプリのホーム ページを開かないようにしてください。 セカンダリ タイルのガイドラインとチェック リスト
[ ] セカンダリ タイルを使って広告を表示していない。 セカンダリ タイルのガイドラインとチェック リスト
トースト通知
[ ] トースト通知を使ってエラー メッセージを表示していない。 トースト通知のガイドラインとチェック リスト
[ ] トースト通知がアクション可能であり、ユーザーがタップするとアプリに移動できる。 トースト通知のガイドラインとチェック リスト
[ ] トースト通知を使って広告を表示していない。 トースト通知のガイドラインとチェック リスト
[ ] トースト通知を使って軽微な変更を通知していない。 トースト通知のガイドラインとチェック リスト
ローミング
[ ] ローミングされるデータが一貫した方法で正確にローミングされる。たとえば、データが特定のデバイスにローミングされ、別のデバイスにローミングされない必要があります。 アプリのデータのローミングのガイドライン
アカウント管理
[ ] アカウント管理機能が設定チャームから実装されている。 アプリ バーのガイドラインとチェック リスト (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] ユーザーが設定チャームからログアウトできる。 ログイン コントロールのガイドラインとチェック リスト
[ ] アプリからログインへのエントリ ポイントで設定チャームが開く。(例外: Web 認証) ログイン コントロールのガイドラインとチェック リスト
[ ] アプリで認証が不要である場合に、ログイン コントロールを表示しない。 ログイン コントロールのガイドラインとチェック リスト
[ ] 適切な場所で、標準的な Web 認証ダイアログを使っている。 Web 認証ブローカー

 

推奨

このセクションのガイドラインは、アプリのユーザー エクスペリエンスを向上することが目的です。

チェック 説明 ガイダンス
レイアウトと整列
[ ] すべてのアプリ ページ、すべてのビューで、コンテンツが左揃え (右から左方向の言語の場合は右揃え) である。 文字体裁のガイドライン
[ ] アプリのハブ ページまたはメイン ページに視覚的な変化が含まれている。 ナビゲーション パターン
シルエット
[ ] 列の幅が 560 ピクセル (28 単位) 以上である。 アプリのページのレイアウト
[ ] アプリで標準のシルエットを使う場合、次のガイダンスに従う必要があります。
  • ページ ヘッダーの高さは上から 100 ピクセル (5 単位) である。
  • ページ ヘッダーの左余白が 120 ピクセル (6 単位) である。
  • ページ ヘッダーは SegoeUI Stylistic Set 20 Light Weight を使う。
  • コンテンツ領域の上余白が 140 ピクセル (7 単位) である。
  • コンテンツ領域の左余白が 120 ピクセル (6 単位) である。
  • 水平方向にパンするコンテンツの場合、コンテンツ領域の下余白が 130 ピクセル (6.5 単位) 以下、50 ピクセル (2.5 単位) 以上である。
  • 画像、タイルなどの輪郭のはっきりした項目の場合、項目とそれに付随するテキストの間に 10 ピクセル (2 サブ単位) の横長の余白がある。
  • 画像、タイルなどの輪郭のはっきりした項目の場合、列と列の間に 10 ピクセル (2 サブ単位) の横長の余白がある。
  • 段組みの場合は、列と列の間に 40 ピクセル (2 単位) の横長の余白がある。
  • 画像、タイルなどの輪郭のはっきりした項目の場合、行内の項目の間に 10 ピクセル (2 サブ単位) の縦長の余白がある。
  • タイルとテキストから成るリストの場合、行内に並んだ項目間に 20 ピクセル (1 単位) の縦長の余白がある。
  • 項目のグループの項目間に、80 ピクセル (4 単位) の横長の余白がある。
アプリのページのレイアウト

文字体裁のガイドライン

フォントのガイドライン

パンとスクロール
[ ] 横方向にパンするページでは、コンテンツが左端までスクロールする。左の余白でコンテンツのスクロールが停止しないようにしてください。 パンのガイドライン (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] ページのすべての領域がパンとスクロールに応答する。 パンのガイドライン
文字体裁
[ ] アプリの書体見本 (type ramp) の書体サイズが 5 種類以下である。 文字体裁のガイドライン
[ ] アプリで文の大文字小文字を区別している。 文字体裁のガイドライン
ブランド設定
[ ] アプリに追加スプラッシュ画面がある場合、最初のスプラッシュ画面に似たデザインになっている。 スプラッシュ画面のガイドラインとチェック リスト
[ ] 1.4 倍 (868x420 ピクセル) と 1.8 倍 (1116x540 ピクセル) の拡大表示をサポートするための、スプラッシュ画面のアセットが含まれている。 スプラッシュ画面のガイドラインとチェック リスト
[ ] スプラッシュ画面が 7 秒を超えて表示される場合、アプリが読み込まれるまで待つ必要があることをユーザーに知らせる視覚的なヒントを表示する。 スプラッシュ画面のガイドラインとチェック リスト
[ ] ハブ ページにアプリのロゴが表示される。 ブランド設定
アプリ バー
[ ] アプリ バーに、戻るコマンドと進むコマンドが含まれていない。代わりに、キャンバス上にフリップ コントロールが含まれている必要があります。 アプリ バーのガイドラインとチェック リスト (JavaScript と HTML または C#/VB/C++ と XAML)

フリップビュー コントロールの追加 (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] アプリに空白のアプリ バーがない。 アプリ バーのガイドラインとチェック リスト (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] アプリ バーに、チャーム内の操作と同じ操作が含まれていない。 コマンド実行パターン
ショートカット メニュー
[ ] ショートカット メニューがターゲット オブジェクトの近くに配置されている。 ショートカット メニューのガイドラインとチェック リスト
並べ替えとフィルター
[ ] アプリのシナリオに必須の並べ替えコマンドとフィルター コマンドがキャンバスに配置されている。必須ではない並べ替えコマンドとフィルター コマンドは、アプリ バーに配置する必要があります。 ナビゲーション パターン
[ ] 1 つのアプリ バーに並べ替えボタンとフィルター ボタンがそれぞれ 1 つのみ配置されている。 アプリ バーのガイドラインとチェック リスト (JavaScript と HTML または C#/VB/C++ と XAML)
ナビゲーション
[ ] アプリの階層が 4 レベルを超えている場合、他のセクションへの移動にヘッダーのドロップダウン リストまたはナビゲーション バーを使っている。 ナビゲーション パターン
[ ] 戻るボタンがブラウザーの履歴ボタンのように動作するように、戻るボタンをバック スタックとして実装している。 ナビゲーション パターン
[ ] 戻るボタンが全画面表示のビデオに表示されない。戻るボタンはフェード アウトするか、ナビゲーション バーに配置する必要があります。 オーディオとビデオのパフォーマンス

メディア リソースの最適化
セマンティック ズーム
[ ] 現在のビューに 5 ページを超えるコンテンツが含まれている場合、セマンティック ズームを使っている。 セマンティック ズームのガイドライン (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] セマンティック ズーム ビューに、その他の関連情報が含まれている。 セマンティック ズームのガイドライン (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] ユーザーが縮小表示したときに、アプリで標準の左余白が確保される。 セマンティック ズームのガイドライン (JavaScript と HTML または C#/VB/C++ と XAML)
タッチ
[ ] 削除や閉じる操作など、正確さが求められる操作のタッチ ターゲットの大きさが 9 mm 以上である。 タッチ パターン
[ ] すべてのタッチ ターゲットの大きさが 7 mm 以上である。 タッチ パターン
キーボードとマウス
[ ] アプリがキーボードを使ったナビゲーションと選択操作をサポートしている。 一般的なユーザー操作のガイドライン (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] 一覧やグリッドなど、アプリのコンテンツ コンテナーが、マウス ホイールによるスクロールをサポートしている。 マウス操作 (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] マウス ポインターを項目上にホバーしたときのフィードバックをサポートしている。 マウス操作 (JavaScript と HTML または C#/VB/C++ と XAML)
アニメーション
[ ] アニメーションによってアプリ操作の自然な流れが妨げられない。 アプリでアニメーションを使う (JavaScript と HTML または C#/VB/C++ と XAML)
[ ] アニメーションによってユーザーの注意がそらされない。 アプリでアニメーションを使う (JavaScript と HTML または C#/VB/C++ と XAML)
画面のサイズと向き
[ ] 固定レイアウトを含むアプリが、どの画面サイズとピクセル密度でも中央に配置される。 画面に合わせたスケーリングのガイドライン
[ ] 画面の向きの切り替えがスムーズに実行される。再描画の処理が表示されないようにしてください。 サイズ変更のガイドライン
[ ] サイズ変更の切り替えがスムーズに実行される。再描画の処理が表示されないようにしてください。 サイズ変更のガイドライン
検索コントラクトと検索チャーム
[ ] アプリに検索可能なコンテンツがある場合、検索コントラクトを実装している。 検索のガイドラインとチェック リスト
[ ] 検索結果が返されなかった場合、意味のあるメッセージがユーザーに表示される。 検索のガイドラインとチェック リスト
[ ] 検索結果と同時に検索条件も表示される。 検索のガイドラインとチェック リスト
[ ] アプリに検索コントラクトが実装されている場合、検索入力を有効にしている。 検索のガイドラインとチェック リスト
共有コントラクトと共有チャーム
[ ] 共有可能コンテンツがあるアプリに、共有ソース コントラクトを実装している。 コンテンツの共有のガイドライン
[ ] コンテンツの発行、保存、作成を実行できるアプリが、共有ターゲット コントラクトを実装している。 コンテンツの共有のガイドライン
設定コントラクトと設定チャーム
[ ] ユーザーが設定ウィンドウで変更した設定が直ちにコミットされる。 アプリ設定のガイドライン
[ ] 設定ウィンドウで無効になっているコントロールに、無効になっている理由を説明するメッセージが表示される。 アプリ設定のガイドライン
[ ] 設定ポップアップが、狭い幅 (346 ピクセル) または広い幅 (646 ピクセル) のどちらかである。 アプリ設定のガイドライン
ファイル ピッカー
[ ] アプリに保存場所がある場合、ファイル オープン ピッカー コントラクトを実装している。 ファイル ピッカー コントラクトのガイドラインとチェック リスト
タイル
[ ] アプリに動的コンテンツがある場合、ライブ タイルを実装している。 タイルとバッジのガイドラインとチェック リスト
[ ] タイルの名前またはロゴが重複していない。 タイルとバッジのガイドラインとチェック リスト
[ ] ワイド セカンダリ タイルにライブ コンテンツが含まれている。 セカンダリ タイルのガイドラインとチェック リスト
トースト通知
[ ] アプリが画面に表示されているときに、トーストが表示されない。 トースト通知のガイドラインとチェック リスト
[ ] トースト通知に、通知を閉じるための X 型のアイコンがない。 トースト通知のガイドラインとチェック リスト
ローミング
[ ] アプリの設定、基本設定、アクティビティの履歴、お気に入り、ユーザー定義の一覧など、適切なデータがローミングされる。 アプリのデータのローミングのガイドライン

 

関連トピック

Windows ストア アプリ UX のテスト ケース