モバイルアプリのUIデザインで難しいのはターゲットとなるデバイスの画面サイズに様々なサイズのものがあるということです。画面の大きさにはいろいろあっても人間の手や指のサイズはほぼ誰でも同じですから、どんな画面サイズであっても確実に押せるようなUIのサイズというのを把握してデザインしないと大変使いにくいものになってしまいます。

例えばiOSの「ヒューマンユーザーインターフェースガイドライン」では「タッチ可能な領域のサイズを約44x44ポイントにしなさい」とし、サンプルとして電卓アプリの画面が紹介されています。

“Give tappable elements in your app a target area of about 44 x 44 points. The iPhone Calculator app is a good example of fingertip-size controls.”

「ポイント」というのはiOS独自の単位で、iPhone登場の時点ではこれが「ピクセル」でした。初代iPhoneの画面解像度は320x480ピクセルで163 ppiの解像度でしたから、ドットピッチは約0.15ミリだったわけです。そうすると44ピクセルは約7ミリ弱になります。48でなく44にした理由はわかりませんが、この「7ミリ」という数字が多くのモバイルプラットフォームでは「最小タップサイズ」として考慮されているのです。Androidでは「48 dp」という単位が最小のタップ可能な領域として設定されています。「Android Design」では「(平均して)48 dpというのは実サイズで9ミリになります。このサイズはタッチスクリーンオブジェクトとして推奨するターゲットサイズ(7-10ミリ)に当たり、ユーザーは指で正確にタッチすることが出来ます」と書かれています。iOS同様、7ミリを最小のタップサイズとしているわけです。

“On average, 48dp translate to a physical size of about 9mm (with some variability). This is comfortably in the range of recommended target sizes (7-10 mm) for touchscreen objects and users will be able to reliably and accurately target them with their fingers.”

なぜ「7ミリ」なのかについてはMicrosoftの「Windows Dev Center」の記事が詳しいです。さすがにUIデザインの専門家を100人単位で雇用しているだけあります。Microsoftのサイトによれば7ミリでのタップ操作によるミスは100回に1回、これが9ミリなら200回に1回、そして5ミリだと30回に1回とされています。ゆえに「7ミリ」であれば概ね問題なく、より慎重な操作が必要なボタンには「9ミリ」を推奨しています。またボタン間のスペースは「2ミリ」以上を推奨しています。

minimum_tap_area

問題はこの「7ミリ」というサイズはあくまで液晶画面での実サイズだということです。実際のデザイン作業はピクセル単位ですから、解像度に合わせて考慮しないといけません。そのためにiOSでは「ポイント」という単位を使っています。iPhone 3以前、つまり解像度が160 ppiでは44x44ピクセルが約7ミリのサイズでしたが、iPhone 4以降、あるいはretinaのiPadでは2倍の88x88ピクセルが約7ミリになるからです。またAndroidでは48 dpという基準単位に解像度の係数をかけます。最近の4インチでフルHD(1,080×1,920)のスマートフォンでは係数は「3」になりますから「48 dp」は「144ピクセル」になります。

minimum_tap_size

次の表は主なモバイルデバイスで「7ミリ」がどのくらいのピクセル数に当たるかを調べたものです。iOSデバイスではもちろん44ポイントになっていますね。最も高解像度なXperia Zでも120ピクセルで7ミリになりますから、48 dp=144ピクセルあれば、概ね7ミリ以上となることがわかります。

screen-size

では実際にAppleやGoogleのアプリではどのようなサイズになっているのでしょうか?下はiOS 7のタイトルバー部分です。タイトルバーの高さが88ピクセルありますので、約7ミリということになります。少し小さいですけどね。バー右のボタンの幅も88ピクセルです。ボタン間のスペースは4ピクセルとこれは少し狭いので場合によっては押し間違えてしまうかもしれません。

ios_bar

Androidの場合は720x1280のHDサイズの例です。HDの場合の解像度係数は2になりますので、48 dp x 2 = 96ピクセルが7ミリになります。下はアクションバーのタイトル部分です。やはりバーの高さは96ピクセルで約7ミリです。バー右のボタンのアイコンサイズはやや小さいですが、タップ領域の横幅は112ピクセル(56 dp)ありますので9ミリ相当となり、押し間違いを軽減するように考慮されていることがわかります。逆にバー左のアップキーは24ピクセルとかなり小さいですが、隣のアプリアイコンと合わせてタップできるので十分な大きさとなっています。Androidではなぜボタンの横幅を48 dpより拡大しているかというと、もしスペースに限りがある場合、横幅だけでも拡大するとかなり押しやすくなるからです。どうしても縦幅で48 dpを取れない場合でも横幅を十分取ることで改善される場合があります。

android_bar

また押す指の違いでも大きさが変わります。ユーザーが使う指を特定はできないのですが、もし片手操作で親指しか使うことができないのであれば「7ミリ」では少し小さいです。Nokiaの「Design and User Experience Library」では、人差し指の操作では7ミリ、親指での操作では8ミリを推奨しています。

このように最小のタップサイズとしては「7ミリ」を確保すれば概ね問題がないように思います。ただ「7ミリ」はあくまで「最小」のサイズですから、ターゲットとなるユーザー、使用する環境(グローブでの操作など)を考慮してデザインすることが必要ですね。

Tags: