タイルとバッジのガイドライン

Applies to Windows and Windows Phone

説明

ここでは、スタート画面とロック画面の両方における、アプリのタイルの作成と更新に関するベスト プラクティスとグローバリゼーション/ローカライズの推奨事項について説明します。また、アプリが Windows ストアで承認されるために満たす必要のあるタイルに関連する特別な要件も示します。

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

推奨と非推奨

一般的なガイドライン

  • アプリでタイル通知を使ってユーザーに更新を送らない場合は、小と普通サイズのタイルだけを使います。ワイドと大サイズのタイルのコンテンツは、定期的に更新し、新鮮な状態を保つ必要があります。ライブ タイルを使わない場合は、マニフェストでワイドまたは大サイズ ロゴを指定しないでください。
  • アプリで、短い要約通知を使うシナリオだけをサポートする場合は、バッジと小または普通サイズのタイルだけを使います。要約通知とは、badge image または 1 つの数字でのみ表すことができる通知です。たとえば、SMS アプリで、受け取った新しいテキストの数だけを伝えるために通知を使う場合などが、このシナリオに該当します。マニフェストにワイド ロゴを指定しないでください。
  • アプリでスタート画面に詳細を表示する必要のない更新データを送る場合は、小と普通サイズのタイルのみを使います。たとえば、給与明細書アプリでは、給与の金額などの詳細を説明しないで、新しい給与明細書が入手可能であることだけを示すことができます。マニフェストにワイドまたは大サイズ ロゴを指定しないでください。
  • ユーザーに表示する新しい興味深いコンテンツがアプリにあり、その通知が頻繁に更新される (少なくとも週 1 回) 場合にのみ、ワイドまたは大サイズのタイルを使います。
  • 1 つの通知で複数の記事を同時に表示したり、長い一覧を表示したり、ユーザーがスタート画面で大きなサイズで見たがるような画像を表示したりするために、大きいタイルを使います。
  • 既定のタイル イメージは、アプリのブランドを表すために基本的にアプリのロゴのキャンバスとして使います。
  • ユーザーに合わせた興味を引く新しいコンテンツがない場合は、ライブ タイルは使わないでください。たとえば、電卓アプリなどにはそのようなコンテンツはありません。
  • 伝達する情報で興味を引くものがユーザーの最新状態だけの場合、ライブ タイルは使わないでください。ユーティリティ アプリ、Microsoft Visual Studio のような開発者ツール、ユーザーの最新セッションのサムネイルだけを表示するブラウザーでは、ライブ タイルを使わないでください。
  • ユーザーへのスパムの送信や広告の表示にライブ タイルを使わないでください。Windows ストアから除外されることになります。
  • ブランドを通知キューの項目の 1 つまたはプレビュー テンプレートのフレームの 1 つとして使わないでください。これら両方のシナリオでは、ユーザーの目に留まるよう、タイルへの変更をアニメーション化します。興味を引く新しいコンテンツを表示しないで、ブランドを表示するためだけにアニメーションを利用してユーザーの注意を引こうとしても、ユーザーを不快にするだけです。

既定のタイル

  • ワイド ロゴを含めるか、ワイド ロゴと大サイズ ロゴの両方を含める場合は、指定する普通サイズ、ワイド、大サイズのタイル イメージとのデザインの関係を検討します。ユーザーはサポートされている任意のサイズでタイルを表示でき、いつでもそのサイズを変更できることを忘れないでください。ここでは、一般的な規則をいくつか示します。
    • タイルの横方向の中央に、ロゴを配置します。
    • 同じ高さの正方形タイルとワイド タイルの両方で、ロゴの縦方向の位置を同じに保ちます。大サイズ タイルで、ロゴの同じ比率の縦方向の位置を保ちます。
    • ロゴ イメージ自体にアプリ名が含まれていない場合は、タイルの下部にアプリ名を含めます。ただし、小サイズ タイルにはアプリ名を表示するオプションがありません。次の例は、両方のタイルの状態を示しています。

      マニフェストに定義されているアプリ名の要素を使ったタイル

      アプリ名を使った普通サイズ タイルとワイド タイル。

      ロゴ イメージにアプリ名を含んだタイル

      アプリ名を含む画像を使った普通サイズ タイルとワイド タイル。

    • 長い名前のアプリの場合、名前が 2 行に折り返される可能性があるため、ロゴ イメージと名前が重ならないことを確認します。たとえば、普通サイズとワイドのタイルでは、100% の画像リソースで約 80 x 80 ピクセルにロゴの大きさを制限するのが、確実な方法です。
    • 画像内でロゴ自体の周りのスペースを透明にすると、Windows 8 の外観の一部として、アプリのブランドの色 (マニフェストで宣言済み) が、事前に割り当てられたグラデーションを伴い、透けて表示されます。この方法は、先に示したメール アプリのタイルなどのロゴで使われます。
  • 既定のタイルは、アプリの起動を露骨に要求するようなテキストを含んだデザイン ("クリックしてください!" と表示されたタイルなど) にしないでください。
  • ロゴにアプリ名を含める場合は、名前フィールドでアプリ名を繰り返さないでください。ここで示すように、どちらか一方のみを使ってください。

    名前フィールドを使った普通サイズ タイルとロゴ イメージにアプリ名を含んだワイド タイル。

