MSDN ライブラリ
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

Windows Phone の基本的なグラフィックス、ビジュアル インジケーター、および通知

2013/12/05

対象: Windows Phone 8 | Windows Phone OS 7.1

美しさと直観的な操作が同じことを意味するのであれば、モバイル アプリには美しさが不可欠です。Windows Phone では、タイル、スプラッシュ スクリーン、アイコン、コントロール、およびナビゲーションのビジュアル要素が、アプリ内の関連タスク、優先順位、または操作に着目しながら、斬新かつ魅力的な方法で情報を表示します。アプリには、ライブ タイルのカスタム デザインやアニメーション アイコンだけでなく、アプリの読み込み中にそのアプリについてユーザーに紹介するスプラッシュ スクリーン イメージが必要になります。このセクションでは、こうしたビジュアル インジケーターについて説明します。

むやみにグラフィックを使うのはやめましょう。視覚に訴えるには、コンテンツと文字体裁を使用します。事実上装飾だけを目的としてビジュアル要素は使用しないでください。

モバイル プラットフォームでは、シンプルさが最大の魅力になります。アートを使用するのが適切な場所では、高品質のオリジナル グラフィック アート、ブランド、または写真を使用します。アプリが必要とする基準以上のアートを使用し、簡潔で明瞭、かつ知的な外観を実現してください。

このトピックは、次のセクションで構成されています。

タイルはアプリまたはそのコンテンツのわかりやすいショートカットで、電話のスタート ビューで設定できます。スタート画面に表示するタイルは、アプリのタイルをビューに "固定" することでカスタマイズできます。ライブ タイルは、アプリ情報またはアプリに関連する情報を表示できる点でアイコンよりも優れています。たとえば、天気のアプリのタイルには温度を動的に表示できます。この機能によりアプリがより便利になるので、この機能を積極的に使用することを強くお勧めします。

UX_Interactions_Tiles_01

タイルの正しい使用法と間違った使用法

優れたタイルは、アプリに関する情報を伝達し、ブランドの特徴をよく表します。また、画面上の他のタイルの中でひときわすばらしく見えます。タイルは、システム フォントを使用するオプションのカウンターを表示したり、提供されたタイルの背景イメージを更新したり、固定されたサイズおよび色でシステム フォントを使用するオプションのタイルを表示したりすることで、ユーザーに情報を伝達します。カウンター、背景イメージ、およびタイルの更新は、タイル通知サービスを使用して制御されます。カウンターのアクセント カラーは必ず、ユーザーが選択したアクセント カラーです。カウンターの表示はオプションです。

Windows Phone デバイスには、Microsoft とその携帯電話会社およびハードウェア メーカーのパートナーによって既に組み込まれているタイルがいくつか付属しています。これらのタイルは、常に Windows Phone 独自のエクスペリエンスを示します。幅が倍のタイルは、Microsoft とそのパートナーのみが使用できます。

詳細については、「Windows Phone のタイル デザイン ガイドライン」を参照してください。

タイル アートが重要

複数のタイル イメージを使用する場合は、視覚的な一貫性を確保し、テーマまたはスタイルがわかるようにします。色、フォント、フォントの色、またはカウンターの表示サイズは変更できません。

タイル イメージまたはタイトルが組み込まれていないアプリについては、一般的なシステム定義アイコンとプロジェクト名が表示されます。アプリ開発におけるデザインの予算が厳しい場合は、リーズナブルな料金でアイコンを購入できる Web サイトが多数存在するのでご利用ください。自分でデザインするにしても、手数料を払って使用するにしても、購入するにしても、タイルは常にシンプルにします。アイコンのジオメトリは単純にして、細部にこだわるのは控えましょう。可能であれば、既によく知られているメタファーを利用します。

メモメモ:

タイル通知は慎重に使用してください。使いすぎるとバッテリーの寿命が短くなります。

避けるべきデザイン

  1. 3D 文字体裁

  2. グラデーション、面取り、または影が適用されたアイコンや背景

  3. 角の丸め

  4. 白または黒の背景。Windows Phone デバイスでダーク テーマまたはライト テーマを設定すると、白または黒のタイルの背景は見えなくなります。

  5. あいまいで説明的でないアイコンの使用

  6. 透明な背景とカラフルなイメージ

タイルの背景色

