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

Windows Phone のタイル デザイン ガイドライン

2013/12/05

対象: Windows Phone 8 | Windows Phone OS 7.1

タイルにより、アプリが実行されていないときでも、Windows Phone のスタート画面に魅力的なコンテンツを表示できます。

Windows Phone Tile overview image

タイルをライブにするか (通知による更新)、または静的なままにすることができます。最初のタイルは既定のタイルで、アプリのマニフェストで定義されます。静的なタイルには、必ず既定のコンテンツ (一般に、タイル全体を占めるロゴ イメージ) が表示されます。ライブ タイルは既定のタイルを更新して新しいコンテンツを表示できますが、既定のタイルに戻すには別の更新が必要です。すべてのタイルには、テンプレートによって異なりますが、回数を表示するための領域があります。

スタート画面のタイルには、小、中、ワイド (ワイドはオプション) の 3 つのサイズがあります。

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

  • ユーザーはタイルのサイズを小、中、またはワイドにいつでも変更できます。

  • ユーザーがタイル通知のオンとオフをいつでも切り替えられる方法をアプリ内で提供する必要があります。

Windows Phone 8 では、フリップ、アイコン、サイクルの 3 種類のタイル テンプレートがサポートされています。適切なタイル テンプレートを選択する方法の詳細については、「Windows Phone のアプリに最適なタイル テンプレートを選択する」を参照してください。

このセクションでは、タイルの外観と使い方を計画する場合に従うべきガイダンスと注意すべきデザインに関する考慮事項について説明します。

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

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

アプリを設計するときは、次のいくつかの理由からライブ タイルの使用を検討します。

  • タイルはアプリへの "入り口" です。魅力的なライブ タイルは、アプリが実行されていないときに、ユーザーを引き付けることができます。ユーザーは頻繁に使うアプリを重視しています。

  • ライブ タイルは、スタート画面に静的なタイルとアイコンしか表示できないオペレーティング システムのアプリとの差別化につながるセールス ポイントです。

  • ライブ タイルは、Windows Phone ストアの他のアプリとの差別化につながるセールス ポイントです。ユーザーは、似たようなアプリでも、静的なタイルを持つものよりも、便利なライブ タイルを持つものを好む傾向にあります。

  • ユーザーがライブ タイルを気に入った場合、スタート画面にその目立つタイルがあると、アプリを繰り返し使ってもらえます。そのタイルからアプリ内の素敵なコンテンツを偶然に発見すると、ユーザーは楽しい気持ちになるでしょう。

  • ユーザーがタイルを気に入らなければ、スタート画面の一番後ろに置く、固定しない、更新を無効にする、アプリをアンインストールするなどの結果になりかねません。

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

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

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

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

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

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

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

小および中サイズのタイルは、必ずユーザーに提供されるため必須です。最初に作成されるすべてのタイルは中サイズのタイルで、その後小サイズのタイルにサイズを変更する必要があります。ワイド タイルも使うかどうかを決める必要があります。ワイド タイルを使うことにした場合は、マニフェストで既定のタイルを定義する際に、ワイド イメージを指定し、マニフェスト デザイナーで [ワイド サイズをサポート] オプションを設定します。ワイド イメージを含めるようにアプリを設定しなかった場合、タイルは中サイズのタイルに設定され、中および小のみサイズ変更できるようになります。ワイドの更新通知を受け取ることもできません。

Windows Phone Iconic Tile template showcase image

小、中、ワイド タイル

アプリのタイルを作成するときは、次のデザイン ガイドラインを考慮してください。

  • ユーザーに表示する新しい興味深いコンテンツがアプリにあり、その通知が頻繁に更新される (少なくとも週 1 回) 場合にのみ、ワイド タイルを使います。

  • 小または中サイズのタイルに表示されるコンテンツは、ワイド タイルの場合よりも少なくなるので、コンテンツに優先順位を付けてください。ワイド タイルに表示できるコンテンツをすべて小または中サイズのタイルに収めようとしないでください。

  • アプリでタイル通知を使ってユーザーに更新を送らない場合は、小および中サイズのタイルだけを使います。

  • アプリで、短い要約通知を使うシナリオだけをサポートする場合は、回数と共に小および中サイズのタイルを使います。要約通知とは、回数または 1 つの数字でのみ表すことができる通知です。たとえば、ショート メッセージ サービス (SMS) アプリで、受け取った新しいテキストの数だけを伝えるために通知を使う場合などが、このシナリオに該当します。マニフェストに横長の画像を指定しないでください。

  • アプリでスタート画面に詳細を表示する必要のない更新データを送る場合は、小および中サイズのタイルを使います。たとえば、給与明細書アプリでは、給与の金額などの詳細を説明しないで、新しい給与明細書が入手可能であることだけを示すことができます。マニフェストに横長の画像を指定しないでください。

アプリの既定のタイルは、アプリのマニフェストに定義されています。既定のタイルは静的で、小、中またはワイドのいずれかであり、一般的にはシンプルなデザインとなっています。アプリによっては、既定のタイルを使えば十分な場合があります。アプリがインストールされると、既定のタイルが、通知を受け取るまでスタート画面に表示されます。

既定のタイルの適切な使用

