モバイルアプリはどう設計する？UIデザインを考える8つのポイント

スマートフォンやタブレットの普及とともに、ますます重要性を増してくるモバイル向けのアプリ開発。最近ではモバイルファーストという考え方も一般的になり、PC用のアプリやサイトよりも、モバイル向けのものが優先されるケースも少なくありません。
モバイル用デバイスとPCは、使用する場所やシーン、使い方など、さまざまな点が異なります。そのため、UIデザインを考えるうえでも、その違いを踏まえて開発する必要があります。具体的には、どんなことに注意する必要があるのでしょうか。デザイナーが知っておくべきポイントをご紹介します。

こんなにある！　モバイル向けアプリUIデザインのポイント

1. デザイン要素はできるだけ少なく

スマートフォンやタブレットなどのモバイルデバイスは、画面の大きさが限られています。そのため、不必要に要素を増やしてしまうと、それだけで画面構成が複雑になってしまい、ボタンなど操作に必要な要素を見つけにくくなる可能性があります。これでは十分なユーザビリティを確保することはできません。
スペースを分けるためのラインや、視線を留めるためのアイキャッチアイコンなど、不必要な要素がないかもう一度見直してみましょう。例えばラインがなくても、レイアウトや余白を工夫して、スペースが分かれているように見せることが可能です。同様に、アイキャッチアイコンがなくても、文字のサイズやウェイト（文字の太さ）を工夫すれば、視線を留めることができるでしょう。

2. 使用する色は極力少なくする

PCサイトのメニューなどで、項目ごとに異なる色が使われているページを見たことはないでしょうか。デザインのロジック上、このように色を変えるというのは、異なる要素であることを意味します。
画面を広々と使えるPCアプリでは、こうした手法は情報を識別しやすくするなどの効果がありますが、画面の広さが限られているモバイルアプリでは画面を複雑にし、ユーザーを混乱させる原因になってしまいます。多くてもベースカラー2色とアクセントカラー1色の3色程度にとどめておいたほうがいいでしょう。また、屋外など強い光の下では細かな色の違いは見分けにくく、そもそもユーザーに認識されない可能性もあります。

3. フォントは基本的に1種類のファミリーのみ

画面をシンプルに、認識しやすくするという点では、使用するフォントを統一することも大切です。色と同様に、フォントを変えるのもやはり、デザインのロジックでは異なる要素であることを意味するのです。
ユーザーを混乱させないためにも、1つのアプリの中で使用するフォントは1種類にとどめ、違いを出す必要がある場合はウェイトの違うものを利用するようにしましょう。

4. タップできる領域は広く取る

PCにはマウスがあるため、クリックする位置を細かくコントロールすることができます。しかし、人の指で操作するスマートフォンやタブレットでは、マウスに比べて正確にタップすることは簡単ではありません。特に手の大きな男性が操作する場合や、歩きながら操作する場合はなおさらでしょう。
そのため、PC用のアプリに比べてタップできる領域は広く取っておく必要があります。レイアウトの都合などでボタンが小さくなってしまう場合も、タップ領域だけは広く取るなど、ユーザビリティを損なわない工夫が必要になります。

5. 「タップできそう」と思わせるデザインにする

直感的な操作を求められるモバイルデバイスでは、メニューやリンクなどを「タップできそう」なデザインにすることも大切です。例えばPC用のサイトやアプリでは、文字だけのメニューやリンクを見かけることがありますが、同じデザインでモバイル用のアプリを設計してしまうと、タップできると認識されない可能性があります。
すべてのリンクやメニューをボタンにする必要はありませんが、背景色を入れたり、罫線を利用したりすれば、「タップできそう」に見せることができるでしょう。

6. 文字入力はできる限り使用しない

スマートフォンやタブレットにはキーボードがありません。そのため、PCに比べて文字入力が面倒で、ストレスを感じるユーザーは少なくありません。中にはフリック入力が得意という人もいるかもしれませんが、スピードや入力のしやすさにおいては、現時点ではキーボード入力のほうが優れていると言えるでしょう。

モバイル用のUIを考えるうえでは、できる限り文字入力をしなくていいように設計することが重要となります。例えば、プルダウンメニューやラジオボタンを活用するなどの方法が考えられるでしょう。また、住所を入力する場合は、郵便番号を入力するだけで番地以外の住所を自動表示させるなど、できるだけユーザーの手間を省くよう工夫することが大切です。

7. 誤操作を防ぐために、ホワイトスペースを取る

モバイル用のデバイスは画面の広さが限られているため、リンクやボタンなどの要素は画面いっぱいに盛り込んで、有効にスペースを使いたいと考える人もいるかもしれません。しかし、その発想は誤操作を誘発し、ユーザビリティを大きく損なう可能性があります。
例えば画面が、リンクやタップをできる領域で埋め尽くされていると、画面をスクロールしたりスワイプしたりする際に、誤ってタップをしてしまい画面が遷移してしまう可能性があります。
また、次にどのページを見ようかと画面に指を軽くあてて考えているような場合に、意図せず長押ししてしまうことがありえます。こうした誤操作を防ぐためにも、UIのデザインを考えるうえで、適切なホワイトスペース（余白部分）を確保しておくことが大切です。

8. 親指1本だけですべての操作ができるように設計する

スマートフォンの持ち方は人によってさまざまですが、UIを考えるうえでは、どのような持ち方をしても使いやすいように設計するのが基本です。指が届く範囲を考えると、片手で持った際に、親指1本ですべての操作ができるよう設計するのがベターでしょう。
通勤中の電車の中や、歩きながら、食事をしながらなどスマートフォンを使用するシーンはさまざまなものが考えられます。片手で持ち、親指1本だけで操作ができれば、ほとんどの場面に対応することができるでしょう。最近ではスマートフォンの画面は大型化している傾向にあるため、場合によっては、タップできる領域を親指の届く範囲だけに限定するなどの工夫も必要かもしれません。
ユーザビリティの高いUIを開発することは、製品やサービスの売上げにも影響する
SNSなどのWebサービスに限らず、一般の企業までがマーケティングのためにモバイルアプリを開発するなど、モバイル市場はどんどん拡大しています。ユーザビリティの高いUIを開発することは、製品やサービスをユーザーに受け入れてもらううえで、非常に重要な施策になると言えるでしょう。今回ご紹介したポイントを参考に、ユーザーに愛されるアプリを開発していきましょう！

参考：
10 things every UI designer should know about end users
20 stunning examples of minimal mobile UI design
3 secrets every mobile UI/UX designer must know
Transitioning your UX/UI Design from Desktop to Mobile