スマートフォンアプリのUIは、サービスの評価に直結する重要なファクターといえます。
ユーザーからの反応がダイレクトにわかるからこそ、UIにはこだわりたいものです。ですが、ユーザーの声を全て盛り込むことは、難しいのも事実です。
スマートフォンアプリで、ユーザーにとって使いやすいUIとはどのようなものでしょうか。
ユーザーの目線に立ったUIを考えるために必要な、3つのポイントをご紹介します。
ポイント１：
アプリの使いやすさを左右するナビゲーション
アプリの使いやすさを印象づけるのが、メニューによるナビゲーションです。
ナビゲーションには、リストメニューやスプリングボード、ドロワーメニューなどさまざまパターンがあります。
リストメニュー
情報をカテゴリに合わせて分類し、ツリー上に表示させたナビゲーションです。
表示させるタイトルが長い場合でも見やすく、一覧性があるため多くのアプリで採用されています。
スプリングボード
メニューリストがアイコンで表示され、一目で直感的にどんなメニューがあるか認識しやすくなっているナビゲーションです。
OSや端末のサイズに依存しないというメリットがあります。視認性がよく使いやすいのが特徴で、リストメニューとは異なり、カテゴリのタイトルが短い場合に有効です。
ドロワーメニュー
サイドメニューとも呼ばれ、メイン画面を表示させたまま画面左に、メニューリストをスライド式で表示させるナビゲーションです。
画面遷移が早く、情報を隠すことで画面がすっきりと見やすくなります。独特の操作性も人気ですが、利き手によって使いやすさが変わるので、ユーザーに左右されるUIです。
ポイント2：
端末のサイズに合わせたデザイン
昨今では、AndroidやiPhoneなどさまざまな大きさのスマートフォンがあり、端末の大きさに左右されないレイアウトで表示させるリキッドデザインを用いるのが主流です。
iPhoneの画面レイアウトを指定する場合は、画像やアクションボタンのサイズが、端末が違っても変わらないように「px」ではなく「pt」という単位を使用します。
iPhoneは機種によって多少サイズに違いはありますが、大幅なフォルムチェンジはありません。iPhone4Sまでの端末は3.5インチ、iPhone5以降が4インチに変更になりました。横幅は同じで高さが違うだけなので、最小サイズの3.5インチに合わせてレイアウトを整え、4インチなどサイズが大きくなる場合は、部分的に伸ばす場所を決めておきます。
Androidの場合は種類が多く、画面サイズや解像度は端末によってさまざまです。画面レイアウト時は端末が異なる場合でもきれいに表示されるように「px」ではなく「dp」を使用します。さまざまな種類の端末サイズに対応できるように「mdpi」や「hdpi」、「xhdpi」などの画像を用意すると良いですが、画像が多いと容量も大きくなるため、注意が必要です。
小さい画面サイズ（横320dp）でレイアウトを整え、大きいサイズで表示する際、伸ばす場所を指定します。Androidは、普通に引き伸ばすと画像が粗くなってしまうため、引き伸ばす場合は9Patchを使用して、画像崩れを防ぎましょう。9PatchはAndroidアプリでしか使用できませんが、9Patchを用いると、画像崩れを防ぐだけでなく、端末によって最適な画像サイズに変換してくれます。
ポイント3：
タップエリアとタッチスタイルを意識
タッチパネルの操作で、注意したいのがタッチミスです。スマートフォンアプリのUIを考える上で、このタッチミスをどれだけ減らせるかが、ユーザーの使いやすさにつながります。
スマートフォンアプリのタッチ対象のサイズは見やすさを考え、7mm程度が望ましいとされています。また、タッチ対象を並べるときは、マージンを2mmとるとより押しやすくなります。
片手で操作することの多いスマートフォンでは、端末の持ち方や向きを想定したレイアウトにすることが大切です。親指で操作する際には、親指が届く範囲に重要なコマンドを設置すると使いやすくなります。また、操作中に誤って押してしまいそうな場所にコマンドを置かない、タッチできるものとできないものを色分けして視認性をあげるなど、直感的な操作ができるように意識することが大事です。
まとめ
今回は、UIを考える上で大事なポイントをご紹介しました。
どんなに便利なアプリもUIに問題があると、サービスを知ってもらう前に使ってもらえなくなります。
ユーザーの使いやすさを意識することで、よりよいサービスの提供につながります。思い通りの成果が出せなくて悩んでいる方は、この機会にUIについて考えてみてはいかがでしょうか。