プレビュー テンプレート

  • シナリオに、それぞれが独立しているイメージとテキスト コンテンツが含まれる場合は、プレビュー テンプレートを使います。たとえば、テンプレートの上部に旅行先の写真を表示し、下部に場所の名前を表示する場合があります。
  • プレビュー テンプレートでアニメーションを表示すると、ユーザーの注意を引き付けます。よって、魅力的なコンテンツを提供するようにしてください。コンテンツが魅力的でないと、ユーザーを不快にするだけです。
  • プレビュー テンプレートを使うと、表示をサイクルのいずれかの終わり (フレーム) (テキストが一番下にある状態またはテキストが一番上にある状態) で開始し、もう一方のフレームに上がっていくまたは下がっていくアニメーションを表示できます。したがって、各フレームのコンテンツが単独で動作できることを確認します。
  • プレビュー テンプレートを使ってユーザーが既に知っていることに関する情報を表示しないでください。たとえば、動画が一時停止中であるという通知をタイルに表示する場合は、プレビュー テンプレートを使わないでください。
  • 概念的にグループ化されていない通知には、プレビュー テンプレートを使わないでください。たとえば、写真がテキストとまったく関係がない場合は、プレビュー テンプレートを使わないでください。
  • プレビュー アニメーションによって通知の最も重要な部分が画面から消される可能性がある場合は、プレビュー テンプレートを使わないでください。たとえば、気温と付随する画像 (笑っている太陽、または雲) を表示する天気予報アプリでは、プレビュー テンプレートを使うと、気温 (通知するポイント) がいつでも表示されるとは限りません。画像と気温を同時に表示する静的テンプレートの方が、ユーザーにとっては便利です。
  • ニュース記事の場合のように、画像にコンテキストを与えるためにテキストが必要な場合は、プレビュー テンプレートを使わないでください。

バッジ

  • アプリで要約通知を使うシナリオだけをサポートする場合は、バッジを表示する普通サイズのタイルだけをサポートします。たとえば、ショート メッセージ サービス (SMS) アプリで、受け取った新しいテキストの数だけを表示する場合などです。ユーザーがタイルを小サイズに変更しても、バッジは表示されることに注意してください。
  • シナリオで伝える情報を小さな数値で表すことができる場合は、バッジに数値を表示します。バッジに常に 50 以上の数値を表示する可能性が高い場合は、システム グリフの使用を検討します。バッジの数値が大きくなりすぎないようにする方法として、絶対数ではなく、ユーザーがアプリを前回起動した時点からの数を示すことが挙げられます。たとえば、アプリがインストールされた時点からの不在着信の合計件数を示すよりも、ユーザーがアプリを前回起動した時点からの不在着信件数を示す方が実用的です。
  • 数値が役に立たない場合や非常に大きくなる場合は、用意されているシステム グリフのいずれかを使って変化を示します。たとえば、大量の RSS フィードの新しい未読記事は膨大な数になる可能性があります。この場合、数値ではなく、newMessage システム グリフを使います。
  • 数値に意味がない場合はグリフを使います。たとえば、タイルに再生リストの "一時停止" 通知を表示する場合、数値では意味がわからないため、paused グリフを使います。
  • 数値では意味があいまいになる場合は、newMessage グリフを使います。たとえば、ソーシャル メディア タイルのバッジに "10" と示されている場合、10 個の新しいリクエスト、10 件の新しいメッセージ、10 個の新しい通知、これらの組み合わせなど、複数の解釈が可能となります。
  • タイルのバッジに最大値の "99+" が常に表示される可能性のある大量シナリオ (メールやソーシャル メディアなど) では、newMessage グリフを使います。常に最大値が表示される可能性がきわめて高い場合、同じ数値が表示された状態が続くことになり、ユーザーにとって役に立たない情報を伝えることになります。
  • ワイド タイルの本文コンテンツとは別の場所でバッジの数値を繰り返さないでください。これは、2 つのインスタンスにずれが生じる場合があるためです。
  • グリフでユーザーに伝える内容が変わることがない場合は、グリフを使わないでください。グリフは通知や過渡的な状態を表します。永続的なブランド情報や状態を表すものではありません。

タイル通知

  • ユーザーに関する情報を基に、タイルを使ってそれぞれのユーザーに合わせた通知を送ります。タイル通知は、対象のユーザーに関連している必要があります。利用する必要がある情報の大部分は特定のアプリの内部にあり、ユーザーのプライバシー選択によって制限される場合があります。たとえば、テレビ ストリーミング サービスでは、最も視聴率の高い番組に関する最新情報をユーザーに示すことができます。また、交通情報アプリでは、ユーザーの現在の場所に基づいて (ユーザーが現在の場所を知らせることを許可した場合) 最適な地図を表示できます。
  • アプリが接続され、最新のライブ コンテンツを受け取っているとユーザーが感じるように、タイルに更新データを頻繁に送ります。タイル通知の更新間隔は、特定のアプリのシナリオによって異なります。たとえば、活発に利用されるソーシャル メディア アプリの場合は 15 分おきに更新し、天気予報アプリは 2 時間おき、ニュース アプリは 1 日に数回、毎日情報を提供するアプリは 1 日に 1 回、雑誌アプリは月に 1 回更新します。アプリでの更新が週に 1 回未満の場合は、古いコンテンツが表示されないように、シンプルな普通サイズ タイルとバッジを併用することを検討します。
  • ユーザーが十分な情報に基づいてアプリの起動が必要であるかを判断できるように、魅力的で役立つタイル通知を提供します。一般に、通知とは詳細を知るために、またはアクションを実行するためにアプリを起動するようユーザーを促すものです。たとえば、通知によってユーザーはソーシャル メディアの投稿に返信したり、ニュース記事の全文を読んだり、セールの詳細を知ったりする場合があります。
  • アプリのホーム ページまたはランディング ページでホストされるコンテンツについての通知を送信します。このようにして、ユーザーは通知に応答してアプリを起動するときに、通知の対象となったコンテンツを簡単に見つけることができます。

