デザインシステム作りへの道のり

以下はChristian BeckさんのThe Path to Design System Maturityを翻訳したものです。日本語として表現が難しいか、文化の差などによって理解し難い一部の内容は意訳するか排除しました。


CarbonLightningClarityPolarisPlasmaBuild。これらはスペースXのロケットの名前か、あるいは企業のデザインシステムの名前か?

今のソフトウェア業界はもうDribbleをみて不安を感じるだけでは済まなくなった。上で並べたデザインシステムを見ていると、それらの半分にも及ばないものさえ作ってないことに恐怖をすら感じる。

しかし一流のプロスポーツ選手やミュージシャンのプレイを見るように、我らのほとんどはそれくらいの能力を持っていないことを認識することも大事だ。だからと言って全てを諦める必要もない。我らはこれらの最高レベルのデザインシステムからインスピレーションを得て、また成功への道のりを理解することができる。

Nathan Crutisは「デザインシステムはプロダクトとして考えるべきだ」と言った。この観点から、始まったばかりのスタートアップから巨大なNYSEに上場された企業に至るまで、システムの成長パスがよく定義されていることがわかる。デザインシステムは必ず巨大なものである必要はなく、そのようなケースは稀でもある。

デザインシステムをプロダクトと例えると自らのデザインシステムをどのように構築すべきかを理解しやすくなる。

デザインシステムが何かを定義するために頑張るより、あなたのシステムの目的、ターゲットユーザー、そしてMVPを定義する。この方があなたが力を入れるべき部分をより選択する決定をより効率的にしてくれる。何より、始めたところで凍りつくことを防いでくれる。


デザインシステムは一般的プロダクトの成熟度を示す3つのステージに例えて考えることができる

1. 効率的なシステム(スタートアップ)

2. 一貫性のあるシステム(スケールアップ)

3. 最適化されたシステム(エンタプライズ)


1. 効率的なシステム(スタートアップ)

ここでいう3つの成熟度はデザインシステムを指しており、プロダクトチームの成熟度ではない。新しいチームでも古いチームでもデザインシステムを新しく作ることがありえる。スタートアップで新しいプロダクトを作っているか、既存チームで初めてのデザインシステムを作っている場合がこのステージに該当する。

内部的なデザイン作業の効率を上げる

ツール:SketchAtomicSubform

何より先に、デザインシステムはデザイナーの作業効率の向上に寄与する必要がある。これは他の全ての要素より大事だ。効率性によってデザイナーは画面の切り出しなどの作業を早く終わらせ、より革新的な機能に集中できる時間をくれる。この効率性の重要度はこれ以降論じる全てに勝る。

VMWareのClarityシステムはデザインチームのためにSketchファイルを提供する。

最初のステップは簡単に効率向上に役立つツールを使うことだ。Sketch、Atomic、そしてSubformはその代表的なものであり、賢い機能を提供する上でデザイナーに十分な自由を与える。Sketchの日単位でのインテグレーションを支援する機能は時間の経過によるシステムの成長をしやすくしてくれる。

デザイナー間の一貫性を作り出す

ツール:Brand.aiCraft Libraryのような共有されたデザインシステム、Material DesignUX Power Toolsのようなデザインシステムフレームワーク

UX Power Toolは一つのソースからの変更の伝播のために重なったシンボルを使う

デザインシステムの初期段階では、一貫性は通常と逆の方向に働くことがある。ガイドラインを決めて実践するより、成長するパターンがガイドラインを作っていく(もちろん、失敗に終わる場合もあるが)。我らデザイナーは一瞬手を止めて、デザインプリンシプルやガイドラインを作成することを好むが、多くの場合そのような時間はプロダクションによって邪魔されがちだ。そんな状況でも、よいUXとプロダクションデザインのため、キープリンシプルや方法論に頼ることはできる。


2. 一貫性のあるシステム(スケールアップ)

おそらくこのフェーズではあなたのプロダクトだけでなく、あなたのチームも成長しているはずだ。今頃にはあなたのプロダクトが何になろとしているかも経験から知っているはずで、自分達の仕事を支えるガイドラインとプリンシプルの作成もできる。このフェーズではデジタルツールを使用するだけではなく、コミュニケーションツールの作成を始める。あなたのチームが複数の地域に散在する規模まで成長する、会社が新しいプロダクトを買収する、もっとデザイナーを採用するなど、様々な理由によって一貫性に対するニーズは非常に大きくなる。

