デザインシステム構築のためのステップバイステップガイド

イントロ

どこでもアクセスできる時代、ユビキタスが当たり前になりました。しかし、一貫性が信頼性につながることもよく知られている。ユーザーの意識も高くなりました。インターフェースに関係なく、迅速でスムーズな体験が基本的な期待となっています。

さらに、時間は無駄にはできない資産です。これらのことを考えると、ウェブサイトやインターフェイスをもっと良くしようと躍起になるのは当然でしょう。しかし、50種類ものコンポーネントをミスなくデザインに反映させるのは、至難の業です。

ドラムロールの合図で、「デザインシステム」があなたの生活を快適にします。

デザインシステムとは？

デザインシステムとは、製品チームがデジタル体験を創造するために活用できる、明確に文書化された再利用可能なコンポーネントの広範なアーカイブのことを指します。つまり、デザインシステムとは、企業にとってデザインに関する唯一の真実の情報源であると考えることができます。

スタイルガイドやパターンライブラリ以上に、デザインシステムは常に進化し続けるものです。UXデザインを含む様々な主体に関連するガイドラインのこのエコシステムは、あらゆるプロジェクトのビルディングブロックのフレームワークとして使用でき、すべての構成要素が一貫し、ブランディングにマッチしていることを保証します。

デザインシステムは、新興企業や成長中の企業にとって有用なものですが、製品が発展するにつれて、不可欠で譲れない資産となります。また、ビジネスゴール、ワークフロー、チームワーク、ユーザーエクスペリエンス、そしてブランドエクスペリエンス全体にも良い影響を与えることができます。

alt_text

デザインシステムのメリットとは？

システム設計を実施するメリットとしては

時間を短縮しながら効率を高める -デザインシステムの主な利点は、デザインや開発作業を迅速に作成・再現できることです。チームは、あらかじめ用意された要素を使用することで、常に車輪を再発明する必要性を減らし、一貫性のないリスクを軽減することができます。
ページやチャンネル間のビジュアルの一貫性を高める -組織全体のデザインシステムの欠如は、ビジュアルに一貫性がなく、ユーザー体験が断片的になったり、ブランディングから孤立したりする原因になります。また、まとまった基準があれば、大規模なデザイン変更やビジュアルの刷新に対応することができます。
統一言語の普及 -デザイン言語を共有することで、部門を超えたチーム内やチーム間のコミュニケーションミスによる設計や開発時間の無駄を減らすことができます。
より複雑な問題に集中できる -シンプルなUIコンポーネントを作成し、明確にすることで、情報の優先順位付けや旅程管理など、チームはより複雑な問題を解決できるようになります。
デザインシステムは、人事異動の際のオンボードプロセスを円滑にします。また、 UI UXデザインやコンテンツ制作に携わる新しい個人を容易にすることができます。
時代を超えた強いブランドに貢献 -デザインシステムの目的は、同乗する製品の背後にある特定のアイデンティティとデザインを伝えることです。デザインシステムは、インパクトのあるブランド作りに貢献し、人々がブランド体験を記憶するのを助けます。これにより、人々はブランドに対してより親しみを感じ、より信頼するようになります。

デザインシステム構築のための10ステップガイド

御社がデザインシステムを構築するための10ステップのプロセスを精緻化しました。

1.既存のDesign Processを徹底的に分析する。

どのようなプロセスであれ、戦略を立て、着手するための最初のステップは、現在の状況を理解することです。あなたの組織の現在のデザインプロセスを見直し、分析することで、あなたのブランドに最も適したシステムデザインをより理解することができます。次のような質問を自分に投げかけてみてください：

貴組織の現在のデザインアプローチについて教えてください。
あなたの組織が活用している既存のツールは何ですか？

製品チームの設計成熟度を確実に評価すること。これにより、組織で新システムを導入するのに必要な時間を大まかに把握することができます。

2.ブランドのアルファベットを決める

Determine your Brand's Alphabet

ブランドのアルファベットは、ブランド・アイデンティティ、すなわちブランドや製品の価値、ブランド・ランゲージにつながるだろう。ブランド・ランゲージは、形、フォント、色、アニメーション、音声、トーンから構成される。

デザイナーは、ブランドのアルファベットで定義された視覚言語を採用します。ブランドガイドラインを確認し、ステークホルダーに話を聞くことで、ブランドアイデンティティと言語を理解することができます。

3.現行製品AIに対する監査の実施

現行製品のUI監査を実施することで、プロダクトデザインの大きな課題である「デザインの重複」に取り組むことができます。監査では、次の2つの目標を達成することを目指します。

製品内の矛盾が大きい部分に注意を喚起する。
製品の最も使用されている要素、必須要素を見分ける。