その他の使い方のガイダンス

タイルは、スタート画面でのアプリの表示です。タイルにより、アプリが実行されていないときでも、スタート画面に魅力的なコンテンツを表示できます。タイルをタップまたはクリックすると、アプリが起動します。タイルには、3 つの正方形サイズ (小、普通、大) と 1 つのワイド サイズがあります。普通、ワイド、大サイズに対して複数のテンプレートのバリエーションがあり、テキスト、画像、またはテキストと画像の組み合わせを使うことができます。"プレビュー テンプレート" と呼ばれる一部のテンプレートは、タイルのスペース内をスクロールして移動できる、2 つの積み重ねられたフレームで構成されています。プレビュー テンプレートは、普通サイズとワイド サイズのタイルで利用できます。

タイルをライブにするか (通知による更新)、または静的のままにすることができます。最初に使うタイルは既定のタイルで、アプリのマニフェストで定義されます。静的なタイルには、必ず既定のコンテンツ (一般に、タイル全体を占めるロゴ イメージ) が表示されます。ライブ タイルは既定のタイルを更新して新しいコンテンツを表示できますが、更新が期限切れになるか、または削除された場合に、既定の状態に戻すことができます。タイルには、数字またはグリフで表すことができる状態バッジも表示できます。

普通サイズのタイル、ワイド タイル、大きいタイルでは、オプションで下隅にアプリ名 (既定のタイルまたはライブ タイル) または小さいアイコン (ライブ タイルのみ) でブランドを表示できます。

以下に、常に注意すべき非常に重要なポイントを 2 つ示します。

  • ユーザーはタイルのサイズを、タイルでサポートされている任意のサイズに変更できます。ユーザーのスタート画面で現在どのサイズが表示されているかを知る方法はありません。すべてのタイルで小と普通サイズをサポートする必要がありますが、オプションでワイドと大サイズもサポートできます。大サイズをサポートする場合は、ワイド サイズもサポートする必要があるので、大サイズをサポートするには 4 つのすべてのタイル サイズをサポートしなければならないことになります。大きいタイルとワイド タイルは、タイルでライブ更新をサポートする場合にのみ使うようにしてください。
  • タイルがライブ タイルをサポートしている場合、ユーザーはタイル通知のオンとオフをいつでも切り替えることができます。タイル通知がオフの場合、タイルは静的です。

タイルの設計哲学

目標は、アプリの魅力的なタイルを作成することです。ライブ タイルを使う場合は、アプリの起動を促す訴求力があり、かつユーザーがスタート画面に表示する価値があると思うような魅力的で新しいコンテンツを提供することが目標です。そのためには、派手な色を使いすぎないようにします。騒ぎ立てる子供のように、注意を引くために派手に飾り立てたタイルよりも、シンプルで見やすい洗練されたデザインのタイルの方が成功します。

アプリを設計するときに、わざわざライブ タイルを開発する価値があるかどうか、疑問に感じるかもしれません。その理由はいくつかあります。

  • タイルはアプリへの "入り口" です。魅力的なライブ タイルは、アプリが実行されていないときに、ユーザーを引き付けることができます。ユーザーが頻繁に使うアプリを重視する傾向は強まりつつあります。
  • ライブ タイルは、Windows ストアの他のアプリ (ユーザーは、似たようなアプリでも、静的なタイルを持つものよりも、便利なライブ タイルを持つものを好む傾向にあります) や、ホーム画面に静的なタイルとアイコンしか表示できないオペレーティング システムのアプリとの差別化につながるセールス ポイントです。
  • ユーザーがライブ タイルを気に入った場合、スタート画面にその目立つタイルがあると、アプリを繰り返し使ってもらえます。そのタイルから素敵なアプリ コンテンツを偶然に発見すると、ユーザーは楽しい気持ちになるでしょう。
  • ライブ タイルを使うと、ライブ更新を見られるように、ユーザーがアプリをアプリ ビューからスタート画面にピン留めする可能性が高くなります。
  • ユーザーがタイルを気に入らなければ、スタート画面の一番後ろに置く、ピン留めを外す、更新を無効にする、アプリをアンインストールするといった結果になりかねません。

次のような特性がライブ タイルの魅力を高めます。

  • 頻繁に更新される新鮮なコンテンツ。アプリが実行されていなくても、ユーザーはアプリがアクティブだと感じます。

    例: 最新のヘッドラインや、新しいメールの数の表示。

  • ユーザーに関する情報 (アプリの設定を通じてユーザーが設定できるようにした興味の対象など) に基づく、カスタマイズされた更新。

    例: ユーザーの趣味に合わせてカスタマイズされた、1 日限定キャンペーン。

  • ユーザーの現在の状況に合ったコンテンツ。

    例: ユーザーの現在位置を使って該当する交通情報地図を表示する、交通情報アプリ。

さまざまなタイル サイズの選択

アプリには常に小サイズと普通サイズのタイルを用意する必要があります。アプリのマニフェストに、少なくとも普通サイズ タイルの画像アセットを用意する必要があります。小サイズ タイルのアセットも用意できますが、用意しない場合は、普通サイズ タイルのアセットの縮小バージョンが使われます。

