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

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

第11弾は角丸やアイコンなどのUI要素、ダークテーマにおける読みやすさに関するデザインのテクニックです。

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

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

• はじめに
• 1. ダークテーマのテキストはコントラストを下げる
• 2. アイコンをわかりやすくするためにラベルを付ける
• 3. 角丸を補完的に使用する
• 4. ダークテーマで要素の奥行きを正しく伝える
• 5. Atkinson書体でコンテンツをよりアクセシブルに
• 6. メッセージは短く、要点を絞る

はじめに

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

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

第11弾となる今回のテーマは、角丸やアイコンなどのUI要素、ダークテーマにおける読みやすさです。前回までの小技は、以前の記事をご覧ください。

• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.1
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.2
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.3
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.4
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.5
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.6
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.7
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.8
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.9
• 2021年、最も注目されたUIデザインのテクニックのまとめ
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.10

1. ダークテーマのテキストはコントラストを下げる

このテクニックは、個人的なレベルで私にも当てはまります。私は乱視なので、ダークテーマのデザインで作業をしていると、ハレーションという現象が起きて困ることがあります。

真っ黒な背景に真っ白なテキストを配置すると、テキストが「きらめき」や「ハレーション」を起こして見えることがあり、ダークテキストの多いサイトやアプリを見るときに特に困ります。

乱視のユーザー（私が思っている以上に多いと思います）には、真っ白なテキストの不透明度を85〜90％に設定すると（真っ黒な背景を避けると同時に）、かなり改善できます。

左: 真っ白なテキスト、右: 真っ白なテキストの不透明度を85〜90％に

2. アイコンをわかりやすくするためにラベルを付ける

アイコンを単独で置かないようにしましょう。ユーザーのために、アイコンはラベルという仲間を必要としています。

場合によっては、単独でアイコンを配置することもあるでしょう（検索など） しぃーッ! ハンバーガーについてはここでは触れません。

しかし、プライマリーナビゲーションではラベルをアイコンと一緒に表示することでユーザビリティが向上し、ユーザがそのアイコンの意味を推測する必要がなくなり、分かりやすくなります。

上: アイコンを単独で表示、下: ラベルと一緒に表示

3. 角丸を補完的に使用する

角丸の半径を一定に保ち、補完し合うことで、デザインの中に若干の「ずれ」が生じるのを避けることができます。

角丸を補完的に使用することで、デザイン内の各要素が視覚的に調和します。要素を相互に補完しているように見せるために必要な微調整はごくわずかです。

デザインをより洗練されたプロフェッショナルな外観にでき、ユーザーから「あれ、何か変だな」と思われるのを防ぐことができます。

上: 通常の角丸、下: 補完的に使用した角丸

参考:

• 人はなぜ角丸に魅かれるのか、その理由と角丸の効果的な使い方
• デザインTips: 角丸パネルに角丸パネルを重ねた時、それぞれの角丸をバランスよくデザインする方法

4. ダークテーマで要素の奥行きを正しく伝える

ダークテーマで作業するときは黒ではなくダークグレーを使用して、各要素の奥行きを正しく効果的に伝えましょう。

要素が自分に近いほど（現実世界では光源に近いほど）、その要素を背景に対してより明るくすることで、奥行きをうまく表現できます。

この簡単な方法で奥行きを効果的に表現することができ、シャドウをつける必要もありません。

背景に対して要素をより明るくすることで、奥行きを表現できる

5. Atkinson書体でコンテンツをよりアクセシブルに

最近の記事でAtkinsonについて触れましたが、ロービジョンのユーザーのために長文コンテンツを改善する倫理的な方法を探しているのなら、もう一度名前を挙げておきたいと思います。

Atkinson Hyperlegibleは（ヒントは名前にあります）、特に長文コンテンツを作成する際に文章の読みやすさと文字の判別のしやすさを向上させるために作られた書体です。

長文には、Atkinsonを使うことを強くお勧めします。弱視のユーザー、そして正直にいうと一般的なすべてのユーザーにとって読みやすいという点で、私が出会った中で最も優れた書体です。

右: Atkinson書体はすべてのユーザーにとって読みやすい

6. メッセージは短く、要点を絞る

メッセージは常に短く要点を絞って、サイトやアプリのユーザーが必要とする認知的労力を軽減しましょう。

より詳細なメッセージが本当に必要ないのであれば、不要なノイズを切り捨て、メッセージは短く、要点を絞ってください。

明確でわかりやすいメッセージをユーザーに提示することで、ユーザーが目的をより効果的に達成するのに役立ちます。

上: 不要なノイズがあるメッセージ、下: 要点を絞ったメッセージ

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