Design Systems を読みました [基本編]

先日の山岸のブログ記事でご存知の方もいるかもしれませんが、今月弊社に UI デザイナーが入社いたしました 🎉

デザインシステムが一般的になってお仕事の声をかけていただいたり、社内プロジェクトでデザインシステムを作ることになったり、ついに私もデザインシステム作りに参加する日がきました！
デザインシステムに関して知識・経験が圧倒的に足りないので Design Systems の基本編を読んだメモや感想を残しておきたいと思います。

初期フェーズで必要・大事そうだと思ったこと

私にとって学びになったポイントを、CHAPTER ごとにリスト形式でピックアップしていこうと思います。

CHAPTER1 – デザインシステム

• デザインシステムにはパターンを作成・捕捉、共有、進化させるためのテクニックと慣習も含まれる
• パターンライブラリはデザインおよび使用方法についての原則や、ガイドラインを収集、格納、共有するためのツール

CHAPTER2 – デザイン原則

• デザイン原則は「なにをもってプロダクトにふさわしいデザインとするか」組織内で承認された基準で、指南書となるもの
• 楽しくて便利なデザインにしよう！という解釈は人それぞれなので、メンバー間で解釈・認識を揃えることが大事
  • 「楽しい」「便利」を定義して、プロダクトに合わせて意味付けする
• デザイン原則は実用的かつ実行可能である
  • デザイン原則が定義されたらそれをもとにデザインに関して意思決定をしていく
  • どのように原則を適用すればよいのか実例を示す
• デザイン原則は関連付けやすく覚えやすい
  • 覚えやすい原則は日常的に使われるようになる
  • 覚えやすさで言えば3〜5個くらいに抑えるのがよい
• 検証して進化させる
  • デザイン原則は最初に定義して終わりじゃない
  • プロダクトの進化とともにデザイン原則も進化させる
  • 内容を検証・評価・改良する

CHAPTER3 – 認知パターン

• ムードボード
  • 様々な情報からすでに存在するものを組み合わせ、特定の視覚的雰囲気を作り出す
• スタイルタイル、要素コラージュ
  • 特定のプロダクトや、特定のインターフェースでのパターンの実用性により焦点を当ている

CHAPTER5 – 共通言語

• 大勢の人が関わっていても、一貫性や一体感が感じられるプロダクトを作るためには、デザインシステムへの共通の理解を持ち、共有される言語が必要
• 良い名称はパターンの目的を表す
  • 名称はその目的を表し、パターンの目的を完全に理解していないと、命名は困難を極める

Design Systems [基本編] を通して

自分なりに学びポイントを見つけることができ、デザインシステムを作る意識作りができたかなと思います。はじめて知ることも多く、読んでいて純粋に楽しかったです。

基本編では「共通認識」や「共有」というワードが多く見受けられた印象があります。様々な役割を持ったメンバー同士の中でも、プロダクトに対して共通の認識を持つことが、デザインシステムを作る上でのポイントになりそうだなと感じました。

次はいよいよ実践へ

今週の月曜日に、社内プロジェクトで初のミーティングをしました。
まずはプロジェクトのスタートメンバーで、それぞれ持っている知見を共有するところから始めています。
次はムードボードを作る予定ですが、初めてなので少し不安もありつつ、楽しみながらやっていきたいと思います！