UI監査は、複数のステップからなるプロセスです。主要なUIプロパティを特定し、分析し、コンポーネントでそれらを利用することが重要です。利用可能なツールを使って、スタイルシートに含まれる独自の色や書体の数を確認することができます。さらに、すべてのウェブサイトデザインを個々の要素に分解することができます。

4.システムの設計指針を確立する

優れたユーザーエクスペリエンスを実現するためには、デザイン決定の背景となる理由を理解することが不可欠です。また、明確な目標があれば、デザイン原則の定義やチームとの調整も容易になります。

デザインシステムプロセスを持ちたいですか？この質問から始めてください：

何を作っているのか
なぜ、それを作るのか
どのように構築するのか

デザインの原則は、ブランドの価値観やビジョンを反映させる必要があります。

5.コンポーネント・ライブラリの構築

パターン・ライブラリーとも呼ばれ、UIの機能的・装飾的な要素をすべて含んでいる必要があります。プロジェクト、ユーザーニーズ、ビジネスゴールに応じてコンポーネントを評価し、必要なものは残しておきます。

Build a Component Library

6.ルールの確立

デザインシステムは、デザイナーを特定のデザインの方向性に制限するために作られたものではありません。それどころか、あくまでもデザイナーや開発者に、クリエイティブな方向性を広げ、イノベーションの余地を与える基本的なフレームワークを提供するものであるはずです。

Alla Kholmatovaの著書にもあるように、Design Systemのルールに対する2つのアプローチです：

厳格なルール -デザイナーと開発者は、新しいパターンやコンポーネントを導入するために厳格なプロセスに従っています。
ルーズルール -デザイナーやデベロッパーが、より良いデザインを実現するために、厳しい制約にとらわれずに制作することを認めるルールです。

人生の他の多くの側面と同様に、これらのルールの適切なバランスを見つけることが不可欠であり、創造的でありながら、製品は一貫していることができます。

7.ガバナンスのモデルを選択する

ダイナミックで進化し続けるデザインシステムには、変更を承認し実行するためのわかりやすいプロセスが必要です。ガバナンスには、3つのモデルがあります：

孤高のモデル -個人または個人の集団が、デザインシステムのプロセスを直接「支配」する。
集中型モデル -1つのチームが担当し、システムの進化を導く。
Federatedモデル -複数のグループから複数の人がシステム設計プロセスを主導する。

それぞれのモデルに長所と短所がありますが、特にソリタリーモデルは、担当者一人がボトルネックとなり、多くの業務を遂行することにつながります。最適なのは、ニーズに合わせてさまざまなモデルを組み合わせて使うことです。

8.コンポーネント構造の定義

デザインシステムにおいて、機能コンポーネントの重複は重要な課題です。その結果、柔軟性に欠けるシステムとなり、新しいシナリオが生まれるたびにデザイナー（および開発者）は新しい要素を作り出さなければならない。

成功するシステムデザインは、再利用性が高く、ユーザーが製品の基盤として利用することができます。したがって、異なるコンテンツで再利用できる要素を開発することが推奨されます。

Reusable and Scalableコンポーネントの基準：

モジュール式 -独立した部品で、交換可能な要素。
コンポーザブル -既存のコンポーネントを融合して新しいコンポーネントを作成する。
カスタマイズ可能 -多くの文脈で機能する、カスタマイズ可能なコンポーネントです。

9.すべてのチームが統一された言語を使用するようにする

デザインシステムの目的は、シームレスなチームワークを促進することです。したがって、チームのワークフローにシステムを統合することが重要です。チームメンバーに価値を提供しながら、生産性を向上させることができるのです。

最初の統合プロセスで、さまざまな人がデザインシステムをどのように使っているかを理解することで、それに応じてシステムを修正することができます。

10. 定期的に変化を伝える

デザインシステムのプロセスは、組織とともに進化し、静的なものではありえません。したがって、組織にシステムを導入した後は、すべての変更点を伝え、組織に最新情報を提供し続けることが不可欠です。

簡潔でよく整備された変更履歴は、ユーザーが様々なアップグレードを理解し、それが自分の仕事にどのような影響を与えるかを理解するのに役立ちます。

3つの模範的な例でスタートする

アトラシアンデザインシステム

