さまざまな種類のアプリでのライブ タイルの使用 (Windows ランタイム アプリ)

Applies to Windows and Windows Phone

このトピックでは、さまざまな種類のアプリでライブ タイルを使うにあたり、設計時に考慮する必要のある事項について説明します。

ゲーム

ライブ タイルを使って、ユーザーにゲームの進行状況を知らせたり、ハイ スコアを表示したり、ゲームの更新を通知したりすることで、ユーザーのゲーム プレイを促すことができます。

ターン制ゲーム

ライブ タイルを使って、ゲームがユーザーのターンになったときに通知し、同時にゲームの進行状況の詳しい情報も知らせることができます。

この例では、ワイド タイル TileWide310x150PeekImage06 テンプレートを示しています。このテンプレートは、ゲームの現在の状態を示す画像 (1) と、相手プレイヤーの画像および状態 (2) を交互に表示します。

さらに、普通サイズ タイル TileSquare150x150PeekImageAndText01 テンプレートを示しています。このテンプレートは、ゲームの小さい画像と、ユーザーのターンであることを通知するテキスト (3) を交互に表示します。

ターン制ゲームの例

ソーシャル ゲーム

ライブ タイルを使って、ゲームへの招待状、まだ読んでいない招待状、競い合っている友人のスコアなどを表示することで、ユーザーのゲーム プレイを促すことができます。

この例では、ワイド タイル TileWide310x150Text09 テンプレートを示しています。このテンプレートは、新しいトップ スコアが記録されたことを通知するメッセージ (1) と、そのスコアの詳しい情報 (2) を表示します。

さらに、普通サイズ タイル TileSquare150x150Text04 テンプレートを示しています。このテンプレートは、小さな領域に新しいハイ スコアの情報を表示します。

ソーシャル ゲームの例

ゲームの再開

ライブ タイルを使って、前回ゲームを終了した時点からゲームを再開するように促すことができます。

この例では、ワイド タイル TileWide310x150ImageAndText02 テンプレートを示しています。このテンプレートは、ユーザーがゲームの進行状況を前回保存した時点の画像 (1) と、ユーザーのゲームに関する情報 (2) を表示します。

さらに、普通サイズ タイル TileSquare150x150Text02 テンプレートを示しています。このテンプレートはゲーム内でのユーザーの前回のセーブ ポイントの詳しい情報を表示します。

ゲームの再開の例

ゲームの更新

ライブ タイルを使って、ゲームに新しいダウンロード コンテンツなどの更新があることをユーザーに通知することができます。

この例では、ワイド タイル TileWide310x150ImageAndText02 テンプレートを示しています。このテンプレートは、ゲームの画像 (1) と、ゲームの更新に関する情報 (2) を表示します。

さらに、普通サイズ タイル TileSquare150x150PeekImageAndText04 テンプレートを示しています。このテンプレートは、ゲームの画像と、ゲームの更新に関する情報を交互に表示します (3)。

タイルのヒット ターゲットは 1 つのみであるため、ユーザーはゲームとダウンロード サイトのどちらかに移動できます。

ゲームの更新の例

 

ソーシャル アプリ

ソーシャル アプリでライブ タイルを使うことで、アプリがフォアグラウンドにない場合でもユーザーをアプリに引きつけることができます。

状態の更新

ライブ タイルを使って、友人の最新情報をユーザーに伝えることができます。

この例では、ワイド タイル TileWide310x150SmallImageAndText04 テンプレートを示しています。このテンプレートは、状態またはコメントを追加した人物の画像 (1) と、その人物の名前とテキストの冒頭部 (2) を表示します。

さらに、普通サイズ タイル TileSquare150x150Text02 テンプレートを示しています。このテンプレートは、状態またはコメントを追加した人物の短い名前とテキストを表示します。

状態の更新の例

写真と画像

投稿またはコメントが画像または写真に関するものである場合、更新を表示する際に、ライブ タイルにその画像を含めることができます。

この例では、ワイド タイル TileWide310x150PeekImage05 テンプレートを示しています。このテンプレートは、写真 (1) と、写真に関するコメント (2) を交互に表示します。

