Google UXデザイン：デザインシステム（ステッカーシート）

はじめに

わたしがGoogle UX Design Certificateで得られた素晴らしい体験を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。

興味があれば、ぜひ Google UX Design Certificateを受講してみてください。

これまでの振り返り

ステッカーシートとは

ステッカーシート（デザインキット）は、デザインシステムの一部を構成する要素やコンポーネントの集合体です。

次は、あるアプリのステッカーシートの例です。

ここには、デザインで頻繁に使用する色、ボタン、アイコン、ナビゲーションバーが含まれています。これにより、私のデザインにミスや矛盾が生じるのを防ぐことができるのです。

では、なぜこれがステッカーシートという名前なのでしょうか？

それは、コピー＆ペーストでデザインに貼り付けられるように、それぞれの要素を比喩的にはがせるからです。かっこいいでしょう！

Figmaでステッカーシートを作成する

コンポーネントは要素から構成されています。例えば、ボタンは、文字、色、形などの要素で構成されるコンポーネントです。Figmaでは、コンポーネントは再利用可能です。

Figmaでは、最初に作ったコンポーネントをコンポーネントとしてラベル付けし、このコンポーネントのコピーをコンポーネント・インスタンスとして参照することができるのです。そして、コンポーネントがどこにあるのかを把握しやすくするために、ステッカーシートに配置することにしました。これで、コンポーネントに変更を加えるたびに、インスタンスにも変更が反映されるようになりました。

例えば、ステッカーシートのプライマリボタンの色をオレンジから青に変更すると、メインコンポーネントに結びついたインスタンスも同様に更新されます。

これで、ちょっとしたデザイン変更のたびに何個もボタンを更新する手間が省けますね。さらに、これまで散々言ってきたような一貫性を高めることができるのです。

ステッカーシートを作るのはとても簡単です。空白の枠を作り、その中によく使う要素やパーツをコピーして貼り付けるだけで、簡単にステッカーシートができます。

Figmaでコンポーネントを作成する（例）

Step1:　Create component

Step2: 作成したComponentをコピーしてみる

Step3: コピーもとのComponentをカスタマイズすると、コピー先も同期される（ここでは色を変更）

ステッカーシートのメリット

このステッカーシートは、デザインに携わる他のUXデザイナーや、コードを使って各コンポーネントを構築する必要のあるエンジニアに役立つことでしょう。例えば、

• 他のデザイナーと一緒にプロジェクトを進める場合、スタイルガイドとしてステッカーシートがあれば、2人のコミュニケーションがより円滑になります。

• デザインチームが大きくなっても、ステッカーシートがあれば、社内でデザインの一貫性を保つのに非常に役立ちます。チームメイトが角の丸いボタンを使っているのに、自分は角の尖った長方形のボタンを作ってしまうということがなくなります。

• デザインプロセスの途中でデザイナーがチームに加わった場合でも、すでにプロジェクトに割り当てられているデザイン要素にすぐに取りかかることができます。