はじめに
わたしがGoogle UX Design Certificateで得られた素晴らしい体験を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。
興味があれば、ぜひ Google UX Design Certificateを受講してみてください。
これまでの振り返り
Google Materialとは
前回、デザインシステムの定義や価値について、ご紹介しました。
Google Materialは、Googleが作成したパブリックなデザインシステムで、世界中のデザイナーや開発者がさまざまなモバイルアプリやWebサイトを作成するために使用しています。
このサイトには、さまざまなページがあり、探索することができます。デザインのページには、ナビゲーション、カラー、タイプシステムなどの使い方について、デザイナーのための基礎的なガイダンスがたくさんあります
Materialサイト内の紹介
デザイナーがMaterial Designシステムを使用する主な理由の1つは、企業ブランドをよりよく反映させるためにカスタマイズできるからです。ベースラインのテーマをそのまま使うこともできますし、好きなだけカスタマイズして、自分の製品や会社に合ったデザインにすることもできます。
Styles
スタイルとは、UIに独特のルック＆フィールを与える視覚的な側面です。スタイルは、Materialのテーマを変更することでカスタマイズできます。 次のカテゴリがあります。
- Color
- カラーはスタイルを表現し、意味を伝えるために使われます。ダイナミックカラーでは、マテリアルは個人の色の好みと個人のニーズを第一に考え、体系的なカラーアプリケーションを提供します。
- Elevation
- 標高とは、z軸に沿った2つの面間の相対的な距離のことです。
- Icons
- アイコンは、一般的なアクションを表現するために使用することができます。Material Symbolsは、3種類のスタイルに7つのウェイトで作成された可変アイコンフォントのセットです。
- Motion
- 動きを使って、表現力豊かで使い勝手の良いUIを実現する。
- Shape
- シェイプスケールは容器の角のスタイルを定義するもので、四角から完全な円形まで様々な丸みを提供します。
- Typography
- タイポグラフィーを使って、文章を読みやすく、美しく。Materialのデフォルトのタイプスケールには、さまざまなユースケースをサポートする、対照的で柔軟なスタイルが含まれています。
Color
Colorページを見てみましょう。たとえば、カラーアクセントについて、学ぶことができます。
Typography
Typographyページを見てみましょう。Figma用のデザインキットをダウンロードできます。
「Design kit（Figma）」をクリックすると、Figmaのコミュニティサイトが開きます。
「Get a copy」をクリックすると、あなたのFigmaが開き、デザインキットがロードされます。
Figmaコミュニティとは、デザイナーや開発者がプラグイン・ファイルを公開できるスペースで、Figmaユーザーなら誰でもコミュニティに参加して、公開されているプラグインを見つけることができます。いろいろと探索すると面白いです。
さいごに
デザインシステムとは何かを理解し、GoogleのMaterial Designライブラリの一部を探索したことで、デザインシステムが含むさまざまな要素について明確な考えを持つようになったはずです。
特に新人のうちは、デザインシステムを活用することで、デザインのベストプラクティスを理解し、自身のデザインワークの質を飛躍的に向上させることができます。