良い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 : タッチのフィードバックを用意する
vol.11 : 様々な解像度への対応

マイクロソフト
田中達彦

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

Comments (0)