タイルには 2 つの主要要素があります。1 つは前景に表示されるアイコンまたはロゴ、もう 1 つは四角形のカラーの背景です。この 2 つがお互いを引き立たせる必要があります。

ブランドを表す背景色を選択し、前景のアイコンを見やすく、または読みやすくします。次の図は、このガイドラインに従っている 3 つの例です。

UX_Interactions_Tiles_02

Phone Company、Adatum、Margie's Travel

白または黒の背景色は避けてください。白または黒のタイルの背景は、電話の UI で使用できる白または黒のテーマでは見えなくなるからです。

UX_Interactions_Tiles_03

タイルに黒の背景色を誤って使用した例

タイルの背景を電話の UI と同じテーマ色にしたい場合は、タイルの背景を透明にします。この場合は、次の操作を行うことが非常に重要です。

  • タイルのみを透明にします。アプリで送信する他のアイコンの背景は透明にしません。

  • 前景のアイコンは白にします。前景のアイコンに色が付いていると、そのアイコンは見えなくなるか、電話のテーマ色の一部と重なって見えにくくなってしまいます。以下の図に例を示します。

UX_Interactions_Tiles_04

前景のアイコンを白にしなかった場合の問題

読み込みに時間がかかるアプリは多数あります。この時間を使って、スプラッシュ スクリーンでアプリをユーザーに紹介しましょう。スプラッシュ スクリーンは数秒しか表示されないので、ユーザーが注意を向ける必要がある、または読むのに時間がかかるテキストは配置しないようにすることをお勧めします。代わりに、グラフィックと共にユーザーがアプリを順に眺められるようにします。優れたスプラッシュ スクリーンはアプリのグラフィック広告なので、そのための色やグラフィックを使用します。

UX_Interactions_SplashScreens

適切なスプラッシュ スクリーンと不適切なスプラッシュ スクリーン

アプリにスプラッシュ スクリーンを追加するには、既存の JPG 画像ファイルをプロジェクトのルート フォルダーに追加し、そのファイルに SplashScreenImage.jpg という名前を付けます。

アプリのオープニング ビューを計画するときは、次の点に注意してください。

  • アプリで読み込みページまたは紹介ページが使用されている場合、そのページはバック スタックに含めないでください。つまり、ユーザーが [戻る] ボタンを押したら、これらのページはスキップされなければなりません。

  • [戻る] ボタンとアプリの初期画面に関しては、いくつかの認定要件があります。詳細については、「Technical certification requirements for Windows Phone」を参照してください。

Windows Phone OS では、3 種類のインジケーターでタスクの進行状況、スクロール ビュー、信号強度、バッテリーの寿命、およびその他の重要な情報を示します。

進行状況インジケーター

"進行状況インジケーター" は、アプリ内のアクティビティに関連する動作や一連のイベントを示します。これは、ステータス バーに組み込まれたシステムにより予約されたコントロールで、複数のアプリ ページにわたって表示できます。ステータス バーの詳細については、このトピックで後述する「ステータス バー」を参照してください。

メモメモ:

進行状況インジケーターは確定されているか不確定かのどちらかです。確定された進行状況インジケーターには先端と終端があります。不確定の進行状況インジケーターの場合は、タスクが完了するまで終端が示されません。

このコントロールを模倣する場合は、コンテンツのダウンロードなどのタスクには確定された進行状況インジケーターを使用し、リモート接続などのタスクに対しては不確定の進行状況バーを使用します。

ユーザーにタスクの進行状況を表示する方法の詳細については、「Windows Phone の ProgressBar コントロールのデザイン ガイドライン」を参照してください。

スクロール インジケーター

画面上のコンテンツが表示されているページに収まらない場合、ユーザーがパンまたはフリックすると、スクロール インジケーターが表示されます。ユーザーがスクロールすると、このスクロール インジケーターは、垂直方向のスクロールの場合は右側に、水平方向のスクロールの場合は下部に表示されます。これらのスクロール バーは、コンテンツがページの高さまたは幅よりも大きいこと、およびページ内での現在の位置を表します。ページのスクロールが終了すると、スクロール インジケーターは 1 秒後に消えます。

ユーザーがこのインジケーターを操作することはできません。これは、インジケーターの下にあるコンテンツのオーバーレイで、その主な役割は、ページのサイズに関するヒントをユーザーに提供することです。

スクロール ビューアー

スクロール ビューアーを使用すると、長いテキストやイメージなど、アプリのフレーム内に直接表示できないコンテンツに移動できます。

