優れたUI/UXデザイン50のルール

UI UXのポイント

Webサイトにせよ、ブログにせよ、アプリにせよ、プロダクトにせよUI/UXを最適化することは非常に重要です。 UI:ユーザーインターフェースの略
UX:ユーザーエクスペリエンスの略

今回は、ユーザーに優しく、ユーザーにストレスを与えないのUI/UXを作るためのポイントを50個紹介します。「ユーザーに不親切なWebサイトやアプリになってしまっていないか」のチェックリストとしてご利用ください。

レイアウト

1. ボタンのまわりには十分なスペースを空ける

ボタンのすぐ近くに他にボタンを置いてしまうと、ユーザーが意図せず別のボタンを押してしまう可能性があります。

ボタンの周りには十分なスペースを空ける

適切な例押し間違いのないように、十分にスペースを空けましょう。

2. 関連性の高い要素どうしは近づける

キャプションの配置

適切な例たとえば画像の内容を説明する「キャプション」は画像のすぐ近くに配置するべきです。

3. 関連性の低い要素は離す

関連性の低い要素は離して配置

適切な例逆に関連性の低い要素を近くに並べると、ユーザーが内容の整理をしにくくなります。デザインにせよ、文章にせよ、テーマの異なる内容はある程度の間隔を空けるようにしましょう。

4. 要素の端をそろえて並べる

線を作る

適切な例複数のものを縦もしくは横に並べるときは、基本的に線をつくるように規則的に並べましょう。これだけで見た目がかなりスッキリするはずです。

5. 同じ形のレイアウトを繰り返す

サイト/アプリ内でページごとにレイアウト・デザインが大きく異なると、見る人は疲れてしまいます。同じパターンで並べれば、ユーザーは次のページでも「何がどこにあるのか」がすぐに分かります。

6. 十分に余白をとる

基本的に1つ1つの要素を近づけすぎないようにしましょう。窮屈な印象を与えてしまうと、それだけでユーザーが帰ってしまう可能性があります。

7. 視線の流れを考慮する

冊子のような横長のレイアウトを設計するときには、ユーザーの視線の動きを考慮します。

視線の流れを考慮する

横幅が広いコンテンツの場合、基本的にユーザーの視線は左上から右下へと流れていきます。
右上と左下は注目されづらいため、重要なコンテンツをこの2つのゾーンに配置することは避けるのが無難でしょう。

8. 「戻るボタン」は左上に配置

ユーザーは過去の経験から「それぞれの操作ボタンが置かれている場所」を予想します。戻るボタン()を配置する場合には、ブラウザやスマホの操作画面と同じように左上に配置しましょう。

9. スクロールできることを明確に示す

ウェブサイトやアプリで、スクロールによりさらにコンテンツが表示されるような場合には、スクロールできることを明確に表現しましょう。

適切な例例えば、コンテンツの一部分だけを隠したり、矢印をつけたり、スクロールバーを表示したりすると効果的です。

こちらの記事でスクロール可能であることを示す表現をまとめています。

10. よく使うボタンは押しやすい位置に置く

押しやすい位置にボタンを配置

適切な例モバイル表示のときには、よく使うボタンは片手で押しやすい位置に配置します。特に右手の親指でスマホを操作するときに押しやすい「画面右下」のスペースは有効活用しましょう。

ただし、画面の端に近づけすぎると押し間違いをしやすくなるので注意が必要です。

11. タップにより要素を表示する場合、近くに表示する

例えば、クリック・タップによりメニューボックスを表示する場合、タップした位置から表示するようにします。逆に画面の中心をタップしたのに、画面の右下からメニューが表示されるような設計にするとユーザーが混乱してしまいます。

ストレスを与えないUI/UX設計

12. よく使う操作には、すぐに辿り着けるようにする

すぐに主要な操作に辿り着けるようにする

適切な例頻繁に行われる操作は、1〜2回のタップ(クリック)で実行できるようにします。

13. いきなり動画を再生しない

いきなり動画を再生しない

不適切な例ページを開くといきなり再生される動画広告をよく見かけます。

これはユーザーの目障りになるだけでなく、スマホからの閲覧であれば貴重な通信容量を問答無用で奪う悪逆非道な行為です。動画は再生ボタンが押されてから流すようにしましょう。

14. いきなり音を出さない

ユーザーがどこでそのページを見るかは分かりません。満員電車の中かもしれませんし、静かな病院の中かもしれません。とくにウェブページでは、ユーザーは音が出ることを想定していません。そのため開いた瞬間にいきなり音が出るような設計はやめましょう。

15. ウェブ上では、やたらページを遷移させようとしない

