デザインシステム 構造 トップ３
最初に
多くのチームが、デザインシステムの作成は大変で時間のかかるプロジェクトであると想定しています。
UI監査や、デザインシステムの要素とデザインガイドラインのレポジトリの作成、組織全体が使えるようにデザインシステムを組み合わせることをチームメンバーに強制しますからね。
デザインシステムを構成する方法は、これだけではありません。デザインプロセスのスピードアップを目的としたこのツールキットには、よりシンプルな作成方法がいくつかあります。
そこで本記事では、このような目的を達成するためのデザインシステム作り方の最適なアプローチを探っていきます。
プロトタイプでデザインシステムを最大限に活用しませんか。
デザインシステムのビルディングブロックを UXPin に取り込み、デベロッパーがすぐにコードに変換できるインタラクティブなプロトタイプをデザインしましょう。
デザインシステムを 構造 する方法
デザイン要素と関連するドキュメントやガイドラインを組み合わせると、システムはブランドのUI構築に重要なことを、一貫したレポジトリとして形成していくはずです。
ただし、最適なデザイン効率とシステム効果を得るには、まず、それを識別可能な構成にアレンジする必要があります。
つまり、チームのニーズと組織のデザイン目標に最も適したものです。
では、デザインチームが使う３大 構造 をみてみましょう。
１．シンプルなビジュアルデザインレポジトリ
これはデザインシステムの最も基本的な構造です。
Nielsen Norman Groupの説明にあるように、こういったビジュアルデザインレポジトリにはさまざまな構成がありますが、ここでは「シンプルさ」に重点を置いています。
基本的なレベルでは、シンプルなレポジトリの主要なデザインシステムのコンポーネントは【スタイルガイド】、【コンポーネントライブラリ】、【パターンライブラリ】で構成されています。
これらが一体となって、機能性のあるデザイン システム レポジトリの基本要素を形成します。
この構造には、システムを構成するのに必要不可欠なものだけが含まれています。
チームメンバーに必要なものを最初から提供することが意図されているので、チームメンバーは他のアセットやドキュメントの作成や追加ができます。ちなみに、Shopify の PolarisやAtlassian Design Systemはこのタイプのデザインシステム構造を採用しています。
メリット
-
配置の作成や実施が簡単。
-
デザインシステム チームがシステムの基本構造を最初から識別できるようになる。
-
意思決定が稼働中に行われ、開発が早まる。
デメリット
-
この配置には、厳格なヒエラルキーが提供する構造が欠けている。
-
チームは、重要な違いを無視して、デザイン システムの要素をアルファベット順や重要度順に並べる傾向がある。
-
配置の更新や維持がしにくい場合がある。
２．アトミックデザイン
『アトミックデザイン』の 構造 は、デザインシステムの提唱者であり、著者でもあるブラッド・フロスト氏によって作られた、効果的な UI デザインシステムの構築のために、秩序と構造化された階層（ヒエラルキー）を使うことに焦点を当てたものです。
アトミックデザインの方法論は、プロセスを５つのステージに分けることで、デザインシステムの構造手法です。
最初の３つは化学の世界をモデル化し、後の２つは目に見える世界の側面に関連するものになっています。アトミックデザインシステムとそのコンポーネントについては、別の記事でご紹介しましたが、ここでは最も重要な情報をまとめておきましょう。
各ステージは、前のステージを基礎としており、各階層は、前段階のものを集約して構成されています。
原子が分子を構成し、分子が有機体を構成するように、最小の構成要素から大きな構成要素に移行していくという構造です。
原子
デザインシステムの最も基本的なコンポーネント。
分子
その「原子レベル」の個々の要素がグループに結合されると、より大きな要素が見え始め、レゴのピースのように合わさる。
有機体
デザイン要素の組み合わせを分子単位で発展させることで、「有機体」ができ、より複雑なデザインシステム UI コンポーネントを形成する。
テンプレート
次のステージは、化学の領域を離れ、より「マクロ」な世界になり、有機体はテンプレートで整理されて、まとまりのあるデザインに仕上がる。
ページ
テンプレートを使ってカスタマイズすれば、１つのページができあがり、テンプレートのプレースホルダーのコンテンツをデザインのコンテンツに置き換えることで、デザインシステムの最終的な具体的な成果物が得られる。全ケースに逐一対応する必要はないかもしれないが、バリエーションをいくつか用意しておくといい場合がある。
メリット
-
アトミックデザイン構造には、再利用可能なコンポーネントが利用される。チームは様々な要素を基本的な原子に分割することができ、それをさまざまな組み合わせや構成で適用や再適用ができる。
-
Webサイトやアプリの中で、さまざまな要素コンポーネントを必要とする部分をチームで簡単に見つけ出し、それに応じた分子や有機体を作ることができる。
-
この配置により、デザイナーはコンテンツと構造の分離をハッキリと確定するデザイン言語を使うことがができる。
-
同じコンポーネントでさまざまなバリエーションが生まれ、よりクリエイティブになる。
デメリット
-
アトミックなデザイン構造では、長く複雑な部品リストになってしまう可能性がある。
-
場合によっては、コンポーネントの数が少ないと、複数のカテゴリーを用意しても意味がなく、それが、全体の方法論を複雑にする可能性がある。
３．コードベースのデザインシステム 構造
このアプローチは、システム構造をデザインする上で最も強力で効果的な方法のひとつであり、デジタル製品や新機能の開発に携わるデザインチームに最適です。
例えばマテリアルデザインや Fluent UI デザインシステムについて考えてみましょう。
この構造により、デベロッパーが作った最終製品と同じような外観と動作をするプロトタイプを開発することができます。
これによって、デザイナーとデベロッパーの連携が促され、プロダクトチーム全体が、「信頼できる唯一の情報源（Single source of truth）」を頼りに、作業をすることができるのです。
コードベースのデザインシステムの構造は、デジタル製品のシステムデザインにおいて比較的新しいアプローチと考えられています。
デザイナーは、デジタル製品のデザインを拡張するために、デベロッパーが認めた機能的なコード化された UI 要素を採用することができるようになりました。
メリット
-
この構造でデザイナーとデベロッパーの協力関係がよくなる。
-
チームは、UI 要素の変更をより効果的に追跡できる。
-
プロトタイプからデザインハンドオフまで、全体的な効率が上がる。
デメリット
-
デザイナーがコードベースのデザインシステムの恩恵を受けるには、UXPinと Mergeテクノロジーのようなツールが必要。
-
コンポーネントの作成に時間がかかる。
-
デザイナーは、システム開発にデベロッパーの助けが必要な場合がある。
自分に合ったデザインシステム構造の選び方
より効率的なデザインに必要なフレームワークをチームに提供するには、正しいデザインシステムの構造を決めることが重要です。
例えば、製品デザインの目的に沿ったデザインシステム構造は、デザイナーの連携を促し、それによってデザイナーは、自分たちの能力を発揮できるデジタル製品を生み出すことができるようになります。
製品チームのニーズに合ったデザインシステム構造をきちんと選ぶために、以下について考えてみて下さい：
-
誰のためのデザインシステムの最適化なのか：組織全体の全員のためなのか、UXデザイナーのためなのか、それとも例えばフロントエンドデベロッパーだけのためなのか。
-
デザインパターン、コード化された UIコンポーネント、デザインガイドラインからロールアウトプラン、ベストプラクティスのポリシーまで、どれだけのコンポーネントとコンテンツタイプをシステムに統合しようとしているのか。
-
現在使っているデザインシステムはどのような成熟段階にあるのか
効果的なデザインシステムは、成長と変化に伴う課題に適応することができるダイナミックな存在です。
デザインシステムの本来の価値は、無駄な労力を減らし、連携を促進する能力にあるのです。
UXPin がコードベースのデザインシステムのを好む理由
デザインシステムでコード化されたコンポーネントを使うことで、デザインチームとデベロッパーチームの間での共有が実現します。
それによって、デザインチームと開発チームは、「信頼できる唯一の情報源（Single source of truth）」に依存することができ、より効果的な連携が実現します。
また、組織内の各チームは、デザインやプロトタイプのプロジェクトをすべて同時に管理することができ、それによってより高度な一貫性を保つことができます。
その結果、デベロッパーはデザインパターンのデベロッパー向け言語への翻訳に集中できるようになります。
UXPin Mergeは、コードベースのデザインシステム構造を使って、「信頼できる唯一の情報源」でプロトタイプをデザインします。
これにより、デザイナーはデベロッパーのワークフローと整合性のあるデジタル製品のプロトタイプを作成することができます。