ユーザーがスクロールすると、スクロール インジケーターは、ユーザーがパンまたはフリックするとフェードインし、ジェスチャが終了してから 1 秒後にフェードアウトしますが、ユーザーが操作することはできません。スクロール ビューアーは、パンおよびフリック ジェスチャをサポートします。

ステータス バーは、システム レベルのステータス情報を、アプリのワークスペースの予約された部分にシンプルかつ明確に表示するインジケーター バーです。このバーは自動的に更新され、さまざまな通知を表示し、システム レベルのステータスをユーザーが常に把握できるようにします。

UX_Interactions_StatusBar

ステータス バー

ステータス バーはシステムによって予約されており、変更することはできません。非表示にすることは可能ですが、多くのユーザーはシステム時計を基本的な機能として表示するため、非表示にする際には慎重に判断してください。

ステータス バーに表示される情報を次に示します (左から右)。

  1. 信号強度

  2. データ接続

  3. 通話転送

  4. ローミング

  5. ワイヤレス ネットワークの信号強度

  6. Bluetooth の状態

  7. リンガー モード

  8. 入力ステータス

  9. バッテリの電力レベル

  10. システム時計

システム時計

既定では、システム時計のみが常に表示されます。ステータス バー領域をユーザーがダブルタップすると、他のすべての関連インジケーターが約 8 秒表示され、その後再度非表示になります。

システム クロックは、縦モードでは高さ 32 ピクセル、横モードでは幅 72 ピクセルです。これは常に画面の端まで伸びており、外観は不透明です。

アプリ バーは、最も一般的なアプリ タスクおよびビューを最大 4 つアイコン ボタンとして表示できる場所です。このバーには、アイコン ボタンとテキスト ヒントが表示されるビューと、アプリ バー メニューと呼ばれるコンテキスト メニューがオプションで示されます。このアプリ バー メニューは、ユーザーが連続するドットのビジュアル インジケーターをタップするか、アプリ バーを上にフリックするとアクティブになります。

UX_Interactions_AppBar

アプリ バー

独自のメニュー システムを作成するのではなく、アプリ バーを使用してください。これは、デバイス上のすべてのアプリで一貫したユーザー エクスペリエンスを作成するのに役立ちます。アプリ バーでは、メニューのアニメーションおよび回転がサポートされています。

アプリ バーは、XAML だけのアプリのページに追加できます。ただし、アプリ バーは標準コントロールではないので、データ バインドはサポートしていません。つまり、ボタンのラベルに使用されている文字列値は XAML でハードコーディングする必要があり、ローカライズできません。アプリをローカライズする場合は、C# でアプリケーション バーを作成するか、実行時に C# を使用してラベルの値をプログラムで変更します。

デザインについての考慮事項

  • 上書きする切実な理由がない限り、ユーザー定義のシステム テーマ カラーを使用します。ボタン アイコンでユーザー設定の色を使用すると、ボタン アイコンの表示品質に影響を及ぼしたり、メニュー アニメーションに予期せぬ視覚効果をもたらしたりする場合があります。また、デバイスによってはバッテリーの寿命が短くなることもあります。

  • アプリ バーの不透明度は細かく調整できますが、不透明度の値には 0、0.5、および 1 を使用することをお勧めします。不透明度を 1 未満に設定すると、表示されたページは画面のサイズになり、アプリ バーはその上にオーバーレイされます。不透明度が 1 に設定されている場合は、アプリ バーで覆われていない画面の領域に合わせて表示されるページのサイズが変更されます。

  • アプリ バーは、常に操作ボタン ([戻る]、[スタート]、および [検索]) と同じディスプレイの端に表示され、縦向き、横向きどちらでも画面の幅全体に拡張されます。アイコン ボタンは 3 方向の電話の向きに合わせて回転します。

  • アプリ バーの縦向きでの高さと横向きでの幅は 72 ピクセルで、変更できません。バーは表示または非表示に設定することができます。

アプリ バーのローカライズ方法に関する説明および例については、「Windows Phone のローカライズしたアプリケーションの構築方法」を参照してください。

アプリ バーのメニュー

アプリ バー メニューはオプションです。このメニューを使用すると、ユーザーがアプリ バーの特定のタスクにアクセスできます。アプリ バー メニューには、あまり使用しないタスクを配置します。

