デザインシステムについての覚え書き

この記事はPOL Advent Calendar 3日目 の記事です。

はじめに

こんにちは。現在、LabBaseという理系学生のためのスカウト型就活サービスを運用・開発しているPOL（ポル）というスタートアップで、フロントエンドエンジニアとして働いています。

小さなスタートアップで働く一介のフロントエンドエンジニアが「デザインシステム」について考え始めたきっかけは、今年（2019年）の9月19日に開催されたReact.js meetup #9です。こちらのイベントでは、「デザインシステム」がテーマとして取り扱われ、実際にデザインシステムを運用しているヤフーさん、SmartHRさん、メルカリさんなどの事例が話されていました。その中で、弊社と同じくデザイナーが一人もいないデザイナレスな組織から、デザイナーとエンジニアが協業して「より良いプロダクトを届けるためには？」を考えているキッチハイクさんの事例が非常に勉強になるとともに、デザインの勉強をこれまでしてこなかった自らの行動を顧みるとっても刺激を受ける内容でした。キッチハイクさんの当日のスライドやその解説は以下の記事から見ることができるので、ぜひ御覧ください。

デザインシステムを持たない組織のこれまでの取り組みとこれからを考える｜はのめぐみ | KitchHike｜note

このイベントの参加をきっかけに、より素敵なプロダクトをお客様にお届けしたい！弊社内でもデザイナーとエンジニアのコミュニケーションをより同期的に、より潤滑的に行えるようにしたい！という感情が自分の中で芽生えました。

この記事は何か？

とはいえ、デザインシステムは人間の叡智の結晶なので、一朝一夕で構築することはできません。まずはそのための一歩目として「デザインシステムとは何か？」「何のためにデザインシステムを作るのか？」を知ることが重要だと考えました。この記事は、自分がデザインシステムを構築しようと思い立ったときに学んだことのまとめです。

自分と同じような取り組みを始めようとしている方の学びの一助になれば幸いです。

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

まず、デザインシステムとは何か？という問いについて考えてみます。

デザインシステムについての定義は複数ありますが、私が1番しっくり来ている説明をご紹介します。みんな大好きUX MILKさんの「デザインシステムの定義と作成方法、導入事例」という記事から「デザインシステム」の定義を引用させていただくと、

**デザインシステム：**デザインの基準やドキュメント、原則に加えて、基準を達成するためのUIパターンやコンポーネントなどのツールキットをすべて備えたもの。

と記載されています。同様に、パターンライブラリ、スタイルガイドとの違いを以下のように示しています。

**パターンライブラリ：**デザインシステムのサブクラスで、企業全体で使用するデザインパターンの集まり。

**スタイルガイド：**デザインシステムの別のサブクラスで、静的なドキュメントにデザインシステム自体を説明したもの。たとえば、製品の見た目や雰囲気、UIパターンの使用例、正しいタイポグラフィの大きさなどを記載する。

図で見ると、よりわかりやすく構造化されて説明されています。

引用元：Design Systems vs. Pattern Libraries vs. Style Guides - What's the Difference?

一言で表すと、「デザインシステムとは、企業や組織におけるデザインをプロダクトに反映するためのシステム（仕組み）であり、具体的にはUIコンポーネントやレイアウトパターンなどのパターンライブラリ、スタイルガイドやアクセシビリティのガイド、またデザイン原則や実装ガイドラインなどが含まれる。」と表現できます。

具体的に何をもってして「デザインシステム」と読んでいるかは企業によって異なる場合があるので、実際に複数のデザインシステムをご覧になることをおすすめします。有名なデザインシステムとしては、Googleの「Material Design」やAppleの「Human Interface Guideline」などがあります。

世の中にどんなデザインシステムがあるのかは「Adele」というサイトや「alexpate/awesome-design-systems: 💅🏻 ⚒ A collection of awesome design systems」というリポジトリを見るのが参考になります。

Adeleでは、JSのライブラリは何か、TypeScriptは使っているか、Web Componentsを採用しているか、テストのフレームワークは何か、CSS in JSを使っているか、アクセシビリティの外ドライには含まれているか、デザイン原則は含まれているか？なそ様々な切り口からデザインシステムを見つけることができるので便利です。

デザインシステムの必要性

次に「デザインシステムはなぜ必要なのか？」という問いを考えてみます。

デザインシステムは主に

1. ユーザーへの一貫したUXの提供
2. プロダクトのデリバリー速度の向上

の2つを目的とすることが多いです。

一般的に以下のように語られます（「デザインシステムの定義と作成方法、導入事例」より）。

