はじめに
わたしがGoogle UX Design Certificateで得られた素晴らしい体験を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。
興味があれば、ぜひ Google UX Design Certificateを受講してみてください。
これまでの振り返り
統一性と多様性の概念
統一性（Unity)
- デザイン要素をいかにうまく組み合わせて、1つのデザインアイデアを作り上げる。
- UXデザイナーは、デザイン内のさまざまな要素間の統一性を利用して、ひとつのアイデアを伝えることができます。これが、「まあまあのUIデザイン」と「素晴らしいUIデザイン」の違いになることが多いのです。
多様性(Variety)
- デザインに含まれる要素を多様化し、単調さを解消して視覚的な面白さを生み出す。
- UXデザイナーは、多様性を利用することで、異なるが類似した要素を使用して、ユーザーの注意を引きつけることができます。
統一性の実例
製品全体の統一感について考えるとき、いくつかのポイントがあります。
- 要素同士の配置
- 要素の形状
- テキスト要素の連続性
以下のYouTube Musicアプリで説明します。
要素間の配置（左）
2つの赤い図形は、同じ大きさです。この赤いボックスは、これらの要素が形ではなく、画面上で占める面積の中で統一されていることを表しています。
要素の形（真ん中）
赤い四角は、すべて同じ大きさです。この画面ではさまざまな原理が働いていますが、ボックスのデザインによって、このデザインがすっきりと整理され、ナビゲートしやすくなっていることは間違いありません。
テキスト要素内の連続性（右）
- 見出しは、同じ色、同じフォント、同じ配置で表示されています。
- 説明文も、同じ色、同じフォント、同じ配置で、説明文の許容スペースより長くなっても、同じ色、同じフォント、同じ配置です。
これらはすべて、アプリのフローを統一するためのものです。テキストを含む各要素には場所があり、決してスペースからはみ出ることはありません。
多様性の実例
Googleフォトのアプリは、デザインに多様性を導入するための一つの解決策を備えています。
Googleフォトのデザイナーは、この写真集全体を通して、典型的な正方形のグリッドを維持することを選択することができました。その代わりに、一部の画像は長方形として元のサイズを維持することを選択しました。この長方形は、正方形の画像の中に散りばめられており、美的センスに優れています。このように、画像に変化を持たせることで、ユーザーの興味を惹きつけています。
統一性と多様性のバランス
ニュースメディアのアプリについて考えてみましょう。ほとんどの記事は、統一されたデザインを持っており、白い背景に濃い色のテキストを使用します。
ここで、天気予報の速報ニュースがあったとします。ニュース速報の背景は、赤や黄色など明るい色になるかもしれません。このように、速報に多様性を持たせることで、統一感をなくし、ストーリーに緊急性を持たせることができます。
このように多様性を持たせることで、速報性を際立たせることができますが、それは他のストーリーのスタイルが統一されているからこそできることです。
統一性と多様性をバランスよく組み合わせることで、ユーザーの注意を引きながら、視覚的な手がかりを提供することができます。
しかし、注意しなければならないことがあります。あまりに多様性に富んでいると、調和がとれなくなり、重要な情報が読みづらくなります。大切なのはバランスです。
さいごに
デザインプロセスの早い段階で、統一性や多様性といった原則について考えておくことは、とても良いアイデアです。これらの概念を取り入れながら作業を進めることで、ユーザーが製品デザインに関わり続けることを保証する、真に魅力的な製品を生み出すことができるのです。