デザインシステムの主要な要素とそのメリットの伝え方 | アドビ UX 道場 #UXDojo

Nayane de Souza Hablitzel によるイラストレーション

ここ数年の間に、世界中の様々な規模の企業が独自にデザインシステムを構築しています。こうしたデザインシステムの採用は、デジタル製品をデザインして構築する方法を変革し、デザイン管理の規模拡大にも貢献しました。

この記事では、デザインシステムの主要な構成要素とは何か、そしてデザインシステムを構築、採用、維持するために関係者を巻き込む方法について、簡単に紹介します。

デザインシステムとは何か

一般的な定義として、デザインシステムは、チームが製品をデザインし、具体化し、開発するために必要な要素をすべて集めた唯一のソースであり、一貫性と全体的なまとまりを確実にして、生産性と効率の向上を達成し、その結果として顧客体験とビジネスの ROI を向上させるものです。

既に多くの企業が、製品開発のガイド役としてデザインシステムを活用しています。アドビの Spectrum、Shopify の Polaris、Google の Material Design、IBM の Carbon などはそのほんの一部です。これらのデザインシステムは、デザインとコードの一貫性を確立し、再利用を促してつくり直しを減らし、デジタル製品のアクセシビリティとユーザビリティを向上させるために役立っています。

デザインシステムの主要な要素

目的と価値

プロジェクトの最初からデザインチームが明確にゴールを理解して、それに従って行動することは大切です。また、ブランドや製品の価値をチームが理解することは、ブランドの目標に忠実であるために必要です。チームが実際にどの方向に進むのか、それはなぜかを把握できていれば、製品の一貫性が保たれるだけでなく、デザイナー同士がより協調して働けるようになるでしょう。

デザイン原則

デザイン原則も掘り下げるべき要素です。具体的に何をつくりたくて、それがどのような見た目をしているべきなのか。製品の目的に沿って指針をまとめます。チームが何をつくろうとしているかをきちんと理解できれば、デザインついてより意味のある決定を行えるようになります。

ブランド言語とアイデンティティ

色、フォント、アイコン、シェイプ、アニメーション、音声、ロゴの使用方法等は、スタイルを決定する主要な項目です。これを文書化し、ルールやガイドラインを確立すると、チームが要素の組み合わせを適切に行えるようになります。これらのルールはブランドを象徴するものであり、個性的で一目でわかる製品をつくるために役立ちます。さまざまな製品にどのプラットフォーム上でも一貫したビジュアルデザインをつくり出すことができれば、より良い顧客体験につながるでしょう。

コンポーネント

コンポーネントは、CTA ボタン、フォームのフィールド、チェックボックスなどの UI 要素で、デザインシステムの中核です。デザイナーによってつくりだされ、開発者がコーディングしたコンポーネントを再利用することで、毎回インターフェイス要素をゼロからつくり直す必要がなくなるため、ワークフローの効率化や、時間の節約、部品の重複などを避けることができます。また、コンポーネントはラピッドプロトタイピングにも便利ですが、その際は、機能的な動作の指定が必要なことを忘れないようにしましょう。

パターン

デザインパターンは、典型的な構築方法や推奨事項をまとめたもので、コンポーネントを効果的に使用するために必要になります。標準化されたパターンは既視感をつくれるため、ユーザーにとって物事が迅速かつ容易になります。そのため、サービスの理解や、信頼の確立にも役立ちます。例えば、同じパターンの登録フォームを、デスクトップとモバイルの両方で使用するのは良いアイデアです。

ドキュメンテーション

デザインシステム自体を説明するドキュメントも必要です。含めるべき情報には、製品のルック & フィール、UI パターンの使用例、正しいタイポグラフィのスケール、コーディング標準とベストプラクティスなどがあります。

デザインと実装を一緒にドキュメントにまとめることで、デザイナーは実装について、エンジニアはデザインガイドラインについて知ることができます。これは、両者が製品とユーザーにとってより良い判断を下すための役に立ちます。

ドキュメンテーションが、どこまで包括的で詳細であるべきかという点についての決まりはありませんが、チームがスタイル、コンポーネント、パターンを正しく使用するのに役立つものであるべきです。例えば、Shopify の Polaris のドキュメントには、スクリーンリーダーを使うユーザーに構造を提供して読みやすさを向上させるためのアクセシビリティガイドラインの項目があります。

デザインシステムの売り込み方

デザインシステムは多くの組織に関わるものですが、それら全ての組織に受け入れてもらうことは、時として困難です。デザインシステムを使ったことも構築したこともない人たちに、デザインシステムのコンセプトと利点を説明するのは難しいものです。

デザインシステムを売り込む最良の方法のひとつは、それを製品の一部のように扱うことです。どんな製品にもユーザーがいて、彼らには製品の不整合や欠点が見えていることをステークホルダーに指摘し、その改善のためには開発プロセス全体を通じて完璧に近づける必要があることを伝えるのです。

リサーチを実施して製品の改善可能な箇所を見つけられれば、デザインシステムの必要性をさらにアピールできます。何を直すことができて、どのようにデザインシステムは役立つのかを明確に語れるからです。

コラボレーションを強調することも効果的です。顧客はもちろん、社内外のステークホルダーをプロセスに巻き込むことが、より完成度の高い製品を目指すうえでどれほど重要かを説明しましょう。部門ごとに別れて作業することがいかに出荷を遅らせ、重複作業を生み出しているかを示し、デザインシステムが非効率なワークフローに終止符を打つ鍵になることを指摘してみましょう。

デザインシステムのビジネスへの影響

デザインシステムはビジネス面にも影響します。ここでは、デザインシステムの構築とその継続に対する支援を得るために有効な、ビジネスに関わる主要な利点を確認します。

拡張性

再利用可能な部品を含んだデザインシステムを構築することは、特に、拡張や進化、あるいはさまざまなユーザーニーズへの対応を、短期間で求められるプロジェクトに適しています。e コマース、金融、政府機関のような大規模な組織にはとりわけ効果が期待できます。

例えば、セールスフォースには 200 人以上のデザイナー、9 つの主要な製品グループ、数十の買収した製品が存在します。チームはグローバルに分散しており、異なるグループに属するデザイナーは互いの仕事内容を知らないため、一貫性のないユーザー体験が、ごく簡単に製品に紛れ込みます。セールスフォースの Lightning Design System は、ビジネスニーズに基づいて常に進化を続けることによりこの問題を解決します。組織内のすべてのチーム、製品、プラットフォームをサポートし、ブランドとともに成長する「生きたデザインシステム」です。

一貫性

2019 年に行われたデザインシステムに関する調査によると、デザインシステムの最も評価の高い属性は一貫性と効率でした。デザインシステムは、デザインパターンや製品体験を構成する言語の不整合の特定と解消に役立ち、デザインの一貫性とブランド全体のまとまりを向上させます。これは、ブランドのタッチポイントが複数のチャネルやプラットフォームに存在する場合に、特に有効です。

また、一貫性は、ユーザー体験をより予測しやすくします。これはとても好ましいことで、顧客の認知負荷を軽減して、彼らの生活をより快適にできます。デスクトップとモバイル環境で製品が同様に動作すれば、ユーザーは環境を切り替えても改めて適応する必要はありません。

さらに付け加えると、製品のイメージが一貫していればいるほど、顧客にブランドを認知してもらえるようになるでしょう。

効率

一貫性を全てのプラットフォームで確保すると、開発やデザインの効率が向上します。コンセプトであれコードであれ、作成時の同じ作業の繰り返しが減って自動化が促進されるため、時間とコストを大幅に削減できます。デザイナーや開発者の自由な時間が増えることで、より革新的な仕事に取り組むなど、予算を成長のために使えます。

効率について検討する際は、最初に、デザインシステムが使われることになる状況や文化を理解しておきましょう。例えば、効率を高めることが主目的であれば、できるだけ多くの既存のパターンを定義して、チームの作業をスピードアップさせることができます。一方、創造性を高めたいのであれば、デザイナーがより柔軟に対応できるように、パターンを最小限に抑えることを考えるかもしれません。

チームワーク

デザインシステムは、デザイナーのためだけに存在するのではありません。デザイナー、開発者、製品マネージャー、ユーザーリサーチャー、その他あらゆるステークホルダー同士のコラボレーションを円滑にします。これも、作業全体の効率化に貢献します。

デザインシステムは、製品の体験やルック & フィールのビジョンを具体的に共有できるため、抽象的な情報を理解する際に生じる錯覚を低らすことも期待されます。

おわりに

開発しようとしているものがシステムであるということを忘れてはなりません。ある組織でうまくいったことが、状況の異なる別の組織でも通用する可能性は低いでしょう。つまり、他のデザインシステムをコピーするだけでは駄目なのです。ブランドに固有のもの、解決しようとしている問題、デザインシステムの役割の分析は必須です。開発に着手する前に、この記事で紹介した主要な構成要素についても検討が必要です。

調査を終えて、デザインシステムを売り込むための準備ができたら、一貫性と効率の改善を強調しつつ、ビジネスケースに焦点を当てて説明しましょう。デザインシステムが、予算超過を防ぐ上でも効果があることを最初から明確にしておけば、マネージャーからの賛同を得やすいでしょう。

デザインシステムの構築は大変な作業ですが、その分の見返りは十分にあります。長い目で見れば、全ての人の活動をより快適なものにしてくれるはずです。最終的には、製品のユーザー体験の向上と、組織内のワークフロー改善に集中できるようになるでしょう。

この記事は The Main Pillars of Effective Design Systems（著者: Oliver Lindberg）の抄訳です