📘️ Book Club：テクノロジーの世界を席巻し、進化を続けるデザインシステム。そのメリットと簡単な作成方法。

私たちデザイナーのほとんどはデザインシステムの意味を知っていますが、実装が難しいと感じる人もいれば、デザインシステムはコンポーネントのライブラリであるという人もいれば、スタイルガイドやパターンライブラリと混同する人もいます。 

頭に置いておきたいことは、デザインシステムの作成でもっとも難しいのは、作りはじめることです。デザインシステムはあなたのペットのように考えるべきです。つねに成長を続けていくことが重要となります。

デザインシステムとは？

このシステムはデザインの概念、原則などをまとめたドキュメント、それらを具体的なデザインに落とし込むためのパターンライブラリ、ガイドラインテキスト、スタイルガイドなどの通常のドキュメントだけでなく、一般的なコンポーネントの再利用可能なコードやその他の時間節約のデザインアセット資産などのより技術的な支援も含まれいます。

簡単に説明すると、デザインシステムは「プロダクトの全体的なデザインを定義する」ために必要な主要な標準化されたドキュメントのマスターコレクションです。

ここで注意していただきたいのは、パターンライブラリ、コンポーネント、またコードだけでは、デザインシステムとして完成したとは言えないということです。デザインシステムには、スタイルガイドや、トーンオブボイスなどといった規則も含まれているべきです。

多くの場合、UIコンポーネントのライブラリはデザインシステムの中核と見なされます。デザインシステムを制作する場合スケーラブルで柔軟性があり、安定していますが、完全に保守可能なソースを構築することが大切です。

そして…

デザインシステムの真の美しさは、これらの領域のすべてのコンポーネントがすでに最適化およびコーディングされていることです。 

デザインシステム構成要素

画像：uxpin

デザインシステム、パターンライブラリ、またスタイルガイドという用語は同じ意味で使用されることがよくあります。3つの概念は関連していますが、まったく同じというではありません。

まずは定義を明らかにしてして、コンセプトがどのように関連しているか、そしてそれらを使用してより良いプロダクトを作成する方法を学んでいきましょう。

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

→ デザインシステム
デザインの基準やドキュメント、原則に加えて、基準を達成するためのUIパターンやコンポーネントなどのツールキットをすべて備えたものです。

→ パターンライブラリ
パターンライブラリはFigmaやSketchのシンボルとアセットのセットなどのことで、デザインシステムのサブクラスで、これは、全体で使用するためのデザインパターンのセットとなります。

→ スタイルガイド
デザインシステムのもう1つのサブクラスであるこのドキュメントは、デザインシステム自体について説明しています。プロダクトの外観とフィーリング、UIパターンの使用例、正しい活版印刷のスケールなどの全体像を指します。スタイルガイドは、デザインシステムの一部にすぎません。

デザインシステムのメリット

デザインシステムを会社に組み込むと、さまざまなメリットがもたらされます。

→ 時間の短縮ができる
デザイン要素を均質化されたコンポーネントに分割することにより、デザインシステムはプロセス全体をより効率的にします。計画、デザイン、テスト、コーディングはすべて合理化され、無駄な時間を削減します。

→ UXと顧客満足度の向上
標準化されたコンポーネントによって、より一貫したルック＆フィールが生まれます。またデザイン・システムを使うことによって、すべてのプロダクトが顧客が好むUX要素のみを使用することを保証できます。

→ より良い内部コミュニケーション
デザイナー、プロダクトマネージャー、エンジニアの間で一般的なベースとコンポーネントを共有できます。標準化されたドキュメントとして、デザインシステムは誤解の量を最小限に抑えます。

→ すべての製品にわたる一貫性
すべてのプロダクト、アプリ、サイトに一定レベルの卓越性を持たせることができます。同一のコンポーネントを使用することにより、すべてのプロダクトに一貫した品質と使い慣れた使いやすさを提供します。

→ バージョン管理の問題が減少
異なるプロダクトで同じバグを更新すると、時間がかかることは言うまでもなく、煩わしいものになる可能性があります。デザインシステムでは、一度更新すると、すべてのオカレンスにデータが入力されます。