WeWorkのPlasma systemに至るまでの探索 from: https://medium.com/@andrewcouldwell/plasma-design-system-4d63fb6c1afc

理論的根拠を提供する

ツール:スタイルガイド、デザインプリンシプル、パターンライブラリ

このフェーズになると、画面のレイアウトやユーザーフローの作成、また使っているツールにもを慣れているはずだ。あなたのプロダクトがHCIプリンシプルに基づいて注意深くデザインされているなら、今までの作業をベースに、そこに隠れていたプリンシプルを洗い出すことができる。一回たち止まってより良いガイドラインを作ることは自分の作業をより良いものにする方法を探るためにも役立つ。

統合されたブランド

ツール:ブランドガイド、ボイスアンドトーンガイドライン

全てがサービスである今時の世界ではブランドとプロダクトは掛け離すことのできないものだ。ここまでには、リーンに突っ走って来たはずで、プロダクトのブランドを作り出すための内部的リソースの余裕もなかったかもしれない。一貫性の問題を解決する前に、あなたのブランドをプロダクトに融合させる必要がある。

当たり前なことに、Shopifyは素晴らしいボイスアンドトーンのガイドラインを持っている。

この作業を通して、マーケットであなたのプロダクトをどのように見せたいかがデザインシステムに反映される。この作業は次の最適化のレベルに進む前にマーケティングやブランディングなど、他のチームとの共同作業にも役立つ。


3. 最適化されたシステム(エンタプライズ)

やっとここまで来た。最高の境地だ。世の中で最もよく言われているのはこのフェーズのことだ。前のフェーズまでの作業の甲斐もあって、デザインと開発は強く繋がっている。

一つ大事なことは、すべてのチームがこの段階に到達する必要はないとのことだ。

全ては結局あなた自身のゴールとプロダクトの優先順位次第である。このステージでは円熟さと、買収、経験、そしてプロダクトチームのほぼすべての部門に跨る明確なROIが必要となる。

開発の一貫性

ツール:HTMLとSass、JavaScriptまたは他の中間層のフレームワーク

Googleは多数のツールをリリースしているがその中でもコーディングされたシンプルなフレームワークの例はMaterial Design Liteである。これは彼らのデザインシステムに基づいていることを除くとBootstrapと似ている。

Material Design Liteはデザインフレームワークを表現するコードを提供する。

引き継ぎの最適化

ツール:デザインと開発のアセットの同期のためのカスタムシステムとツール、管理戦略、デザインオプス、デザインテクノロジスト

最近、Airbnbは彼らのReact Sketch.appでデザインコミュニティを驚かせた。

これは、成熟度が上がるとコンパイルツールや私の頭では理解できない何かを含めてるシステムをも作れるということだ。 Airbnbは、デザインチームと開発チームの間で明確な透明性と協力関係を示した。

エンタプライズ企業がそうであるように、この段階に達するとプロセスとオーナーシップがとても重要になる。我らのような部外者はAirbnbのデザインシステムで遊んでいられるが、実際にはその位の規模と複雑性を持つシステムはすぐ管理しきれないものになって行く。それでデザインオプス管理戦略が必要となってくる。

このステージはあなたのデザインシステムにかっこいい名前をつけてデザインコミュニティにデビューさせる時期でもある。


サマリー

で、今まで学んだものは何か?簡単にいうと、デザインシステムと言うものの公式的な定義はない。あるのはあなたのプロダクトデザインのワークフローを最適化して行く構造化されたアプローチだけだ。

ソフトウェアプロダクトのように、デザインシステムもそれ自体の複雑性の増加や、デザインチーム以外からの多様なニーズにも応えるため、複数のフェーズに渡って成熟して行く。

デザインシステムを作る作業をいきなり始める前に、なぜそれを作るかをよく考え、ターゲットMVPを作成した方がいい。あなたが解決したい問題を見つけ、最も適したアプローチを取るべきである。

Like what you read? Give Roy S. Kim a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.