さらに、普通サイズ タイル TileSquare150x150PeekImageAndText04 テンプレートを示しています。このテンプレートは、写真と、その写真に関するコメント テキストを、小さいタイルに収まるように切り詰めて表示します (3)。

写真の例

複数ユーザーまたはグループ

セカンダリ タイルを使って、ユーザーが友人、家族、同僚をスタート ページにピン留めできるようにすることができます。コレクション タイル テンプレートを使って、ライブ タイルにグループ メンバーの画像を表示できます。プレビュー タイル テンプレートを使って、グループ メンバーに関連する更新を表示できます。

この例では、ワイド タイル TileWide310x150PeekImageCollection05 テンプレートを示しています。このテンプレートは、グループ メンバーの画像のコレクション (1)、グループ メンバーが投稿した最新のメッセージ (2)、グループを表す名前 (3) を順番に表示します。

さらに、普通サイズ タイル TileSquare150x150PeekImageAndText02 テンプレートを示しています。このテンプレートは、グループ メンバーに関する更新と、それに関連するグループ メンバーの画像 (4) を交互に表示します。

写真の例

イベント

ライブ タイルを使って、場所、時間、参加する友人などのイベント情報を表示できます。また、セカンダリ タイルを使って、ユーザーがイベントをスタート ページにピン留めできるようにすることもできます。そうすることで、参加するイベントや開催するイベントに関する最新情報にユーザーが簡単にアクセスすることができます。

この例では、ワイド タイル TileWide310x150PeekImageCollection02 テンプレートを示しています。このテンプレートは、イベントの画像 (1)、イベントに参加する友人の画像のコレクション (2)、参加人数などのイベント情報を順番に表示します。

さらに、普通サイズ タイル TileSquare150x150PeekImageAndText04 テンプレートを示しています。このテンプレートは、イベントの画像またはイベント参加者の画像 (3) と、参加人数などのイベント情報を交互に表示します。

写真の例

要約情報

ライブ タイルを使って、更新の要約をアプリに表示できます。多くの場合、要約はそれほど魅力のある通知方法ではありませんが、ユーザーが個人情報をスタート画面に表示することを望まない場合には便利です。

この例では、ワイド タイル TileWide310x150BlockAndText01 テンプレートを示しています。このテンプレートは、更新の総数 (1) と、カテゴリ別の更新の要約情報 (2) を表示します。

さらに、普通サイズ タイル TileSquare150x150Block テンプレートを示しています。このテンプレートは、更新の総数を表示します。

写真の例

 

ニュース アプリ

ニュース アプリにライブ タイルを使って、ユーザーに最新ニュースのプレビューを表示し、ユーザーを引き付けることができます。ライブ タイルに設定できるターゲットは 1 つのみであるため、ユーザーがアプリの前面ページで簡単に見つけることができるニュースのみを表示してください。

特集記事

ライブ タイルを使って、特集記事の目を引く部分を表示することができます。このライブ タイルでは、複数の記事を順に表示して、今日のニュースの概要をユーザーに伝えることができます。

この例では、ワイド タイル TileWide310x150ImageAndText01 テンプレートを示しています。このテンプレートは、記事の画像と、ヘッドライン テキストの両方を表示します (1)。さらに、普通サイズ タイル TileSquare150x150Text04 テンプレートを示しています。このテンプレートは、ヘッドラインのみを表示します (2)。

ヘッドラインが長い記事については、ワイド タイル TileWide310x150Text04 テンプレートなど別のライブ タイル テンプレートを使うことで、長いテキストを表示できます。

特集記事の例

ヘッドラインが長い記事

ヘッドラインが長い記事については、ライブ タイル テンプレートを使うことで、さらにテキストを追加できます。

この例では、ワイド タイル TileWide310x150Text04 テンプレートを示しています。このテンプレートは画像を含まず、小さいフォントを使っています (1)。そのため、ユーザーは記事のヘッドライン全体を読むことができます。

さらに、普通サイズ タイル TileSquare150x150Text04 テンプレートを示しています。このテンプレートは、ヘッドライン テキストを切り詰めて表示します (2)。普通サイズのタイルで切り詰められたヘッドライン テキストを読者が理解できるかどうかを確認しておく必要があります。

