こんにちは！ささたにです。

数年前から「デザインシステム」という言葉をよく耳にします。
皆さんはどのくらい知ってますか？

私はというと、業務で少しだけデザインシステムを使ったり、色々な企業のデザインシステムを覗いたりで「何となく知っているけど実際のところ、デザインシステムとは何なのか？」な状態です。

ウェブデザイナーとして切っても切れない縁なので、今回記事にすることで私なりに理解を深めていこうと思います。

そもそもデザインシステムとは何だろう？

一旦、デザインシステムについて表面的に理解したいと思ったので定義を調べてみました。
Wikipedia（英語）が分かりやすくまとめていたので、参考としてみていきたいと思います。

デザインシステムは、任意のアプリケーションを組み立てるのに用いる再利用可能なコンポーネントと標準規約の集まりです。デザインシステムは、モバイルアプリケーションやWebサイトなどデジタルプロダクトのデザインと開発をサポートします。パターン、コンポーネントライブラリ、デザイン言語、スタイルガイド、コード化されたコンポーネント、ブランド言語、ドキュメントなどが含まれます。デザインシステムは、製品のデザインと構築に複数の人々が関与するような場合に、まとまりのある設計や表現を保証することができます。(意訳)

引用：Wikipedia（英語）

上記によるとデザインガイドラインとコンポーネント集を定めた資料ということみたいです。

つまり私たちがデザインする時に考える色・フォント・サイズ・トンマナ…etcなどを、一つのガイドラインとしてまとめておくことで、複数の人が関わる案件でも一貫した設計のもとでデザインができるようになります。

色々と調べてみたのですが、もっと難しいことを述べてたり、標準の定義はないと述べてたりする文献もあるみたいでした。
実際のところ、デザインシステムに明確な定義はないのですが、ざっくりと理解する上ではこのくらいの粒度での理解で問題なさそうです。

デザインシステムの事例を見てみよう！

デザインシステムについて大枠は掴めたと思うので、具体的に企業が展開しているデザインシステムの事例を見てみたいと思います。

各企業がどのような構成、項目、それに対してどのくらいの粒度で定めているのか見ていきたいと思います。

事例①デジタル庁

デジタル庁では、2022年11月にFigma Communityでデザインデータを公開しています。

Figma Community

Figmaを使って公開しているので、全体を一気に見ることが出来ます。

既存デザインを探しやすくて良いなと思いました。

また、利用の手引き、スタイル、コンポーネント、テンプレートの４つの構成からなっていて、非常にシンプルな印象でした。

はじめに、利用の手引きでは、デザインシステムの定義をはじめとして導入の目的が明記されています。

具体的なデザインのガイドラインはスタイル、コンポーネント、テンプレートがありました。

スタイル
印象を定義する最小単位のルール（カラースキーム、フォントなどデザイントークン）を定めています。

コンポーネント
画面を構成するパーツ（ボタン、セレクタ、テーブル）の形やルールについて明記しています。

テンプレート
サービスを横断してよく発生する、画面デザインをテンプレート化して記載しています。

デザイン自体のルールだけでなく、サービスの利用シーンを加味してどのように使うべきかの記載もされています。

各コンポーネントの組み合わせ方にも適切なガイドラインが引かれていて、利用の手引きで定められているデザインシステムの定義と一貫していました。

事例②SmartHR

SmartHRでは、一つのウェブサイトとしてデザインシステムを公開しています。

https://smarthr.design/

ウェブサイトにすることで階層化され、より多くの情報が記載されている印象です。

デザインについてのガイドラインだけでなく、各利用者にあわせた利用方法の記載やデザインシステムの運営理念を定めたりなど、細かい部分にまでガイドラインがありました。

またウェブに関連するデザインだけでなく、名刺やイベント、サービス資料、またアクセシビリティなど、あらゆる場面におけるデザインガイドラインの記載もありました。

サイトにすることでカラーコードやソースのコピー＆ペーストが出来たり、実際にウェブサイトに乗せたときのイメージが想像つきやすいので、制作側にとって嬉しいかもしれません。

事例③GMOペパボ株式会社

ペパボは「inhouse」というウェブサイトでデザインシステムを公開しています。

https://design.pepabo.com/inhouse/

複数のブランドでの使用を前提としているため、inhouseではそれらの共通基盤となるデザインを定義しているみたいです。

ブランドイメージを守りつつも、もっと幅広くデザインを展開できる作りになっている印象でした。

またペパボではタイポグラフィファーストを掲げており、テキストの行間やジャンプ率のパターンを定めていて、非常に勉強になりました。

事例を見て気が付いたデザインシステムの共通点

企業で展開されているデザインシステムの事例を3つ見てきました。
展開の形や構成が大きく違う企業を選定しましたが、３つの企業共に以下のような共通点があることが分かりました。

１、デザインシステムの目的・役割を明確化

序章で見た定義とは別に各企業が何のため、誰のためにデザインシステムを定めているかを明確にしています。

目的・役割を定めておくことで、一貫性のあるデザインガイドラインを作ることが可能になります。

２、構成の大枠はスタイル・コンポーネント・テンプレートの３つ

企業によって言い回しや内容の粒度は異なりますが、どの企業のデザインシステムにも「スタイル（カラー・フォントなどの最小単位のルール）」、「コンポーネント（画面を構成するパーツ）」、「テンプレート（共通する画面デザイン）」については明記されていました。

３、アップデートが行われていること

デザインシステムは一度作って完結ではないようです。
サービスを拡張するタイミングなどに応じてアップデートし続けることが大事と思われます。

まとめ

今回デザインシステムについて事例を基に考察してみましたが、いかがでしたか？

個人的に上記の３つを定めておくと「デザインが属人的になりすぎない」、「サービス利用者の認知不可をさげることができる」というメリットがあると思います。

複数人で作業する、汎用的なデザインを追加する可能性がある案件についてはデザインやコーディングなど何かしらのルールを設定するかと思われます。

必ずしも大規模なデザインシステムを作る必要はないと思いますが、カラーやコーディング設計などから身近な部分だけ定めておいて、チーム内で見なおしながらチームに合わせたものを決めておくと良さそうですね。

私もいつかデザインシステムの案件に携わってみたいなと思いました！
そのためにも引き続き、色々なデザインシステムについての情報収集していきます><

※当サイトのリンクに関しては、アフィリエイトリンクは含まれておりません