Lesson 11 応用編(2) ユーザビリティ向上のためのUIデザイン - HTML5＋CSS3 次世代Webコーディングの超・最新動向・Smartphone編

HTML5＋CSS3 次世代Webコーディングの 超・最新動向

Smartphone編

	Lesson 11			応用編(2) ユーザビリティ向上のためのUIデザイン
	制作・文			山岸ひとみ（株式会社Gaji-Labo）

スマートフォンサイトのUIでは、デバイスの特性や実際のサイズを考慮したうえで、ユーザビリティを高める工夫をしたい。デザイン段階から実装時のふるまいまで含めてUIデザインをしよう。

スマートフォンサイトのユーザビリテ ィを考えるうえで、デザインと実装を切り離すことは難しいため、動作や画面遷移 まで含めたディレクションが必要である。

デザイン及び実装の方針を定める際には、必ずiOS Human Interface Guidelines【1】、Android User Interface Guidelines、Smartphone User Interface Guidelinesなどのガイドライン※01を一読しておきたい。

※01
参考URL
iOS Human Interface Guidelines
http://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/MobileHIG.pdf

Android User Interface Guidelines
http://developer.android.com/guide/practices/ui_guidelines/index.html

Smartphone User Interface Guidelines
http://msdn.microsoft.com/en-us/library/ms854546.aspx


【1】iOS Human Interface Guidelinesではさまざまな規定が示されている。動作に迷ったらガイドラインをチェックして、基本的なUIをおさらいしよう

各デバイスがどんなジェスチャに対応しているかを把握し、ジェスチャに応じて最適なデザインができるようにしておこう【2】。


【2】Touch Gesture Reference Guide（http://www.lukew.com/ff/entry.asp?1071）では、iPhone／Android／Windows Mobileなどのタッチスクリーンで採用されているジェスチャがまとめられている

主要なナビゲーションを配置する際、手で持ったときにデッドスペースになる場所は避けよう。戻るボタンの位置などはiPhoneなどで採用されているネイティブのUIに準じると、ユーザーにとってわかりやすいナビゲーションとなる【3】。


【3】左手で持って左手の親指で操作する場合、画面左下の隅は死角になるしタップが難しい。人それぞれ持ち方が違うので、それぞれの場合を考慮してデザインする

ボタンなどでリンクを表現する場合、iOS Human Interface Guidelinesなどで示されている44×44px 以上の領域が確保できればタップしやすくなる。そのサイズを確保するのが難しい場合にも、なるべく広いリンク領域を心がけたい。a要素をdisplay:block; にして内部に余白を持たせるなどのテクニックは必須だ【4】【5】。



【4】サンプルファイル（index.html）



【5】bt01（上）はa要素をdisplay:block;にしてボタンいっぱいをリンク領域にした例。
bt02（下）はテキスト部だけしかタップできない例

リスト間の余白は2 ～5mm以上取って おきたい。余白が取られていない場合、隣接したタップ領域を触って誤操作を起こす可能性が高くなる【6】【7】。


【6】サンプルファイル（index.html）



【7】余白のないリストでは、タップ領域に対して指が大きすぎて誤操作を起こしやすい

情報が多くなると、ページが長くなる。 折りたたみのUIを活用すれば、ページ内で見せたい情報をコントロールすることができる【8】【9】。多用すると逆効果になる場合もあるので、用途を絞って活用したい。


【8】ポルシェで採用されている折りたたみUIの例



【9】メニューをクリックするとサブメニューが展開する

アプリだけでなく、スマートフォンサイ トでもフリックでのページ遷移に対応する場合がある。フリック操作でページの移動を行う場合は、縦フリックと横フリックが混在すると誤操作が増える。どちらか一方のみの移動に統一して、ユーザーの混乱を防ごう【10】。

また、iPhoneとAndroidではフリック の操作感に若干の違いがあるため、実際に操作しながら作るのが望ましい。


【10】縦と横のフリックはほんの少しの角度の違いで誤操作となる可能性が大きい。方向は統一しよう