ウェブにおいて別のページに移動することはユーザーの負担になります。読み込みに時間がかかったり、遷移時にいきなり広告が表示されたり、意図していないページに飛ばされてしまったり、元のページに戻るのにまた時間がかかってしまったりするからです。
ユーザーがサイト内を活発に回遊してくれることは期待せず、訪問してくれたページで求められている情報を提供するようにしましょう。 アプリの場合には、通信が不要なことが多く、元の画面にも戻りやすいため、比較的多くのページを見てもらえるかと思います。

16. 操作後は元の状態に戻せるようにする

適切な例ユーザーの操作後には、元の画面や元の状態に戻ることのできるボタンを分かりやすい位置に設置しましょう。※「UNDO」=「元に戻す」

17. 追尾コンテンツは目立たないように

要素を追尾する例

適切な例不適切な例画面下部に操作ボタンなどを追尾・常駐させる場合には、邪魔にならないよう極力目立たないデザインにします。

18. 画像の縦横比を崩さない

画像の縦横比を崩さないように注意する

不適切な例画像の縦横比を崩さないように十分注意しましょう。信頼性が損なわれます。

19. 時間がかかる操作がある場合には進行度を%で表す

進行度

適切な例ユーザーを長時間待たせる場合には進行度を表示します。これにより正常に動いていることが伝わり、安心して待ってもらうことができます。

20. 結論をはじめに書く

ユーザーがある疑問を解決するためにページを訪れることを想定するとします。明確な答えがあるのであれば、その答えをはじめに提示しましょう。その後、理由や詳細を説明するようにします。くれぐれも滞在時間を伸ばそうと、結論を先延ばしにするような設計にするのはやめましょう。

21. 一定以上の長さにならない限りページを分割しない

「画像が多く貼られており読み込みに時間がかかる」などの場合を除き、1つのコンテンツを無駄に分割するのはやめましょう。ページ移動は大きなストレスになります。

22. 何を示しているか分からないアイコンを単体で使わない

例えば、 はメニューを表すものであることはなんとなく分かります。また、は「注意事項」、 は「削除操作」、 は「設定」を表すことなどを多くのユーザーは経験則から知っています。

何の操作を表すのか分からないアイコンの例

不適切な例一方で、このようなアイコンのボタンは押すと何が起こるかのか想像がつきません。どうしても使わなければならない場合には、簡潔なテキストで補足しましょう。

23. 長々と派手なアニメーションを使わない

多くのユーザーは画面に大きな動きがある間は操作を中断します。ユーザーを無駄に待たせないよう、アニメーションは簡潔なものにしましょう。

24. 複雑な操作方法を一気に説明しない

いきなり全ての操作方法を解説してしまわない

不適切な例例えば、インストールしたアプリをはじめて開いたときに、いきなり長々と操作方法を説明されても、多くの人はまともに読んでくれません。

必要な箇所で、必要なことだけをその都度解説しましょう。このあたりはヒットしている人気スマホゲームを実際に遊んでみると非常に勉強になります。

25. 操作方法を覚えてもらおうとしない

そもそもユーザーに操作方法を覚えてもらわなければ使えないようなUIにはしないようにしましょう。ただし、慣れればより効率的に使用できるようなショートカット的な要素も備えることが長く使ってもらうためには重要です。

26. 画像はできる限り軽くする

画像を掲載するときには、できる限り読み込み時間を短くするように以下の2つの手段を取りましょう。

遅延ロードを活用する

スクロールに合わせて画像を読み込むようにする手法です。詳しくはLazyLoadを実装する方法-Syncerが参考になりそうです。

画像を圧縮する

PNG画像だと想像以上にファイルサイズが重くなってしまうことがあるので特に注意が必要です。PNGを使用するときにはPNG圧縮 などを使って、ファイルを軽くしましょう。

27. 素早く目的の情報に辿り着けるようにする

ヤフー知恵袋がなんだかんだで調べ物に役立つのは、「知りたいことに対する答えがベストアンサー欄で示される」という簡潔なパターンがあり、答えを見つけやすいからです。前置きを長々と書いて、ユーザーが求めている内容を埋もれさせないようにしましょう。

UI/UX設計の基本

28. 文字数制限があるときにはリアルタイムで現在の文字数を表示

テキストボックスで入力文字数に制限があり、その制限がユーザーに頻繁に影響する場合には、リアルタイムで入力可能な残り文字数や、現在の文字数を表示します。

残り文字数が表示されている例

29. 押すことのできる部分のデザインはハッキリと区別する

ボタンのデザインは他の要素とハッキリと違いをつけるようにします。

適切な例

適切な例例えば、このように立体感をつけたり、他の部分とは色を変えることで、ボタンであることが伝わるようにします。

30. 現在地を伝える

パンくずリスト

「今サイト・アプリのどこにいて、何を見ているのか」を伝えることで、ユーザーは内容とその位置づけを整理しやすくなります。ウェブページではあれば、パンくずリストを設置しましょう。

