string(4) "blog"

CONTENTS

2020.7.7

今時のフロントエンジニアにはデザインシステムが必須である理由

written by 宮崎 聡史
デザインシステムの価値 for エンジニア

そこのあなた、デザインシステム、使ってますか?

  • デザインシステムという言葉は聞いたことはあるけど仕事では使ったことがない。
  • デザインシステムは作るといいらしいけど、デザイナーのためのものでしょ? エンジニアにはあまりメリット無いんじゃない?
  • デザインシステムを導入したいけど、上司や同僚が乗り気じゃないし、メリットも説明しにくい。

そんなエンジニアのあなたのためにこの記事を書きました。

よくデザイナーのためのものと思われるがちなデザインシステムですが、エンジニアがデザインシステムを使うことのメリットはたくさんあります!
それを大きく分けると以下の3つのメリットと考えることができます。

  1. コードの再利用による作業を効率化と、デザインとコードの一括管理によって、設計工数と実装工数、管理工数を低減できる。
  2. デザイナーとのコミュニケーションコストを低減できる。
  3. デザイナーがいなくても、優れたデザインの使いやすいアプリケーションを作れる。

工数やコストが減らせると言っても、デザインシステム自体を作るのが大変なんでしょ? といわれるかもしれませんがそこはご心配なく。
この文章の最後で簡単にデザインシステムが作れちゃう方法もお知らせします!
それでは早速、エンジニアがデザインシステムを使うメリットについてお話しします。

デザインシステムってそもそも何なの?

言葉だけは最近よく聞くけど、デザインシステムってどんなものでしょうか?
デザインシステムはデザインの原則やデザインガイドライン、そしてそれらに沿ってデザインされたUI(User Interface)コンポーネントとその実装コードがひとまとめにされたものです。

例えて言うと、ルールブック付きのレゴブロックみたいなものです。
レゴブロックには基本的なブロックから高機能なブロックまでがセットになって用意されています。
そして、そのレゴブロックを組み合わせるだけで、人形から実際に動くロボットまで様々なものが作れます。

エンジニアはレゴブロックを組み合わせるようにして、デザインシステムに用意されたボタンやフォームなどのUIコンポーネントを組み合わせることでWebサイトやWebアプリケーションを実装していきます。しかもルールブックがついているので、どのブロックをどのように組み合わせると良いのかもきちんと書いてあるのです。

コンポーネント設計とコンポーネントの実装がいらない

まず、従来のシステムの作り方を考えてみましょう。
デザイナーから画面デザインが上がってくる、あるいはシステムエンジニアからExcelで画面設計書が上がってくると、エンジニアは何をする必要があるでしょうか?
すべての画面を見て、画面上にどんなUIコンポーネントが配置されていて、それらはどれとどれが同じで、どれを別のUIコンポーネントとして実装すべきかを設計します。
それができたら、抽出したUIコンポーネントを一覧にして、それを順に実装していきます。
そうしないと、同じ見た目と機能なのに別のUIコンポーネントが何個もできてしまって、ソースコードがめちゃくちゃになるからです。

でも、デザインシステムを使えばそのUIコンポーネントの設計と実装は不要になります。
なぜなら、デザインシステムにはデザインルールに従って設計・整理されたUIコンポーネント一覧があり、それらはすでに実装済だからです。
これで工数が一週間は減りますね。

レゴブロックがほしいなら、Bootstrapを使えばいいじゃない

まぁ、こんなマリー・アントワネット風なこと言う人はいないと思いますけど。

実装済のUIコンポーネントを使いたいんだったらBootstrapがあるし、わざわざデザインシステムなんてものを導入しなくてもいいよ、という人はいるでしょう。
たしかにUIコンポーネントを使いたいだけなら、その通りです。
実装済で、ある程度のデザインの入ったUIライブラリを使えば、UIコンポーネントの実装工数は減らせるかもしれません。

ここで私情をはさんで個人的な好みを言わせてもらいますが……

Bootstrapは大嫌いです!

デザイナーから画面デザインが上がってきていて、そこでBootstrapを使えと言われたら絶対に断ります。
なぜなら、デザインされた画面に合わせてBootstrapをカスタマイズすることがものすごく面倒だからです。

Bootstrapに適用されているCSSをコードを読んだり、デベロッパーツールで解析しながら、上書きするCSSを書かなければなりません(超面倒です)
さらにCSSが!importだらけになったりします(最悪です)
実装工数を減らすつもりが、Bootstrapのカスタマイズに工数がかかります(なんのためのBootstrap……)
しまいにはデザイナーに「このデザインは実現できません。Bootstrapのせいで」と言わざるを得ない羽目になります(本末転倒です)

その点、デザインシステムならすでにデザインが適用されたコンポーネントが用意されているのでそんなことをする必要はなくなりますから、最初の意図通りに工数が減らせます。

デザイナーとのコミュニケーションを減らせる