このメニューは、ユーザーが連続するドットのビジュアル インジケーターをタップするか、アプリ バーを上にフリックするとアクティブになります。ビューを閉じるには、メニュー領域外またはドット上をタップするか、[戻る] ボタンを使用するか、メニュー項目またはアプリ バー アイコンを選択します。

UX_Interactions_AppBarMenu

アプリ バーのメニュー

デザインについての考慮事項

  • メニューがスクロールされないようにするには、表示するメニュー項目数を 5 個に制限します。

  • アプリ バー メニュー項目のテキストが長すぎる場合、そのテキストは画面の外にはみ出ます。メニュー項目のテキストの推奨される最大文字数は 14 ~ 20 文字です。繰り返しになりますが、このスペースでは少ない文字数の方が効果が高くなります。

  • 表示されるメニュー項目がない場合は、アイコンのテキスト ヒントのみが表示されます。

  • ユーザーがアクションを実行するまでアプリ バー メニューは画面上に残ります。

アプリ バー アイコン

アプリ バー アイコンは明確でわかりやすくなければなりません。また、ユーザーによく知られている実際のメタファーを利用します。優れたアイコンのは単純なジオメトリで、細かな表現は抑えられています。

ボタンにはアイコンおよびテキスト ヒントを付けます。テキスト ヒントは、ボタンの動作を簡単に説明したものです。詳しく説明する必要はありません。たとえば、画像を水平にフリップするボタンの場合は、"水平にフリップ" ではなく "フリップ" で十分です。

メモメモ:

ボタンにはアイコンおよびテキスト ヒントを付けます。また、48 x 48 ピクセルに設定し、アルファ チャネルを使用して透明の背景と白の前景を指定してください。

アプリ バー ボタンは有効または無効な状態で表示できます。たとえば、読み取り専用の項目では [削除] ボタンを無効状態で表示するなどが可能です。

UX_Interactions_AppBarIcons

アプリ バー アイコン

アプリでよく使用する主要な操作に対してアイコン ボタンを使用します。使用するという理由だけで多くのアイコンを採用しないでください。

使用に関する考慮事項

  • 操作によっては、アイコンで意味を明確に伝達するのは困難です。この場合は、これらの操作をアプリ バー メニューに配置してください。

  • ユーザーがアプリ バー メニューを表示すると、アプリ バー アイコンのテキスト ヒントが表示されます。

  • ページ スタックを後ろに移動する [戻る] ボタンに対して、アイコン ボタンを使用しないでください。すべての Windows Phone デバイスに、後ろへの移動で必ず使用される専用のハードウェア [戻る] ボタンが必要です。

  • アプリ バーを回転したときに、意味が明確に伝わるアイコンを選択します。アプリ バーは、画面の向きの変化を自動的に処理します。デバイスが横向きになっている場合は、画面の側面に垂直にメニューが表示されます。アイコン ボタンはユーザーに対して垂直になるように回転しますが、リスト内のアイコンの順序が変更されることはありません。このような場合、特に、2 つのアイコンが Y 軸を対称軸とする鏡像である場合は、アイコンの意味がわかりにくくなる可能性があります。

デザインについての考慮事項

  • アイコン画像のサイズは、48 x 48 ピクセルとします。

  • アイコン画像では、アルファ チャネルを使用して白の前景色と透明の背景を使用する必要があります。ボタン用の白の前景グラフィックは、円と重ならないように、画像の中心の 26 x 26 領域の正方形に合わせる必要があります。

  • 推奨サイズ以外のイメージはスケーリングされ、アプリ バー アイコンの全体的なイメージ品質よりも低くなる可能性があります。

  • 各アイコン ボタンに表示される円はアプリ バーによって描画され、ソース イメージには含まれません。

上書きする切実な理由がない限り、ユーザー定義のシステム テーマ カラーを使用します。ボタン アイコンでユーザー設定の色を使用すると、ボタン アイコンの表示品質に影響を及ぼしたり、メニュー アニメーションに予期せぬ視覚効果をもたらしたりする場合があります。また、デバイスによってはバッテリーの寿命が短くなることもあります。

アイコン ボタン

PNG 形式の 64 のアプリ バー アイコン (32 の暗いアイコンと 32 の明るいアイコン) が Windows Phone SDK 8.0 の一部としてインストールされます。アプリ バーでは白のアイコンのみを使用してください。これらのアイテムを探すには、次の場所に移動します。

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons\Dark

