デザイン言語システムを入れたらコミュニケーションコストがぐっと下がった話〜メドレー TechLunch〜

ビールが美味しい季節ですね！

最近飲みすぎて嫁に叱られて、飲み会自粛中のデザイナー・マエダです。

メドレーでは TechLunch という社内勉強会を実施しているのですが、デザインについて私も発表する機会をいただきましたので、その内容を紹介させていただきます。テーマは「DLS の導入について」です。発表資料は記事の最後をご覧ください。

DLS（デザイン言語システム）とは

DLS とは DesignLanguageSystem の略で、すごい単純にいえばデザインガイドラインみたいにUI に一貫性をもたせるため、配色やレイアウト、タイポグラフィやマージンなどのルールを策定するものです。

私が主に担当しているオンライン診療アプリ「CLINICS」は、iOS、Android、Web と 3 つのプラットフォームで運用しているのですが、入社した当初はプラットフォーム毎に違った UI やルールで開発しており、サービスとして一貫性のあるサービス体験を提供できるとは言えない状況でした。また新たに機能を追加する際、それぞれ違なるデザインをしなければならず、デザイン作業においても負荷がかかっていました。

DLS が必要な理由

CLINICS ではプラットフォームごとに異なる UI を提供していたため、一貫したサービス品質をユーザーに提供できていないこと、開発者ごとに UI に対して認識にズレが生じていたことが課題でした。それに伴い開発速度も決して速いとは言えず、どうにか一定の品質を担保しつつ開発スピードも改善できないかと悩んでいたところ、Airbnb の開発者ブログで Airbnb Design System という記事を見かけました。

これまでのデザインガイドラインは単にカラーやマージンの定義を取り決めるだけだったのですが、Airbnb ではデザイン言語として定義し、他の言語と同じようにチームと共有し、エンジニア・デザイナー同士で理解できる設計を作り上げているといった内容でした。

※参考

私がデザイナーとしてサービスデザインに携わる重要な役割のひとつとして、単にデザインをするだけでなくデザインを通して UI 設計の制約をつくり、継続的に運用しやすいプロダクトに仕上げることがあると思っています。

DLS を起点として、各プラットフォームの開発者が共通の認識でシステム開発が行えれば、これまで以上にスピーディが開発が行え、一貫性のある体験をユーザーに提供できるプロダクトにできるはずだと考え、CLINICS 独自の DLS を開発することにしました。

CLINICS の DLS の一部

DLS を導入してどうなったか

CLINICS では、Android、iOS、web で担当するエンジニアが異なるのですが、DLS を設計しシステムの詳細を共有することで、UI に対しての共通認識が生まれ、一貫した品質を担保できるようになりました。さらにこれまでエンジニアだけでデザインを考えて悩んでいた時間を、コンポーネント設計で組み立てたデザインを DLS で定義したことで、UI に悩むことなく機能ロジックに重点を置いた開発に専念できるようになったのではないかと思います。

デザイン言語でサービス設計の基礎を築けたことで、開発だけに追われていた状況から、より良いサービスを作るためにはどんな UX をユーザーに提供すべきかという声がエンジニアからも頻繁に声が上がりはじめたことも良かった点です。

エンジニア陣が UI について熱い議論を交わしている様子

TechLunch では、こうした内容について実際に作ったコンポーネント設計なども見せながらお話しました。発表資料はこちら。

まとめ

DLS 導入以前は、エンジニアが開発に追われていたということもあり、プラットフォーム毎に議論ができていなかったエンジニアがお互いの担当プラットフォームを意識したコミュニケーションがとれるようになったことは予想外に良かった点です（別に仲が悪かったとかそういうことではなく w）。

さらに DLS で UI の基盤をつくったことで、デザイナーが手を動かさずともコンポーネントの組み合わせを話し合うだけで、エンジニア完結で一貫した品質で機能実装できるようになりました。これにより私も次の施策やプロジェクトに専念できるようになり、効率的に仕事ができるようになりました。

まだデザインルールに一貫性がないプロジェクトを担当しているデザイナーやエンジニアは、ぜひ DLS の導入を検討してみてはいかがでしょうか。 単にデザイン品質だけでなく、チームコミュニケーションも改善されるとおもいます。

より詳しく話を聞きたいかたは、気軽に「話を聞きに行きたい」をクリックしてみてください。ビールを飲みながらデザイン談義をしましょう！（嫁に怒られない程度に w）

メドレー開発本部について、もっと詳しく知りたい方はこちらからどうぞ。