デザインシステム のためのコンテクスト作り
デザインシステム という言葉を聞いたことがあると思います。
すでにあなたはお持ちかもしれません。もし持っていなければ、持つことを考えてみてください。
デザインシステム はプロジェクトやクライアント、組織の文脈の中で合理的に定義された他の名称もあります。これらの名称は、業界の外でもしっかりと定義されています。フレームワーク、ソフトウェアデザインガイド、パターンライブラリ、コンポーネントシステム、UIキット、スタイルガイド、デザイントークンなどの名称です。
普遍的で合意された定義はありません。そして、それらの間には、多くのグレーゾーン、オーバーラップ、ギャップがあります。しかし、少なくとも、「 デザインシステム 」という言葉が、最高レベルの包括的な記述を意図しているという前提は広く受け入れられています。
ここでは、 デザインシステム とそれをサポートするドキュメントのためのより完全な構造でギャップを埋める方法を探ってみましょう。
ギャップの解消
よくある典型的なデザインシステムの一般的な階層は次のとおりです：
- 原則
- アクセシビリティ
- UI
• グローバルスタイル
• テンプレート
• コンポーネント
• スタイル
しかし、これだけでは十分ではありません。製品の表面的な部分だけでなく、もっと踏み込んだ部分も必要です。例えば、特定の要素については、次のようなことも定義する必要があります。
- ドキュメントの構造とネスティング
- 適切な親コンテナ要素
- 属性、ロール、マイクロフォーマット
- テキストのウェブスタンダードとアクセシビリティの基準
- 翻訳やローカリゼーションへの配慮
UIデザインだけでは、デザインシステムの基礎にはなりません。実際には、システムのアウトプットとしての役割の方が大きいのです。したがって、システムにはインプットが必要です。それらのインプットは意思決定のためのコンテキストを提供します。
それらを含めるのです。ある決定は、研究によって十分な情報を得ているかもしれません。また、説明の必要のない決定もあるでしょう。また、説明したり擁護したりするのが難しい決定もあるでしょう。しかし、いずれも記録することが重要です。
“すべての製品を見て……そして、すべてに対して1つのデザインシステムを設計します。しかし、なぜそのような決定がなされたのかを調べ始めると、その設計システムでは解決できないローカルな知識が明らかになることがよくあります。” – ルネ・マドセン
一段上のレベルに引き上げる：デザインシステムのコンテクストを表現する
どんなデザインシステムも、次のようなコンテクストのインプットに大きく影響されます：
- 組織の制度的な知識、遺産、文化、信念、偏見（顧客のためにシステムを作成する場合は、システムを作成する人も含む）
- パターンがどのように命名され、どのような問題を解決するのかという洞察力
- クラス名やセレクタの決定方法に関する慣習（大文字、小文字、セパレータ、深さ、特異性など）
- デザインシステムの成功基準
- デザインシステムの決定を支えるユーザーリサーチ、ユーザビリティリサーチ、そしてその結果としてのデータとテーマ
これらはすべて、実際の意思決定に加えて、意思決定の基準を表しています。
デザインシステムのメタファーな例え
では、このコンテキストをどのように捉えればよいのでしょうか。
HTMLでは、すべての文書は <head>で始まります。
head要素は、ドキュメントのメタデータの集合体を表しています。あなたのデザインシステムは、そのコンテキストを記述するために <head> が必要です。
例えば、プロセス、ソースコントロール、ガバナンスは一般的にデザインオプス（運用）の役割に該当しますが、それでも文書化する必要があります。
ここでは、包括的なメタデータと、より完成度の高いデザインシステムのための構造をご紹介します：
<head>
Research & Insights
Principles & Ethics
Privacy & Security
Problem Statement(s)
Methodologies & Process
Definitions
Usage Guides
Other Criteria
Ecosystem
Localization
Performance Budget
Source Control
Governance
Copyright & Licensure
</head>
<body>
Design System
1. Principles
2. Accessibility
3. Platforms & Channel
4. Input
5. UI
5.1. Voice & Tone
5.2. Components and Patterns
5.3. Styles
5.4. Motion
6. Content
7. Localization & Variants
8. Performance Budget
9. Markup
9.1 Source Control
10. Hosting
11. Web View
</body>
まとめ
すべてのデザインシステムには元ネタがあり、反復して進化していきます。変更されたものはすべて、新しい学習の結果です。
<head>は、デザインシステムに関するすべてのメタデータを抽象化するために必要なレイヤーの完璧なメタファーであるように思えます。
UXPinは、世界中の製品チームがアイデアをより早く製品化するためのデザインプロセスツールです。
UXPinの革新的なテクノロジーであるMergeにより、PayPalのような企業はDesignOpsの課題を容易に解決することができます。UXPin Mergeでは、Reactコンポーネントを使ってデザインし、最終製品との完全な一貫性を実現することができます。
