デザインシステムの定義と作成方法、導入事例

デザインシステムは、ビジュアルやインタラクションだけに関するトレンドではありません。しかし、間違いなくルック＆フィールに影響を与えています。なぜなら、Webにおけるトレンドを生み出すデザイン原則やツール、ライブラリー、コードを提供しているからです。

デザインシステムは一過性のトレンドを超えて、2018年以降も続くベストプラクティスになりつつあり、将来的にはWeb全体でデザインの一貫性が向上すると期待できるでしょう。

これが何を意味をするかと言うと、すべてのWebサイトが同じ見た目になるということではなく、それぞれのWebサイトにおいて一貫性が保たれ、ユーザーが期待する機能性やユーザビリティを提供できるようになるということを意味します。　

デザインシステムは、大規模かつリモートのチームが協力する際に生じるスケールの問題を解決するのに役立ちます。また、すべての人に標準化された原則とコンポーネントを提供することで、次のような利点をもたらします。

• 市場に投入されるまでの時間が短縮される：デザインシステムは、レゴのようにすべてを再利用可能にし、同じコンポーネントを再構築する時間を最小限に抑えます。
• プラットフォームや製品をまたいでもUXが一貫する：標準化されたコンポーネントによって、より一貫したルック＆フィールが生まれます。
• バージョン管理の問題が減る：デザインシステムでコンポーネントを更新すると、その変更はすべてのオブジェクトに反映されます。デザインシステムはもっとも正しい情報源です。
• 協力とコミュニケーションが簡単になる：デザインシステムによって、デザイナー、プロダクトマネージャー、エンジニアの間で一般的なベースとコンポーネントを共有できます。

このため、3,157人のデザイナーのうち69％が、デザインシステムかパターンライブラリが既にある、または作成中だと答えています。

以前はデザインシステムを構築できるリソースを持っているのは大企業だけでしたが、新しいツールやプロセスによって、どのような規模の企業にとっても実現可能なものになりました。中小企業や代理店であってもUXPinのデザインシステムプラットフォームを利用しているのを見たことがあります。

それでは、デザインシステムの仕組みを探り、デザインシステムを構築する方法を学びましょう。デザインシステムを使って構築されたWebサイトのいくつかの例も紹介します。

デザインシステムとは

まずは定義をはっきりさせましょう。

• デザインシステム：デザインの基準やドキュメント、原則に加えて、基準を達成するためのUIパターンやコンポーネントなどのツールキットをすべて備えたもの。
• パターンライブラリ：デザインシステムのサブクラスで、企業全体で使用するデザインパターンの集まり。
• スタイルガイド：デザインシステムの別のサブクラスで、静的なドキュメントにデザインシステム自体を説明したもの。たとえば、製品の見た目や雰囲気、UIパターンの使用例、正しいタイポグラフィの大きさなどを記載する。

つまり、パターンライブラリ（たとえばSketchのシンボルやアセット）やスタイルガイドは、より強固なデザインシステムの一部に過ぎません。

デザインシステムはすべてのコンポーネントを繋げる

まずは視野を広げて、デザインシステムの理念について考えてください。

もっとも広くとらえれば、デザインシステムとは、チームが製品を一貫して構築するための、共通する言語や原則、ツールを持つ流動的な存在です。Nathan Curtis氏が述べているように、「デザインシステムはプロジェクトではなく、製品のための製品」なのです。

ShopifyのPolarisデザインシステムはその最善例の１つです。Shopifyはすでにコアセクションのすべてをホームページで公開しています。

• 製品の原則：すべての製品の背後にある目的と理念は何か？
• 記述内容：製品のインターフェイスのコピーはどのような見た目と雰囲気になるべきか？
• 視覚的特性：製品の外観はどうあるべきか？
• コンポーネント：デバイスをまたいでも一貫性がある製品を構築するために必要なUIパターンとコードのコンポーネントは何か？

Polarisは、原則や記述内容、視覚的特性、コンポーネントを完全に備えたデザインシステムです。スタイルガイドはデザインシステムの使い方を説明する、PolarisのWebサイトにある静的なドキュメントでしかありません。パターンライブラリはPolarisデザインシステムのコンポーネントの一部です。

これらの違いは微妙ですが、製品開発の改善において間違いなく重要になります。ドキュメントにはメンテナンスが欠かせないので、スタイルガイドは頻繁に更新されます。一方で、パターンライブラリには一貫した実装のための指令や原則がありません。

デザインシステムはすべてを結びつけます。

デザインシステムの作成方法

３つの用語の意味と、それらがどのように連携するのかがわかったところで、デザインシステムを作成する方法を簡単に見てみましょう。ここでは、50ページの電子書籍『Creating a Design System: The 100-Point Process Checklist』から抜粋します。

• UIインベントリを作成する：最初に、現在インターフェイスで使用されているすべてのデザインパターンをリストアップし、見つかった矛盾をメモしましょう。
• 組織からのサポートを受ける：すべての人に見つけた矛盾を示し、共通のデザイン言語を持つ有用性を説明しましょう。デザインシステムの啓蒙に関する記事で説明したように、冗長な作業に費やされているデザインや開発の時間と、製品の一貫性がどれほどNPSスコアを向上させるのかを測定してください。
• デザインの原則を確立する：実践内容を修正しましょう。ここからデザインシステムのスタイルガイドに取り掛かり始めます。
• カラーパレットを作成する：UIインベントリを構築する際、私たちは統一するべき116種類の異なるグレーの陰影があると気づきました。パレットを作成し、その命名規則を決めましょう。
• タイポグラフィのスケールを決める：既存のスタイルに合わせてスケールを最適化することもできますし、黄金比やメジャーセカンド（８：９）を使用して調和のとれたスケールを構築しても良いでしょう。スケールを決めるときは、フォントサイズだけでなく、太さや行の高さなどのプロパティも設定することを忘れないでください。
• アイコンライブラリなどのスタイルを実装する：UIインベントリにあるどのアイコンをデザインシステムに含めるべきかを決め、実装を標準化します。
• 最初のパターンを構築し始める：これは決して終わらないタスクです。パターンは、常に実際の製品を正しく反映しているか、近い将来の製品のあるべき姿を反映するべきです。

デザインシステムを基に構築されたWebサイト

自社のデザインシステムを紹介しているWebサイトはたくさんあります。

では、デザインシステムを基に構築されたWebサイトはどのような見た目や雰囲気なのでしょうか？　このようなWebサイトは、論理的で一貫性があり、コードの長文化が少ないためパフォーマンスが向上します。

以下に示したのは、もっとも優れたデザインシステムの原則とツールキットで構築されたWebサイトです。

GEデジタル

Shopify

Atlassian

MailChimp

Github

以上の内容は、Webデザインのトレンドの概要を記した電子書籍からの抜粋です。完全版の電子書籍はこちらで無料で読むことができます。

デザインシステムについてさらに学びたい方は、UXPin's Design Systems Virtual Summitの録音をご覧ください。また、UXPinのデザインシステムの機能を無料で試してみましょう。