良いWindowsストア アプリの開発方法 vol.01 ～余白の取り方の決まり～

マイクロソフトの田中達彦です。
本連載では、良いWindowsストア アプリを作るために、知っておくべきポイントを紹介します。

[余白の取り方]
Windowsストア アプリのUIをデザインするときには、余白についての知識が不可欠です。
いくつかのWindowsストア アプリを見てみましょう。

ぐるなび

FingerPiano


朝日新聞


楽天トラベル



他のWindowsストア アプリも上方向、左方向、アイテム間の余白の取り方が統一されています。
これは、アプリのUIを作るにあたり、余白の取り方についての決まりがあるからです。

画面の設計をする際に、文字や画像などのアイテムをグリッドに合わせて配置していきます。
グリッドの基本的な単位は20ピクセル×20ピクセルの1単位(1 unit)です。
1単位は、5ピクセル×5ピクセルの1サブ単位(1 sub unit)に分割されます。
1サブ単位が、Windowsストア アプリにおける最小単位です。

アプリを見てみると、左側の余白の量が統一されていることがわかります。
左側の余白は、6単位、すなわち120ピクセルです。
同様に、タイトル部分のベースラインは上から5単位、すなわち100ピクセルの位置と決まっています。
コンテンツは、上から7単位、すなわち140ピクセルの位置から配置します。

アイテムとアイテムの間の余白の量も決まっています。
基本は2サブ単位、すなわち10ピクセルです。
グループとグループの間や、文字がある場合など状況に応じて余白の量が定義されています。

余白に関する詳細は、下記のWebサイトに掲載しています。
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh872191.aspx
タイトルに「JavaScriptとHTMLを使った」と書いてありますが、C#などを使用した場合でも、この決まりは同じです。

マイクロソフト
田中達彦

※ 「Metroスタイル アプリ」は、「Windowsストア アプリ」に名前が変わりました。