31. グローバルに使われるUIの場合、アイコンや視覚的な表現を多用する

アイコンや視覚的表現を多用

適切な例他言語に対応する際も、翻訳やレイアウトの手間を省くことができます。

32. 不要なものをできる限り排除

多くの要素が詰め込まれているほど、1つ1つが目立たなくなります。重要性の低いものは、別のページにまとめたり、必要なときにのみ表示するようにしましょう。

33. メニューは画面上部に表示

適切な例モバイル表示では特に、メニューは画面上部に配置するべきです。ユーザーは経験則から画面上部にメニューがあることを想定するからです。

34. 画像>箇条書き>文章

画像で説明できる部分は画像を使います。箇条書きでまとめられる部分は、箇条書きにします。

35. 見出しを活用する

延々と文章を続けるのではなく、こまめに見出しで区切るようにします。これによりユーザーが目的の情報を見つけやすく、不要な情報は読み飛ばしやすくなります。

36. 画像上に文字をのせるなら背景色と差をつける

画像の上に文字をのせるサンプル

適切な例画像の上に白文字をのせると簡単にオシャレに見せることができますが、文字が見えづらくならないように暗めの写真を選ぶか、画像が暗くなるように半透明のカバーをかけるようにしましょう。

37. サイト内へのリンクを広告バナーのようなデザインにしない

目立つかもしれませんが、広告とみなされてクリック率が下がってしまう可能性があります。サイト内へのリンクは同じパターン・デザインで並べましょう。

38. メニュー項目の数は少なくする

メニュー・バーの項目数を増やしすぎない

不適切な例ナビゲーションメニューにはたくさんの項目を並べないようにします。

重要なリンクのみを、簡潔なテキストとアイコンで表現するようにします。

配色について

40. 多数の色を使わない

多数の色が使われていると、ゴチャゴチャして見えるだけでなく、強調されているポイントが分かりづらくなります。基本的に数種類のみを使うようにしましょう。

41. 色を同じパターンで使う

例えば「あるリンクテキストは青色なのに、他のリンクテキストは橙色」などとするとユーザーはどこを押したら良いのか分からなくなってしまいます。基本的に同じパターンで色を使いましょう。

42. 背景色とのコントラストをしっかりとつける

文字色と背景色にはハッキリと差をつけて、読みやすさを損なわいようにしましょう。例えば、背景に濃い色を使うのであれば、文字色にはグレイではなく白を使います。

43. 集中して読んでもらいたいコンテンツの背景は白にする

最も読みやすいのは、白の背景×黒の文字です。

44. 集中して読んでもらいたいなら、派手な色を大面積に使わない

読みやすさを考慮して配色を考える

例えば、このような原色に近い赤は、目を引いたり、インパクトを与えたりするのには効果的ですが、ユーザーは長時間見ると疲れてしまいます。

45. 同じタイプの色を使う

例えば、パステルカラー(白が混ざったような色)を1色使うときには、他の色にもパステルカラー(もしくは近い色)にすると、まとまりのある雰囲気になります。

配色の使用例

こちら↓のページでは、配色パターン見本を使用例付きで紹介しています。ぜひ参考にしてみてください。

46. 半透明の黒を有効活用する

グレイは使わずには半透明の黒を使った例

グレイの代わりに半透明な黒を使うと、背景に色が塗られても馴染むようになります。

フォントの使い方

47. 多くの人に馴染みのあるフォントを使う

ブランドイメージや印象が大事になるようなサイトでは、オシャレでユニークなフォントを使うべきかもしれません。一方で、ブログ記事など文章が何より大事なコンテンツなら、ユーザーが見慣れていないフォントは使うべきではありません。いわゆる「普通」なフォントを使いましょう。

47. 明朝体とゴシック体を一緒に使わない

ゴシック体と明朝体が合わせて使われると、まとまりがなく読みづらくなってしまいます。どちらかに統一しましょう。なお、ウェブ上では多くの人がゴシック体の文字を読み慣れています。

48. 使用するフォント数を少なくする

基本的に使用するフォントは日本語で1つ、英語で1つ、あとは太さを調節するだけにします。

49. 強調するポイントは周りとハッキリ差をつける

重要な部分はサイズや色を変えたり、下線を引いたり、背景色を塗ったりすることで明確に差をつけます。

50. 行を詰めすぎない

行を詰めすぎない

不適切な例行間が詰まっているだけで可読性は大きく損なわれます。

行間はある程度広くして、前後の行とはっきりと区別ができるようにします。ただし、広げすぎるとまとまりの無い印象を与えてしまいます。Webサイトの場合、line-heightの値を1.5〜2.0の間にするのが良いでしょう。

参考

UI/UXデザインを本格的に学びたい方は、こちらの記事で紹介している本やTED動画、スライド資料を活用することをおすすめします。

サルワカ