小さく始める Design System ~メドレー TechLunch~

こんにちは、開発本部の舘野です。

先日、メドレーで定期開催している社内勉強会「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 で発表したスライドはこちら。

今回 Design System を段階的に導入しているのは、医療介護の求人サイト「ジョブメドレー」です。

ジョブメドレーのインターフェースが今後より一層色々な形でユーザに使われる場面が増えていくことが想定される中で、プロダクトの UI の一貫性や生産性を担保し続けていくためには、スタイルガイドを作るだけでなく Design System によってより包括的にプロダクトの UI 開発に対する取り組み方を変える必要があるのではと考えていました。

とはいえ最初からプロダクトの UI 全てを Design System に置き換えるというのは変化が大き過ぎるし、Design System がうまく機能せずに失敗する場合も考慮しておく必要があったので、導入がうまくいかないければすぐにやめられるように以下の点を導入前に決めていました。

• 最初から一気に色々やらない
• まずは一部だけ導入してみる
• 上手くいく部分といかない部分を検証する
• Design System の改善と段階導入を繰り返す

Design System はプロダクトに UI のエコシステムを提供するプロダクトなので、一定期間で作って終わりではなく継続して改善を繰り返していくという点では、このような進め方が適切と考えました。

実際のところ、現在のジョブメドレーでは一部分だけジョブメドレーの Design System として npm 化したモジュールから提供するようにしています。

npm 化して Design System から提供するようにしたのは、以下の 3 つのみです。

• jmds-tools

  • sass mixin や function を提供するユーティリティモジュール

• jmds-tokens

  • design tokens（デザイン上の値を信頼できる唯一の情報源として 1 つの場所で定義されるもの）

• jmds-flex

  • 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」などのプロダクトを提供しています。これらのサービスの拡大を受けて、その成長を支えるエンジニア・デザイナーを募集しています。

ちょっと興味があるという方も、ぜひお気軽にご連絡ください！

https://www.medley.jp/recruit/creative.html