チームの連携と効率化を実現するデザインシステムとは？【準備編】

こんにちは。 UI/UXデザイナーの関です。 IDCFクラウドのUI設計やユーザーリサーチを担当しています。
「デザインシステム」という言葉を聞いたことがあるでしょうか？近年、多くの企業がデザインシステムを導入し、デザインの品質向上や生産性向上など、多くのメリットをもたらすものとして注目されています。

IDCフロンティアでもデザインシステムを導入し、IDCFクラウドのデザイン品質の向上や生産性の向上に取り組んでいます。

こちらでは、準備編と構築編の2部に分けて、デザインシステム導入プロセスの紹介、具体的な導入方法などを紹介していきます。デザイナーの方はもちろん、デザインシステム導入に興味がある方にも役立つ情報を提供していきますので、ぜひご覧ください。

デザインシステムとは何か？

デザインシステムは、プロダクト開発に必要なデザインの基礎である原則や概念を土台として、スタイル、UIコンポーネントライブラリ、コードルールなどをまとめたものです。デザインシステムにより、プロダクトのデザインに関する一貫性を確保し、品質や生産性を向上することができます。また、デザインチームや関係部署との協力やコミュニケーションをデザインシステムを介した共通の言語で行うことができ、コミュニケーションの質とスピードが向上します。

デザインシステムが必要になった背景

現在のIDCFクラウドのUIは表面上は統一感があるように見えますが、各サービスごとに改築が繰り返されているため、細かい部分ではまだ統一されていない箇所が多数存在しています。

さらにエンジニアとデザイナーの間で共通認識の基盤となる情報が十分に整備されていなかったため、コミュニケーションや効率に関する問題が発生していました。

これらの問題を解決するために、デザイナーとエンジニアが連携してデザインシステムを構築することになりました。

下の表でIDCFクラウドが抱えていた課題とそれに対応するデザインシステムの効果をまとめました。

課題	デザインシステムで解決できること
UIの見た目と実装方法が統一されていない。	見た目と実装方法の共通の参照元を作成することで、見た目と実装方法が統一される。
デザイナーの確認が都度必要で効率が悪い。	共通のUIパーツと使用方法を定めることで、エンジニアが単独で同じ品質の成果物を作成でき、開発スピードが上がる。
職種間での共有言語がなく、コミュニケーションロスが発生。	UIの意図を明確にすることで、デザイナーとエンジニア間の共通認識が生まれ、開発プロセスが効率化される。
新しいUIパーツを追加する際の適切な基準が定まっていない。	デザイン原則により、IDCFクラウドにとっての良いデザインを定義することで、新たなパーツを追加する際も方針との乖離がなくなる。
現行画面でのUIパーツの使用方法を毎回確認するのが効率が悪い。	デザインシステムで各UIの具体的な使い方を掲載することで、UIの適切な使用方法や抑えるべきポイントが分かる。

デザインシステムの構築プロセス

デザインシステムの目的と目標の設定

今回、初めてデザインシステムを構築するにあたり、アラ・コルマトヴァ（著）,佐藤伸哉（監訳）『Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド』（ボーンデジタル、2018、p256）というガイドブックの内容をチームでまとめ、デザインシステムの基本を理解しました。

基本が理解できたところで、チーム内でIDCFクラウドのUIが抱える課題を明確にしました。その際、共通認識を持つためにワークショップ形式で課題の洗い出しを行いました。そこで出た課題の中からデザインガイドで解決できるものを抽出し、優先順位を付けました。

以下は、抽出した課題の一部です。

どのパターンでどのパーツを使うかが明文化されていない
文字サイズが基本的に小さく、読みづらい箇所がある
同じ機能であるが、異なるUIパーツが存在する
アプリケーション仕様を考慮した説明が欲しい（例：色の選び方）
表（table）の種類が多く、整理が必要
コーディングスタイルが統一されていない

現状調査

上記の課題で挙げられたUIパーツの不整合に関して、現状の各UIパーツがどの程度の不整合性を抱えているかと、UIのユーザビリティ上の問題点を調査しました。

ユーザビリティ上の課題の大きさや不整合の解消への工数を考慮のうえ、今後の優先度を決定する材料として活用していきます。

以下は調査結果の一部です。

同じ意味を持つアイコンが複数種類ある
ボタンのサイズがまちまち
フォームのバリデーションチェックの挙動がバラバラ
日付の書式が揃っていない
プレースホルダーの文言が統一されていない

UIの色や形といった大枠は揃っているものの、アイコンやボタンのサイズ、UIの挙動等の整合性はまだ課題があることが分かりました。

他社調査

そこから他社で公開されているデザインシステムを参考にし、他社がデザイン原則やデザイントークン及びコンポーネントをどのように定義しているかを調査しました。この調査でIDCFクラウドの現行のUI定義をブラッシュアップし、グループワークや現状調査では見落としていた課題を洗い出しました。

他社調査では色やフォントサイズのバリエーション、モーダルの適切な使用場面やテーブルの組み合わせパターンなど、デザインシステム構築だけでなく、今後のUI改善のヒントとしても大変参考になりました。

デザインシステムのリリース範囲を決定

現状調査や他社調査を通じて、徐々にデザインシステムに必要な要素が明らかになってきました。そこで、まず最初のリリースの範囲を決定しました。範囲の決定にあたっては以下の2つのポイントを重視しました。

関係者にできるだけ早いタイミングで共有することを最優先とし、デザインシステム自体は必要最低限の要素で構築する
デザイントークンやプロダクト内で頻繁に使用されるコンポーネントなど、影響範囲の大きい要素から優先的に取り組むことで、効果的なデザインシステムの導入を目指す

デザインシステムの構成

リリース範囲の検討を経て、以下のような構成で第１弾となるver.１をリリースすることとなりました。

はじめに	デザインシステムの目的、デザイン原則、デザインポリシーなどデザインシステムの基盤となる情報をまとめています。デザインシステムを初めて参照する人でも、これを読むことでデザインシステムの目的やIDCFクラウドにとってどんなデザインが良いのかといった大前提となる共通認識が確立できます。
デザイントークン	色やタイポグラフィなど、見た目や振る舞いに関する基本要素をまとめています。ここを共通化することで見た目の統一を図ることができ、CSS変数を定義することで、コードの重複を減らし、保守性が向上します。
コンポーネント	ボタン、ヘッダー、フォーム要素、メニューなど、具体的なUI部品をまとめています。UIの見た目の一貫性だけでなく、使いどころやNGパターンを掲載しているため、用途の一貫性も担保できます。