また、ワイドまたは大サイズ タイルでも同様にするかどうかも決める必要があります。

  • ワイド タイルをサポートするには、アプリのマニフェストに、既定のタイルの一部としてワイド (wide310x150) ロゴ イメージを含めます。その既定のワイド ロゴ イメージを含めなかった場合は、小 (square70x70) と普通 (square150x150) サイズだけがサポートされます。ユーザーがワイド サイズに変えることはできず、ワイド通知を受け取ることもできません。
  • 大サイズ (square310x310) タイルをサポートするには、アプリのマニフェストに、既定のタイルの一部としてワイド ロゴ イメージと大サイズ ロゴ イメージを含めます。その既定の大サイズ ロゴ イメージを含めなかった場合は、ユーザーがタイルを大サイズに変えることはできず、大サイズ テンプレートを使う通知を受け取ることもできません。大サイズのタイルをサポートするにはワイド タイルのサポートが必要なので、既定の大サイズ ロゴ イメージを含めても既定のワイド ロゴ イメージを含めないと、両方を含めないのと同じ結果になります。

アプリが現在サポートしているタイル サイズ以外のサイズもサポートするには、追加の既定ロゴ イメージを含む更新されたマニフェスト付きでアプリの新しいバージョンをリリースする必要があります。

  • 普通サイズ タイルに表示されるコンテンツは、ワイドや大サイズ タイルの場合よりも少なくなるので、コンテンツに優先順位を付けてください。ワイド タイルに表示できるコンテンツをすべて普通サイズ タイルに収めようとしないでください。さらに小さい小サイズ タイルでサポートされている唯一のライブ コンテンツは、バッジ通知です。

    画像とテキスト メッセージを表示したワイド タイルと、テキスト メッセージの一部のみを表示した普通サイズ タイル

    ワイド タイルのコンテンツに画像とテキストを含む場合は、正方形のプレビュー テンプレートを使って、コンテンツを 2 つのフレームに分割できます。ただし、画像自体で記事の概要を十分に伝えられない場合は、プレビュー テンプレートを使わないでください。

通知は、現在のタイルのサイズを知ることができないため、小サイズ タイル以外のサポートされているすべてのタイル サイズのテンプレート コンテンツを用意する必要があります。ワイド テンプレートのみを使って通知を定義し、タイルを普通サイズに表示している場合や、普通サイズ テンプレートのみを使って通知を定義し、タイルをワイドで表示している場合には、通知が表示されません。

既定のタイルの使用

アプリの既定のタイルは、アプリのマニフェストに定義されています。既定のタイルは静的で、一般的にはシンプルなデザインとなっています。アプリによっては、既定のタイルを使えば十分な場合があります。アプリのインストール後、ユーザーがタイルをアプリ ビューからスタイル画面にピン留めすると、既定のタイルが、通知を受け取るまでスタート画面に表示されます。ワイド ロゴ イメージを用意する場合は、タイルをスタート画面にピン留めする際の初期サイズを普通にするかワイドにするかを指定できます。マニフェストで指定されているワイド ロゴ画像によりワイド タイル サイズがアプリでサポートされている場合、アプリのタイルは既定でワイド タイルとしてピン留めされます。それ以外の場合、タイルは普通サイズでピン留めされます。ユーザーは、ピン留めされたタイルのサイズを、サポートされている任意のサイズに変更できます。期限切れになっていない新しい通知がなく、表示する必要がない場合は、ライブ タイルは既定の状態に戻ることがあります。

プレビュー テンプレートの使用

プレビュー テンプレートは、タイルのスペース内で 2 つのフレーム間の情報を切り替えるタイルのコンテンツを提供します。上のフレームは画像またはイメージ コレクションで、下のフレームはテキストまたはテキストと画像です。例については、「タイル テンプレート カタログ」をご覧ください。

