デザインシステムとは
昨日に続いて 「デザインシステムを学ぶ 31 日」の 2 日目。
デザインシステムとは
ブランドやプロダクトの一貫性を保つため、デザインをシステム化したもの。UI ライブラリー、フレームワーク、スタイルガイド、文章ガイドライン、ワークフローなどはこのシステムの一部にあたる。
デザインシステムがあるとどうなる？
つくったデザインに一貫性が生まれる。プロダクト内のどこかで「ボタン」の見た目を学習したユーザーは、別の場所でも同じようにボタンを発見・認知することができる。このような体験をユーザーにさせたいときにデザイナーはデザインで迷わなくて済むようになる（すでにコンポーネントがあれば既存の選択肢から選ぶだけ）。
そしてよくできたデザインシステムはデザイナーとエンジニアのコミュニケーションコストを下げる。Sketch などで作成したデザインデータとプロダクトのコードがシームレスにつながり、一部はデザイナーの意図した変更をエンジニアを介さずにプロダクトに反映させることもできるだろう。また、コンポーネントの選択と配置で基本的なデザインができるようになるので、エンジニアがデザインできる範囲も広がるはずだ。
デザインシステムがデザインシステムであるために
システムの前に原則がなくてはいけない。システムを構築する上で判断軸が必要になるため、原則なしでデザインシステムはつくりにくい。
また、システムをつくったら知りたい情報に素早くたどり着けるようになっていなければいけない。そしてたどり着いた情報は正確でなければいけない（バージョンが古くてもダメ）。これを実現させるためには情報が一箇所で管理されていることが理想であり、この考えは Single source of truth と呼ばれている。
最後に、「デザインシステム」なのでガイドラインを文章にまとめただけではいけない（我々はすでにドキュメントだけでルールが守れないことを知っている）。ルールは可能な限り仕組み化し、自動的に保守・運用できるようにしていく必要がある。
デザインシステムをつくるには何が必要か
原則と仕組みが必要。今思いつくのは以下の通り。
- デザイン原則 ... システムをつくるにあたって指針となる考え
- 言葉のトンマナをまとめたドキュメント ... ブランド全体の印象をつくるもの
- 変数 ... 色、タイポグラフィなどブランドの印象をつくるもの
- コンポーネント ... ブランド全体、またはプロダクトごとに用意されたデザインパーツ
これらを用意してワークフローに取り入れることでシステム化したデザインが完成する。
じゃあ具体的に何を、どうするの？というのをこれから学んでいく。
