プロのUIデザイナーに学ぶ!UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.8

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。
プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。

第8弾は、読みやすく・理解しやすくするためのデザインのテクニックです。

UIとUXの印象がよくなるデザインの知識とテクニックのまとめ

UI & UX Micro-Tips: Volume Eight.
by Marc Andrew

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

次のプロジェクトのために効率的で美しいUIを作成するとき、デザインをすばやく改善するためにわずかな調整で済むことがあります。

UIのデザインにちょっとした一手間を加えるだけで、クライアント、ユーザー、そしてあなた自身が本当に満足できるものを作ることができるかもしれません。

第8弾となる今回のテーマは、アクセシブルです。前回までの小技は、以前の記事をご覧ください。

1. メッセージは正しい順序で構成する

メッセージはアクションの説明からではなく、ゴールを先に示すようにしましょう。ゴールとそれを達成するために必要なアクションを説明するときは、ゴールから文章をはじめます。

メッセージをこのように構成すると、メッセージが理解しやすくなり、ユーザーのミスを減らすことができます。

メッセージは正しい順序で構成する

左: アクションの説明からはじめたメッセージ
右: ゴールからはじめ、その後にゴールを達成するために必要なアクションの説明

2. すべての要素のシャドウは一つの光源を元にする

UIデザインでシャドウを使用するとき、光源は一つになっていますか?
すべての要素のシャドウが一つの光源を元にしていることを確認してください。通常は上からが多いです。

異なる角度のシャドウは単純なミスかもしれませんが、デザインがずさんに見える可能性があります。わたし達が住んでいる世界には、太陽は一つしかありません。

すべての要素のシャドウは一つの光源を元にする

画像のシャドウは同じ光源ですが、右上のアイコンのシャドウは異なる光源

3. ホワイトスペースでビジュアルヒエラルキーを構築

ホワイトスペース(空白)は、ネガティブスペースとも呼ばれ、デザインでバランスをうまくとり、ページ上にしっかりとした視覚的階層(ビジュアルヒエラルキー)を構築します。

ホワイトスペースが少なすぎると、視覚的な階層が完全に失われてしまい、ユーザーは気が散るような気分になってしまいます。読みやすさを保ち、スキャンしやすく、ユーザーの集中力を高めるには、ホワイトスペースのバランスが必要です。

ホワイトスペースでビジュアルヒエラルキーを構築

左: ホワイトスペースが少ない
右: ホワイトスペースが十分にあり、視覚的な階層がある

4. 一行の長さを適切にすることで、読みやすさが向上する

本文をあつかう際、適切な行の長さを決めるのはバランスをとるのが難しいものです。1段組のページでは45-75文字が適切であると考えられており、その中間の66文字(文字とスペースの両方を含む)が最適であるとも言われています。

もちろん、フォントのサイズや行の高さも読みやすさに影響を与える要素ですが、行の長さについては45-75文字の制限を守っていれば問題ありません。

一行の長さを適切にすることで、読みやすさが向上する

上: 一行の長さが長すぎる
下: 一行の長さは45-75文字の間にする

5. 空の状態を工夫することで、ユーザーの初期行動を促す

空の状態(エンプティステータス)は、ユーザーエクスペリエンスを向上させる上で非常に有益ですが、軽視されてしまうことがよくあります。空の状態のデザインを工夫することで、ユーザーが自分に役立つ情報・機能をすばやく見つけ、目標をより早く達成できるように、サイトやアプリを意図したとおりに使用する機会として利用しましょう。

ユーザーが最初に何をすべきかわからない状態にはしないで、どうすればよいのかを案内してください。

空の状態を工夫することで、ユーザーの初期行動を促す

左: 空の状態であることだけが分かる
右: 空の状態のときに何をすべきか案内をする

6. 最適な読みやすさのために、x-heightに基づいてline-heightを決める

読みやすさの最適化を実現するには、フォントのx-heightに基づいてline-heightの値を設定するようにしてください。

例えば、Merriweatherはx-heightが大きい書体であるため、line-heightを大きくする必要があります。それとは対照的に、Mr Eaves Sansのようにx-heightが小さい書体で読みやすさを実現するためには、line-heightを少し小さくします。

最適な読みやすさのために、x-heightに基づいてline-heightを決める

上: line-heightの値がフォントのx-heightに合っていない
下: フォントのx-heightにあった適切なline-heightの値

デザインにちょっとした調整を加えるだけで、あなた自身とユーザーの両方にとってより良い結果が得られるということを少しでも理解いただけたらと思います。

sponsors

top of page

©2021 coliss