プロジェクトも大詰めになったとき、エンジニアの手元には2つのリストがあります。
一つはテストチームから上がってくる「バグリスト」
もう一つはデザインチームから上がってくる「デザイン修正リスト」

エンジニアにとっては動くものが正義です。
いくらデザインがきれいでも動かなければ意味がありません。
そうなると、デザインの修正は後回しになり、とにかくバグを潰すことが最優先になります。
しかも、デザイナーからの指摘ときたら、テキストの位置が微妙に揃ってないとか、マージンやフォントサイズが1px違うとか、エンジニアにはそれほど気にならないような細かいことばかりだったりします。
気にならないような細かい指摘を繰り返し言われるのは、エンジニアにとってストレスですよね。
しかも、大量のバグに追われているときに!

デザインシステムを使えばこんなストレスも無くなります。
どうしてって、デザインシステムに登録されているコンポーネントは正しくデザインされているからです。
デザインに修正が入れば、デザイナーが修正してくれます。
エンジニアはきれいに修正されたデザインシステムを利用するだけになります。
これで、デザイナーに細かいことを言われるストレスも、コミュニケーション工数も減らせて、バグ修正に集中できますね。

うちにデザイナーはいないんだけど、デザインシステムは必要なの?

デザイナーがいない現場にこそ、デザインシステムを導入する価値があります。
なぜなら、デザインシステムはUXを考慮したガイドラインとそれに従って実装されたUIコンポーネントがセットで用意されているからです。

Bootstrapを使えば、ある程度きれいなデザインができる! とBootstrapを推奨するサイトにはよく書かれています。
でも、それは違います。
ある程度きれいなデザインができるのではなくて、Bootstrapなデザインができるだけです。
しかも、BootstrapはUIコンポーネントが用意されているだけなので、UXに配慮できるエンジニアがいなければ、使いにくいWebアプリケーションができるだけです。

レゴブロックに例えて言えば、白いレゴブロックです。
白いブロックだけで作ってもつまらない作品になるし、下手な色付けをしたら子供の工作みたいになるだけなのです。

デザインシステムにはUXに配慮したデザインにするための様々なガイドラインが入っています。
そのガイドラインにそって、デザインされたUIコンポーネントを配置すれば、UXやデザインに精通していないエンジニアでもUXに配慮したWebアプリケーションを作ることができるのです。

使い続けるとさらに価値が上がるデザインシステム

デザインシステムは一度作って使って終わりではありません。
次のプロジェクトや派生の別アプリなどでも使い続けることによって、さらに価値が上がっていきます。

マイクロソフト社のオフィス製品に属するWordとExcel、PowerPointのように機能は違うけれど、同じデザインルールや統一したブランディングで展開するアプリの場合、一度作ったデザインシステムを活用し、一部のデザインをカスタマイズしてデザインシステムを再利用できます。
そうすることで、複数のアプリで個々の特徴を保ちつつ、一貫したデザイン、一貫した使い勝手を提供でき、UXを向上させることができます。
実装も前のプロジェクトで使われたものが使えるので、前回のプロジェクトよりさらに工数を減らすことが可能です。

デザインシステムを簡単に作る方法

デザインシステムがエンジニアにとってメリットが多いのはお分かりになったと思います。
でも、デザインシステムを作るのは結構大変なんでしょ? と思うあなたに、最後にデザインシステムを簡単に作る方法についてお伝えしますね。

FixelではUXHubというデザインシステムを簡単に作れて、簡単に管理できるプラットフォームを開発、提供しています。
UXHubにはすぐに使えるデザインシステムのテンプレートが用意されているので、それをコピーして自社用にカスタマイズするだけで、UXに考慮したデザインシステムを簡単に利用することができます。
デザインシステムのカスタマイズもGUIを利用して簡単にできます。

Fixelではデザインシステムの構築も行っていますので、デザインからコンポーネントの実装、UXHubへの登録まで行って納品することも可能です。

自分の管理しているシステムを、デザインシステムに乗せるのは、どのくらいの負荷がかかりどのくらいの金額が必要なのか気になってきましたよね?
オンライン会議で画面シェアしてお見せいただければ、ざっくりお見積も可能ですので、お気軽にご連絡ください。

さいごに

デザインシステムはデザイナー達のコラボツールとして考えられることが多いですが、導入することでエンジニアにとっても多くのメリットがあります。

  1. コードの再利用による作業を効率化と、デザインとコードの一括管理によって、設計工数と実装工数、管理工数を低減できる。
  2. デザイナーとのコミュニケーションコストを低減できる。
  3. デザイナーがいなくても、優れたデザインの使いやすいアプリケーションを作れる。

最初に挙げたこの3つのメリットはエンジニアにとって、とても大きなメリットになります。
まずは、以下のリンクからデモアカウントの発行依頼をいただき、UXHubを使って試しにデザインシステムを体験するところから始めてみてはいかがでしょうか?

https://uxhub.tokyo/

一覧に戻る
お問合わせ