モバイルアプリをデザインする際、最も心に留めておきたいことは、ユーザーにとって便利で直感的なデザインにするということです。
デザインしたアプリがユーザーの役に立たなければ、実用価値がありませんし、誰も使ってくれません。便利なアプリだとしてもユーザーの時間と労力を必要とするものであれば、その使い方を学ぶことさえしてくれないでしょう。
良いUIデザインはこの両方のポイントをおさえています：
- 便利なモバイルアプリはユーザー中心である。ユーザーは差し迫った問題を解決するために、あなたのアプリをインストールします。アプリにはハッキリとした「目的」が必要です。あなたのユーザーが何を達成しようとしているのかを考え、その目的に焦点を当て、必要ないものは全て取り除きます。
- UIを明確にする。あなたがデザインしたUIを効果的にするためには、それが「何のためのもの」で「どのように使うのか」を人々が認識できなければなりません。混乱を招かないようにします。
このことを踏まえつつ、今回はモバイルでよりよいユーザー体験を生み出すための、UXデザインの基本原則を９つご紹介します。
１. 整理整頓する
ユーザーの注意をどこへ向けさせるかを考えましょう。UIを散らかした状態にしておくと、ユーザーへ情報を与えすぎてしまいます。あなたがボタンや画像、文章を追加すればするほど、画面の複雑性はましてしまいます。
デスクトップのアプリやウェブサイトの画面が散らかっているのも良くありませんが、モバイルではその100倍見難くなります。（出典：ftrain）
完璧とは、取り除くものがないときに達成される
これはAntoine de Saint-Exupéry氏の有名な言葉です。モバイルデザインも、必要ではないものは取り除いていくことが大事になります。整理整頓することで、コンテンツに対する理解力が増すのです。
１画面に１つの主要な動作
モバイルアプリの１画面につき、ユーザーにとって実際に価値ある１つの動作のみを盛り込みます。これによって、ユーザーにとって分かりやすく、より使いやすいアプリになります。
また、本当に必要なときに、そこに何かを加えたり作り足したりすることもできます。整理された100画面のほうが、散らかった１画面よりも望ましいということです。
Uberを例にとってみましょう。Uberユーザーの目的はタクシーに乗ることです。多くの情報をユーザーに与えずに、ユーザーの位置を自動的に割り出し、ユーザーは乗りたい場所（PICKUP LOCATION）を選択するだけでいいのです。
良いUXを作るための基本的なルールのひとつに、ユーザーが欲しいものを得るための時間と労力を減らすということがあります。
2. ナビゲーションを明らかに
ユーザーを誘導することは、どのアプリにとっても優先度の高いタスクのはずです。良いナビゲーションは、旅の最中ずっとユーザーを案内してくれる目に見えないガイドのようなものです。結局、見た目がよくて人を惹きつける内容であっても、ユーザーが見つけたいものを探せなければ意味がありません。
良いモバイルナビゲーションの原理はこちらです：
- モバイルナビゲーションは分かりやすくなければいけません。ナビゲーションの説明が一切必要ないよう、そして、各ナビゲーションの要素（アイコンなど）が確実に正しい場所へユーザーを導くように適切な記号（誰が見ても理解できるメタファー）を使いましょう。
- モバイルナビゲーションはアプリの中で一貫性がなくてはいけません。ナビゲーションコントロールを違う場所に移したり、他のページに隠したりしないようにしましょう。ユーザーを混乱させてしまいます。
- モバイルナビゲーションは現在位置を明確に伝えなくてはいけません。現在位置の表示に失敗することは、アプリのメニューで最もよくあるミスです。UIにおいて「私は今どこにいるのか？」という基本的な問いを常に意識することで、ユーザーを適切に誘導できるでしょう。
３. シームレスな体験を作り出す
モバイルデザインを単独で考えず、デスクトップやタブレットの間にシームレスな体験を作り出すことは、ユーザーにとって、とても重要なポイントになります。
Apple Music
Apple Musicを例にとってみましょう。Macでプレイリストを作ると、すぐにiPhoneでもそのプレイリストを見ることができます。Appleは、モバイルアプリのデザインがとても重要だと認識しながら、iPhoneやデスクトップ、iPad間でのシームレスな体験を作りだすこともまたユーザーにとって重要なことだと理解しています。
４. 指に優しいタップ領域をデザインする
小さなタップ領域はクリックするのが難しいので、モバイルのUIをデザインする際はユーザーがタップしやすいように領域を大きくしましょう。指で正確にタップできるよう、サイズは７ミリから10ミリのものを作ります。このサイズなら、ユーザーの指がぴったり領域の中に入ります。領域を正確にタップしているという視覚のフィードバックを与えるために、枠はタップする時は目に見えるようにしておきます。
UIのコントロールが小さいとエラーを呼びユーザーをイライラさせてしまいます。指先の動きを捉えられるよう、ターゲットを十分に大きくしましょう。（出典：Apple）
また、タップ領域同士の間にも十分なスペースを確保します。
５. 文章は読みやすく
デスクトップと比べるとスマホの画面は比較的に小さく、モバイルデザインの難しさは、その小さなUIにたくさんの情報を収めなくてはならないところにもあります。できるだけ多くの情報を伝えようと、全てを詰め込んでしまいがちですが、そうならないように気を付けてください。
モバイルの文字ルール：文字サイズは最小でも11ptに設定し、ズームしなくても普通の距離で読みやすいようにしましょう。
行間の高さや文字間を空けて、読みさすさを改善します。余白を十分に取ることで、乱雑なUIをより見やすくシンプルにします。
良いUIには、十分なスペースがあります。（出典：Apple）
６. UIの要素がはっきりと見えるように
内容を見やすく、そして分かりやすくするために色とコントラストをうまく調整しましょう。ユーザビリティを高めるために、原色、等和色、そしてアクセントカラーを選び、更に低視力の人でもあなたのアプリが使えるよう、十分なコントラストもつけるといいでしょう。
文字が見やすいようにフォント色と背景に十分なコントラストをつけます。W3Cは本文テキストとイメージテキストのコントラスト比を以下のように推奨しています：
- 小さな文字は背景に対して最低4.5:1のコントラスト比を維持する
- 大きな文字（太字は14pt／普通の場合は18ptから）は背景に対して最低3:1のコントラスト比を維持する
推奨されていないカラーコントラスト比を用いた場合、背景に対して文字が読み難くなります。（出典：Apple）
モバイルでは十分なコントラストをつけることが非常に重要です。例えばユーザーが外にいた場合、外光の関係で画面のコントラストが低くなります。
このページのグレー文字は室内で見るとはっきり見えますが、外ではよく見えません。（出典：usertesting）
アイコンや他の重要な要素も、上記の推奨されているコントラスト比を使いましょう。
カラーコントラスト比に従わないと、アイコンは背景と見分けがつかなくなります（出典：Material Design）
７. UIを手の位置に合わせてデザインする
Steven Hoober氏のモバイル端末の使用の研究で、49％の人が片手の親指を使ってモバイル端末を操作していることがわかりました。下の絵の携帯電話の画面に描かれている図は、親指がどこまで届くかを色によって表したチャートです。
スマホを片手で操作した時に心地よく届く範囲（出典：uxmatters）
緑はユーザーが自然と指が届く範囲で、黄色は指を伸ばさないと届かない範囲、そして赤は端末を持ち替えなければ届かない範囲です。UIの要素を配置する場所は手の位置とその握り方に影響します：
- トップレベルのメニューや頻繁に使う要素などは親指が簡単に届く緑の範囲に収めることが重要です。
Tumblrのよく使うアクション（出典：Capptivate）
- ネガティブなアクション（削除や消去など）はユーザーが間違ってタップするのを防ぐため、指の届きにくい赤い範囲に配置します。
８. タイピングを極力減らす
モバイルでの文字入力は、時間がかかる上に間違いを起こしやすいものです。モバイルアプリを使う場合はいつもタイピングを必要最低限に抑えましょう：
- フォームはできるだけ短く、シンプルにして不必要なフィールドは省きます。
フォームの記入が好きな人はいません。より長く、より複雑に見えるほど、ユーザーは記入するのを拒んでしまいます。（出典：Lukew）
- 個人データの自動入力や、オートコンプリート機能を極力使い、ユーザーが必要最低限の入力で済むようにします。
国のフィールドにはオートコンプリート機能を使います。
９. デザインをちゃんと検証する
モバイルデザインを大きなスクリーンで見た時は良くても、実際にモバイルのサイズで見るとその半分もうまくいっていないことがほとんどです。
苦労してきめ細やかに作り上げたUXでさえも、最終的に現実の世界で試してみると今まで見えなかった欠点が見えてきます。
ですから、あなたのアプリを色々なモバイル端末を使って、実際にユーザーとテストすることがとても大切になります。ユーザーに通常のタスクを試してもらって、初めてそのデザインの良し悪しが分かるのです。アプリを常に進化するものとして扱い、分析データやユーザーからのフィードバックを使って改良し続けましょう。
まとめ
他のデザイン要素と同じように、上記に示したヒントはスタート地点にしかすぎません。これらのヒントとあなたのアイデアを混ぜて、よりよいアプリを作るのに役立てて下さい。そして、デザインはデザイナーのものではなく、ユーザーのためのものであるということを覚えておいてください。
