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

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

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

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

タイル

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

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

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

詳しくは、「タイルとバッジのガイドライン」をご覧ください。

タイル アートが重要

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

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

注  タイル通知は慎重に使ってください。使いすぎるとバッテリー残量が少なくなります。

避けるべきデザイン

• 3D 文字体裁
• グラデーション、面取り、または影が適用されたアイコンや背景
• 角の丸め
• 黒または白の背景。ダーク テーマまたはライト テーマを設定すると、黒または白のタイルの背景は見えなくなります。
• あいまいで説明的でないアイコンの使用
• 透明な背景とカラフルな画像

タイルの適切な使い方と不適切な使い方

タイルの背景色

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

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

Phone Company、Adatum、Margie's Travel

黒または白の背景色は避けてください。黒または白のタイルの背景は、ダーク テーマまたはライト テーマを使うと見えなくなるからです。

タイルに黒の背景色を不適切に使った例

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

• タイルのみを透明にします。アプリで送信する他のアイコンの背景は透明にしません。
• 前景のアイコンは白にします。前景のアイコンに色が付いていると、そのアイコンは見えなくなるか、電話のテーマ色の一部と重なって見えにくくなります。以下の図に例を示します。

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

スプラッシュ画面

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

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

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

• アプリで読み込みページまたは紹介ページが使われている場合、そのページはバック スタックに含めないでください。つまり、ユーザーが [戻る] ボタンを押したら、これらのページはスキップされなければなりません。
• [戻る] ボタンとアプリの初期画面に関しては、いくつかの認定要件があります。詳しくは、Windows Phone の技術認定要件に関するページをご覧ください。

ビジュアル インジケーター

Windows Phone では、3 種類のインジケーターでタスクの進行状況、スクロール ビュー、シグナルの強さ、バッテリー残量、およびその他の重要な情報を示します。

進行状況インジケーター

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

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

このインジケーターを、コンテンツのダウンロードなどのタスクには確定モードで使い、リモート接続などのタスクには不確定モードで使うことができます。

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

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

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

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

スクロール ビューアーと呼ばれるパンおよびズーム可能なコントロールを使って、アプリのスクロールを実装できます。スクロール ビューアーは通常、画面いっぱいに表示され、画面サイズより大きいコンテンツを表示します。これにより、画面の境界を超える場合があるコンテンツ領域内を移動できます。

ステータス バー

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

詳しくは、「First Look at Windows Phone (Windows Phone 早わかり)」の「Status Bar (ステータス バー)」をご覧ください。

アプリ バー

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

アプリ バー

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

アプリ バーは、マークアップだけのアプリのページに追加できます。

設計時の考慮事項:

• 上書きする切実な理由がない限り、ユーザー定義のシステム テーマ カラーを使います。ボタン アイコンでユーザー設定の色を使うと、ボタン アイコンの表示品質に影響を及ぼしたり、メニュー アニメーションに予期しない視覚効果をもたらしたりする場合があります。また、デバイスによってはバッテリー残量が少なくなることもあります。
• アプリ バーの不透明度は細かく調整できますが、不透明度の値には 0、0.5、および 1 を使うことをお勧めします。
• アプリ バーは、常に操作ボタン ([戻る]、[スタート]、および [検索]) と同じディスプレイの端に表示され、縦向き、横向きどちらでも画面の幅全体に拡張されます。アイコン ボタンは電話の向きに合わせて回転します。
• アプリ バーの縦向きでの高さと横向きでの幅は固定で、変更できません。バーは表示または非表示に設定することができます。

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

アプリ バーのメニュー

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

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

アプリ バーのメニュー

設計時の考慮事項:

• メニューがスクロールされないようにするには、表示するメニュー項目数を 5 個に制限します。
• アプリ バー メニュー項目のテキストが長すぎる場合、そのテキストは画面の外にはみ出ます。メニュー項目のテキストの推奨される最大文字数は 14 ～ 20 文字です。繰り返しになりますが、このスペースでは少ない文字数の方がより効果的になります。
• 表示されるメニュー項目がない場合は、アイコンのテキスト ヒントのみが表示されます。
• ユーザーがアクションを実行するまでアプリ バー メニューは画面上に残ります。

アプリ バー アイコン

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

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

注  ボタンにはアイコンおよびテキスト ヒントを付けます。

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

アプリ バー アイコン

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

使用上の考慮事項:

• 操作によっては、アイコンで意味を明確に伝達するのは困難です。この場合は、これらの操作をアプリ バー メニューに配置してください。
• ユーザーがアプリ バー メニューを表示すると、アプリ バー アイコンのテキスト ヒントが表示されます。
• ページ スタックを後ろに移動する [戻る] ボタンに対して、アイコン ボタンを使わないでください。すべての Windows Phone デバイスに、後ろへの移動で必ず使われる専用のハードウェア [戻る] ボタンが必要です。
• アプリ バーを回転したときに、意味が明確に伝わるアイコンを選択します。アプリ バーは、画面の向きの変化を自動的に処理します。デバイスが横向きになっている場合は、画面の側面に垂直にメニューが表示されます。アイコン ボタンはユーザーに対して垂直になるように回転しますが、リスト内のアイコンの順序が変更されることはありません。このような場合、特に、類似した、または対称を成す 2 つのアイコンでは、アイコンの意味が紛らわしくないかどうかを検討してください。

設計時の考慮事項:

• アイコン画像のサイズは、76 x 76 ピクセルとします。
• アイコン画像では、アルファ チャネルを使って白の前景色と透明の背景を使う必要があります。ボタン用の白の前景グラフィックは、円と重ならないように、画像の中心の 41 x 41 領域の正方形に合わせる必要があります。
• 推奨サイズ以外の画像はスケーリングされ、アプリ バー アイコンの全体的な画像品質よりも低くなる可能性があります。
• 各アイコン ボタンに表示される円はアプリ バーによって描画され、ソース画像には含まれません。

サンプル アイコン資産

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

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\<version>\Icons\Dark

通知

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

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

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

タイル通知

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

タイル通知

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

トースト通知

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

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

バナー

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

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

直接通知

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

直接通知

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

ネットワーク停止の場合

• ネットワークに接続されていない場合、アプリは適切な警告を表示する必要があります。機内モードを使うと、警告をテストできます。
• 使えるネットワークがない状態でも、アプリがまだ操作できることを確認します。データが入ってこなくても、アプリは機能しなければなりません。
• ネットワーク停止によって機能または操作が中断される場合は、何に問題があるのかを必ずユーザーに示します。

エンド ユーザー使用許諾契約書の追加

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

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

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

関連トピック

Tile design guidelines for Windows Phone (Windows Phone のタイル デザイン ガイドライン)

Windows Phone 8 のアイコン テンプレート

Windows Phone 8 のスクリーン デザイン テンプレート

Tiles and notifications for Windows Phone (Windows Phone のタイルと通知)

How to create a splash screen for Windows Phone (Windows Phone のスプラッシュ スクリーンを作成する方法)

Windows Phone 向けのカスタム進行状況不定バーを作成する方法

App bar for Windows Phone (Windows Phone のアプリ バー)