ヘッドラインが長い記事の例

ヘッドラインが短い記事

ヘッドラインが短い記事については、テキストを大きなフォントで表示するライブ タイル テンプレートを使うことができます。

この例では、ワイド タイル TileWide310x150Text03 テンプレートを示しています。このテンプレートは大きなフォントを使って短いヘッドラインを表示します。このテンプレートを使う場合、ヘッドライン テキストが切り詰められないことを確認しておく必要があります。

普通サイズ タイル テンプレートを使っている場合は、小さいフォントを使う TileSquare150x150Text04 テンプレートなどを使います (2)。このテンプレートは、スペースに余裕のない普通サイズのタイルに適しています。

ヘッドラインが短い記事の例

大きい画像の表示

プレビュー タイル テンプレートを使って、記事の画像とヘッドライン テキストを交互に表示できます。この場合、読者が画像を認識しやすいように、タイルにはテキストを表示せず画像のみを表示します。

この例では、ワイド タイル TileWide310x150PeekImageAndText01 テンプレートを示しています。このテンプレートは、記事の画像と、長いヘッドライン テキストを交互に表示します (1)。

また、普通サイズ タイル TileSquare150x150PeekImageAndText04 テンプレートも示しています。このテンプレートは、記事の画像と、切り詰められた長いヘッドライン テキストを交互に表示します。

大きい画像の例

世論調査と統計情報

グラフを示す画像を追加して、記事に世論調査の結果や統計情報などを表示できます。

この例では、ワイド タイル TileWide310x150ImageAndText01 テンプレートを示しています。このテンプレートは、世論調査の結果を示す画像 (1) と、その結果を説明するテキストを表示します (2)。

さらに、普通サイズ タイル TileSquare150x150Text04 テンプレートも示しています。このテンプレートは、世論調査の結果を説明するテキストのみを表示します。

世論調査と統計情報の例

ブログと意見記事

小さい画像タイルを使って、ブログや意見記事の執筆者の画像を表示できます。執筆者を強調することで、ブログや意見記事を他の種類のニュースと区別することができます。

この例では、ワイド タイル TileWide310x150SmallImageAndText03 テンプレートを示しています。このテンプレートは、執筆者の写真、執筆者の名前、ヘッドライン テキストを表示します (1)。

さらに、普通サイズ タイル TileSquare150x150Text04 テンプレートを示しています。このテンプレートは、執筆者の名前とヘッドライン テキストを小さいフォントで表示します (2)。小さいフォントを使うことで、より長いヘッドライン テキストを読者に表示できます。

ブログと個人記事の例

動画

ライブ タイルを使って、動画を再生できます。

この例では、ワイド タイル TileWide310x150ImageAndText02 テンプレートを示しています。このテンプレートは、動画のスクリーン ショット (1)、動画のヘッドライン ("動画" というラベルが付きます) (2)、タイルで動画再生が開始されたことを示す再生バッジ (3) を表示します。

さらに、普通サイズ タイル TileSquare150x150Image テンプレートを示しています。このテンプレートは、スクリーン ショットと再生バッジを表示します。

動画の例

ニュースのカテゴリ

セカンダリ タイルを使って、ユーザーが特定のカテゴリのニュース記事をピン留めし、表示されるコンテンツをパーソナル設定できるようにすることができます。プレビュー タイル テンプレートを使って、関連する一連の記事を順に表示することができます。

この例では、ピン留めされたタイルで最新のビジネス ニュースを表示しています。この例では、ワイド タイル TileWide310x150SmallImageAndText01 テンプレートを使っています。このテンプレートは、企業ロゴを小さい画像として表示し (1)、短いヘッドラインを大きいフォントで表示しています (2)。

さらに、普通サイズ タイル TileSquare150x150Text04 テンプレートを示しています。このテンプレートは、短いヘッドライン テキストのみを表示します (3)。

カテゴリの例

 

生産性

ライブ タイルを使って、共有ドキュメントへの新しい変更の通知、重要イベントの追跡、タスク一覧の表示などを行うことで、仕事に関する最新情報をユーザーが常に把握できるようにすることができます。

