Zenn
🦁

デザインシステムのコンテキスト作成

2021/03/22に公開
UI/UX
context
tech

(原文) Creating Context for Design Systems: A Comprehensive Approach to Documentation

デザインシステムという言葉を聞いたことがあると思います。

おそらくあなたは持っているでしょう。もし持っていなければ、持つことをおすすめします。

しかし、プロジェクト、クライアント、または組織の文脈の中では、それなりに定義されているかもしれない他の名前もあります。これらの名前は、業界の外でもしっかりとした定義を持っています。フレームワーク、ソフトウェアデザインガイド、パターンライブラリ、コンポーネントシステム、UIキット、スタイルガイド、デザイントークンなどです。

普遍的で合意された定義はありません。また、それらの間には多くのグレーゾーンや重複、ギャップがあります。しかし、「デザインシステム」という言葉は、最高レベルの包括的な記述子であることを意図しているということは、少なくとも広く受け入れられている前提があります。

ここでは、デザインシステムとそれをサポートする文書の構造をより完全なものにして、ギャップを埋める方法を探ってみましょう。

ギャップを埋める

よくある典型的なデザインシステムの一般的な階層は次のとおりです。

デザインシステム

  1. 原則
  2. アクセシビリティ
  3. UI
  • グローバルスタイル
  • テンプレート
  • コンポーネント
  • スタイル

しかし、それだけでは必ずしも十分ではありません。製品の表面的な部分だけでなく、もっと踏み込んだ部分も必要です。例えば、特定の要素については、以下のような定義も必要です。

  • ドキュメントの構造とネスティング
  • 適切な親コンテナ要素
  • 属性、役割、マイクロフォーマット
  • テキストのウェブスタンダードとアクセシビリティの基準
  • 翻訳やローカリゼーションへの配慮

UIデザインだけでは、デザインシステムの基礎にはなりません。

実際には、システムのアウトプットとしての役割の方が大きいのです。したがって、システムにはインプットが必要です。それらのインプットは意思決定のためのコンテキストを提供します。

それらを含めるのです。ある決定は、研究によって十分な情報を得ているかもしれません。また、説明の必要のない決定もあるでしょう。また、説明したり擁護したりするのが難しい決定もあるでしょう。しかし、いずれも記録することが重要です。

"すべての製品を見て"......そして、すべてに対して1つのデザインシステムを設計します。しかし、なぜそのような決定がなされたのかを調べ始めると、その設計システムでは解決できないローカルな知識が明らかになることがよくあります。" - ルネ・マドセン

ワンランク上を目指す: デザインシステムのコンテクストを表現する

どんなデザインシステムも、以下のようなコンテクストのインプットに大きく影響されます。

  • 組織の制度的な知識、遺産、文化、信念、偏見（顧客のためにシステムを作成する場合は作成者も含む
    パターンがどのように命名され、どのような問題を解決するのかという洞察力
  • クラス名やセレクタの決定方法に関する慣習（大文字、小文字、セパレータ、深さ、特異性など）。
  • デザインシステムの成功基準
  • デザインシステムの決定を支えるユーザー調査、ユーザビリティ調査、そしてその結果としてのデータとテーマ

これらはすべて、実際の決定に加えて、意思決定の基準を表しています。

デザインシステムのメタファー

では、このコンテキストをどのように捉えればよいのでしょうか。

HTMLでは、すべての文書は<head>で始まります。

head要素は、ドキュメントのメタデータの集合体を表しています。デザインシステムは、そのコンテキストを記述するために<head>が必要です。

例えば、プロセス、ソース管理、ガバナンスは一般的にデザインオプス（運用）の役割に該当しますが、それでも文書化する必要があります。

ここでは、包括的なメタデータと、より完全なデザインシステムのための構造を紹介します。

<head>
リサーチ＆インサイト
理念と倫理
プライバシーとセキュリティ
問題提起
方法論とプロセス
定義
使用ガイド
その他の基準
エコシステム
ローカライズ
パフォーマンス予算
ソースコントロール
ガバナンス
著作権・ライセンス
</head>

<body>
デザインシステム

  1. 原則
  2. アクセシビリティ
  3. プラットフォームとチャネル
  4. 入力
  5. UI
    5.1. ボイス＆トーン
    5.2. コンポーネントとパターン
    5.3. スタイル
    5.4. モーション
  6. コンテンツ
  7. ローカライズとバリアント
  8. パフォーマンス予算
  9. マークアップ
    9.1 ソースコントロール
  10. ホスティング
  11. ウェブビュー
    </body>

まとめ

すべてのデザインシステムにははじまりの物語があり、反復して進化していきます。変更されたものは、新しい学習の結果です。それをどこかに記録しておきましょう。

<head>」は、デザインシステムに関するすべてのメタデータを抽象化するために必要な層を表す完璧なメタファーであるように思えます。

UXPinは、世界中の製品チームがアイデアをより早く製品化するためのデザインプロセスツールです。

UXPinの革新的なテクノロジーであるMergeにより、PayPalのような企業はDesignOpsの課題を容易に解決することができます。UXPin Mergeでは、Reactコンポーネントを使ってデザインし、最終製品との完全な一貫性を実現することができます。

Discussion