アプリ開発については、Push Notification Service が、回復機能を持つ専用の永続チャネルをクラウド サービスに提供するために設計され、通知をモバイル デバイスにプッシュします。

クラウド サービスは、プッシュ通知をデバイスに送信する必要があるときに、通知要求を Push Notification Service に送信します。Push Notification Service はその通知を、タイル、トースト、または Raw 通知としてデバイスまたはアプリにルーティングします。

プッシュ通知を表示するには、タイル通知、トースト通知、直接通知の 3 つの方法があります。

タイル通知

発生した可能性のある変更またはイベントを、ユーザーのワークフローを中断せずにユーザーに通知します。この通知は、スタート タイルに表示されます。タイル通知を使用すると、数、背景イメージ、タイトルなどのプロパティをタイルで動的に設定できます。

AP_Tiles_TileComponentsFront

タイル通知

適切な使用

通知のみが目的の場合にタイル通知を使用します。

トースト通知

Web サービスでは、ユーザー操作を要求するトースト通知と呼ばれる特別なプッシュ通知を生成できます。トースト通知は画面上部に不透明なバーとしてアクセント カラーで表示され、左隅にはアプリ アイコンの縮小版が表示されます。また、太字のタイトルと通常文字のサブタイトルの 2 つのテキスト フィールドを使用できます。表示領域に収まらないテキストは切り捨てられます。

トースト通知は 10 秒表示された後、見えなくなります。通知をタップすると、その通知を送信したアプリが起動します。トースト通知はシステム全体の通知ですが、ユーザーのワークフローを中断しないか、解決のための介入を要求します。たとえば、ユーザーがテキスト メッセージまたはインスタント メッセージを受信したときにこの通知が表示されます。

UX_Interactions_ToastNotifications

トースト通知

適切な使用

操作の要求を通知する場合にトースト通知を使用します。ただし、この通知の使用は控えめにしてください。すべてのアプリがトースト通知にアクセスでき、トースト通知が多すぎるとユーザーが不快になるからです。この通知の例としては、インスタント メッセージ クライアントまたはピアツーピア指向のアプリを介して生成される通知が挙げられます。

メモメモ:

ターンベースのゲームでは、通知に XNA Framework GamerServices を使用します。

アプリでは、トースト通知をオフ (既定値) にする必要があります。トースト通知は、ユーザーに個人的に関連し、迅速性がきわめて重要です。一般的に、これらの通知は、SMS アプリケーションなどのピアツーピア通信用に予約されています。

Raw 通知

アプリ内でのアクションを要求する通知は、アプリによって完全に制御され、そのアプリにのみ影響を及ぼします。これは "Raw 通知" と呼ばれます。この通知はアプリ自体で生成できます。また、Web サービスから送信することもできます。システム全体で Raw 通知を表示する方法はありません。

UX_Interactions_RawNotifications

Raw 通知

適切な使用

ユーザー操作を要求するアプリ内の通知に対して Raw 通知を使用します。

  • ネットワークに接続されていない場合、アプリは適切な警告を表示する必要があります。フライトモードを使用すると、警告をテストできます。

  • 使用できるネットワークがない状態でも、アプリがまだ操作できることを確認します。データが入ってこなくても、アプリは機能しなければなりません。

  • ネットワーク故障によって機能または操作が中断される場合は、何に問題があるのかを必ずユーザーに示します。

エンドユーザー使用許諾契約書 (EULA) は、ユーザーが最初にアプリを起動したときにユーザーが遵守することに同意する使用上のガイドラインです。また、策定したユーザーの権利も明記されています。これは、ユーザーがアプリを悪用しないことを保証する開発者とアプリ購入者間の契約です。

ユーザーは、EULA に同意するとアプリを使用できます。EULA の条項に同意しないユーザーは、アプリの使用が許可されません。

この声明では、コンテンツ、ライセンス、インストール、アクティブ化、検証、インターネット ベースのサービス、または特定の情報の使用に関する特定の条項を含め、保証するアプリの動作や使用について説明します。ここで、アプリの更新またはアプリへのアップグレード提供の計画や、ソフトウェア形式および標準の使用についてユーザーに説明してもよいでしょう。ビジネス関連のアプリの場合は、事業登録されている場所、およびすべての種類の保証を提供するかどうかを示す必要もあります。

表示:
© 2016 Microsoft