📝

デザインシステムについて勉強

2024/12/19に公開

デザインシステムについての記事を読んで勉強になったことのメモ

※参考記事がすでに良くまとまってるので、あくまで自分の勉強用のメモです。

参考記事:

・「デザインシステム」って何?新人WEBデザイナーがインターネットの海を泳いでみた|akane
https://note.com/akane_desu/n/ncb7632b9aba9#c4d55164-a46b-46f6-82a9-1a51c4bdba7e

・デジタル庁のデザインシステム
https://www.figma.com/community/file/1255349027535859598/v1-4-3

デザインシステムとは

デザインシステムとは、 「色・フォント・ボタン・サイズなどを定めるガイドライン」のこと。

・どこまでを範囲に定めるかなどは、デザインシステムによって違う。
・UIデザインに使うパーツだけでなく、イラストや写真のトンマナについても定めているデザインシステムもある。
・このように使うべきという例だけでなく、使うべきでない例、避けたい例についても示している場合を明確にしておくことで、ユーザーにより快適な体験を提供しやすくなりますね。

デジタル庁デザインシステム コンポーネント

■デジタル庁のデザインシステム
https://www.figma.com/community/file/1255349027535859598/v1-4-3

なぜ必要か

デザインシステムを設計することは、デザイン作業がなくなったり、デザイナーが不要になったりするものではない。しかし、デザイン作業を効率化して比重をかけるべき作業内容に多くの工数をかけられるようになる

デザインの品質UP
改善のスピードUP
アクセシビリティ、一貫性の確保

最終的な成果物の品質向上
ユーザーにより良い体験を提供することに繋がる

「パーツの一覧表=デザインシステム」ではない

デザインシステムはあくまで「ユーザーに良い体験を届けるため」の手段。
プロダクトの開発コストを下げ、一貫性を持たせることができるなら、どんな形であってもかまわない。いくら見た目が綺麗に整えられていても、チームに浸透していないものを「デザインシステム」と呼ぶのは危うい。

デザインシステムをつくりはじめる時に考えること

公開されている他のデザインシステムと同様に全ての要素を作ろうとしがちだが、実際は自分たちに必要な要素から始めていけばよい。小さくはじめてだんだんと広げていく。
・「どんなデザインシステムが必要か?」の整理
どんな課題があって、何を目指したくて、デザインシステムを構築したいのか。チームとして共通認識を持ちながら、目的を達成するための機能を考える。

実際につくるとなったら下記のような具体的な記事が参考になりそう。
https://note.com/jirosh1998/n/nf7b2f0943e45

akaneさんの記事で実例を集めたものもありました。
https://note.com/akane_desu/n/n2e564f6561b4

Discussion