こんにちは。デザイナーのNです。
さて今日のテーマは…「デザインシステムを知ろう」の回です！
近年のデザインシステムといえばデジタル庁のデザインシステム*1が話題に上がりましたね。
例に漏れず、わたしが担当することになった新規案件においてもデザインシステムを構築しながら作っていこう！ということになりました。
上司「デザインシステムに挑戦していこう！」
わたし「デザインシステムについて、何もわかりませんがとりあえず挑戦してみます！」
そうなのです。
わたし自身、今までデザインシステムを作りながらUIを作成していく経験がなく何もわからない状態なのです。
そんなわたしがデザインシステムを始めていくにあたり調べて知った、
「はじめの一歩」的な備忘録を皆さんに共有していきたいと思います。
そもそもデザインシステムって？
当たり前ですがデザインシステム、「一体どういうものなんだ⁇」がわかっていないと始められません。
デザインシステムとは
デジタル開発におけるデザインのルールや指針、そのパーツなど、あらゆるものをまとめた仕組みの集合体
なるほど、少し難しい…
この時点ではまだまだ何をすれば良いのかわかりません。
そうして、手始めにデジタル庁のデザインシステムを参考に見に行くこととなります。
またこちらの本も参考書籍として手に取ってみました。*2
デザインシステムの構成要素
デジタル庁のデザインシステムを見に行ってみると、実際のfigmaのデータを閲覧することができます。
内容としては大きく分けて
- デザインシステム利用の手引き
- スタイル
- コンポーネント
- テンプレート
さらにそれぞれ中身に小要素を内包しているようでした。
合わせて参考書籍を見てみると、デザインシステムの構成要素として
- ブランドガイドライン
- UIガイドライン
- コンテンツガイドライン
- 運用ガイドライン
が必要である、とあります。
ん…？
デザイン庁も参考書籍も同じことをやって(言って)いる！
まとめると、「デザインシステムには4つの要素が必要である」ということがわかりました。
デザインシステムは誰のため？
ここまででデザインシステムの何となくの概要と構成要素がわかりました。
がしかし、デザインシステムを作る上で「ここまでする理由とは何だろう？」「何が目的で作るのだろう？」といったものがまだ少し見えていません。
いつかの自分が、「とにかく何となくデザインシステムを作ってみたが何のために作ったのかわからなくなってしまった…」とならないように、改めて目的を確認してみます。
デザイン庁のfigma内然り、サイト内にも実は目的や意図がしっかり書かれています。
主な内容としては
- ユーザーのためのデザイン開発の効率化
- サービスの一貫性の担保
- チームの円滑なコミュニケーション
といった感じです。
また参考書籍ではデザインシステムの利用者は「デザイナーだけではなく組織に関わる全ての人」と挙げています。
つまりデザインシステムというものは、
「組織に関わる全ての人」が共通言語として使えるもので、それを着々と運用していくことで「ユーザーのため」になっていくものだということです。
少しだけ話が大きくなってしまいましたが、要するにめっちゃ大事やんスペシャルです。
デザイン開発におけるかなり重要なもので、活用できればとても便利なものだということがわかります。
デザインシステムの先は長い
ここまで長々とデザインシステムの概要についてまとめてみましたが…
いやまだ作業工程にすら入れていない…!!!
ということでNのおくるデザインシステムについての備忘録ブログはこれが第一弾となります。
次回は自分の作成したデザインシステムも併せて紹介しつつ、お話しできればと思っています。
今回デザインシステムを作り始めるにあたってわたしは色々な企業様の資料や実データを拝見しました。
社内財産であるはずの知見を誰でも見れるような状態で公開してくれるというのは、
デザイン業界全体に影響を与えひいてはデザインの質を向上させていく
とても素敵な働きだと思います(本当に、ありがたいことです)。
いずれはN、並びにBOOK☆WALKERのデザインチームが、
そのようにデザインの力でみなさまの手助けができるようになればいいなと思っています。
何としても目先はデザインシステム第二弾のブログ！
次回の更新をまたお待ちください。
*2:2023年発行。Smart HR様のデザインシステムに関する書籍
