スタイルガイドやデザインガイドラインという言葉はよく聞くが、デザインシステムはあまり聞かず、なんとなくわかるもの一応調べてみた。
デザインシステムとは
デザインシステムとはサービスに関わっているデザイナー、エンジニア、ディクターなどの開発者における共通項のこと。
https://note.com/yoshigorou/n/n102e933d4f58
運用を含めた思想・コンポーネントなどをデザインだけでなく、コードまで落とし込んだ開発チーム全体が参照すべき中核になるもの。
だそう。
スタイルガイドはデザインコンポーネントをマークアップで示したものであり、
デザインガイドラインはデザインの説明書なので、その二つを統合したものがデザインシステムであるといえる。
デザインシステムには、開発者のコミュニケーション、作業を楽にするという開発者ベースのメリットと、ユーザー体験に一貫性を与えるというユーザーベースのメリットの双方がある。
スタイルガイド
タイポグラフィやアイコンセット、カラーや余白などのスタイルに関するルールをマークアップレベルで示したもの。
デザインガイドライン
スタイルガイドやコンポーネントライブラリをより抽象化した、デザインの方向性を示すための方針。
コンポーネントライブラリとは
デザインガイドラインに含まれることがあるが、よりデザインガイドラインの内容をまとめたもので、繰り返し使用されるUIパーツなどが含まれる。
デザインシステムをつくるにあたっての心構え
- 作業が膨大になるので、本当に必要かどうかを考える
- 他のデザインシステムをみてみる
- なるべく小さく、リーンにする（無駄をなくす）→ 小さければ小さいほど良いもの
- 完璧で汎用的なデザインシステムは存在しない
- 常にアップデートしつづける（終わりはない）
- とりあえず、やってみる
デザインシステムに必要な要素
- サービスの原則：すべてのサービスの裏にある目的や本質はなにか、本質を体系化する
- 文章のコンテンツ：サービスの文章は、どのような雰囲気であるべきか
- ビジュアルの性質：サービスの見た目は、どのような雰囲気であるべきか
- コンポーネント：スタイルガイド・コンポーネントライブラリの作成と共通言語化
- カラーパレット
- タイポグラフィ
- アイコンライブラリ など
デザインシステムで定められている項目例
ライター向けでは、「１文につき20語以下を目指す」、「主語を常にユーザー（you/your）にする」、「動名詞の利用は避ける」など、複雑なコンテンツを作らないためのルールが定義されている。
テーブルに表示すべき項目数が多い際のアプローチとして、行間への情報差し込み、オーバーレイによる情報表示など、最適なUIデザインを提示している。