Atlassian Design System (https://atlassian.design/)

オーストラリアの有名なエンタープライズソフトウェア会社であるAtlassian Design Systemは、世界中に分散したアジャイルなチーム間でシームレスなコラボレーションを実現することを目的としています。

アトラシアンのコラボレーションツールとして広く使われているTrelloとJiraは、同社のデザイン哲学を完全に表現しています。この哲学とは、デジタル体験を活用して、チームと個々のチームメンバーの生産性と全体的な可能性を高めることです。

とはいえ、アトラシアンデザインシステムはアジャイル技術を提供し、製品計画から納品まで、プロジェクトのすべての段階を効果的に追跡します。これにより、最終的に製品の作成と納品に有益な結果がもたらされます。彼らのデザインシステムには主に以下のようなものがあります：

デザインガイドライン
ブランドスタンダード
製品
イラストレーション
プロトタイピング
マーケティング
パーソナリティ

IBMデザインシステム

IBM Design System (https://carbondesignsystem.com/migrating/guide/design)

IBMは、グローバルに事業を展開し、独自の設計体系に則った大規模なIT企業の代表例である。

ビジネスアドバイスや資金調達から、ソフトウェア制作、ITホスティング/マネジメント、ソフトウェアとハードウェアをつなぐソリューションまで、あらゆる分野に対応しています。

IBMの基本理念は、科学、理性、知性を駆使して、人間社会であれ、ブランドであれ、常に進歩を促すことである。

IBMによると、良いデザインを持つことは、単に必要なことではなく、ユーザーに対するコミットメントでもあるそうです。ここでは、Adobe、Axure、Sketchで作業する開発者やデザイナーに豊富なツールとリソースを提供する、同社のCarbon Design Systemの注目すべき機能を紹介します：

データビジュアライゼーション
パターン
コンポーネント
ガイドライン
チュートリアル

ユーバーデザインシステム

Uber Design System (https://baseweb.design/)

誰もが一度はUberに乗ったことがあるはずです。アメリカのテクノロジー企業で、フードデリバリー、ライドヘイリング、ピアツーピアのライドシェア、スクーターや電動バイクを使ったマイクロモビリティなど、移動に特化したサービスを展開しています。

Uberは、このようなサービスを、すべてのサブブランド、社内のもの、製品、プロジェクトで完璧に機能させるために、効率的なシステム設計が必要です。

Uber Design Systemの主な属性は以下の通りです：

ブランドアーキテクチャ
コンポジション
トーンオブボイス
モーション
イラストレーション
フォトグラフィー
イコノグラフィー
カラー
ロゴマーク
タイポグラフィ

初めてのデザインシステムを作る前に知っておきたいポイント

1.早くて明確なコミュニケーションは、あなたの新しいベストフレンド

社内の消費者をすぐに巻き込むのは難しいかもしれません。実際、フィードバックが曖昧であったり、アルファ版やベータ版のリリースサイクルのあまりに早い時期に提供されたり、参考にならなかったりすると、プロセスの妨げになることがあります。

建設的なフィードバックを確実に受け取るために、顧客であるデザインシステムのユーザーに必要なことを伝えてください。プレリリースの初期段階であれば、どのような意見が欲しいかを正直に、かつ明確に伝えましょう。これは、製品の最も重要な欠点を探しているのであって、高忠実度の批判を求めているのではないことを示すものです。

考えすぎて心が枯れても、遠慮せずにオーバーコミュニケーションすることを意識する。

2.追跡すべきは足音だけではありません

優先順位を決める際に重要なのが、デザインシステムの使用状況を把握することです。システムがどこで、誰に、どれくらいの頻度で使われているのか、更新の頻度はどれくらいなのかを把握することが不可欠です。

どのチームがどのバージョンのライブラリを正確に利用しているのか、日々統計的に収集することで、導入率やアップグレード、ダウングレードの状況を正しく把握することができるようになりました。

アップデートが少ないチームを特定すれば、アップグレードを阻害している問題を把握し、その後に是正することができます。

3.フィードバックの仕組みは、『GOT』のRhaeghalのように過小評価されている

システムがユーザーにとって価値あるものであるだけでなく、ユーザーが一員であると感じ、積極的に貢献したものであることを保証するために、人々がフィードバック（Slack、メールなど）し、システムに貢献するためのシンプルでわかりやすい方法を持つことは、重要なピースとなります。

できるだけ多くの場所でフィードバックを提供する方法と場所についての指示を常に提供し、何かを仮定すること、特に、あなたが最も明白だと思う場所でユーザーがそれを見つけることを仮定することはありません。

デザインシステムは組織に必要な北極星である

A Design System is the North Star Your Organization Needs

成功した、よく練られたデザインシステムは、企業のバックボーンの一部となり、一貫した、増幅された体験をもたらします。さらに、デザイナーと開発者は、基本的な構成要素を組み立てることに終始するのではなく、製品の目的をよりよく伝える機会を得ることができます。

ジェネラリストであれば、どんな人でもデザインを提供するパートナーになることができますが、デザインのスペシャリストだけが、現在の問題や課題、そして願望を見極め、あなたのためのデザインシステムを構築することができます。今は待っている時ではありません。この「デザインシステム構築の手引き」を読めば、生産プロセスの完全な変革に向けた取り組みが可能になります。