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

Windows Phone のアイコン タイル テンプレートのデザイン ガイドライン

2013/12/05

対象: Windows Phone 8 のみ

このトピックでは、アイコン タイル テンプレートについてさらに詳しく説明します。

メモメモ:

Windows Phone 7.1 のタイルをデザインする場合は、「Windows Phone のフリップ タイル テンプレートのデザイン ガイドライン」を参照してください。

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

次の画像は、アイコン タイル テンプレートのサイズ情報について説明します。

Iconic template size info

デザイン リソースの詳細については、「Windows Phone 8 のアイコン テンプレート」を参照してください。

解像度のスケーラビリティを適切に保つには、以下に注意してください。

  • アイコン タイルのテンプレートには 2 つのイメージを設定する必要があります。イメージは次のように使用されます。

    • SmallIconImage:

      • このイメージは、タイルが小さいサイズに変更されたとき、またはタイルがワイド タイルでその上にコンテンツ文字列が表示されるときに使用されます。

      • このイメージの最大サイズは 110 × 110 ピクセルですが、推奨される "最適な" 寸法は 70 × 110 ピクセルです。

    • IconImage:

      • このイメージは、タイルが中サイズに変更されたとき、またはタイルが数を持つ場合と持たない場合があるワイド タイルで、その上に表示されるコンテンツ文字列がないときに使用されます。

      • このイメージの最大サイズは 202 × 202 ピクセルですが、推奨される "最適な" 寸法は 130 × 202 ピクセルです。

  • 必ず作成しているアセットのフル サイズまで、透明バッファーを垂直方向に埋めてください。中または大のイメージの白いピクセルの高さが 130 ピクセルしかない場合、透明バッファーでアイコンの上下に 202 ピクセルの高さまで埋めてください。必ずイメージが真ん中になるようにします。

  • 水平面は必ず厳密にトリミングしてください。たとえば、イメージの幅が 130 ピクセルの場合、130 ピクセルでトリミングし、水平面を透明バッファーで埋めないでください。埋めると、ピクセル数がイメージからかけ離れたものになります。

  • 最初に大きなアイコンのイメージをレイアウトし、可能な場合は縮小して小さいアイコンのイメージにします。たとえば、幅 130 ピクセル、高さ 202 ピクセルのタイルの場合は、縦横比を 110 ピクセル、幅およそ 70 ピクセルと低く設定します。

Segoe WP は固定幅のフォントではないため、文字数は概算です。文字列の自動折り返しはありません。改行は自分でプログラムする必要があります。ただし、文字の切り詰めは、Windows Phone の新しいスタイルを反映するため、推奨されることを理解しておいてください。

タイル サイズ

タイトル

WideContent1

WideContent2

WideContent3

NA

NA

NA

NA

19

NA

NA

NA

ワイド

39

33

33

33

ワイド アイコン タイルを作成する場合は、行ごとに異なる内容にすることを検討してください。たとえば、電子メール アプリ用のタイルを作成したとします。WideContent1 では電子メールの送信者を示す必要があります。WideContent2 には電子メールの件名を入れる必要があります。WideContent3 は、おそらく電子メール メッセージの 1 行目が入り、タイルからはみ出る可能性が高くなります。

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

アイコン タイルの作成と更新の詳細については、「Windows Phone 8 用のアイコン タイル テンプレート」を参照してください。

表示: