もっとも注目されたUIデザインのテクニックの総まとめ

Post on:2023年6月15日

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

これまでの中で最も注目されたUIデザインのテクニックをまとめました。

もっとも注目されたUIデザインのテクニックの総まとめ

UI & UX Micro-Tips: Best of the Best
by Marc Andrew

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

はじめに

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

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

1. 細いフォントは暗いカラーにする

長文コンテンツをデザインするとき、中間色のグレーを使いたくなるかもしれませんが、これは軽いウエイトのフォントを使う前まではよいかもしれませんが、さまざまなサイズのスクリーンで読みやすさに大きな影響を与えます。

視力の低下したユーザーが戻るボタンに手を伸ばすようなことがないように、テキストを暗いカラーにしてこの問題を解決し、誰もがアクセスしやすくしましょう。

ウェイトが軽いフォントはほんの少し暗いカラーにするだけで、読みやすさが大幅に向上します。

細いフォントは暗いカラーにする

左: 中間色のグレー、右: ほんの少し暗いカラー

2. 長いフォームは常にラベルを上部に配置する

短いフォームではコンテンツが少ないので、おなじみのZパターンに従ってラベルをフィールドの左側に配置してもかまいませんが、長いフォームでは常にラベルを上部に配置するようにしましょう。

長いフォームではより一般的なFパターンを使用することで、ユーザーはより自然な方法でフォームをスキャンし、目的をより早く達成できます。

長いフォームは美観だけを追求するのではなく、ユーザーに最小限の労力でフォームを達成してもらうことが目的です。

長いフォームは常にラベルを上部に配置する

左: ラベルを左側に配置、右: ラベルを上部に配置

3. ボタンのラベルは一貫性を保つ

前提としてボタンのラベルは、タップしたときにどうなるのかが分かる説明的なラベルをつけるようにしてください。次に、時々軽視されがちですが、ボタンのラベルの文言は一貫性を保ち、明確にします。

同じアクションを伴うボタンに一貫性がなく、時には曖昧なラベルを付けているのを見かけることがあります（私自身もそうでした）。「Join Now（すぐに参加する）」「Let's do this（これをしよう）」は同じアクションで異なるラベルです、こういうのを避けるようにしてください。

ボタンの文言は全体で一貫性を保つように実装しましょう。ユーザーの認知的労力を軽減し、推測させることなく目標を達成できるようにします。

ボタンのラベルは一貫性を保つ

左: 文言が統一されていないボタン、右: 文言が統一されたボタン

4. 不要なテキストでフォームのUIを乱雑にしない

わたし達の目標は、ユーザーをA地点からB地点まで最短時間で移動させることです。そのためには、不必要な言葉、テキストを配置しないことが重要です。

フォームでユーザーが取るべき行動は明らかです。フォームにシンプルなタイトルを付けるだけで、それが何のフォームなのか伝わります。

ユーザーに手を差し伸べることはよいことですが、それが一目瞭然で素早く目標を達成してもらいたい場合は、不要な言葉を削除しましょう。

不要なテキストでフォームのUIを乱雑にしない

左: 不要なテキストがある、右: 不要なテキストを削除したフォーム

5. フォームはインタラクションの後、すぐにフィードバックを提供

フォームの場合、特に多くの入力欄があるフォームでは、ユーザーがフォームを操作したときに即座にフィードバックが表示されるのは励みになります。

ただし、シンプルにしてください。入力欄に正しく入力できたかどうかを、ユーザーに知らせるだけでよいです。

たとえば、シンプルなアイコン、場合によっては短いテキストを表示するだけで、アクセシビリティが大幅に改善され、フォームに関するユーザーエクスペリエンスが向上します。

フォームはインタラクションの後、すぐにフィードバックを提供

入力欄に正しく入力できたかどうかを、すぐに表示する

6. 次のステップの情報を提供する

ユーザーがアクションを起こす前に（特にアクションの種類によっては）、次に何が起こるか分からないまま放置するのはやめましょう。

ボタンをクリックしたときに何が起こるのか、ユーザーがアクションを起こす前に、常にユーザーに十分な情報を提供しましょう。

すべてのステップでユーザーエクスペリエンスを向上させ、ユーザーが迷うことのないようにしてください。

次のステップの情報を提供する

左: ボタンをクリックすると何が起こるかわからない、右: 十分な情報を提供

7. CTA用にカラーを1つ確保しておく

CTA（コールトゥアクション）は、スクリーン上で最も重要な要素の一つです。CTAを独自のカラーで輝かせましょう。

ユーザーがスクリーン上の他の要素（通知やタグ）と混同しないようにします。CTAは他の要素と簡単に区別できる必要があり、そのためには、CTAのためにカラーを1つ確保し、他のカラーは使用しないようにします。

もちろん、サイズや形状などでさらに工夫を凝らすこともできますが、CTAのために1つのカラーを確保するだけで、ほとんどの摩擦を減らすことができます。

すべてのステップでユーザーエクスペリエンスを向上させ、ユーザーが迷うことのないようにしてください。

CTA用にカラーを1つ確保しておく

左: 同じカラーが他の要素に使用されている、右: CTA用のカラーは1つ

8. フォームのエラーは色だけに頼らない

フォームのアクセシビリティで、ユーザーに異なる状態を伝えるのに、色だけに頼らないでください。

たとえば、エラー状態であることを色だけで伝えると、色覚異常のある人はエラーを見逃してしまうかもしれません。それでは困ります。

アクセシビリティの観点から、アイコンとエラーメッセージを組み合わせて表示し、多くのユーザーに問題を伝えられるよう心がけてください。

フォームのエラーは色だけに頼らない

上: エラーを色だけで伝える、下: アイコンとエラーメッセージを組み合わせて伝える

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

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

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

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

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

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

10. アイコンには分かりやすいラベルを付ける

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

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

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

アイコンには分かりやすいラベルを付ける

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

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

これまでのすべての記事は、下記をご覧ください。

sponsors

top of page

©2024 coliss