💡オカレンスとは本来のあるべき姿からはずれた行為や事態の発生を意味します。 

デザインシステムは、すでにそれらを実装している企業にとって明らかな利点であり、数年以内にそれらが標準になっていくと思われます。

スタイルガイドやルールガイドラインなどのテキストドキュメントは、正確にコード化されたコンポーネントではありません。これらのドキュメントを含めると、デザイナーが抱える可能性のあるすべての障害をカバーする包括的なリファレンスガイドが作成されます。

では、どのようにしてデザインシステムをデザインし、その利点を活用できるでしょうか？簡単なステップでその方法をご紹介いたします。

デザインシステムの作成は、大規模な作業である必要はありません。複雑さや時間の浪費を理由に、先延ばしにするのは避けましょう。今から取り組みましょう。

Step1：既存のコンポーネントを監査

→ UIインベントリを作成する
最初に、現在インターフェイスで使用されているすべてのデザインパターンをリストアップしましょう。

複数によるプロジェクトの場合、チームを編成し、プロダクトで利用しているUIコンポーネントのスクリーンショットを集めましょう。ナビゲーション、フッター、ヘルプページやツール、アプリなど　プロダクトのすべてのプロパティを確認してください。プロダクトのデザインコンポーネントをすべて集めて、Miroや、Googleスライドなどでまとめてチームで共有できるようにするのも大切なプロセスです。

この作業は、UIコンポーネントを細分化することを目的としています。細分化されたコンポーネントを集めると、多くのデザインの矛盾が発見されることでしょう。どれだけ多くの異なるボタンスタイルや文字テキストサイズが実装されていることに’驚かされることでしょう。

Step2：他のデザインシステム、またツールの研究

すでに素晴らしいデザインシステムがいくつも存在します。それらをガイドとして使用しましょう。これらの優れたデザインシステムからベストプラクティスを取り出し、コンテンツをどのように整理して表示するかを確認て見てください。

→ IBM
→ Atlassian
→ Ant Design
→ Shopify
→ Bootstrap

またデザインシステムツールを決めることも大切です。
バージョン管理、ブランディングのカスタマイズなどの機能も備えていて、既存のワークフローに統合できるツールを見つけることが大切です。

uxtools.coによって作成されたツールで、さまざまなデザインシステムツールとその機能を比較できます。一般的に使用されているFigma、Sketch、 XDの他にもInvision DSM、Lingo、Zeroheightなどのさまざまなデザイン・システム・ツールを試して、ニーズに最適なツールを決定できるようにしましょう。 

Step3：コンポーネントを一覧表示

他のデザインシステムを調べた後、必要なパターンとコンポーネントをリストアップしましょう。これにより、レビューが必要なものの概要がわかります。

デザインシステムの計画、構築、および拡張に役立つオープンソースのチェックリストがあるので参考にして見てください。

Design System Checklist

こちらのチェックリストに基づいて制作されたFigmaのファイルもあります。
https://www.figma.com/community/file/875222888436956377/Design-System-Checklist

Step4：タイムラインを計画

次に、Step3に基づいて、タイムラインを作成しましょう。

これにより、クライアントとデザインシステムに関係するすべての人が進捗状況を常に理解できます。またリソースの割り当てを簡単にすることができます。ここでのポイントは最初にタイポグラフィ、配色カラー、レイアウトなどのパターンは最初に決めることです。これらは他のコンポーネントの基礎となる基礎を築くためです。

Step5：コンポーネントを調査、シンボルを作成

まずはベースとなるものを定義し、プロダクトの進化に合わせて他の部分も追加していきましょう。

→ デザインの原則を確立する
包括的なデザインシステムを作成するには、最初にデザインの原則を確立することが大切になります。最初のステップでは、基本レベルの要素を定義付けしましょう。タイポグラフィ、配色カラー、レイアウト（グリッド、スペース）などのデザイン要素は、ユーザーインターフェースの基本的な構成要素です。