デザインに関するその他の考慮事項

  • タイルでアプリのブランド情報を伝える方法を決めるときは、次に示すようにアプリの名前を選びます。

    アプリ名を使ったタイル

    または、次に示すようにロゴ イメージを選びます。

    アプリのロゴを使ったタイル

    これらの項目は最初はアプリ マニフェストで定義されます。開発者は、以降の各通知で 2 つのうちのどちらを表示するかを選ぶことができます。ただし、名前またはロゴを選んだら、常にそれを使って一貫性を保つ必要があります。スペースの制約により、一部のテンプレートでは名前を表示できず、ロゴを表示するか非表示にするかのオプションしかないことに注意してください。

  • 画像要素またはテキスト要素を使って、タイルの通知にアプリのブランド情報を表示しないでください。ユーザーに対してアプリのブランドを印象付け、一貫性を保つには、アプリ名 (短い名前) またはロゴ イメージなど、その目的のために提供されたテンプレートの要素を使ってブランドを表す必要があります。ライブ タイルの外観は通知ごとに大きく変わることがありますが、名前/ロゴの場所には一貫性があります。このことにより、その情報が各タイルの同じ場所に表示されるため、ユーザーはすばやく見るだけでお気に入りのアプリを探すことができます。提供されたブランド要素 (名前とロゴ) をアプリで利用しない場合は、ユーザーにとってすばやくアプリのタイルを特定することが難しくなる可能性があります。

    次の画像は、ブランドの伝え方が不適切なテンプレートのテキスト要素と画像要素を使ったタイルを示しています。どちらの場合も、タイルは名前またはロゴをデザインされたまま使っています。つまり、さらにブランド化しても余分な情報となります。

    テキスト要素にブランドを示すタイルと画像要素にブランドを示すタイル

    名前とロゴ イメージについて詳しくは、「クイック スタート: Visual Studio マニフェスト エディターを使用した既定のタイルの作成」をご覧ください。

  • オプションの "短い名前" で指定されたスペースにアプリの名前が収まらない場合は、短縮バージョンまたは意味のある頭文字を使います。たとえば、いつでも使いたくなる "Contoso Fun Game Version 3" の代わりに "Contoso Game" を使うことができます。最大ピクセル数を超える名前は途中で切り捨てられ、省略記号が付けられます。英語の場合、名前の最大長は 2 行で約 40 文字ですが、これは名前に含まれる文字によって異なります。デザインの観点から、短いアプリ名をお勧めします。また、マニフェストでさらに長いアプリの名前 ("表示名") を指定することもできます。この名前は、アプリ ビューとヒントで使われますが、タイルでは使われません。
  • タイルを広告に使わないでください。
  • タイルで派手な色を使いすぎないようにします。騒ぎ立てる子供のように、注意を引くために派手に飾り立てたタイルよりも、シンプルで見やすい洗練されたデザインのタイルの方が成功します。
  • テキスト コンテンツでテキストと画像を併用しないでください。テキスト コンテンツには、テキスト フィールドが含まれたテンプレートを使います。画像内のテキストは、レンダリングされたタイルのテキストほど鮮明には見えません。現在の表示に適した画像アセットが指定されていない場合は、画像は拡大される可能性があり、さらに読みにくくなることがあります。
  • 緊急のリアルタイム情報をユーザーに送るときは、タイルに頼らないでください。たとえば、通信アプリでユーザーに着信を伝える場合、タイルは適切なサーフェスではありません。リアルタイム性のあるメッセージに適したメディアはトースト通知です。
  • ハイパーリンク、ボタン、その他のコントロールのように見える画像コンテンツを含めないようにします。タイルではこれらの要素をサポートしておらず、タイル全体がシングルクリックの対象となります。
  • 相対的なタイム スタンプや日時 (たとえば "2 時間前" など) は、時間が経過しても静的で、メッセージを不正確にするため、タイル通知で使わないでください。"11:00 A.M." などの絶対的な日時を使います。
  • アプリのタイルからはアプリをホーム画面でしか起動できないため、タイルの更新は、そのホーム画面から簡単にアクセスできるアプリの要素に関するものにしてください。たとえば、ニュース アプリのタイルには、ユーザーがタイルをクリックしてアプリのホーム ページで簡単に見つけることができる記事のみを表示する必要があります。

タイル通知の更新

タイルを更新するための正しい通知方法の選択

ライブ タイルの更新には、以下の複数のメカニズムを利用できます。

  • ローカル API 呼び出し
  • ローカル コンテンツを使った、1 回限りのスケジュールされた通知
  • クラウド サーバーから送信されるプッシュ通知
  • 一定の間隔でクラウド サーバーから情報を取得する定期的な通知

使うメカニズムの選択は、表示するコンテンツとコンテンツを更新する頻度によって大きく左右されます。大部分のアプリは、起動時またはアプリ内での状態の変更時に、ローカル API 呼び出しを使ってタイルを更新すると考えられます。このようにすると、アプリの起動時と終了時に、タイルが必ず最新の状態になります。ローカル通知、プッシュ通知、スケジュールされた通知、またはポーリング通知のどれを使い、さらに単独または組み合わせて使うかは、アプリによってまったく異なります。たとえば、ゲームではプレーヤーが新しいハイ スコアに達したときに、ローカル API 呼び出しを使ってタイルを更新できます。同時に、同じゲーム アプリで、プッシュ通知を使って友人が獲得した新しいハイ スコアをプレイヤーに送信できます。

タイルを更新する正しいメカニズムの選択について詳しくは、「通知配信方法の選択」をご覧ください。

タイルの更新頻度

ライブ タイルを使う場合は、タイルの更新頻度を検討します。

  • メッセージ数やゲームのプレイ順など各ユーザーに合わせたコンテンツでは、特にユーザーがタイルのコンテンツの遅れ、不正確さや不足に気付く可能性がある場合は、情報が利用可能となった時点でタイルを更新することをお勧めします。
  • 天気予報の更新など、各ユーザーに合わせていないコンテンツでは、30 分に 1 回以下の頻度でタイルを更新することをお勧めします。このようにすると、ユーザーに負担をかけずにタイルが最新の状態になっていることを感じることができます。

タイル通知とバッジ通知の有効期限

タイルのコンテンツは、意味がなくなっても保持されることがないようにする必要があります。すべてのタイル通知とバッジ通知には、アプリにとって適切な有効期限を設定します。既定では、ローカルとスケジュールのタイルとバッジには期限がなく、プッシュ通知または定期的な通知を通じて送られたタイルとバッジのコンテンツの期限は送信後 3 日です。通知の有効期限が切れると、タイルまたはキューからコンテンツが削除され、ユーザーに表示されなくなります。

通知のコンテンツの期限として、特定の日時を設定できます。明示的な有効期限は、コンテンツの存続期間が決まっている場合に特に役立ちます。また、クラウド サービスが通知の送信を停止したり、アプリが長い間実行されなかったり、ユーザーがネットワークに長期間接続しなかったりする場合、明示的に有効期限を設定しておくと、システムの接続状態に関係なく、古いコンテンツが確実に削除されます。

