デザインシステムとは？作り方や事例についてデザイナーが解説！
フォーカスしたいもの
規模の大きなプロジェクトのUI作成に「デザインシステム」を活用するケースが増えてきています。
大きなプロジェクトに関わるデザイナーやエンジニア以外でも、デザインシステムという言葉を
耳にすることが増えてきたのではないでしょうか。
その反面、デザインシステムをしっかりと理解できているという人は多くありません。
今回の記事ではデザインシステムを用いる目的、メリットとデメリット、導入事例などをご紹介します。
デザインシステムの目的を正しく理解しよう
デザインシステムとは、簡単にまとめると「デザインを構成する仕組み及びルール」のことです。
デザインに関するあらゆるルールを定めたものを指し、デザインの概念・原則を
まとめたドキュメント、スタイルガイド、UIコンポーネントライブラリ、管理運用ルール、
コード化された管理ツールなどを包括してデザインシステムと呼びます。
デザインの規則やルールなどを一部のデザイナーだけに依頼してしまうことを防ぎ、
プロジェクトに関わる全てのメンバーに共有できるようになるのがデザインシステムを用いる最大のメリットです。
デザインシステムとは、「あるべきデザインの一貫性を保ち実現させるための必要な物一式」なのです。
デザインシステムのメリットについて
デザインシステムをプロダクトやサービスに用いるメリットは大きく分けて5つあります。
一貫性のあるデザイン制作が可能
デザインシステムによって定義付けされたデザインやスタイルを使うことで、
Webサイト全体のレイアウトのバラつきを防げます。
プロダクトが大きくなると少人数での制作することが難しくなり、複数人で制作をしなくてはいけません。
そのような時にデザインシステムを用いておけば、一貫性のあるデザイン制作が可能となるのです。
開発費の効率化（管理コスト低減）
開発の前段階でデザインシステムを用いることで、実装にかかる工数や管理工数が削減可能。
デザインシステムを構築するための初期コストはかかりますが、長期間運用されるプロジェクトなら、
結果的に効率化ができるためコストの削減が望めます。
市場投入までの時間短縮
同社のブランドなどで、新サービスや新商品ができた時に毎回バラバラなデザインで
webサイト及びページを作っていた場合、時間がかかってしまうのは当然です。
デザインシステムを導入することで、UIやレイアウトを統一しサービスや商品ごとに
違ったデザインを用意する必要が無くなります。
チームでの制作が簡単に
デザインシステムを導入すると、複数人で作業をした時にデザインの管理が効率的におこなえます。
ボタンやフォーム、タイポグラフィなどを定義付けしておけば、
新しいデザインを作る際も各パーツを組み合わせるだけで、ある程度作成することができます。
メンバー同士で共通認識を持つことができる
デザイナー同士であれば、普段からコミュニケーションが取れており、
完成イメージはある程度共有できていることがほとんどでしょう。
しかし、制作に関わるメンバー全員が理解できていることは少ないのではないでしょうか。
デザインシステムを作ることで、イメージや定義をメンバー全員で共有でき、
無駄な作業を削減し、より良いデザイン制作・サービスの開発が可能になります。
デザインシステムのデメリットについて
規模が小さいプロジェクト、継続的なデザイン管理の必要性がないプロジェクトの場合には、
デザインシステムの導入はあまりおすすめできません。
デザインシステムを導入する段階で、導入費用や作業コストがかかってしまい、逆効果になってしまいます。
小規模の制作ならデザイナーが簡単なスタイルガイドを作成し、
それをベースにエンジニアが作業をしたほうが工数の削減には効果的です。
デザインシステムの事例を紹介
MATERIAL DESIGN
Googleが導入しているデザインシステム。
今ではスマホやPCなどあらゆる場面で目にするのではないでしょうか。
GmailやGooglechrome、YouTubeなどさまざまなサービスにおいてMATERIAL DESIGNは用いられています
チュートリアルがとても豊富で、デザインの実装に必要なものはオープンソースとして提供されています。
Photon Design System
PhotonはFireFoxによるデザインシステム。
FireFox独自の外観や感触、サウンドを維持しながら、作業の効率化を図れます。
PhotonはスマホやPC、テレビなど全てのプラットフォームの製品に対して、モダンで直感的なデザインシステムの構築が可能です。
Fluent Design System
Microsoft社が提供するFluentは、AR・VR・MRなどのウェアラブル端末を含めた世界観を
表現できるデザインシステムです。
ありとあらゆるデバイスでの3D空間のデザインを想定しており、
そこでユーザーがどう感じるのかに重点を置いたデザインシステムです。
デザインシステム作成ツールをご紹介
ここで、実際にデザインシステムを作成するための代表的なシステムツールを3つ、紹介いたします。
どのツールもデザイナー・エンジニアであれば一度は耳にしたことのある名前ではないでしょうか。
AdobeXD
Adobeと聞けば、illustratorやPhotoshopなどクリエイティブに関わる制作には切っても切れない存在。
そんなAdobeが作ったデザインシステムツールがAdobeXDです。
プラットフォームを問わずにチーム間での共有も可能で、極限まで無駄な作業の発生を省いたツールです。
Adobeのライブラリにてデザインシステムを共有できるため、
更新や変更があった場合もタイムリーに最新の状態を維持してくれます。
Figma
コミュニティという機能が特徴的で、さまざまなユーザー及び企業がfigmaの便利なデータを公開・共有しています
ファイルの構成、レイアウトの全て、カラーパレットの定義、タイポグラフィは何を採用しているのか、
グリッドシステム、各操作系のUIパーツ、アイコンなどありとあらゆるデータを公開しています
もちろんこれらのデータを参考にすることも可能で、さまざまなコミュニティユーザーのデータがあるからこそ、
より良いデザインシステムが作成できるのがFigmaの特徴です。
InVision Design System Manager
InVIsion提供のデザインシステムの管理ツール。
SketchやStudioとも連携が可能で、デザインツールで変更した内容を、手間をかけずに同期可能です。
使用するチーム内での権限なども細かく設定でき、使いやすさに優れた管理ツールです。
デザインシステムまとめ
デザインシステムは、長期間稼働するプロジェクトや大規模なものにはほぼ必須のものです。
しかし、どのプロジェクトにも必要という訳ではなく、
小規模なプロジェクトには逆効果になる可能性があるものでもあります。
現状のプロダクトが長期間稼働を想定している場合、
現行のデザインから少しずつでもデザインシステムを作っていくことをおすすめします。
新たなサービスや新商品ができた時に、デザインの一貫性を保ちつつ、UI/UXも意識でき、コストの削減にも繋がるでしょう。
デパート採用情報
株式会社デパートでは一緒に働く仲間を募集しています
