デザイン組織とデザインのスケール

Michi Kanda

6 min readDec 6, 2017

こんにちは！
オンラインプログラミング学習サービスを運営・開発している「Progate」という企業で、Lead UX Designerを務めている神田です😄

社内では、映画とクラフトビールとダンディな髭好きで知られています🎅🏻

Progate Advent Calendar 2017 4日目の記事を担当させて頂きます！✍

よろしくお願いします！

テーマ: 「デザイン組織とデザインのスケール」

今回は「デザイン組織とデザインのスケール」をテーマに、Progateのデザイン組織に関する話を織り交ぜつつ「デザインシステム」について書いていきたいと思います。

背景

2014年の創業初期からサービスのUI/UX、Visual Design（時にはフロントエンドも）をほぼ一人で担ってきたのですが、嬉しいことに最近は（チャラいけど笑）優秀なデザイナーがジョインしてくれたり、デザイナーインターン生もしっかり活躍してくれていて、やっとデザイン組織を構成できるフェーズになってきました😊

とは言え、まだデザイナーは社員2名+インターン生1名の3名のみで、それぞれが別々のプロジェクト/プラットフォームチームに所属して動いていることもあって、まだまだチームというよりは「グループ」感が否めないなぁと感じています。

複数人でデザインできるようになったことで、サービスの拡大と多角化にも俊敏に対応できるようにはなってきましたが、共通のデザイン言語がまだ形成されていないため、汎用性の低い個別の目的に最適化されたデザインが生まれやすく、「チームとサービスはスケールするけど、デザインはスケールできない」という課題が表面化してきました。

こうした一環したユーザー体験を提供する上での課題は、自社サービスを開発している企業のほとんどが直面する課題なのではないかなと思い、その有効な解決策の一つとして「デザインシステム」を紹介するにいたりました👆

社内外の方々にとって、改めて自分たちのデザインを全体から見つめ直し、チーム、サービスとともにデザインをスケールしていくためのヒントに繋がれば嬉しいです。

それではデザインシステムについてみていきましょう😺！

デザインシステムとは？

デザインシステムの一例。左がSalesforceのLightening Design System、右がBypass。

（やっと本題のデザインシステムついてです。笑）

デザインシステムとは、一貫性のあるデザインとスケーラブルなUIを実現するための仕組みや概念を指します。

デザインシステムを導入することで、

チームが最適な意思決定を素早く行えるようになったり、
蓄積しやすいデザインの負債を回収しやすくなったり、
一貫性のある優れたユーザー体験を提供できる

といったメリットがあります。

デザインシステムの多くはGoogleの「Material Design」やSalesforceの「Lightening Design System」などに見られるように、スタイルガイドやUIコンポーネント、UXのベストプラクティスなどがまとめられ、コンポーネントライブラリとして公開されています。

コンポーネントライブラリを使っているだけだと中々気づきにくいかもしれませんが、デザインシステムには大きく以下の特徴があります。

スタンダード（デザイン原則、ビジュアル言語、コード規約など）が存在する
再利用可能なUIコンポーネントで構成されている
生きたシステムである（ニーズに応じて継続してメンテナンスや改善がおこなわれる）

デザインシステムは、スタンダードによってデザインの目的や共通言語が明文化されていて、それをもとに設計された再利用性の高いコンポーネントで構成されています。そのため、従来のスタイルガイドのような指示やルールのみを表記したものと違って、WhyとWhatの関係性が明確なスケーラビリティの高いものであると言えると思います。

またデザインシステムを突き詰めると、そこには「組織としてどんな価値を提供したいか」といった考えがデザイン原則という形で反映されています。根底に共通の思考基盤があるので、その場しのぎのデザインに終わらず、ホリスティックなデザインを可能にします。