デザインシステムのメンテナンス方法とは？常に最新に保つ方法
デザインシステム の構築は簡単ではありませんが、これはほんの入口に過ぎません。 デザインシステム の メンテナンス においては、人・時間・資金を要する、進化・熟成させていく継続的な作業になります。
UX、技術、規制、製品、組織の変化により，デザインシステムチームはデザインシステムの多くの面の管理、更新が必要です。本記事では、ガバナンス、監査、ロードマップ、成熟度など、デザインシステムを維持するためのハイレベルな概要をご説明します。
UXPin Mergeで、デザインシステムの運用上の課題を最適化し、 メンテナンス を軽減しませんか。「信頼できる唯一の情報源（Single source of truth）」の作成や負債の軽減、さらにはドリフトの排除を実現すべく、デザインと開発を同期させましょう。Merge へのアクセス権のリクエストはコチラ。
デザインシステム を製品のように扱う
UXとデザインシステムのエージェンシーである EightShapesの創設者であるネイサン・カーティス氏は、Mediumの記事で、「デザインシステムはプロジェクトではなく製品であり、製品の提供である。」と言っています。
デザインシステムを「製品」としてとらえるというのは、デザインシステムチームが以下のような重要な側面を管理しなければならないということになります：
- マーケティング： デザインシステム のアダプション拡大、アップデート/リリースの告知、ニュースなど
- UX：デザイナー、エンジニア、製品チームなどのために優れたデザインシステムのUX（ユーザーエクスペリエンス）を生み出す
- エンジニアリング：スケーラブルでエラーのないコードの作成および維持
- 人材管理：一人しかいないチームだろうが、成功するデザインシステム・チームを構築する
- 運営：手順、システム、ツールなど
- ガバナンス：デザインシステムの維持や更新のためのプロセスやプロトコル
- カスタマーサービス：サポートチケットの記録および、コンポーネント/パターンの推奨によるユーザーの問題解決のサポート
- コミュニケーション：ユーザー、支持者、ステークホルダーとの対話
効率的なデザインシステムの メンテナンス には、DSチームがパターン・ライブラリの更新にとどまらず、製品のアダプション率とライフサイクルを上げるためのシステムとプロトコルを作成する必要があります。
例えば、美しいコードとUI 要素を持つ素晴らしいデザインシステムがあっても、誰も使っていない、あるいは投資対効果が得られない場合、ステークホルダーによるプロジェクトの中止かチームメンバー入れ替えの可能性があります。
ガバナンスから始める
デザインシステムの維持には、いいガバナンスが必要です。問題や要望に対応できるように、デザインシステムを立ち上げる前にそれを確定しておくといいでしょう。
以下は、デザインシステムのガバナンスが取り組むべき重要な７項目です：
- バグの報告と修正：ユーザーはどのようにバグを報告し、バックログはどのように管理され、チームはこのような問題をどのように修正するのか
- 要素の導入：新しいコンポーネント追加の手順とは
- パターンの推進：デザインシステムチームは、新しいパターンが一過性のものかベストプラクティスなのかをどのように判断しているのか
- パターンの見直しと適応：新しいパターンがデザインシステムのガイドラインおよび原則にきちんと適合しているようにするための手順
- システムリリースのデザイン：一貫したリリーススケジュールと品質保証手順の確定
- デザインシステム監査：デザインシステムの監査頻度や、分析および報告方法について
- ドキュメント：ドキュメント更新のための手順
デザインシステムのコード化
デザインシステムのコード化は、デザインシステムの UI コンポーネントを、ガイドライン、原則、ドキュメント、チュートリアル、ガバナンス手順などを含む検索可能なアーカイブまたはハブに整理するものです。
デザインシステムのドキュメントハブをコード化および維持する際に考慮すべき１１項目を、以下にご紹介します：
- デザインシステムのトップページにデザイン理念や価値観を表示し、ユーザーが訪問の際にいつでも思い出してもらえるようにする
- ブランドスタイルガイドは、デザインとコピーライティングの一貫性を保つのに重要
- ライティングスタイルガイドは、コンテンツ、マーケティング、ALTテキスト、UXライティングなど、すべてのコピーについて、音声、語調、文法、スラング／専門用語／ジョーク／言語ポリシー、構造、メッセージ、ラベルなどの指示を提供する
- デザインシステムのベストプラクティスには、例えば画像アセットの使用方法や使用するデザインツールの選択など、方法、ツール、プロセスのリストを含む
- デザインシステムのウェブサイト/ハブは、製品チームがコンポーネントやドキュメントを見つけられるように、簡単で検索可能なナビゲーションでないといけない
- DSチームは、例えばデザインシステムのWebサイトへのフォームの追加や、特定の Slack チャンネルの作成など、コントリビューションとバグレポートについての明確なガバナンスの提供が必要
- コンポーネントライブラリには、各コンポーネントの例、コードスニペット、インタラクティブ性のガイドライン、ユースケース/実装、ダーク/ライトバリエーション、注意点、（サイズ、形状、色などの）バリエーションを含ないといけない
- カラーパレットには、iOS、Android、Webなどの各プラットフォームの見本と関連するカラーコードを含まないといけない
- 製品のアイコンと、（輪郭、円形、色などの）バリエーションの完全なリストを含める
- 承認されたフォントを、太字、半太字、レギュラー、ライト、イタリックなど、さまざまなスタイルの例と共に表示する
- デザイン、開発、アクセシビリティ、クラウドストレージのためのツールのリストを含める
デザインシステムを正しくコード化することで、ミスの減少、アダプション率の上昇、オンボーディングの効率化が実現するでしょう。
デザインシステム の監査
デザインシステムのメンテナスは包括的な監査から始まりますが、何が問題なのかがわからない場合、どうすれば修正できるでしょうか? デザインエージェンシーの Ramotion社 は、デザインシステムの監査に関する、ステップバイステップのアプローチを提供しており、この監査では、以下を評価します：
- デザインシステムの品質
- ギャップの特定
- リソースの評価
- 一貫性の分析
- ドキュメントの更新
定期的かつ一貫したデザインシステム監査のスケジュールを立てることが重要であり、このスケジュールは、デザインシステムの規模や利用可能なリソースに依存します。
- ステップ１．明確な監査目標を設定する：監査はどこに焦点を当てるのか、そして報告、勧告、行動など、望ましい成果は何なのか。時間をかけて、さまざまな結果に対するフレームワークを開発し、一貫性を維持することが望まれます。
- ステップ２．リソースの分析：監査目標の達成に必要な予算、時間、人的資源の配分の分析をします。
- ステップ３．デザインインベントリーの実施：デザインシステムチームは、コンポーネントライブラリのUI要素、パターン、テンプレートを、対応するドキュメントも含めてカタログ化し、ポリシー、原則、ブランドガイドラインなど、デザインシステムに関するカタログも作成します。
- ステップ４．UI要素の分類：デザインシステムに登場するUI要素やパターンを、「ボタン」、「アイコン」、「フォーム」など、カテゴリーごとにグループ化します。すべてをカテゴリー別に並べることで、デザインシステム全体を視覚化することができます。
- ステップ５．冗長な構成要素と欠落した構成要素の特定：ステップ４を完了すると、重複、冗長、欠落した構成要素を特定しやすくなります。例えば、２つのボタンが微妙に違っていることに気づいた場合、これを１つの要素に再デザインすることで、両方の目的が達成されることもあり得ます。
- ステップ６．ビジュアルとタイポグラフィの要素の分析：このステップでは、カラーパレット、画像、フォントなど、コンポーネントやパターン以外のすべてのビジュアル要素が含まれます。システムはこのようなプロパティを正しく適用していますか、また矛盾はないですか？
- ステップ７．アクセシビリティ分析の実施：デザインシステムのアクセシビリティは、アクセシブルな UI（ユーザーインターフェース）を構築するための基礎となるものです。監査人は、アクセシビリティの方針を確認し、それがデザインシステム全体に確実に正しく適用されているようにしないといけません。また、WCAG（ウェブコンテンツ・アクセシビリティ・ガイドライン）の更新を確認し、デザインシステムおよびそのデジタル製品がコンプライアンスを確実に維持できるようにします。
- ステップ８．ブランドガイドラインの検討：監査員は、デザインシステム全体がブランドガイドラインにきちんと適合するのに、構成要素とコピーを評価する必要があります。
- ステップ９．将来のためのロードマップ作成：監査で見つかった問題を解決するための計画とロードマップの作成のために、調査結果を利用します。
- ステップ１０．発見したことを発表する：最後のステップは、ステークホルダーへの所見の発表です。これには、デザインシステムのロードマップを実行するためのリソースの賛同を求めることも含まれます。
デザインシステムのロードマップの作成と共有
デザインシステム（DS）のロードマップは、以下に関連するタスク、マイルストーン、タイムライン、および成果物の概要を示します：
- 最近のリリース
- DSチームが現在取り組んでいること
- 次に取り組む予定のもの
- 今後のリリース（６〜１２ヶ月）
監査が終わるたびに、デザインシステムチームはこのロードマップを更新し、更新や変更に対応する必要があります。例えば、製品が再デザインされた場合、チームはコンポーネントライブラリの更新が必要であり、監査では、チームが更新しなければならない要素とその所要時間が決定されます。 デザインシステムのロードマップは、その進行中の メンテナンス の以下の重要な側面２つに影響を与えます：
- Changelog: 時系列に並んだリリースとノート
- バージョン管理：デザインシステムの利用可能な任意のバージョンにチームが切り替えることができる機能
デザインシステム の測定
DSチームは、デザインシステムと製品開発への影響を測るために、KPI（重要業績評価指標）の使用が必要であり、その KPI は、問題領域とどこに焦点を当てるべきかの特定も担います。
例えば、アダプションが進まない場合は、そのデザインシステムを使わない要因を理解すべく、マーケティングの強化や、非ユーザーへのインタビューの実施が必要です。 デザインシステムの KPI の例としては、以下のようなものがあります：
- アダプション：デザインシステムを利用しているユーザーの割合とその経時的な増加率
- 負債（UX＆フロントエンド）：デザインシステムが負債に与える影響
- 効率性: デザインシステムを使用した場合と使用しなかった場合で、チームが製品を構築するのにかかる時間を測定、また、この効率の時間の経過に伴う変化の仕方も測定
- 市場投入までの時間：デザインシステムが市場投入までの時間にどのような影響を与えるか、また、デザインシステムがある場合とない場合、そして、時間の経過に伴いどのように変化するか
- コードの記述：デザインシステムがコードを書くことをどのように減らすのか、そしてそれが長期的なアダプションにどのように関係しているのか
デザインシステム の メンテナンス – マイケル・トッド氏「機能の頻度」について
デザインシステムマネージャーのマイケル・トッド氏は、２人しかいない小さなチームでのSaaSデザインシステムの維持についてのMediumの記事で、自身の「機能の頻度」を説明しています。
日常業務
- UIデザインの決定をリードする
- デザインシステムのアドボカシー
- DesignOpsの促進
週ごと
- フロントエンドエンジニアとの連携
- デザインパターンの遵守の促進
- デザインパターンギルドの運営
- UX負債の追跡と削減
- 様々なステークホルダーとのミーティング
- デザインツールライブラリの保守と改善
月ごと
- プロダクトのUIデザインの方向性に関するコンサルティング
- UXデザイナーのシステム思考の指導
- 将来のデザインシステムの必要性の予測
四半期ごと
- スタイルガイドとドキュメントの更新
- プロダクトリードやステークホルダーとのネットワーク
年ごと
- デザインシステムの目標とロードマップの更新
UXPin Mergeでデザインシステムの メンテナンス を効率化
デザインシステムを維持する上で最も大きな課題のひとつは、デザイナーとエンジニアが別々のシステムを管理・更新する点です。デザイナーはデザインツールの UI キットを使い、エンジニアはレポジトリにホストされたコンポーネントライブラリを使って作業します。
UXPin Mergeは、レポジトリからUXPinのデザインエディタにデザインシステムを同期させることで、デザインと開発のギャップを埋めることができます。なので、デザイナーはデザインプロセスにおいて、エンジニアが開発時に使うのと同じ UI コンポーネントを使えます。
この「信頼できる唯一の情報源（Single source of truth）」は、デザインシステムの メンテナンス に以下のような重要な利点をもたらします：
- 単一のコンポーネントライブラリの管理：画像ベースの静的な UI キットは不要になります。
- ゼロからのデザインは無し：Mergeのコンポーネントには、デザインシステムで確定されたプロパティとインタラクティビティが含まれており、デザイナーはコンポーネントをドラッグ＆ドロップすることで、効率的な製品デザインのワークフローを実現します。
- フロントエンド開発作業の軽減：エンジニアにはすでに同じパターンライブラリ、プロパティ、スタイリング、インタラクションがあります。
- デザインドリフトが発生しない：UXとフロントエンドの負債が大幅に削減されます。
- バージョン管理内蔵：バージョン管理は、デザインと開発の間で自動的に同期され、デザイナーは、更新のタイミングを選択し、以前のバージョンのデザインシステムに切り替えることができます。
- シームレスなハンドオーバー：ワークフローを強化し、デザインシステムの価値を示すことで、ステークホルダーからリソースを獲得しながらアダプションを拡大します。
UXPin Mergeは、高度なデザインシステム機能を備えた世界最先端のエンドツーエンドデザインツールで、運用と メンテナンス が重複するのを削減します。Mergeへのアクセス権をリクエストはコチラから。
