Windows 8 のピン留めサイトの高画質なビジュアル

  • Article

「Windows 8 のピン留めサイト」では、サイト開発者が Windows 8 スタート画面に表示されるサイトのピン留めサイト タイルのサイト アイコン (お気に入りアイコン) を用意する方法について説明されています。皆さんの多くが、ユーザーのピン留めサイト タイルでサイト ブランドをきれいに表現できるように高解像度のビジュアルを用意したいというフィードバックを述べていました。Windows 8 Release Preview では、それが可能になりました。PNG タイル画像を使い、タイルの背景色を指定する機能を追加しました。

例

次に示すのは、サイトのお気に入りアイコンを使い、色が自動的に決定されたピン留めサイト タイル (左) とタイルにカスタム色を使った高解像度の PNG (右) の例です。

Fresh Tweets デモの既定のタイル@BenThePCGuy をフォローしている Fresh Tweets のタイル

マークアップ

Meta タグでは、タイルの画像と背景色を指定します。次に例を示します。

<meta name="msapplication-TileImage" content="images/benthepcguy-144.png"/>

<meta name="msapplication-TileColor" content="#d83434"/>

タイル画像は、144 ピクセル× 144 ピクセルの正方形の PNG にする必要があります。最良の結果を得るため、タイルの色と同じ背景ではなく、透明な背景を使うことをお勧めします。タイルの色は、CSS の #rrggbb 表記、CSS 色名、または CSS rgb() 関数を使って、16 進数の RGB 色として指定できます。

この実際の動作については、更新された Fresh Tweets デモ (英語) でご覧ください。

注: IE10 は、追加の帯域幅コストがかからないように、ユーザーがサイトを自分のスタート画面にピン留めした場合のみタイル画像をダウンロードします。

まとめ

Internet Explorer 10 では、Web 開発者がピン留めサイト タイルをサイト独自の高画質なビジュアルにすることができ、サイトのブランドが Windows 8 スタート画面にきれいに反映され、他のアプリとコンテンツのタイルと見た目が統一されるようにすることができます。開発者が用意できる高画質アイコンは 1 つだけのため、Windows 8 がデバイスの解像度に合わせて倍率を調整します。

サイトでは、通知を共有したり、サイト内をすばやく移動できるジャンプ リストを用意したりすることもできます。方法については、「Windows 8 のピン留めサイト」をご覧ください。

Windows 8 における皆さんの Web サイトの魅力を最大限に高める、これらのシンプルな機能をぜひご活用ください。

- Internet Explorer 担当プログラム マネージャー Rahul Lalmalani