HTML5+CSS3 |
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などのタッチスクリーンで採用されているジェスチャがまとめられている
ナビゲーションの位置
【3】左手で持って左手の親指で操作する場合、画面左下の隅は死角になるしタップが難しい。人それぞれ持ち方が違うので、それぞれの場合を考慮してデザインする
タップしやすい広いリンク領域
【4】サンプルファイル(index.html)
【5】bt01(上)はa要素をdisplay:block;にしてボタンいっぱいをリンク領域にした例。
bt02(下)はテキスト部だけしかタップできない例
リスト間の余白
【6】サンプルファイル(index.html)
【7】余白のないリストでは、タップ領域に対して指が大きすぎて誤操作を起こしやすい
折りたたみUI
【8】ポルシェで採用されている折りたたみUIの例
【9】メニューをクリックするとサブメニューが展開する
フリックでのページ遷移は方向を統一
また、iPhoneとAndroidではフリック の操作感に若干の違いがあるため、実際に操作しながら作るのが望ましい。
【10】縦と横のフリックはほんの少しの角度の違いで誤操作となる可能性が大きい。方向は統一しよう
>>目次に戻る