メモ書き

ライブ タイルを使って、ユーザーがメモに簡単にアクセスできるようにしたり、ドキュメントに対する変更を通知したりできます。

この例では、ワイド タイル TileWide310x150SmallImageAndText02 テンプレートを示しています。このテンプレートは、ドキュメントを変更した人物の画像 (1)、そのドキュメントのタイトル (2)、ドキュメントの最終更新日時 (3) を表示します。

さらに、普通サイズ タイル TileSquare150x150Text04 テンプレートを示しています。このテンプレートは、ドキュメントのタイトルと最終更新日時のみを表示します。

どちらのタイル テンプレートでも、ドキュメントの変更を示すために星形のバッジ (4) が表示されます。

メモ書きの例

カレンダーと予定

ライブ タイルを使って、今後の予定に関する情報を表示できます。場所、時間、予定の内容など、予定に関する情報を表示できます。

この例では、ワイド タイル TileWide310x150SmallImageAndText04 テンプレートを示しています。このテンプレートは、案内地図の画像 (1) と、予定に関する情報を表示します。

さらに、普通サイズ タイル TileSquare150x150Text04 テンプレートを示しています。このテンプレートは、予定に関する重要情報のみを表示します。

カレンダーと予定の例

タスク一覧

ライブ タイルを使って、ユーザーにタスク情報を表示します。ワイド タイル テンプレートでは複数の項目を表示でき、普通サイズ タイル テンプレートでは一度に 1 つの項目を表示できます。

この例では、ワイド タイル TileWide310x150Text11 テンプレートを示しています。このテンプレートは、フォント グリフを使ってタスクの状態を表示し (1)、タスク一覧の複数の項目を表示します (2)。

さらに、普通サイズ タイル TileSquare150x150Text04 テンプレートを示しています。このテンプレートは、一覧の各タスクと、一覧内のタスクの数を示すバッジ (3) を順に表示します。

タスクの例

データの同期

ライブ タイルを使って、ファイルまたはデータをクラウド、サーバー、共有ディレクトリと同期するときの変更内容をユーザーに通知することができます。さらに、空き領域や使用可能な帯域幅が少なくなったときに警告を表示することもできます。

この例では、ワイド タイル TileWide310x150Text02 テンプレートを示しています。このテンプレートは、変更の内容と変更を実行したユーザー名 (1)、ファイルの変更内容の詳しい一覧 (2) を表示します。

さらに、普通サイズ タイル TileSquare150x150Block テンプレートを示しています。このテンプレートは、変更の要約を表示します。

データの同期の例

 

エンターテイメント アプリとメディア アプリ

ライブ タイルでは、ユーザーに合わせたおすすめ機能によってユーザーが新しいコンテンツを発見できるようにしたり、お気に入りのアーティストやテレビ番組のプレイリストやリリース予定を表示することで最新情報を把握できるようにしたりできます。

映画とテレビ番組

ライブ タイルを使って、映画のリリース予定やテレビ番組の新エピソードをユーザーに通知することができます。また、ソーシャル アプリからの評価とおすすめも含めることができます。

この例では、ワイド タイル TileWide310x150PeekImage05 テンプレートを示しています。このテンプレートは、テレビ番組の画像と、友人がそのテレビ番組をおすすめしていることを交互に表示します (1)。

さらに、普通サイズ タイル TileSquare150x150PeekImageAndText04 テンプレートを示しています。このテンプレートは、テレビ番組の画像 (2) と、友人がそのテレビ番組をおすすめしていることを表示しますが、友人の画像は表示しません (3)。

映画の例

一時停止中の映画とテレビ番組

ライブ タイルを使って、一時停止中の映画をユーザーへの通知としてタイルに表示できます。

この例では、ワイド タイル TileWide310x150Image テンプレートを示しています。このテンプレートは、一時停止中の映画が停止された時点のシーンの画像 (1) と、映画が一時停止中であることを示す一時停止バッジ (2) を表示します。

この例では、普通サイズ タイル TileSquare150x150Image テンプレートを示しています。このテンプレートは、一時停止中の映画が停止された時点のシーンを切り抜いた画像と一時停止バッジを表示します。