既定のタイルを作成するときは、次の点に注意してください。

  • 既定のタイル イメージは、アプリのブランドを表すために基本的にアプリのロゴのキャンバスとして使います。

  • ワイド イメージを含める場合は、指定するワイド タイル イメージと小、中サイズのタイル イメージのデザインの関係を検討します。ユーザーは小、中サイズのタイルまたはワイド タイルのいずれを表示するか選ぶことができ、いつでもその選択を変更できることを忘れないでください。ここでは、一般的な規則をいくつか示します。

    • 同じ高さの中サイズのタイルとワイド タイルの両方で、ロゴの縦方向の位置を同じに保ちます。

    • ロゴにアプリ名が含まれていない場合は、タイルの下部にアプリ名を含めます。次の例は、これらのタイルの状態を示しています。

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

Small, medium, and wide Tiles

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

フリップ タイルまたはサイクル タイルの画像内でロゴ自体の周りのスペースを透明にすると、ユーザーのテーマ カラーが透けて表示されます。ただし、アイコン タイルを選択すると、マニフェストでブランド カラーを指定できます。この方法は、先に示したメール アプリのタイルなどのロゴで使われます。

既定のタイルの不適切な使用

既定のタイルをデザインするときに、次のようなデザインは避けてください。

  • 既定のタイルは、アプリの起動を露骨に要求するようなテキストを含んだデザイン ("クリックしてください!" と表示されたタイルなど) にしないでください。

  • ロゴにアプリ名を含める場合は、名前フィールドでアプリ名を繰り返さないでください。ここで示すように、どちらか一方のみを使ってください。

    Medium and wide Tiles

メモメモ:

ユーザーはアプリ内で提供されたボタンを使用してセカンダリ タイルを作成します。セカンダリ タイルを作成すると、タイルの配置場所を確認できるように必ずスタート画面に移動します。タイルをピンで固定した後、[戻る] ボタンを押すと、アプリに戻ります。また、ユーザーはスタート画面または親アプリから、セカンダリ タイルの削除を明示的に制御することもできます。

セカンダリ タイルの適切な使用

セカンダリ タイルを適切に使用するには、次の点を考慮してください。

  • スタート画面のすべてのタイルと同様に、セカンダリ タイルは新しいコンテンツで頻繁に更新する必要がある動的な表示機能です。セカンダリ タイルでは、他のタイルと同じメカニズムを使って通知や最新情報を表示できます。

  • セカンダリ タイルを作るかどうかの選択はユーザーに委ねられていますが、ユーザーがピンで固定できるアプリの領域は開発者が決定します。開発者は以下のガイドラインに従う必要があります。

    • 対象のコンテンツが既にピンで固定されている場合は、アプリ バーにピン ボタン ("ピン解除ボタン" として) を表示して有効にする必要があります。

    • 対象のコンテンツをピンで固定できない場合は、アプリ バーにピン ボタンが表示されないようにします。アプリでアプリ バー以外の場所にピン コマンドを表示する場合は、アプリ バーのピン ボタンが表示されないようにするか、無効状態で表示されるようにします。ピン ボタンを無効にするか、表示されないようにするかは、ボタンを有効にしたときにボタンが表示される UI サーフェイスとシナリオによって決まります。

    • ピンおよびピン解除には、SDK が提供するアプリ バーのボタンを使います。

    • セカンダリ タイルを作る、アプリ固有の状況依存型の対話的操作を追加することもできます。

セカンダリ タイルの不適切な使用

セカンダリ タイルを作成するときは、次のような方法は避けてください。

  • 変更できない個々のファイルや他の静的コンテンツへのショートカットとしてセカンダリ タイルを使わないでください。

  • "次のトラックにスキップ" タイルのように、親アプリと対話するための、事実上のコマンド ボタンとしてセカンダリ タイルを使わないでください。

以下は、タイルのデザインに関して注意する必要のあるヒントです。

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

  • ブランドをサイクル テンプレートの画像内の項目の 1 つとして使わないでください。このシナリオでは、ユーザーの目に留まるよう、タイルへの変更をアニメーション化します。興味を引く新しいコンテンツを表示せずに、ブランドを表示するためだけにアニメーションを利用してユーザーの注意を引こうとしても、ユーザーを不快にするだけです。

  • タイルを広告に使わないでください。

  • タイルで派手な色を使いすぎないようにします。注意を引くために派手に飾り立てたタイルよりも、シンプルで見やすい洗練されたデザインのタイルの方が成功します。

  • 緊急のリアルタイム情報をユーザーに送るときは、タイルに頼らないでください。たとえば、通信アプリでユーザーに着信を伝える場合、タイルは適切なサーフェイスではありません。リアルタイムのメッセージに適したメディアはトースト通知です。

  • ハイパーリンク、ボタン、その他のコントロールのように見える画像コンテンツを含めないようにします。タイルではこれらの要素をサポートしておらず、タイル全体がシングルクリックの対象となります。

  • 相対的なタイム スタンプや日時 (たとえば "2 時間前" など) は、時間が経過しても静的で、メッセージを不正確にするため、タイル更新通知で使わないでください。"14:00" などの絶対的な日時を使います。

表示: