デザインシステム の主な 課題 ５つとその教訓
UXPinがWhitespaceと共同で発表したレポートでは、世界有数の組織における企業向け デザインシステム に関する５つの課題が明らかにされており、この５つの課題の中で共通しているのは、「いかにして ”信頼できる唯一の情報源（Single source of truth）” を実現するか 」です。
この課題は、デザインシステムの文書やコンポーネントからツールやガバナンスに至るまで、あらゆるものに関連しています。組織は大変な思いをして一貫性と結束の維持に精を出していますが、皮肉なことに、それこそがデザインシステムが達成すべきことなのです。
そこで、世界的に有名な１９社から、デザインシステムの課題とその克服方法について、深い見解が示されたレポートをご紹介します。無料ですのでぜひご覧ください。
効率的なデザインプロセスを構築して、デザイナーとデベロッパーが両方のワークフローで「信頼できる唯一の情報源」を共有できるようにしませんか。UXPin Merge の 詳細をぜひコチラからご覧ください。
課題１．ツール
多くの企業では、デザインプロセスにおいて、Figma や Sketch のような画像ベースのデザインツールが今もなお使われています。このようなツールは習得しやすく、デザイナーにとって製品デザインを身近なものにしてくれますが、多くの欠点があり、特にインタラクティブなプロトタイピング機能が限られていることが挙げられます。
このような画像ベースのツールスタックを完成させるために、企業はプラグインに頼ったり、カスタムソリューションを構築したりしていますが、それはコストの増大やワークフローの複雑化を招きます。
デザインシステムを使うすべての組織にとって、「信頼できる唯一の情報源」は第一の目標であり、製品開発プロセス全体を１つのツールでまかなうことが理想です。
解決策
UXPin Merge によってツールの課題のソリューションを見出し、デザイナーがコード化された UI コンポーネントを使ってプロトタイプを構築できるようにした企業もあります。このコンポーネント主導の製品開発ワークフローは、デザイナーとエンジニアがそれぞれのコンフォートゾーンで作業できるようにする一方で、組織が求める「信頼できる唯一の情報源」を提供します。
デザインチームは、デザインプロセスでデザインツールを使いますが、Figma や Sketch で使われる画像ベースの UI キットではなく、UXPin で完全にインタラクティブなコードベースのUIコンポーネントを使います。
Merge は、UXPin を Git や Storybook を介して会社のデザインシステムのレポジトリに同期させるので、デザイナーはデザインプロセスで、エンジニアが最終製品を開発するのと同じコンポーネントを使うことができます。
課題２．ドキュメント
インタビューした企業にとって、デザインシステム成熟の最大の課題はドキュメントです。デザインシステムやドキュメントの維持や更新は、リソースを消費するプロセスであり、成熟を遅らせる要因となります。
デザインシステムのドキュメントは、使用ガイドラインやルールを用いて、購入、トレーニング、ワークフローを促進するのに有効であり、チームが一貫した UI 体験を提供することを保証しながら採用を増やすことを目的としています。
デザインシステムのドキュメント作成は理論的には簡単なようですが、適切な業界標準がないため、企業がこれを効果的に実行するのは大変です。
ドキュメント作成のソリューションには、以下のようなものがあります：
- ポータルサイト
- Slack チャネル
- Miroaや Mural などのホワイトボードツール
また、多くの企業では、デベロッパー向けにはコンポーネントライブラリでデザイナー向けには UI キットというように、複数のバージョンのデザインシステムを管理しているという課題もあります。さらに、デザインチームは、Figmaでデザインし、Zeplinでプロトタイプを作成するというように、各ツールに複数のバリエーションを必要とすることもあります。
デザインシステムチームは、このようなプラットフォームのライブラリやドキュメントの更新を全て管理し、プラットフォーム固有の課題を解決しなければいけないのです。
解決策
Google の マテリアルデザイン、Shopify Polaris、Stack Overflow の Stacks など、うまくいっているデザインシステムのドキュメントをモデルにすることで、組織はそれらのいいところを取り入れることができます。また、ドキュメント作成を自動化や統一するツールを見つけるのも、運用の負担を減らし、デザインシステムの成熟度を加速させるのに非常に重要です。
ドイツを拠点とするソフトウェア開発会社である dotSource は、ツールを切り替えることで、ドキュメント作成と「信頼できる唯一の情報源」の課題を克服した素晴らしい例であり、デザインシステムの管理には、UXPin Merge と Storybook が使われています。
この組み合わせで、以下のような本当の意味での「信頼できる唯一の情報源」が実現されました：
- 矛盾がない
- 一度の変更でデザインとコードが自動的に同期される
- ドキュメントは常に最新版
- デザインと開発のシームレスな連携
課題３．ガバナンス
導入と成熟にはデザインシステムガバナンスが不可欠ですが、定期的に経営陣に ROI を証明しないといけないチームにとって、効果的なプロセスの実施は大変な作業です。- 貴重な時間とリソースの消費になりますからね。
解決策
デザインシステムガバナンスの課題克服には、経営的・財政的なCレベル（経営陣）のサポートが最も効果的な方法であり、そのサポートを得るには、ステークホルダーのニーズや懸念に応える強力なビジネスケースの構築が、デザインシステムチームに求められます。
例えばデリバリーヒーロー の製品チームは、「技術的負債」という問題に対する価値提案を行うことで、Cレベルの支持を確保しました。このチームは、再利用可能なデザインシステムのコンポーネントが、どのようにして負債をゼロにしてプロジェクトの納期を５７%短縮するかを実験して実証しました。
「UX 以外の人々にとって、ユーザー体験やデザイン思考の原則はわかりにくいものです。なので、問題の説明だけでは不十分であり、何が問題なのか、それがビジネスにどう影響するのかを示さないといけないのです。」 アンバー・ジャビーン氏 – Delivery Hero の DesignOps ディレクター。
課題４．採用
多くの組織は、最大の成功と会社全体での採用のために、デザインシステムに対する強い認識と支持を達成することを目指していますが、教育と実装で、この採用が遅れ、大変なものになっています。
デザイン主導の組織や、競合するシステムやワークフローがある組織では、採用は特に大変です。また、Cレベルのサポートがない場合、デザインシステムチームが複数のチームや部門に働きかけるのにかかる労力が増えるため、採用率が下がります。
解決策
組織は、成功させるために効果的なコミュニケーションとマーケティング戦略が必要な製品のように、デザインシステムを扱わないといけません。
そして、組織がデザインシステム導入を克服する方法には、次のようなものがあります：
- 変更管理のプロセスに HR と DesignOps を参加させる
- デザインシステムのワークショップやミートアップを開催する
- Slack やメールなどを通じて、デザインシステムチームをより身近な存在にする
- チームに個別にアプローチする
- デザインシステム定期更新会議を開催する
- マーケティング資料やトレーニング資料を作成する
ちなみにデリバリーヒーローは、Marshmellow デザインシステムにおいて、以下の３つの要素からなる採用戦略を取り入れています：
１．ゲーム化：デリバリーヒーローでは、デザインシステムの利用状況に応じて４つの採用段階を設け、ユーザーを表彰しています。チームメンバーはダッシュボードで成功を可視化でき、DSチームは次の目標達成を後押しします。
２．ソーシャル化：DSチームは、デザインシステムの重要な決定に組織を巻き込み、定期的にイベントを開催してユーザーとつながり、課題や成功について議論します。
３．お祝い：DS チームは，１００% の採用に向けて前進していることの象徴として、どんな小さな勝利でもお祝いします．チームメンバー個人と全体の採用を祝い、それによってデザインシステムに関する話題とワクワク感が生まれます。
課題５．成熟度
デザインシステムの成熟度は、組織や業界によって違います。また、開発主導の製品開発チームは、デザイン・開発プロセスでコードコンポーネントを使っているため、デザイン主導のチームよりも先行しています。
大抵の組織は、デザイナーがコードコンポーネントライブラリの画像ベースバージョンを使っている、デザインシステムの成熟度の第３ステージにいます。多くの企業はこれを「信頼できる唯一の情報源」と呼んでいますが、単独のライブラリを使用する完全な統合デザインシステムのまだ一歩手前です。
解決策
冒頭で述べたように、この白書は、「いかにして ”信頼できる唯一の情報源” を実現するか 」という点が共通しており、この「信頼できる唯一の情報源」こそが、完全なデザインシステム成熟度である – 第４段階 – 完全統合 を達成するための鍵になります。
そしてそれは、デザインと開発を１つの反復プロセスにすることで、デザインハンドオフ、ドリフト、不整合、技術的負債がもはや問題ではなくなることを目標としています。
UXPin Mergeは、スタートアップ企業や大規模企業レベルでこのような課題を解決できることが証明されています。コードコンポーネントをデザインプロセスに導入するのは、第４段階のデザインシステム成熟の達成には一番いいソリューションです。つまり、デザイナーとエンジニアを統合し、製品の一貫性と整合性を最大化することができるのです。
Merge の「コードからデザイン」のワークフローは、白書に記載されている多くの課題を以下のように解決しています：
- UXPinは、標準的な画像ベースのワークフローで使われる複数のツールの役割を果たすことから、デザイン、プロトタイプ、テストなどのための別のプラットフォームの用意が不要。
- MergeとStorybookを併用することで、デベロッパーはコンポーネントのリリースやアップデートと同時にドキュメントを作成できる。
- Mergeは、負担の大きい運用タスクやマニュアルワークフローを削減することによってガバナンスを効率化する。
- インタラクティブなコンポーネントを提供することで、デザイナーがより効率的かつ一貫して高度なプロトタイプを構築できるようになり、採用率が上がる。
- Merge を使うことで成熟が加速し、それによってスタートアップや１名構成の製品チームでも第４段階に到達できる。
UXPin Mergeを始めよう
UXPin Merge をデザインシステムとして使用する場合、組織には以下の２つのオプションがあります：
- Git 統合： UXPin を React コンポーネント ライブラリ用の Git レポジトリに直接接続し、組織はバージョン管理、パターン、JSX プリセットの管理など、Merge の全機能にアクセスできるようになる。
- Storybook 統合：React、Vue、Angular、その他の対応ライブラリを含む、あらゆる Storybook を UXPin に接続。DevOps と DesignOps のワークフローの同期には最適なソリューション。
UXPin との初期設定後、Merge は裏で自動的にコンポーネントの更新を UXPin のデザインエディターに同期させるので、デザイナーとエンジニアは常に同じライブラリで作業できます。
また、Merge のドラッグ＆ドロップによるデザインワークフローによって、プロダクトオーナーやデベロッパー、その他のステークホルダーといった非デザイナーにとってもデザインをより身近なものにし、より多くの人が組織内でプロトタイプを作り、アイデアをテストすることができるようになります。
デザインシステムの課題を解決し、世界最先端のデザインツールを使って、矛盾や負債の少ない、より高品質な製品を提供しませんか。詳しくは、Mergeのページをぜひご覧ください。
