スマートデバイスアプリのUI基本ポイント5つ


スマートフォンやタブレットの普及を受けて、スマートデバイスアプリのUI設計を行う機会も増えています。スマートデバイスアプリのUIは、従来のRIAとは異なり、タッチインターフェースであることや、OSやデバイスの多岐にわたることなどを理解した上で設計する必要があります。

20131220_0

アプリのUI設計のルール(お作法)は、各OSの公式ガイドラインに記載してあります。
各OSの公式UIガイドラインに則ってUI設計を行うことはもちろん必要ですが、どのOSのUIガイドラインも「スマートデバイスアプリ」という部分では共通しています。

そこで、スマートデバイスアプリのUI設計において心がけたい基本ポイントを「ビュー」と「タッチインターフェース」の視点でまとめてみました。
アプリのUI設計時に、参考にしてみてください。

① スケーラブル

今日さまざまなスマートフォン端末やタブレット端末が登場し、画像サイズや画面解像度が多様化しています。アプリは、ユーザの閲覧環境に左右されずに最適なレイアウトで表示を行うことができるよう設計します。
表示コンテンツの高さや幅(HeightやWidth)、配置する位置(MarginやPadding)を、「画面サイズに合わせて拡縮表示する可変サイズ」と「画面サイズや解像度に依存しない固定サイズ」のにわけて考えるようにしています。

20131220

下記にポイントをまとめてみました。

  • 固定サイズの指定は、デバイスの画面解像度に依存しない単位で行う
  • 可変サイズの高さや幅に上限を設ける必要がある場合、最大値をデバイスの画面解像度に依存しない単位で設定する
  • 画面サイズに合わせてレイアウトの編成(1行に表示するコンテンツの数の調節など)を行う
  • 画面サイズの大きいタブレット端末は、2ペインレイアウトも検討する
  • 画面解像度によって画像品質が低下しないように、複数サイズの素材を用意したり、SVGなどのベクター形式の画像を使用する
  • 画面サイズ、画面解像度ごとに表示確認を行う。(実機で行うのがベスト)

② マルチビュースタイル

アプリは、デバイスの画面回転によるポートレート表示、ランドスケープ表示を想定する必要があります。

20131220_2

下記にポイントをまとめてみました。

  • 対象のビューにおいて、閲覧しやすいレイアウトであるか確認する
  • 画面回転時に画面が再描画されても、ユーザの状態が保持されているよう、適切にユーザデータの保存と復帰を行う
  • 画面内にスクロールがある場合、どのビューでもスクロール方向は同一方向にする
  • 画面回転に対応しない場合、端末が回転されても画面は回転しないよう、各画面で設定を行う

③ タップエリアとマージン

アプリは、タッチによる入力操作をスムーズに行うために「タッチUI要素のサイズ」と「マージン」に留意して設計する必要があります。
タッチ対象のUI要素の大きさは、約7mmが望ましいとされています。またタッチするUI要素を並べる場合、マージンを含むタップエリアの大きさが約9mm程度がよいとされています。
下図に各OSで推奨されているタップエリアのサイズをまとめました。

20131220_3
  • タッチ対象のUI要素のサイズは約7mm以上になるように設計する。マージンを含むタップエリアの大きさが約9mm以上になるようにする
  • アプリで、ページのコンテンツ領域の上下左右に設けるマージンを統一させる
  • タッチミスを1回の操作で修復できる場合のみ、タッチ対象のUI要素に約5mmのサイズを使用できるものとする。使用する場合、他のタッチUI要素を2mm以内に配置しないようにする

④ タッチスタイル

アプリは、利用するユーザのタッチスタイル(デバイスの持ち方や画面の向きなど)を考慮してレイアウトを行う必要があります。
例えば、片手での操作が想定されるスマートフォン向けのアプリの場合

  • 親指で操作しやすい位置に重要な入力コマンドを用意しておく
  • タッチミスを起こしやすい位置にコマンドを配置しない
  • 親指のサイズを考慮してタッチUI要素の大きさを少し大きめに設計する

などの対応が考えられます。同様にタブレット端末についても考慮する必要があります。
簡易モックなどを使用して、実機で入力操作の使い勝手を評価・改善できるようにします。

20131220_4

⑤ タッチ&フィードバック

アプリは、主に「タッチUI要素の無効化状態(disable)」「タッチUI要素をタップしている状態(press)」「アプリが処理を行っている状態」をフィードバックとして視覚的に表現する必要があります。

20131220_5
  • タッチUI要素の無効化時には、タップできない見た目にカラーやアルファ値などを変化させる
  • タッチUI要素のタップ時には、要素や背景のタップエリアのカラーを変化させる
  • アプリが処理中には、処理の全体量がわかる場合には進捗状態がわかるプログレスバーを、処理の全体量が不明な場合にはインジケーターを表示する

まとめ

公式UIガイドラインには、各OSのユーザにとって最適なUXを提供するために、スマートデバイスアプリの基本的なUIに関わる部分からOS独自のコンポーネント(コントロール)の活用まで、幅広いルールが記載されています。
スマートデバイスアプリの基本的なUI設計ポイントを押さえた上で、各OS独自のUIルールやデザインパターンを活かしたUI設計を行えるように「App Human Interface Guidelines」「Android Design」「Windows 8 User experience guidelines」の3つに一通り目を通しておくことをおすすめします。