デザインシステムでコンポーネントベースのWebサイトを作成する

[(原文) Create Component-Based Websites with Design Systems](https://www.uxpin.com/studio/design-systems/create-component-based-websites-with-design-systems/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AEWeb%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)

それは必ずしもビジュアルやインタラクティブなトレンドではありませんが、デザインシステムは、それらが支配するすべてのプロパティのルック＆フィールに影響を与えていることは間違いありません。デザインシステムは、今日のウェブ上で見られるトレンドを生み出す原理、ツール、ライブラリ、コードを提供しています。

デザインシステムは単なるトレンドではありません。今後数年で、ウェブ全体のデザインの一貫性が向上することが期待できます。

それは、すべてのウェブサイトが同じように見えるということではなく、それぞれのウェブサイトが、それ自体と、機能性やユーザビリティに対するユーザーの期待との間で、より一貫性を持つようになるということです。

デザインシステムは、大規模チームやリモートチームが共同で作業する際に生じる規模の問題を解決するのに役立ちます。標準化された原則とコンポーネントを全員に提供することで、以下のようなメリットが得られます。

* **市場投入までの時間を短縮**: デザインシステムは、すべてが再利用可能なレゴのようなプロセスを作成し、同じコンポーネントの再構築にかかる時間を最小限に抑えます。
* **プラットフォームや製品間で一貫したUXを実現**: 標準化されたコンポーネントは、よりまとまりのある "ルック＆フィール "を生み出します。
* **バージョン管理の問題が少ない**: 設計システムのコンポーネントを更新すると、変更はすべてのインスタンスに反映されます。デザインシステムは真実の最終記録です。
* **コラボレーションやコミュニケーションが容易になる**: 設計システムは、設計者、PM、エンジニアのための共有された一般的な知識ベースとコンポーネントを作成します。

そのため、調査対象となった[3157人のデザイナーの69％](https://www.uxpin.com/enterprise-ux-design-2017-2018-industry-report%22?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AEWeb%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)が、すでに設計システムを持っていない場合は、現在自社で設計システムを構築していると回答しています。

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

デザインシステムのコツを探り、構築方法を学び、デザインシステムを使って構築されたウェブサイトの例をいくつか紹介しましょう。

## デザインシステムとは具体的にどのようなものなのでしょうか？

まず、定義を整理してみましょう。

* **デザインシステム**: デザイン標準、ドキュメント、原則の完全なセットに加え、それらの標準を達成するためのツールキット（UIパターンとコードコンポーネント）が含まれています。
* **パターンライブラリ**: デザインシステムのサブクラスで、会社全体で使用するデザインパターンのセットです。
* **スタイルガイド**: デザインシステムのもう一つのサブクラスで、この静的なドキュメントではデザインシステム自体について説明しています：製品がどのように見え、どのように感じるか、UIパターンの使用例、正しいタイポグラフィの尺度などです。

ボトムライン: パターンライブラリ（例：Sketchのシンボルとアセットのセット）とスタイルガイドは、はるかに堅牢なデザインシステムの一部に過ぎません。

![image.png](https://studio.uxpincdn.com/studio/wp-content/uploads/2018/03/blog%E2%80%93design-systems.png.webp)

## すべてがどのようにつながるのか

まずは、視野を広く持ち、デザインシステムの考え方を考えてみましょう。

広義的にはは、デザインシステムとは、チームが製品を首尾一貫して構築するための共通の言語、原則、ツールを含む生きた実体である。[ネイサン・カーティス](https://medium.com/eightshapes-llc/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935)が言うように、「デザインシステムはプロジェクトではない。製品にサービスを提供する製品なのです。

[ShopifyのPolaris Design System](https://polaris.shopify.com/)は、その最良の例の一つです。ホームページでは、彼らはすでにすべてのコアセクションを分解しています。

* **製品の理念**: すべての製品の背後にある目的と魂とは何ですか？
* **書かれた内容**: 製品のインターフェイスのコピーはどのように見て、どのように感じるべきでしょうか？
* **視覚的なプロパティ**: 製品の「肌」は、どのような見た目で、どのように感じられるべきでしょうか？
* **コンポーネント**: デバイス間で一貫した製品を構築するために必要なUIパターンとコードコンポーネントは何ですか？

![image.png](https://studio.uxpincdn.com/studio/wp-content/uploads/2018/03/blog-design-systems-examle-shopify-1024x486.png.webp)
ShopifyのPolaris Design System

この場合、Polarisは、原則、記述されたコンテンツ、視覚的なプロパティ、およびコンポーネントからなる完全なデザインシステムです。スタイルガイドは、デザインシステムの使用方法を説明するPolarisウェブサイト上の静的なドキュメントです。パターンライブラリは、Polarisデザインシステムのコンポーネントの一部です。

この違いは微妙ですが、製品開発を改善する上では極めて重要です。スタイルガイドは、ドキュメントのメンテナンスが必要なため、すぐに更新されてしまいます。パターン・ライブラリは、首尾一貫した実装のための指示や原則を欠いています。

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

## デザインシステムの作り方

これらの用語の意味と、それらがどのように機能するかを理解したところで、設計システムを構築する方法を簡単におさらいしましょう。ここでは、50ページの電子書籍[『設計システムの作成 100ポイント・プロセス・チェックリスト』](https://www.uxpin.com/studio/ebooks/create-design-system-guide-checklist/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AEWeb%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)からの抜粋を簡単にご紹介します。

* **UIインベントリを作成**: まず、現在インターフェイスで使用されているすべてのデザインパターンをリストアップして説明し、その中の矛盾点に注意してください。
* **組織の支持を得る**: 発見したことを発表し、共通の設計言語の有用性を全員に説明してください。デザインシステムの[伝導テンプレート](https://www.uxpin.com/evangelizing-design-system-roi-template?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AEWeb%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)で説明したように、冗長な作業で無駄になったデザインとエンジニアリングの時間数を推定し、製品の一貫性がどのようにNPSスコアを向上させることができるかを説明します。
* **デザイン原則の確立**: 実践を成文化しましょう。あなたは今、デザインシステムのスタイルガイドに取り組み始めています。
* **カラーパレットの構築**: UIインベントリを構築する際に、116 種類の異なるグレーの色調があり、それらを統合する必要があることがわかりました。パレットとその命名規則を作成します。
* **タイポグラフィスケールの構築**: 既存のスタイルに合わせてスケールを最適化することもできますし、黄金比やメジャーセカンドを使って調和のとれたスケールを構築しようとすることもできます。縮尺を構築する際には、フォントのサイズだけでなく、重さや線の高さなどのプロパティも設定していることを忘れないでください。
* **アイコンライブラリなどのスタイルを実装**: UIインベントリからどのアイコンがデザインシステムの一部になるかを決定し、[実装を標準化](https://medium.com/@marcintreder/design-system-sprint-6-the-fastest-icons-on-earth-bf91c0a47ef9)します。
* **最初のパターンを作り始める**: これは終わりのない作業です。パターンは常に製品の真実を反映しているか、近い将来の製品の願望的な状態を反映していなければなりません。

## デザインシステムで構築されたウェブサイト

[各社のデザインシステム](http://styleguides.io/examples)を記載したサイトがたくさんあります。

しかし、デザインシステムで構築されたウェブサイトは、どのように見え、どのように感じられるでしょうか？コードの肥大化が少ないため、より論理的で一貫性があり、より良いパフォーマンスを発揮します。

ここでは、いくつかの最高のデザインシステムの原則とツールキットを使用して構築されたウェブサイトをいくつか紹介します。

[GE Digital](https://www.ge.com/digital/)
![image.png](https://studio.uxpincdn.com/studio/wp-content/uploads/2018/03/blog-ge-1024x526.png.webp)
[Predix](https://www.predix-ui.com/#/gallery)の設計システムに基づいて構築されています。

[Shopify](http://www.shopify.com/)
![image.png](https://studio.uxpincdn.com/studio/wp-content/uploads/2018/03/blog-shopify-1024x526.png.webp)
[Polaris design system](https://polaris.shopify.com/)の設計システムに基づいて構築されています。

[Atlassian](https://www.atlassian.com/)
![imag.png](https://studio.uxpincdn.com/studio/wp-content/uploads/2018/03/blog-atlassian-1024x526.png.webp)
[Atlassian Design Guidelines](https://atlassian.design/)の設計システムに基づいて構築されています。

[MailChimp](https://mailchimp.com/)
![image.png](https://studio.uxpincdn.com/studio/wp-content/uploads/2018/03/blog-mailchimp-1024x518.png.webp)
[MailChimp Design System](http://ux.mailchimp.com/patterns/)の設計システムに基づいて構築されています。

[Github](http://github.com/)
![image.png](https://studio.uxpincdn.com/studio/wp-content/uploads/2018/03/blog-github-1024x526.png.webp)
[Github Design System](https://github.com/styleguide)の設計システムに基づいて構築されています。

これは、当社の長編電子書籍「Webデザイントレンドの概要」からの抜粋です。電子書籍の全文は[こちらから](https://www.uxpin.com/studio/ebooks/web-design-trends-2018/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AEWeb%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)無料で読むことができます。デザインシステムについてもっと知りたい方は、[ここ](https://www.uxpin.com/design-systems-virtual-summit-2018?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AEWeb%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)をクリックしてUXpinのデザインシステムバーチャルサミットの録画をご覧ください。UXPinのデザインシステムの機能を無料でお試しください。

**[UXPin](https://www.uxpin.com/studio/prototyping-jp/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AEWeb%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)は、世界中のプロダクトチームがアイデアをより早く製品に変えることを支援するデザインプロセスツールです。**

**UXPin の革新的なテクノロジーである Merge を使用すると、PayPal のような企業は DesignOps の課題を簡単に解決することができます。[UXPin Merge](https://www.uxpin.com/merge?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AEWeb%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)は、最終製品との完全な一貫性を達成するために React コンポーネントを使用してデザインすることを可能にします。**

**本記事は2018/3/20投稿の英語版を翻訳したものです。**