一時停止されたタイルが、ユーザーにとってどのような価値があるのかを考慮してください。ユーザーは数日前に一時停止した音楽は再開しないでしょうが、一時停止した映画を翌日や翌々日に再開する可能性はあります。

一時停止中の映画の例

音楽

ライブ タイルを使って、現在再生中の楽曲、リリース予定の楽曲、アーティストの詳しい情報を表示することができます。ソーシャル アプリからの評価とコメントを表示したり、出演予定や楽曲のリリース予定などの情報を表示したりできます。

この例では、ワイド タイル TileWide310x150SmallImageAndText02 テンプレートを示しています。このテンプレートは、アーティストまたはアルバムの画像 (1) と、楽曲、アーティスト、アルバムに関する情報 (2) を表示します。

さらに、普通サイズ タイル TileSquare150x150Text04 テンプレートを示しています。このテンプレートは、楽曲に関する重要な情報のみを小さな形式で表示します (3)。

音楽の例

写真

ライブ タイルを使って、写真とアルバムの縮小版を表示できます。ユーザーが画像を作成し編集できるアプリの場合、ライブ タイルを使って、アプリで写真に適用できる効果をアピールすることができます。

この例では、ワイド タイル TileWide310x150PeekImageCollection05 テンプレートを示しています。このテンプレートは、写真アルバムの画像のコレクション (1)、アルバム作成者の画像 (2)、アルバム コンテンツの名前と説明 (3) を順番に表示します。

さらに、普通サイズ タイル TileSquare150x150PeekImageAndText04 テンプレートを示しています。このテンプレートは、アルバムの中の 1 枚の写真とアルバムの情報を交互に表示します。

写真の例

 

ショッピング アプリ

ライブ タイルを使って、その日の特売商品やユーザー向けのおすすめ商品をアプリに表示することで、商品をアピールすることができます。また、販売が処理されたときや商品が発送されたときに、販売者と購入者に通知することもできます。

おすすめ商品

ライブ タイルを使って、新商品や特売商品、ユーザーの関心に関連する商品を表示することができます。

この例では、ワイド タイル TileWide310x150ImageAndText01 テンプレートを示しています。このテンプレートは、近日の休日に合わせた画像と販売情報 (1) を表示します。

さらに、普通サイズ タイル TileSquare150x150Text02 テンプレートを示しています。このテンプレートは、近日の休日の販売情報のみを表示し、画像を表示しません (2)。

おすすめ商品の例

カタログ

ライブ タイルを使って、カタログの製品の画像のコレクションを表示できます。

この例では、ワイド タイル TileWide310x150ImageCollection テンプレートを示しています。このテンプレートは、カタログの関連する複数の商品の画像 (1) を表示します。

さらに、普通サイズ タイル TileSquare150x150Image テンプレートを示しています。このテンプレートは、カタログの 1 つの商品の画像を表示します (2)。ここでは、関連する画像を一度に 1 つずつ、順に表示することができます。

カタログの例

購入者通知

アプリが商品の競売をサポートしている場合、ライブ タイルを使って、ユーザーが競り勝ったとき、競り負けたとき、商品が発送されたときなどにユーザーに通知することができます。

この例では、ワイド タイル TileWide310x150Text09 テンプレートを示しています。このテンプレートは、購入者の更新を大きなテキストで表示し (1)、更新の詳しい情報を小さなテキストで表示します (2)。

さらに、普通サイズ タイル TileSquare150x150Text04 テンプレートを示しています。このテンプレートは、更新と、詳しい情報を短い形式で表示します。

購入者通知の例

販売者通知

購入者通知と同様に、販売者にも商品が販売されたことを通知できます。大量販売の場合、在庫の変化に関する更新、または販売数量などの一般的な分析情報の更新を販売者に通知できます。

この例では、ワイド タイル TileWide310x150Text07 テンプレートを示しています。このテンプレートは、合計販売額の概要を大きなテキストで表示し (1)、詳しい情報を小さなテキストで表示します (2)。

さらに、普通サイズ タイル TileSquare150x150Text02 テンプレートを示しています。このテンプレートは、1 日の販売額などの詳しい情報を表示します (3)。

