エンジニアにとって「デザインシステム」の役割とは？インタビューしてみました！ Part.1
はじめに
デザインシステムとは
デザインシステムとは、組織やプロジェクト内で一貫性のあるデザインとユーザーインターフェース（UI）を実現するために制作されるリソースのことです。デザインシステムには、カラーパレットやタイポグラフィ、アイコン、ボタン、フォームなどのデザイン要素やパターンが詰め込まれています。これらの要素を使い、デザインの一貫性と効率的な制作作業をサポートするためにドキュメント化され、再利用可能なUIデザインとして複数のプロジェクトやチームで共有されます。
この記事の概要
デザインシステムは「他職種とのコミュニケーション改善システム」として紹介され、大きな利点が取り上げられています。一方で、実際にデザインシステムを作り、運営する役割はデザイナーが行うことが多いです。では、デザイナー以外から見たデザインシステムは、本当にコミュニケーション改善システムとして機能し、業務を進めていく上でデザインの理解に役立っているのか？デザインシステムの立ち位置は何なのか？
今回はメンバーズでご活躍しているエンジニアの方、二人にインタビューを行いました！
エンジニアIさんへのインタビュー内容
Iさんはどのくらいデザインシステムについてご存知ですか？
Iさん：きちんと使ったことはありませんが、デジタル庁のデザインシステムなどは見たことあります。
Iさんが担当された業務の中で、デザインシステムを使っていた企業さんは結構いましたか？
Iさん：今のところはないですね。ただ、使っているクライアントはよく聞きます。ここ数年でFigmaが急激に使われるようになって、それと共にデザインシステムが広まり、使われているのかな、と思っています。
デザインシステムを見た時に使いやすそうだな、逆に使いづらそうだな、と思う点はありますか？
Iさん：基本的にHTMLでやっていることと、矛盾したデザインシステムでなければ使いやすいと思います。
私はバックエンドや業務システムの業務をやっていた経験上、「実装」という観点が気になります。その「実装」の時にやり辛さがなければ、使いづらいとは思いません。
バックエンドのエンジニアさんから見て、デザインシステムがもっとこうであって欲しいとかありますか？
Iさん：バックエンドエンジニアはフロントエンドに直接関わらないですが、フロントエンドに全く触らないということはないんです。HTML、CSSはある程度書けるし、コードも実際に書く時があるので、その時にデザインシステムがHTML本来のあり方と矛盾していないかは気になります。あとはUIライブラリである『Bootstrap』を使っているなら、そのデザインにデザインシステムを合わせて欲しいと思うこともあります。
『Bootstrap』などのUIライブラリを使って実装する場合、UIライブラリごとに流儀があるので、その流儀と矛盾するデザインをデザイナーのみで提案するのではなく、エンジニアとコミュニケーションをとってデザインを進めていくべきだと思います。
※『Bootstrap』＝ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワーク。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。
公式サイト：https://getbootstrap.jp/
デザインシステムは「開発チームとのコミュニケーションを円滑にする」とよく紹介されているのですが、デザイナーとエンジニアでの認識の違いって結構ありましたか？
Iさん：はい。やっぱり実現可能性という点で認識の違いはありました。
私：デザイナーとしてはこういうデザインにして欲しいけど、実装が難しいみたいなことが多いですか？
Iさん：ラジオボタンのように実装がしやすいUIはHTMLで作れるんですよね。でも、凝ったデザインをデザイナーから提案された場合、標準的なHTMLで表現できるパターンから外れるものが多いので、実装のことも踏まえて慎重にデザインをしてもらえると嬉しいです。
最後に、メンバーズにデザインシステムがあったらいいなと思いますか？
Iさん：作ることはいいとして、ボトムアップで作るべきかなと思います。デザインシステムを作ったから適応してください、と上からいきなり言われたら困るじゃないですか。各々のサイトを作っていくにしても、各サイトによって使われている技術は違うので。
私：デザインシステムを実装してからが大変ですね。
Iさん：正解がよくわからないですよね。デザインシステムがあったらいいとは思いますが、デザインシステムを逸脱する場合は実装する時どうあった方がいいとか、そういった取り決めが必要だと思います。ガイドがあること自体はいいと思うんですけどね。
でも、やっぱりチーム内でのコミュニケーションが大切です。そこが重要であとは実装との整合性が取れていれば、メンバーズにデザインシステムがあってもいいんじゃないかな、と思います。
まとめ
バックエンドエンジニアならではの視点で、デザインシステムに関して様々な良い点や、起こりうる欠点を挙げてくださいました。特に、デザイナーとエンジニア間でのコミュニケーションでIさんが何度も仰っていたことが、「デザインシステム関係なくコミュニケーションを取るべき」ということです。
デザインシステムは「他職種とのコミュニケーション改善システム」ですが、あくまで手段の一つでしかなく、実際にデザイナーとエンジニアでコミュニケーション（進捗共有のミーティングや朝会など）を取ることが重要だと再認識しました。
ご協力いただいたIさん、本当にありがとうございました！
次回はフロントエンドを中心に業務をされているSさんへインタビューを行った内容を記事に書かせていただきます。お楽しみに！
この記事が気に入ったらサポートをしてみませんか？