たとえば、株式市場の取引が活発な日は、株価の更新の有効期限を送信間隔の有効期限の 2 倍に設定することをお勧めします (30 分ごとに通知を送っている場合は有効期限を通知の送信後 1 時間にするなど)。また、ニュース アプリの場合、毎日のニュースを表示するタイルの更新の有効期限は 1 日が適しています。

有効期限をどのように設定するかは、配信方法によって異なります。プッシュ通知と定期的な通知では、通知を配信するクラウド サービスとの通信に使われる HTTP ヘッダーで設定します。ローカル通知とスケジュールされた通知では、API 呼び出しの一部として設定できます。

詳しくは、「プッシュ通知サービスの要求ヘッダーと応答ヘッダー」、「BadgeNotification.ExpirationTime」、「ScheduledTileNotification.ExpirationTime」、「TileNotification.ExpirationTime」をご覧ください。

ロック画面でのタイルとバッジの表示

アプリがロック画面での表示に適しているかどうかを判断するには、ロック画面の操作と制限を理解する必要があります。ここではロック画面の要約を示します。詳しくは、「ロック画面の概要」をご覧ください。

  • 最大 7 つのアプリ バッジをロック画面に表示できます。バッジの情報には、アプリのスタート画面のタイルに表示されるバッジの情報が反映されます。バッジ (グリフまたは数値のどちらか) には、バッジが関連付けられたアプリを特定できるモノクロのアイコン (ロゴ イメージ) が付随します。
  • これら 7 つのアプリのうち 1 つだけが詳しい状態スロットを占有し、アプリの最新のタイルの更新をテキスト コンテンツで表示できます。
  • ロック画面の詳しい状態タイルには、タイルの更新に含まれた画像は表示されません。
  • ユーザーは、ロック画面に情報を表示できるアプリと、詳しい状態を表示できるアプリを選びます。
  • ロック画面に表示されるすべてのアプリは、バックグラウンド タスクを実行することもできます。バックグラウンド タスクを実行できるすべてのアプリは、ロック画面に表示されます。アプリは、同時にロック画面のスロットを要求しないでバックグラウンド タスクを使うことはできません。
  • 通知キューは、ロック画面の詳しい状態タイルではサポートされません。最新の更新のみが表示されます。
  • ロック画面に表示されるアプリでは、そのアプリのマニフェストで [トースト対応] オプションを "はい" に設定している限り、ロック画面の表示中、受け取ったトースト通知がロック画面に表示されます。ロック画面に表示されるトーストは、別の場所で表示されるトーストと同じです。
  • タイルの更新、バッジの更新とトースト通知は、ロック画面専用に設計されていたり、またはロック画面だけに送られるわけではありません。送信者には、デバイスが現在ロックされているかどうかはわかりません。ロック画面に表示されるアプリの場合、通知はスタート画面とロック画面の両方に反映されます。

良いロック画面の表示の特徴

アプリをロック画面に表示するには、必ずユーザーが明示的な許可を与える必要があります。それには、ユーザーがアプリからの要求に応えるか (ユーザーに要求できるのは 1 回限り)、[設定] で手動で許可します。アクセス許可を与えることで、ユーザーはアプリから送られる情報が自分にとって重要であることを示し、アプリはそれに応える必要があります。そのため、アプリ自体がロック画面での表示に適しているかどうかをまず検討する必要があります。

ロック画面での表示に適した候補には、次のような特性があります。

情報がすぐに理解できる

ロック画面が表示されると、ユーザーが現在デバイスを操作していないことを表します。そのため、アプリがロック画面に表示する更新情報は、ユーザーの注意を引き、ひとめで理解できるものにする必要があります。似たような例として、携帯電話の着信を考えてみます。電話をひとめ見れば発信者がわかり、応答するか、そのままボイス メールに送ることができます。ロック画面に表示される情報も、携帯電話の表示と同じように簡単に理解でき、処理されるものにしてください。他のすべての特徴を使って、これを実現できます。

情報は常に最新にする

良いバッジの更新、タイルの更新、トースト通知は、スタート画面またはロック画面アプリのどちらに表示されても、すべてアクション可能です。このような通知が提供する情報に基づいて、ユーザーは新しいメールを読む、ソーシャル メディアの投稿にコメントするなど、アプリを起動して応答するかどうかを判断できます。ロック画面では、デバイスのロックの解除も必要です。そのため、ユーザーが十分な情報に基づいて判断できるよう、情報は最新にする必要があります。ユーザーは、ロック画面に表示されるアプリの情報が最新でないことに気付くようになると、アプリを信頼しなくなり、より信頼性の高い役立つアプリを探してロック画面のスロットに配置するようになるでしょう。

良い例: 最新の情報

  • メッセージング アプリは、新しいメッセージが届いたときに通知を送ります。その通知が無視されると、アプリは未読のメッセージ数でバッジを更新します。ユーザーが操作中である場合、画面をオンにしてメッセージの重要度を判断し、すぐに応答するか、後で応答するかを選ぶことができます。ユーザーが操作中でない場合は、戻ったときに正確な未読メッセージの数を確かめます。

  • メール アプリはバッジを使って未読メールの数を表示します。 新しいメールが到着すると、バッジがすぐに更新されます。ユーザーはすぐに画面をオンにして未読メールの数を確かめることができます。また、その数が正確であることが保証されます。ユーザーには、デバイスのロックを解除してメールを読むかどうかを判断する情報があります。

