こんにちは。寺崎です。
最近社内でも話題にあがったデザインシステム。
サービスやプロダクトに一貫性を持たせることができるこの考え方が、近年注目を集めています。
まだ知識の浅い分野でしたので、勉強として参考になる事例をいくつか集めてみました。
デザインに携わる人はもちろん、サービスやプロダクトの開発に携わる方は、ぜひ一度目を通してみてください。

デザインシステムとは？

デザイン庁では以下のように定義されています。

デザインシステムとは「あるべきデザインを一貫性を持ってユーザーに提供するための仕組み」。

引用：デジタル庁 (https://www.digital.go.jp/policies/servicedesign/designsystem/)

デザインシステムの目的

目的は主に３つあると考えられます。

1. 共通認識を持つ
   作業者が多くなるにつれ、それぞれの考えをまとめたプロダクトを作り上げることは困難となります。
   デザインシステムのようないわゆる「ルール」を設けることで、全員が同じ方向を向くことができる共通認識を持つことが可能となり、コミュニケーションも円滑になります。
2. デザインに一貫性を持たせる
   1の共通認識を持つことにより、デザインにも一貫性を持たせることが可能になります。
   これはエンドユーザーが使いやすく、必要な情報に辿りつきやすいプロダクトを開発することに繋がり、とても重要な役目を果たします。
3. 運営側の効率向上
   「ルール」がない場合、プロジェクトへ途中から参加した人は都度最初から理解することとなりとても時間がかかります。
   情報がまとまっていることにより、手間や理解する時間を削減することが可能となります。

参考サイト５選

では実際に参考になると感じたデザインシステムを５つご紹介いたします。

Material Design（Google）

いきなり英語サイトで申し訳ないのですが、Googleが出しているMaterial Design Systemです。
本当にデザインのあらゆる原則や事柄について詳細に説明されており、自社で定義する際にもとても参考になりそうです。
ここまで詳細にするには時間がかかってしまいますが、少しずつでも常にアップデートしていくことがデザインシステムにとって大切になります。

SmartHR Design System

人事データを一元管理するシステムを提供されている会社、SmartHRのデザインシステムです。
人事データを取り扱っている会社からなのか、基本原則とされている内容からはとても「人」を感じ温かみを実感します。
弊社アウラでも「人」という考え方はとても大事にしており、自社の色を出すことも大切だと気付かされました。

デザイン – Apple Developer

みなさまお馴染みのApple社から出ているデザインシステムです。
AppleならではのOSごとに定義がされています。
デバイスごとにユーザーの利用目的が違うことから定義もそれぞれに異なっており、とても考えられていると感じました。

デザインシステム｜デジタル庁

日本のデジタル庁が出しているデザインシステムです。
デザインデータがFigmaでまとめられており、勉強中の私には個人的にとても見やすく感じました。
アクセシビリティを考える上でとても参考になりそうです。

SMBC DESIGN

最後はSMBCから出ているデザインシステムのお話です。
こちらは実際のデザインシステムではありませんが、デザインシステムを設計・構築する上での裏側を対談形式でnoteにまとめられています。
作り上げる過程としてとても参考になり、読み応えのある記事でしたのでご紹介させていただきました。

まとめ

いかがでしたでしょうか。
私もまだまだ勉強中の部分ではありますが、クリエイティブに関わる人間として、ユーザーにとって使いやすく親切なものを提供できるよう日々精進したいと思います。