🎨

デザインシステムを育てていく

2022/05/31に公開

はじめに

ここ最近はデザインシステムの構築や支援を行なっています。そこで、デザインシステムを作ることが目的になっていることを感じることがあります。私はデザインシステムは作ることよりも、育てていく考え方が重要だと思っているので、その考えについてお伝えします、どなたかの参考になれば幸いです。

デザインシステムとは?

まずはデザインシステムそのものについてです。デザインシステムの事例から学んでみます。

GoogleのMaterial Designは「チームがより高品質なデジタル体験を各OS上で構築するためのもの」と表しています。
https://material.io/design/introduction

Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the web.

アメリカ合衆国のWeb Design Systemsは、「アクセシブルでモバイルフレンドリーな政府ウェブサイトおよびデジタルサービスの設計と構築を支援するための原則、ガイダンス、コードを提供するもの」と表しています。

https://designsystem.digital.gov/how-to-use-uswds/

USWDS provides principles, guidance, and code to help you design and build accessible, mobile-friendly government websites and digital services.

インテリアを扱うFrancfrancのデザインシステムは、かなり詳細に目的を記載しています。
https://francfranc.io/design-system-guidelines/design-system/overview

Francfrancのデザインシステムの目的は、ブランドの価値を上げ、実務者の負担を軽減し、イノベーティブな取り組みを推奨する上での合意形成を的確かつ迅速に行えるようになることです。2017年9月にその第1版を公開しました。

その大きな特徴は、情報発信における機能的な価値とブランドイメージの訴求という異なる目的に対して、誰もが認識できる基準を提示したことで、実務者の確認業務の軽減を促進し、スピーディーにクオリティの均一化を実現します。

Francfrancのデザインシステムは、変化する市場や時代の流れに沿って、柔軟性を持ちながら拡張し進化を遂げるものです。そして、ブランドの発祥や企業理念を広く振興するときに必ず参照されるものでなければなりません。

実務者および関係者はガイドラインを尊重し、的確な判断を下し、ブランドにふさわしい、そして創造性に富んだデザインを提供するように心がけてください。

Francfrancのデザインシステムは個人的に好きなので紹介しました。説明どおり、店舗や家具の配置ルールなども組み込まれています。

このようにデザインシステムは1つの概念であり、私はユーザーに一貫性のある体験/デザインを提供するための情報、仕組みが集まったものがデザインシステムだと考えています。

この必要な情報や仕組みは、デザイントークンやデザインガイドラインなど組織によって違うかもしれません。色んな物事を解決していき、その度に必要となったルールやガイドラインが集まった結果としてデザインシステムがあり、デザインシステムという箱になにを入れるのかは自分たちの課題次第だと思います。

デザインシステムを育てていく

デザインシステムを完成させれば、全てが解決する。残念ながらそうとは言えません。 正確には完成することはないと思っています。

なぜなら、デザインシステムは組織課題を解決する1つの手段であり、「デザインシステムとは?」で述べた「ユーザーに一貫性のある体験/デザインを提供するための情報、仕組みが集まったもの」は組織やプロダクトの課題・フェーズによって変わっていくからです。

プロダクトがまだ小さい時はコンポーネントライブラリやスタイルガイドなどは不要かもしれません。しかし、デザイン原則(Design Principle)やデザイントークンの準備は、プロダクトデザインの共通認識として用意したほうがいいでしょう。デザイン原則は、プロダクトと共に進化していくものであり文化に近いものです。成熟した状態で導入することの方がハードルが高いはずです。

デザイン原則の考え方については、この記事がとても参考になります。
https://yasuhisa.com/could/article/design-principles-decisions/

プロダクトが成長していくと、小さな時には不要だったコンポーネントライブラリやスタイルガイドの用意も必要になってきます。こうなってくるとデザインシステムと呼ばれるような1つの大きな仕組みになっているのではないでしょうか。このようにデザイン/開発に関する共通課題を見直し、デザインシステムを都度アップデートしていくといいでしょう。

組織にとって求めているものが「デザイン原則」だけであれば、それを作ればいいと思います。
そういったものを作って、集めていく中で、デザインシステムが出来上がっていきます。

最後に

デザインシステムは結果でしかなく、根本はなにかしらの課題を解決するのが目的で出来上がってきます。

一度作れば開発者とデザイナーの効率をよくできる万能なものではありません。

組織の課題は変化していきます。作ったものを成長させていかないといけません。デザインシステムを育てていくためには、フィードバックが集まる仕組みづくりも必要になってきます。これも立派なデザインシステムの一つの役割なはずです。

Discussion