• **市場に投入されるまでの時間が短縮される：**デザインシステムは、レゴのようにすべてを再利用可能にし、同じコンポーネントを再構築する時間を最小限に抑えます。
• **プラットフォームや製品をまたいでもUXが一貫する：**標準化されたコンポーネントによって、より一貫したルック＆フィールが生まれます。
• **バージョン管理の問題が減る：**デザインシステムでコンポーネントを更新すると、その変更はすべてのオブジェクトに反映されます。デザインシステムはもっとも正しい情報源です。
• **協力とコミュニケーションが簡単になる：**デザインシステムによって、デザイナー、プロダクトマネージャー、エンジニアの間で一般的なベースとコンポーネントを共有できます。

弊社内での解決したい課題も大小ありますが、以下のような課題を解決したいと思い、プロジェクトが動き出しました。

• 複数箇所で同一のコンポーネントが定義され、UIに一貫性を持っていない
• デザイナーの意図通りにコンポーネントが使われなく、レビューや修正の工数が増える
• 新機能追加の際にイチからデザインと実装を構築する必要があり、デザイナー・開発者ともに工数が増える

これまでスタートアップらしく「リリースは正義」を方針とした開発スタイルでやっていましたが、プロダクトづくりに関わる人が増えていく中で、人が増えてもなかなか開発スピードが上がらなかったり、認識の齟齬により一貫性のないUIが完成してしまうことも少なくありませんでした。

デザインシステムの実践

弊社ではいきなり「デザインシステム全部作ろう」という訳ではなく、まず私とデザイナーの一人が中心となり、まずはコンポーネントガイドとスタイルガイドの整備に着手しています。まだ運用が走り始めたばかりですが、以下のような部分を考えるのが難しいと感じています。

• デザイナー・エンジニアを合わせた共通言語、共通理解づくり
• デザインシステムへの投資対効果

####デザイナー・エンジニアを合わせた共通言語、共通理解づくり

まずはじめに、自分が考える課題意識をチーム全体で共有できるような取り組みをしました。以下の画像はエンジニアとデザイナーでキックオフMTGをしたときに、課題を共有するためにつかったスライドです。

実際にプロダクション環境で動いているコンポーネントのスクリーンショットを全部貼って、皆で見ることによって課題意識の共有を行いました。

難しそうだと感じるのはコンポーネントやパターンの命名における共通認識のとり方、共通言語の作り方です。エンジニアとデザイナーの間でも、スキルや経験の差によっても認識に齟齬があったりするので、こまめにチーム内で対話することにより、その溝を埋めていきたいと考えています。

デザインシステムへの投資対効果

デザインシステムの取り組みが、プロダクトがデリバリーされる期間やユーザーの満足度にどの程度影響したのかが分かるようなメトリクスを測定したいのですが、全然知見がないので考えたい部分です。

現在進行中なので、具体的にどのような取り組みによってどのように改善ができたのかはまた別の機会でお話できればと思います。

おわりに

まだまだ弊社のフロントエンドの環境は整っているとは言えませんが、熱量の高い仲間とともにLabTechという事業領域に挑戦してくれる方を絶賛募集しております。興味のある方は、ぜひお気軽にオフィスに遊びに来てくださいね！

資金調達10億円！研究×Techサービスのフロントエンドエンジニアを募集！ - 株式会社POLのWeb エンジニアの求人 - Wantedly

もっと知りたい方へ

1. デザインシステムの資料を作る時に参考にしたリンク集 | よりデザイン

日本語の資料も含めると、こちらのページが1番デザインシステムに関する情報がまとまっています。まずデザインシステムを調べようと思っても体系的にまとめられている場所がなかったので、非常にお世話になりました。

2. Nathan Curtis – Medium

上のブログ内でもまっさきに紹介されていますが、デザインシステムを作るためのプロジェクト管理、コンポーネントのテスト観点、ドキュメントの書き方など非常に多角的な観点からデザインシステムについて言及しています。詰まったときに常にヒントが書いてあるので、リファレンス的に用いるのが良いと感じました。

3. UX MILK | クリエイターのためのUXメディア

みんな大好きUX MILKさんで「デザインシステム」と検索すると、たくさん和訳記事が公開されています。私のような英語に苦手意識のある方は、大方の知識をここでインプットして、英語の原著などに当たることをおすすめします。

4. freee ymrl さんのスライド

実際の運用時のつらみや、それらをどうやって乗り越えたのかを細かく解説してくれています。freeeさんのデザインシステムは「Vibes」という名前で、バージョンが上がる度に「バイブスぶち上がったらしいよ」と言われているらしい。