悪い例: 古い情報

  • メッセージング アプリは、30 分に 1 回だけ未読のメッセージ数でバッジを更新します。ユーザーは、デバイスのロックを解除するかどうかを判断する際に、バッジの数値は参考になりません。
  • 詳しい状態スロットを使う天気予報アプリが、重大な天気予報の警報が期限切れになった後も、その警報を表示し続けます。これはユーザーに誤った情報を与えるだけでなく、テキストに警報の期限が示されていると、古い情報であることがユーザーにはっきりわかるため、非常に良くない例です。アプリで常に適切な情報を知ることができるというユーザーからの信頼が失われます。情報が期限切れになったとき、アプリはその情報をクリアしておく必要があります。
  • カレンダー アプリが、期日を過ぎた予定を表示し続けています。この場合も、情報が期限切れになったときに、アプリはその情報をクリアしておく必要があります。

追加のコンテキストがなくても、情報が理解できる

ロック画面には、次のようなコンテキスト情報は表示されません。

  • アプリに詳しい状態の表示が許可されていない場合の、バッジに対応するタイル。詳しい状態が表示される場合でも、バッジはタイルからは物理的に切り離されています。バッジの横のロゴ イメージが、そのアプリを示す唯一の要素です。
  • タイル更新時の画像。更新のテキスト部分だけが、詳しい状態スロットに表示されます。
  • 通知キュー。最新の更新だけが、詳しい状態スロットに表示されます。

そのため、更新は、利用できる追加のコンテキストがスタート画面になくても、ユーザーが理解できるようにする必要があります。繰り返しますが、通知をロック画面専用にすることはできません。したがって、アプリによる更新のやり取りは、必ず "追加のコンテキストがなくても理解できる" というルールに従う必要があります。

  詳しいタイルとは異なり、トーストでは画像 (存在する場合) とテキストの両方が表示されます。ロック画面に表示されるトーストはそれ以外の場所に表示されるトーストと同じであるため、コンテキストは失われません。

良い例: 追加のコンテキストがなくても理解できる

  • メール アプリはバッジを使って未読メールの数を表示します。スタート画面のタイルには、最新のメールからのテキスト スニペットや送信者の画像など、詳しい情報が表示されることがありますが、バッジではこのような追加情報がなくても理解できる情報を伝えます。
  • ソーシャル ネットワーキング アプリが、詳しい状態スロットを使って、ユーザーに友人の最近の活動を知らせます。友人がユーザーにメッセージを送ると、通知のテキストに友人の名前が含まれます (たとえば、"カイルから新しいメッセージが届きました!" など)。スタート画面では、通知に表示される友人の画像によって、ユーザーに優れたエクスペリエンスを提供できます。ロック画面では、画像は表示されませんが、だれがメッセージを送信したかがテキストからはっきりとわかります。

悪い例: 追加のコンテキストがないと理解できない

  • メッセージング アプリが最新の受信メッセージでタイルを更新し、送信者の画像とメッセージのテキストだけを表示します。スタート画面では、ユーザーは、だれがメッセージの送信者であるかはっきりわかります。ロック画面では、送信者の画像がないため、ユーザーはだれがメッセージを送信したのかわかりません。
  • ソーシャル ネットワーキング アプリがフォト コラージュでタイルを更新します。テキストはありません。スタート画面では、これは楽しく、生き生きとしたタイルです。ロック画面では、タイルの更新にテキストが含まれていないため、何も表示されません。

ユーザーに合わせた便利な情報

ロック画面の主な目的のうち 2 つは、ユーザーにカスタマイズされたサーフェスを提供することと、アプリの更新プログラムを表示することです。アプリがロック画面での表示に適しているかどうかを判断する際に、これらの目的を両方とも検討してください。

ロック画面に表示されるアプリは非常に特殊です。同時に 7 個だけロック画面に表示できます。貴重なロック画面のスロットの 1 つを割り当てることにより、ユーザーは、頻繁にデバイスを使っていない場合でも、そのアプリから送られる情報が重要で確認する必要があることを示しています。そのため、アプリが提供する情報は、ユーザーに合わせると同時に便利である必要があります。

  デバイスがロックされるとロック画面が表示されるというのが決まりです。ロック画面のコンテンツを表示するうえで、ログインなどのセキュリティ上の操作は必要ありません。したがって、ロック画面に表示される情報は個人向けにカスタマイズされるのが理想的ですが、だれでもその情報を見ることができるということに注意してください。

良い例: ユーザーに合わせた情報

  • メール アプリは、ユーザーのアカウントにある未読メールの数を表示します。
  • メッセージング アプリは、ユーザーに送信された未読メールの数を表示します。
  • ニュース アプリは、ユーザーがお気に入りとしてフラグを付けたカテゴリにあるニュース記事の数を表示します。

悪い例: ユーザーに合わせていない情報

  • ニュース アプリは、ユーザーが示した好みをまったく考慮しないで、ニュース サービスから送られるすべての新しい記事の合計数を表示します。
  • ショッピング アプリは、セールの通知を送りますが、ユーザーが示した好みの商品やカテゴリに基づいていません。

役立つ情報に絞った的確な表示

情報は、変更が発生した場合だけ表示する

前に説明したように、目的は、ロック画面で情報がひとめで理解されるようにすることです。そのために、アプリが現在バッジを表示していない場合は、ロック画面上でバッジが本来表示される場所にすき間が残されます。このことにより、ユーザーは注意が必要な情報に気付きやすくなります。イベント後のバッジとロゴの外観は、新しい情報を伝えることなく最初からその場所に表示されていた場合よりも目立ちます。

