良いWindowsストア アプリの作り方 vol.10 ～コントロールの大きさ～

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


[タッチを意識したユーザー インターフェイス]
Windowsストア アプリで、画面上やフライアウトにコントロールを配置するときは、タッチを意識した大きさ、すなわちタッチしやすい大きさにします。
マウスのときは小さな点でもクリックできます。
しかし、タッチで小さな点をタップするのは難しいです。

タッチを意識したユーザーインターフェイスを紹介します。
以下の図は、PowerPoint 2013で文字の色を変えるときの図です。
マウスでツールバーをクリックすると、このようなパレットが表示されます。



ツールバーの同じ場所を指でタッチすると、このようなパレットが表示されます。



指でタッチするときは、このようにある程度の面積が必要です。
Windowsストア アプリでは、タッチしやすい大きさのコントロールを配置します。


[コントロールの大きさ]
タッチを意識したときのターゲットとなるコントロールの大きさとして、お勧めの最小サイズは7mm×7mm、ピクセル数としては40ピクセル×40ピクセルです。
タッチの正確さが重視される場合は、50ピクセル×50ピクセルの大きさを用意します。

大きさに関する情報は、下記ページの後半にある「Windows 8 のタッチターゲット」をご参照ください。
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465415.aspx


[前後の記事]
vol.09 : タッチのフィードバックを用意する

マイクロソフト
田中達彦

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