タイル通知によって商品が販売されたときに通知したり、基本的な分析情報を表示したりすることで、販売者は常に最新の商品状況を把握することができます。

販売者通知の例

ショッピング カート

ライブ タイルを使って、ユーザーのショッピング カートの中の商品の要約を表示できます。

この例では、ワイド タイル TileWide310x150BlockAndText01 テンプレートを示しています。このテンプレートは、カート内の商品の数 (1) と、カート内の商品の詳しい情報を表示します (2)。

さらに、普通サイズ タイル TileSquare150x150Block テンプレートを示しています。このテンプレートは、カート内の商品の総数のみを表示します (3)。

ショッピング カートの例

カテゴリと通常の検索

セカンダリ タイルを使って、ユーザーが特定のカテゴリの商品、欲しい物リスト、カタログのカスタム検索をピン留めできるようにすることができます。

この例では、ワイド タイル TileWide310x150SmallImageAndText01 テンプレートを示しています。このテンプレートは、製品のカテゴリの画像 (1) と、近日の特売情報などのその製品カテゴリの詳しい情報 (2) を表示します。

さらに、普通サイズ タイル TileSquare150x150Image テンプレートを示しています。このテンプレートは、製品カテゴリの画像と、ユーザーに新しい情報を通知する警告バッジを表示します (3)。

カテゴリの例

 

資産管理アプリ

ライブ タイルを使って、ユーザーが注目している株式の最新価格と情報、市場指数、IPO や大きな動きなどのトレンド トピックなどを表示できます。

個人資産管理

ライブ タイルを使って、ユーザーの支出の要約を表示できます。スタート ページに表示する情報をユーザーが選べるようにしてください。

この例では、ワイド タイル TileWide310x150Text03 テンプレートを示しています。このテンプレートは、ユーザーの支出の要約 (1) と、ユーザーがお金を使いすぎていることを通知する警告バッジ (2) を表示します。

さらに、普通サイズ タイル TileSquare150x150Text04 テンプレートを示しています。このテンプレートは、要約情報と警告バッジを小さな領域に表示します。

個人資産管理の例

支払

ライブ タイルを使って、近日の課金または支払をユーザーに通知することができます。

この例では、ワイド タイル TileWide310x150BlockAndText01 テンプレートを示しています。このテンプレートは、支払期日の要約 (1) と、次の支払期日をユーザーに通知するための大きなフォント グリフおよび日付 (2) を表示します。

さらに、普通サイズ タイル TileSquare150x150Block テンプレートも示しています。このテンプレートは、次の支払期日をユーザーに通知するためのフォント グリフおよび日付のみを表示します。

支払の例

金融市場

ライブ タイルを使って、ユーザーが所有または注目している株式および金融資産の収益率を表示できます。

この例では、ワイド タイル TileWide310x150Text06 テンプレートを示しています。このテンプレートは、フォント グリフを使って株価の上昇または下落を表示し (1)、株式の一覧とその最新価格、その日の価格変動 (%) を表示します (2)。

さらに、普通サイズ タイル TileSquare150x150Text03 テンプレートを示しています。このテンプレートは、注目する株式とその最新価格を短い形式で表示します。

金融市場の例

個別の株価

セカンダリ タイルを使って、ユーザーが特定の株式をスタート ページにピン留めし、その株式の詳しい情報をひとめで把握できるようにすることができます。

この例では、ワイド タイル TileWide310x150SmallImageAndText02 テンプレートを示しています。このテンプレートは、株式に収益率のグラフ画像 (1)、その株式の詳しい情報と最新価格 (2)、情報が最後に更新されたときのタイム スタンプ (3) を表示します。

さらに、普通サイズ タイル TileSquare150x150Text03 テンプレートを示しています。このテンプレートは、小さな領域に株式情報とタイム スタンプを表示します。

個別の株価の例

 

関連トピック

タイル テンプレート カタログ
TileTemplateType enumeration
アプリのタイルとバッジのサンプル
クイック スタート: タイルの更新の送信
タイルの XML スキーマ
タイルとタイル通知の概要
タイルとトーストの画像サイズ

 

 

表示:
© 2014 Microsoft