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

Post on:2022年12月13日

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

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

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

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

興味がある方は、過去分もどうぞ。

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

はじめに

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

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

1. ダークにデザインする時はホワイトも和らげる

ダークテーマをデザインする場合、多くのユーザーの使いやすさに影響を与える可能性があるため、ピュアブラックは使用しないでください。できる限り、ブラックを和らげるようにしましょう。

そして、ダークなデザインにホワイトの要素を加える場合も、同様です。

ホワイトがピュアホワイトだと、ダークな要素に対して違和感があり、視覚的な印象が悪くなります。ホワイトも和らげて、コントラストを少し下げて、ユーザーの目に優しいものを提供しましょう。

ダークにデザインする時はホワイトも和らげる

上: コントラストが高すぎる、下: ホワイトを和らげると目に優しい

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

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

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

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

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

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

3. ユーザーが選択したアイテムを目立たせる

UIはクリーンで、削ぎ落とされた、わかりやすいものが一番です。それは間違いありません。しかし、ユーザーエクスペリエンスを犠牲にしてはダメです。

下記のようにシンプルなUIコンポーネントであれば、選択したアイテムがパッと見てすぐにわかるようにしましょう。

無理に奇をてらう必要はありません。シンプルかつ大胆に、どのアイテムを選択したのか、自分の入力が認識されているのか、ユーザーが簡単に見分けられるようにデザインしましょう。

ユーザーが選択したアイテムを目立たせる

左: 選択したアイテムがわかりにく、右: パッと見てわかる

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

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

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

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

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

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

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

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

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

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

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

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

6. 最も重要な要素をより目立たせる

スクリーン上の最も重要な要素にユーザーの目を素早く、効率的に、そして最小限の認知的労力で集められるようする必要があります。

フォントサイズ、太さ、カラー、レイアウトなどの視覚的階層の原則を用いることで、最も重要な要素を簡単に目立たせることができます。

この原則に従うことで、ユーザーエクスペリエンスを向上させ、より合理的な方法でユーザーを誘導することができます。

最も重要な要素をより目立たせる

左: 目立っていない、右: 重要な要素が目立っている

7. 検索ボックスの幅は広くする

可能な限り、検索ボックスはユーザーが入力した完全な検索クエリに対応できる大きさにしてください。

検索クエリが長くて検索ボックスに表示しきれなくなり、水平にスクロールするのを見たがる人はいません。

コンテンツが多いサイトでは特に、ヒーローセクションに幅が広い検索ボックスを設けるか、単に検索アイコンをクリックするとユーザーの検索クエリ全部を表示するのに十分な、幅が広い検索ボックスが表示されるようにすることができます。

検索ボックスの幅は広くする

検索ボックスは幅が広い方が使いやすい

8. 素早いアクセスは、ナビゲーションをスティッキーに

スクロールが少しのページの場合、ユーザーが下に行くときにナビゲーションバーを隠すのはクールです。

しかし、長いページの場合、特にサインアップや購入ボタンなどの重要なアクションに素早くアクセスする必要がある場合、ナビゲーションをスティッキーにすることが賢明です。

ナビゲーションバーに表示された重要なCTAから、ユーザーがどんどんスクロールしてしまうようなことは避けましょう。スティッキーにして、いつでもすぐにアクセスできるようにしてください。

素早いアクセスは、ナビゲーションをスティッキーに

右: ナビゲーションをスティッキーにしたので、重要なアクションにいつでもアクセスできる

9. ページ内リンクを効果的に用意する

ページ内リンクは、これまでUXコミュニティの一部で嫌われてきたものです。しかし、うまく実装すれば、長いページにたくさんのコンテンツがある場合のユーザーエクスペリエンスを大きく向上させることができます。

たとえば、非常に長いページに多くのセクションがあり、それぞれに多くのコンテンツがあるとします。目次があれば、ユーザーが興味のあるコンテンツを見つけるために無駄にスクロールすることなく、必要なセクションに素早く移動することができます。

ページ内リンクは、ユーザーが興味あるコンテンツに素早くアクセスできるようになり、コンテンツの発見力とエンゲージメントを大幅に向上させます。

ページ内リンクを効果的に用意する

ページ内リンクを効果的に用意する

10. 長いフォームは冗長な作業を最小限に抑える

特にEコマースの場合、ユーザーの配送先や請求先を入力するために長いフォームが必要になります。

こういった長いフォームはユーザーにとって合理化する必要があります。たとえば、配送先と請求先の住所はほとんどの場合、同じ内容です。こういった冗長なタスクは最小限にしてください。

そこで、チェックボックスのようなシンプルな操作で、ユーザーが入力したデータを複製できるようにしておくと、ユーザーの時間を大幅に短縮します。

長いフォームは冗長な作業を最小限に抑える

配送先と請求先が同じ場合を想定して、入力を省略できるようにする

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

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

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

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

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

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

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

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

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

分かりやすいものであれば、不要なテキストは省いてもかまいません。

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

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

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

sponsors

top of page

©2024 coliss