→ カラーパレットを作成する
パレットを作成し、その命名規則を決めましょう。
私がある企業のデザインシステムの制作に携わった際に、ニュートラルカラーと呼ばれる黒、白、グレーといった色みの無いグレーが、100種類以上存在することに気が付きました。これらも全て統一されるべきです。

→ タイポグラフィのスケールを決める
既存のスタイルに合わせてスケールを最適化することもできますし、黄金比やメジャーセカンド（８：９）を使用して調和のとれたスケールを構築しても良いでしょう。スケールを決めるときは、フォントサイズだけでなく、太さや行間隔などのプロパティも設定することを忘れないでください。

行間隔：行間隔については、テキストを配置するときにグリッドレイアウトの4ピクセルの基本単位を使用することをお勧めします。 垂直リズムを設定するときは、ベースラインからテキストの各行の間の距離を測定します。

→ アイコンライブラリなどのスタイルを実装する
UIインベントリにあるどのアイコンをデザインシステムに含めるべきかを決め、実装を標準化します。

→ 最初のパターンを構築し始める
これは決して終わらないタスクです。パターンは、常に実際の製品を正しく反映しているか、近い将来の製品のあるべき姿を反映するべきです。

→ コンポーネントを定義しよう
コンポーネントとは、ユーザーインターフェースの機能的な部分を指します。コンポーネントは、デザイン要素で作成され、さまざまな方法で組み合わせ、構成されています。

Step7：デザインシステムを実装

グローバル・エレメンツのコンポーネント

→ ボタン
→ ピル
→ タブ
→ 入力フォーム
→ テーブル
→ ツールチップ
→ モーダル
→ ダイアログ

各コンポーネントの複数ステートの追加を忘れないようにしましょう。

ステートとは？
ステートとは、ある要素が、状況に応じてとり得るさまざまな形態のことです。ボタンはUIの中で最もインタラクティビティの高い要素のひとつであり、いくつかのステートを持つことが普通です。

デフォルト: 操作は行われていないが、操作可能な状態のボタンの外観。
ホバー: マウスカーソルがボタンの上に置かれた状態を表す。
（デスクトップ向けのデザインに特有のステートで、モバイルデバイスでは通常サポートされていません。）
フォーカス: アクセシビリティにとって重要なステートです。このステートに注意を払わないスタイルが多く見られますが、タブを使ってウェブサイトをナビゲートするユーザーにとって、ボタンを強調表示するには欠かせない要素です。
無効: ボタンが操作できないことを示すステート。

これらの要素が定義されデザインし終わったら、それらを組み合わせてテンプレートを作成しましょう。

A：バックグラウンド・キャンバスの背景色
B：デフォルトのフォアグラウンド・プライマリテキストの色
C：二次テキストの色
D：ブランドの背景・プライマリボタンの背景色
E：ブランドのフォアグラウンド・リンクテキストの色

→ スタイルガイドを作成しよう

デザインシステムを作成するときは、デザイン要素、コンポーネント、テンプレート、およびデザインパターンについての考え方や具体サンプル例を、文書化することが不可欠です。

このスタイルガイドには、指針となる基本原則やコードスニペットも含めることができます。

💡コードスニペットは、右クリック メニュー (コンテキスト メニュー) コマンドまたはホット キーの組み合わせを使用してコード ファイルに挿入できる、再利用可能なコードの小さなブロックです。

→ スタイルガイドに含めたい事項

→ 導入ガイドライン
→ Dos & Don’ts
→ コードスニペット

まとめ

デザインシステムは、プロダクトやチームに合わせて適応し、進化していくべきです。デザインシステムはあなたのペットのように考えるべきです。つねに成長を続けていくことが重要となります。

［参考資料］

A comprehensive guide to design systems | Inside Design Blog

Starting a design system in a start-up

Design Systems vs. Pattern Libraries vs. Style Guides - What's the Difference?

Create Component-Based Websites with Design Systems

私も、色々勉強中なので、皆さまの、ご意見・ご感想をお聞かせください。お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクトデザイナーとして働いています。 主にデジタル・プロダクトの制作に携わっています。