はじめに
こんにちは。
株式会社アイスリーデザイン エンジニアリング部の山下です。
アイスリーデザインでは、効率化と安定した質の担保のためにデザインシステムを構築しています。
この取り組みに至った背景や思いを、数回に渡ってお伝えしようと思いますが、本日は、この取り組みの一環であるデザインシステム勉強会のレポートを中心にお届けします。
（勉強会の様子）
デザインシステムとは
デザインシステム勉強会についてお話しする前に、デザインシステムとは何かを説明します。
デザインシステムとは、企業のビジョンやブランドアイデンティティなどから「良いデザイン」を定義するデザイン原則などのドキュメント、それらを具体的にデザイン・実装するためのUIパターンやコンポーネントなどを備えた一連のリソースのことを指します。
デザインシステムを導入することで、以下のようなメリットが生まれます。
- デザインの一貫性の向上
すべてのデジタルプロダクト・サービスで共通のデザイン言語（※）を使用することで、ブランドイメージの強化、ユーザー体験の向上、アクセシビリティの向上、デザインの保守管理の容易化などが実現できます。
※「デザイン言語」とは、デザインのルールやガイドラインの集まりです。色やフォント、アイコンなどの使い方を決めて、製品やサービスの見た目を統一することにより、ユーザーは使いやすく感じ、ブランドの印象も強まります。
- 開発の効率化と工数削減
コード化されたUIコンポーネントを一括管理することで、デザイナーとエンジニアの工数を大幅に削減できます。具体的には、一貫性のあるコンポーネントをデザイナー・エンジニアの両者がスクラッチで作成するコストを削減することができます。
- コミュニケーションの円滑化
デザイナーとエンジニアがコンポーネント名やスタイル名など、共通の要素名を共有することで、共通認識の形成、議論の効率化、相互理解の促進などが実現できます。
デザインシステムのより詳しい内容や運用方法については、弊社のオウンドメディアでも紹介しています。ぜひこちらも参考にしてみてください。
「デザインシステムとは？内容や作り方、運用方法を解説します」
なぜデザインシステムを作るのか
もともと弊社では、デザイナーとエンジニアが一から全てのコンポーネントを作成していました。コンポーネントを一から作るということは、それなりに時間がかかってしまったり、重複した余計なコンポーネントを作ってしまったり、プロジェクトメンバー間のコミュニケーションに時間がかかったりします。そのため、プロダクトが届けたい価値やユーザー体験の設計にコストをかけることが難しいという課題がありました。
これらの解決策が『デザインシステム』です。
デザインシステムを活用することで、クライアントワークで頻出するコンポーネントや画面パターンをデザインシステムとして網羅し、品質が担保された状態からプロダクト構築をスタートすることができます。そして、本来、コストをかけるべきところにリソースを投入することができるのです。
デザイナーとエンジニアの連携が目的なんじゃない。プロダクトの質を高めるために時間を使いたい、もっといいものを届けたい、ということなんです。
ということで、今回の勉強会の主催者、原田（デザイナー）、岩本（デザイナー）、大川（エンジニア）の3名は自発的にデザインシステムの構築に取り組み始めました。
（主催者の皆さん）
なぜデザインシステム勉強会をやるのか
デザインシステムが必要な理由は前章で述べた通りですが、彼らはデザインシステムの開発・運用のためには他のデザイナー・エンジニアの協力が必要不可欠だと感じていました。
これが、彼らが社員向けに勉強会を開催した理由です。
デザインシステムの構築と並行して、社員に向けての啓蒙活動をするための勉強会を計画しました。
ここからは、彼らが最初に考えた課題とそれに対して深掘りをしたプロセスを紹介します。
デザイナーとエンジニアの間にある課題を、彼らはこのように考えました。
これらの課題は、デザイナーとエンジニアがお互いにWin-Winの関係で仕組み化していかないと解決しない。主催の3名は、より良いシームレスな形を模索し始めました。
デザインシステムの担当者だけでより良いものが作れるでしょうか？
答えはNOです。他の人のアイデアがもっといいときもあります。
社内デザインシステムの担当者だけで社内デザインシステムを運用していけるでしょうか？
これも答えはNOです。社内デザインシステムを深く理解したメンテナー（デザイナー・エンジニア）が必要不可欠です。
社内デザインシステムについて、3人だけが理解することで根本解決するのか？
これも答えはNOですね。
ということで、開催されたのが『デザインシステム勉強会（第一弾）』というわけです。
…熱い！この思いが熱い！！
この思いは現場の人間としては共感でしかないですね。開発に携わる人なら共感してくれるはず！
デザインフェーズと開発フェーズのコスト問題、品質問題など、どの企業も頭を悩ませている課題と言えるのではないでしょうか。デザインチームとエンジニアチームが共に働く弊社にとっても必要な取り組みですので、社内でも注目の勉強会となりました。
勉強会の概要
さて、今回の勉強会では、デザインシステムの全体構想やエンジニアにとってのメリット、デザイナーにとってのメリット、従来の開発フローとの違いなど、大枠の視点から理解を深めていきました。
MUIなどのフレームワークを使うのではなく、独自のデザインシステムを作る目的を、改めて整理しましょう。
- より顧客の課題に沿ったデザインを、そのまま開発に活かす
- デザイナーおよびエンジニアの成果物の質を高め、複数の案件を横断してデザインの品質を標準化する
アイスリーデザインのデザインシステムの特徴
弊社のデザインシステムの特徴をまとめると以下のようになります。
- テンプレートプロジェクトファイル
デザインシステムのコンポーネントがすべて入ったテンプレートとしてのプロジェクトファイルを作成。案件ごとにテンプレートをカスタマイズして利用します。
- Figmaとプロジェクトファイル上のデザインシステムが同期している
デザインツールFigmaとプロジェクトファイル上のデザインシステムが同期しており、デザイン変更が即座に反映されます。
（説明資料から抜粋）
デザイナーやエンジニアなら共感してもらえると思いますが、コンポーネントを一から作成したり、デザイン修正のたびにデザイナー・エンジニア間で連携をとって修正していくには、結構な工数がかかります。
アイスリーデザインのデザインシステムでは、デザインデータとプロジェクトファイル内のコンポーネントを同期させることにより、UI修正の工数を削減することができます。
勉強会の後半では、今後、実際に導入する予定のプロジェクトの紹介や具体的な検証項目などの説明があり、具体的な導入イメージができるプレゼンテーションでした。
（勉強会の様子）
まとめ
今回の勉強会は参加者約50人と、非常に多くの社員が参加しました。このテーマが大変注目されていることが分かりますね。
フロントエンドエンジニアの僕としては、コンポーネント作成やデザイン修正及びレビューの工数を削減できたら非常に嬉しいです！！
社内デザインシステムの構築・運用には社内の理解促進が必要不可欠であるため、今後も勉強会は継続されるとのことです。
我々エンジニアとしても、今後のプロジェクトに導入していけるように、さらに理解を深めて行きたいと考えています。
勉強会第二弾、第三弾のレポートも公開していきますので、お楽しみに！
