Medley Developer Blog

株式会社メドレーのエンジニア・デザイナーによるブログです

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

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

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

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

DLS(デザイン言語システム)とは

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

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

DLSが必要な理由

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

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

※参考

medium.com

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

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

f:id:dev-medley:20170725121754p:plain
CLINICSのDLSの一部

 

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

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

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

f:id:dev-medley:20170725122157j:plain
エンジニア陣がUIについて熱い議論を交わしている様子

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

speakerdeck.com

まとめ

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

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

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

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

 

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

www.medley.jp

www.wantedly.com