状態を示すという目的のためだけに、状態を表示しないでください。長期間続く状態や変更されることのない状態は、ロック画面を煩雑にするだけで、より重要な情報を目立たなくします。ユーザーが気付くべきイベントが発生したときだけ、バッジを表示します。タイルの更新も同じです。古くなった通知コンテンツはタイルから削除します。削除すると、スタート画面ではタイルは既定の画像に戻り、ロック画面では何も表示されません。

良い例: 有益な場合にのみ表示される情報

  • メール アプリは、未読メールがあるときにのみバッジを表示します。新しいメールが到着すると、バッジは更新されて表示されます。
  • メッセージング アプリは、ユーザーがメッセージを受信できないときだけ接続状態を表示します。"接続された" 状態は、アプリの既定の状態であるという前提のため、その情報を伝える意味はありません。"すべて順調" という通知は、アクション可能な通知とはいえません。ただし、メッセージを受信できないときにユーザーに通知することは有益で、アクション可能な情報といえます。

悪い例: 長期間続く状態

  • メール アプリまたはメッセージング アプリで、未読メールの数が表示されないと、新しいメールまたはメッセージが到着するまで接続状態を表示します。このようにすると、バッジが常に表示されているため、ユーザーは新しいメッセージがあるかどうかをひとめで確認しにくくなります。
  • カレンダー アプリが、予定がないことを示すメッセージを表示します。この場合も、常に何か情報が詳しい状態スロットに表示されるため、ひとめ見て確認できるという詳しい状態スロットの操作性が低下します。

トースト通知でのみ到着時にサウンドを再生する

バッジまたはタイルが更新されたときにサウンドを再生するコードをアプリに埋め込まないでください。トーストについては、到着時にサウンドを再生するように設計できます。

この記事で説明しているガイダンスに従うと、ロック画面に正しい情報を正しい方法で表示するアプリを作成できるようになり、アプリに対するユーザーの満足度と信頼を高めることができます。

ロック画面要求 API を使うケース

アプリが正常に機能するためにバックグラウンド権限が必要な場合にのみ、ロック画面要求 API (RequestAccessAsync) を呼び出してください。利用できるバックグラウンド スロットは 7 つだけであるため、ユーザーは、正常に機能するにはバックグラウンド権限が必須であるアプリと、(バックグラウンド権限があれば機能が追加される場合でも) バックグラウンド権限がなくても正常に機能するアプリを見分ける必要があります。

アプリがユーザーの要求を満たすうえでバックグラウンド権限が不可欠な場合にのみ、要求 API を使って、アプリをロック画面に配置するようユーザーに求めることをお勧めします。

バックグラウンド権限がなくてもユーザーの要求を満たすことができる場合は、アプリをロック画面に配置するようユーザーに対して明示的に求めないようにしてください。代わりに、ユーザーが [PC 設定][パーソナル設定] ページを通じてアプリをロック画面に配置できるようにします。

要求 API を呼び出す必要のあるアプリの例:

  • アプリがフォアグラウンドに存在しないときにメッセージを受け取るためにバックグラウンド権限が必要なメッセージング アプリ
  • アプリがフォアグラウンドに存在しないときにユーザーの受信トレイを同期するためにバックグラウンド権限が必要なメール アプリ

要求 API を呼び出さないようにするアプリの例:

  • 予報を更新するためにバックグラウンド アクティビティではなく定期的な通知を使う天気予報アプリ
  • バッジで示される新しい記事の数を特定の時刻に更新するニュース アプリ

  アプリには、ロック画面にそのアプリを追加するようユーザーに求めるダイアログを実装できません。アプリでロック画面へのアクセスが正常に動作する必要がある場合は、ロック画面要求 API によって表示されるダイアログを使う必要があります。以前にユーザーがこのダイアログでアプリに対するロック画面の権限を拒否した場合は、このダイアログが再表示されないことがあります。この場合は、アプリのインライン テキストを使って、[PC 設定][パーソナル設定] ページにユーザーを誘導し、手動でアプリをロック画面に追加してもらうこともできます。

Windows ストアの要件のチェック リスト

Windows ストアの一般的な要件については、「Windows アプリの認定の要件」をご覧ください。Windows ストアで承認されるには、タイルまたは通知を使って広告を表示することはできません。

関連トピック

デザイナー向け
タイル テンプレート カタログ
タイルとタイル通知の概要
バッジの概要
ロック画面の概要
通知キュー
通知配信方法の選択
セカンダリ タイルのガイドライン
開発者向け (HTML)
クイック スタート: タイルの更新の送信
クイック スタート: バッジの更新の送信
クイック スタート: ロック画面での通知の表示
クイック スタート: Visual Studio マニフェスト エディターを使用した既定のタイルの作成
タイル通知をスケジュールする方法
タイルの定期的な通知を設定する方法
ローカル通知で通知キューを使用する方法
タイルの XML スキーマ
開発者向け (XAML)
クイック スタート: タイルの更新の送信
クイック スタート: バッジの更新の送信
クイック スタート: ロック画面上のタイルの更新とバッジの更新の表示
ローカル通知で通知キューを使用する方法
クイック スタート: Visual Studio マニフェスト エディターを使用した既定のタイルの作成
BackgroundExecutionManager.RequestAccessAsync
サンプル
アプリのタイルとバッジのサンプル
ロック画面のアプリのサンプル

 

 

表示:
© 2014 Microsoft