はじめに
わたしがGoogle UX Design Certificateで得られた素晴らしい体験を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。
興味があれば、ぜひ Google UX Design Certificateを受講してみてください。
これまでの振り返り
デザインシステムとは
『チームがあらかじめ決められた基準に従って製品を設計し開発することを可能にする、一連の再利用可能な要素やガイドラインのこと』
デザインシステムは、ブランドガイドライン、コンポーネント、カラーパレットなどの重要な情報を含む、これらの異なるガイドラインをすべて1つの場所にまとめることを支援します。
例えば、デザインシステムでは、デザインに自社のブランドカラーをどう使うか、アイコンやタイポグラフィーにどの色を使うか、といったルールの概要を説明します。
デザインシステムはどのように設定されるか？
ほとんどのデザインシステムには、
- ビジュアルスタイル
- ガイドライン
- UIパターン
- 開発者用のサポートコード
が含まれています。
ビジュアルスタイル
- タイポグラフィー
- カラーパレット
- アイコン
ビジュアルデザインの中核となる要素のスタイルを定義することで、企業はブランドをより一貫して表現することができます。これは、UXデザイナーがユーザーの体験を向上させるのにも役立ちます。
ガイドライン
- デザインの原則
- 編集のガイドライン
- 実装のガイドライン
特定のコンポーネントやスタイルを製品内でどのように使用すべきかを明確に規定することで、デザイナーの一貫性を保つことができます。
UIパターン
- テキスト、色、アイコンなどの 要素
- ボタンやフォームラベルなどの要素で構成される コンポーネント
- ロゴ入りヘッダーやページ上部のナビゲーションバーなどのコンポーネントのグループである モジュール
- ページを構成するためにまとめられたモジュールのグループである テンプレート
さらに、デザインシステムのこれらの各セクションには、通常、どの要素、コンポーネント、モジュール、テンプレートが最も重要で、それぞれをどの程度の頻度で使用するかについての詳細な注意事項が記載されています。
開発者用のサポートコード
開発者がデザインを正しく構築できるように、デザインシステムには、提供された各要素やコンポーネントを作成するためのコードが含まれていることがよくあります。
デザインシステムの価値
価値①
『デザイナーとユーザーの間に一貫性が生まれる』
デザイナーが特定の要素に限定されれば、製品や企業ブランドに矛盾をもたらす可能性は低くなります。
例えば、あるアプリのデザインシステムで、「オレンジ色のボタンで、角が丸いものを使うように」と指示されたとします。オレンジの色調は何十種類もありますが、デザインシステム上では "FA7B17" という色を使うことにしています。また、ボタンの文字も"SF Pro Display"と決めています。このようにビジュアルスタイルを決めておくことで、デザイナーはボタンを作りやすくなり、ユーザーも気づきやすくなります。
価値②
『企業のブランドアイデンティティを強化できる』
デザインシステムは、製品内および製品間で視覚的なデザイン要素の一貫性を維持します。
例えば、GoogleのデザインシステムはGoogle Materialと呼ばれ、青、赤、黄、緑の4原色で構成されています。Google MapsやGoogle Driveなど、Googleアプリを開くと、この4色のデザインに気づくはずです。また、すべてのGoogle製品が同じフォント（Google Sans）を使っていることや、四角い角よりも丸い角が好まれていることにもお気づきでしょう。
価値③
『スケーラブルである』
スケーラブルとは、作業量が増えても性能を維持できるシステムのことを言います。特に、スタートアップのような急成長している企業では、この点が有効でしょう。
例えば、カラーパレットやタイポグラフィが決まっているデザインシステムがあれば、製品の進化に合わせてデザインを見直すことが容易になります。また、新しいデザイナーをチームに迎え入れるのも簡単です。
価値④
『個人とチームの効率を上げることで、時間とお金を節約できる』
設計に統一されたシステムがあれば、チームのメンバーは設計仕様に関する疑問を持つことが少なくなり、より迅速に仕事を終わらせることができます。
デザインシステムが導入される前は、デザイナーから開発者にデザインを引き継ぐ際に、プロジェクトが壁にぶつかることがよくありました。これは、設計チームと開発チームが別々に活動する傾向があり、それぞれのチームが異なる要求を持っていたためです。
デザインシステムを構築することで、設計チームと開発チームの足並みが最初から揃います。これにより、開発者はデザインを受け取ると、そのデザインを実現するためにどのようなコードを書く必要があるのかをすぐに知ることができるのです。
さいごに
すべてのデザインチームが完全に開発されたデザインシステムを持っているわけではないことを知ることは重要ですが、そうであるチームは通常、それが交流と製品の品質を高めることを発見しています。
また、新人UXデザイナーとしてデザインシステムとどのように関わるかは、勤めている会社の規模によって異なります。
- 大きな会社では、すでにセットアップされたデザインシステムを使うことが多いでしょう。
- しかし、小規模な企業では、新しいデザインシステムの構築を期待されることもあり、これは大きなチャレンジであると同時に、大きな学びの機会でもあります。
どのような規模の会社であっても、デザインシステムに従って、あるいは既存のシステムを改善するためのアイデアを提供する準備は常にしておくべきです。それは、スタイルガイドの色やタイポグラフィの更新から、コンポーネントの定義やテンプレートのデザインに至るまで、あらゆることを意味するかもしれません。