デザインシステムを作るのはなぜ難しいのか - クラウドワークスエンジニアブログ

こんにちは、crowdworks.jp のデザインシステム構築に携わっているエンジニアの @t0yohei です。最近は日々デザインシステム難しいいいいと思いながらあれやこれやと考えているのですが、開発者の観点から何が難しいと思うのかをせっかくなので共有したいと思います。

デザイナーの観点からのデザインシステム構築については、一緒にやっているデザイナーさんがブログを投稿していました。よろしければ合わせてどうぞ。

デザインシステムを導入する為にやって良かったこと５選｜YUCCA｜note

余談ですが、デザインシステムに関わるエンジニアって何エンジニアなのでしょうか？デザインエンジニア？フロントエンドエンジニア？自分はデザインをしないし(できないし)、元々は Rails エンジニアだったのでフロントエンド専門というわけでもなく、一体何者なんだろう...？と日々迷走しています。自分が何者かはわかっていませんが、やりがいを持ってデザインシステムの構築に取り組んでいます。よろしくお願いします。

難しいこと: デザインシステムをいい感じに作るのが難しい

早速本題ですが、いきなり抽象的ですね。まず前提の話からすると、デザインシステムは読んで字のごとくデザインのシステムです。デザインのシステムがデザインシステムです。大事なことなので 2 回言いました。つまり、普段エンジニアの皆様が相対しているシステムと同じで、何らかの工程・作業をシステマチックに対処してくれる仕組みであり成果物です。

Web アプリケーション開発の文脈で言うデザインシステムで、何らかの工程・作業に当たるものはデザインとそれを画面に反映するための実装で、仕組み・成果物に当たるものがスタイルガイドや UI コンポーネントライブラリです。わかりやすいですね？

多くのシステムに言えることですが、デザインシステムは長く・効果的に使ってもらえるよう、いい感じに(使いやすい上に保守性も高く)作ることが重要です。使いにくいデザインシステムはいずれ捨てられてしまうので、いい感じに作ることはデザインシステムを作る目的を達成するために必須と言えるかもしれません。

なぜ難しいのか

さて、デザインシステムをいい感じに作ることが重要なことはわかったのですが、ではなぜいい感じに作るのが難しいのでしょうか？デザインシステムに関わったことがある方は薄々お気づきかもですが、ざっくり言うとデザインシステムを使っていい感じにしたい対象が、デザインと実装の 2 つあるからです。そして、このデザインと実装を考える時に使用する脳みそがそれぞれ違うからです。

実装を考える時は要件をどう実現していくかという具象について考えを巡らせることが多いと思うのですが、デザインを考える時はそうではありません(実装もデザインもやるデザインエンジニア曰く、「実装は最小単位(？)の機能から考えていくのに対し、デザインは こんな感じことができるようになっている という最大(？)公約数的な全体像から考えていく」とのことです。少なくとも開発とデザインでは頭の使い方が違いそうですね)。このことから、デザインをいい感じにできるデザインシステムは開発もいい感じにできるとは限らず、開発がいい感じにできるデザインシステムはデザインもいい感じできるとは限りません。

ベン図をかくとわかりやすいですね。

まとめると、デザインシステムをいい感じに作るには、デザインがしやすいシステムと、開発がしやすいシステムを一緒に考えないといけない。一緒に考えないといいシステムが作れない。これが難しい。

どうやるのか

答えは簡単で、一つの脳みそで両方考えることができる人(デザインエンジニア？)が作るか、デザインのことを考える人と開発のことを考える人が手を取り合って一緒に作るか、です。わかりやすい。

一般的には後者のやり方でやることが多いのではないでしょうか。後者のやり方でやる場合、お互いがデザイナー・エンジニアそれぞれの作業についての理解に努め、手を取り合って落とし所を見極めていくのが大事になってくる気がしています(自戒)。今の私達で言うと、エンジニアはデザイナーが実際に作業している Figma を操作してデザイン作業をシュミレーションしたり、デザイナーは実際にコードを書きプルリクエストを作成することなどで、積極的にお互いの作業の理解に努めています。

余談ですが、自分はデザインはうまくできないエンジニアなので、デザインも開発もできるデザインエンジニアがとても羨ましくなります。