こんにちは、開発本部の舘野です。
先日、メドレーで定期開催している社内勉強会「TechLunch」にて、Design Systemについて発表しました。医療介護の求人サイト「ジョブメドレー」において、Design Systemを「小さく始める」手法で導入を進めているので、そのプロセスについて紹介させていただこうと思います。
Design Systemとは何か
Design Systemとは、SalesforceのLightning Design SystemやIBMのCarbon Design Systemなどが代表的な例として挙げられると思いますが、平たく言ってしまうとプロダクト独自のBootstrapとなるものです。
UI開発の領域では、これまでスタイルガイドを作ることでデザイナーとエンジニア間の共通言語とし、プロダクトのUIの一貫性を保つように努めることが一般的かと思いますが、Design Systemではスタイルガイドだけでなくデザインの原則やUIコンポーネントのCSSやJSなども含めてプロダクトのインターフェースに関わる全てを、1つのプロダクトとする考え方です。
Design Systemはスタイルガイドと明確にどこが違うのかについて言及しているウェブ上の記事の多くは、Nathan Curtis氏の「A Design System isn’t a Project. It’s a Product, Serving Products.」という言葉を引用して、その差異を示しています。
スタイルガイドがプロダクトにおけるプロジェクト以上の存在ではないのに対して、Design Systemはプロダクトに対してUIのエコシステムを提供するプロダクトである、ということがDesign Systemの基幹となる考え方だと思います。
ジョブメドレーにおけるDesign System
TechLunchで発表したスライドはこちら。 speakerdeck.com
今回Design Systemを段階的に導入しているのは、医療介護の求人サイト「ジョブメドレー」です。
ジョブメドレーのインターフェースが今後より一層色々な形でユーザに使われる場面が増えていくことが想定される中で、プロダクトのUIの一貫性や生産性を担保し続けていくためには、スタイルガイドを作るだけでなくDesign Systemによってより包括的にプロダクトのUI開発に対する取り組み方を変える必要があるのではと考えていました。
とはいえ最初からプロダクトのUI全てをDesign Systemに置き換えるというのは変化が大き過ぎるし、Design Systemがうまく機能せずに失敗する場合も考慮しておく必要があったので、導入がうまくいかないければすぐにやめられるように以下の点を導入前に決めていました。
- 最初から一気に色々やらない
- まずは一部だけ導入してみる
- 上手くいく部分といかない部分を検証する
- Design Systemの改善と段階導入を繰り返す
Design SystemはプロダクトにUIのエコシステムを提供するプロダクトなので、一定期間で作って終わりではなく継続して改善を繰り返していくという点では、このような進め方が適切と考えました。
実際のところ、現在のジョブメドレーでは一部分だけジョブメドレーのDesign Systemとしてnpm化したモジュールから提供するようにしています。
npm化してDesign Systemから提供するようにしたのは、以下の3つのみです。
-
- sass mixinやfunctionを提供するユーティリティモジュール
-
- design tokens（デザイン上の値を信頼できる唯一の情報源として1つの場所で定義されるもの）
-
- flexboxユーティリティ
プロダクトのUIとして見ると、flexboxのユーティリティクラスをDesign systemから提供するようになっただけです。
ただ、今は全体のごく一部がDesign Systemから提供されていますが、Design Systemに移行できるUIコンポーネントを選定して段階的にnpm化をしていくことで、プロダクトのUIコンポーネントの多くがDesign Systemから提供されている状態にすることが可能だと思います。
単純にnpm化することが目的ではなく、npm化したDesign Systemをプロダクトチームでメンテナンスしていくことで、より一貫性のあるUIをジョブメドレーのプロダクトに提供していくことが目的です。
まとめ
今回は、TechLunchで発表したジョブメドレーにおけるDesign Systemの取り組みについて紹介させていただきました。
今回紹介したDesign Systemが今後デザイナー、エンジニア、プロダクトマネージャーと協力しながら、ジョブメドレーのプロダクトのUIを支える強固な土台へと成長させられるように取り組んでいこうと思います。
お知らせ
メドレーでは、医療介護の求人サイト「ジョブメドレー」の他にも、医師たちがつくるオンライン医療事典「MEDLEY」、口コミで探せる介護施設の検索サイト「介護のほんね」、オンライン診療アプリ「CLINICS」などのプロダクトを提供しています。これらのサービスの拡大を受けて、その成長を支えるエンジニア・デザイナーを募集しています。
ちょっと興味があるという方も、ぜひお気軽にご連絡ください！