共通言語として機能する効果的なデザインシステムを構築する方法
本記事は北欧のデザインメディア DeMagSign の翻訳記事です。
ユーザーの行動が急激に変化し、開発ツールがより密接に統合されるにつれて、デザインシステムは世界的ブランドにとって一時の「トレンド」から最大の投資先へと変化しています。Work & CoのデザインパートナーであるLauren Shapiro氏が、共通言語として機能するデザインシステムを構築する方法のヒントを紹介します。
・・・
デザインシステムは、ここ数年の間にあらゆる産業において一時の「トレンド」から本格的な投資先へと変化しました。私たちはデザインシステムの専門チームや運用管理の役割をつくり、その強化のために多額の投資をする企業をみてきました。
この動きは、ユーザーの行動や顧客接点が急速に変化し、企業には効率性を追求することが求められ、さらには新しいデザインや開発のためのツールがより親密に融合しているという状況の中で生まれています。
優先すべき事柄が非常に多いため、Figmaでのコンポーネントの作成はタスクの中でもっとも簡単なもののように感じるかもしれません。しかし、デザイナーやほかのデザインシステムのリーダーたちはいままで以上に技術やリーダーシップ、組織改革など、多種多様かつ複雑で繊細な仕事を求められています。
デジタルプロダクトエージェンシーであるWork & Coは、IKEAやAirbnb、Vistaprint、PGA Tour、GoFundMe、H&R Blockなどのクライアントと提携して将来を見据えたデザインシステムのガバナンスモデルの作成や立ち上げ、構築をする際、このような変化を直に目撃してきました。
「私たちの経験からいえば、ビジョンやマインドセット、プロセスも含め、共通言語を最初から確立し、ステークホルダーの分野横断的な助言を取り入れながら構築することで、影響力が長く保たれるデザインシステムが作られるのです。」
共通のビジョンにそった方針の決定
クライアントにデザインシステムの構築を依頼された際、私たちはまず最初にユーザーを含む多様なステークホルダーの視点を取り入れ、デザインシステムの根幹となる方針を定めることに集中します。
デザインシステム構築の成功は、良い関係性を築くことから始まります。早い段階で関係性を構築することで、デザインシステムによるビジネス変革の可能性を保証することができるのです。すべてのデザインシステムはそれぞれ独自のゴールのために開発されていますが、それでもステークホルダーを集結させるための基盤となる価値観(KPIも含め)があるということです。
- 「つながりを持つ」というカルチャー:デザインシステムはプロダクトチーム同士、特にデザインチームと開発チームが繋がり、再連携するのに役立ちます。最高のデザインシステムは、そのシステムを利用する人々を反映し、かつ、組織を代表するひとつの信頼できる情報源となっているのです。
- 永続的な投資:人々の働き方を変えることは、費用と時間がかかるものです。組織がプロダクトライフサイクルを展開するにつれて、徐々にガバナンスプロセスはチーム間のまとまった連携や用語の共通化に役立ってきます。チーム体制に合ったプロセスをつくることで、顧客によりよいサービスを提供することができ、結果としてすべての人の利益へつながるのです。
- ビジネス全般のパフォーマンス向上:基盤となる構造を標準化させることで、組織規模の効率的な拡大、コスト削減、迅速なイノベーションの推進に役立ちます。標準化された再利用可能なシステムをもつことで、チームはテストや改善をより効率的におこなうことができます。
デザインシステムの核となるのは、効果的で有意義かつ持続可能な製品を、規模間に合わせて繰り返し作って世に出せるモデルを構築することにあります。
反復的な考え方を設定する
デジタルプロダクトと同様に、デザインシステムはアウトプット、ツール、プロセスにおいて共通する考え方に根ざした「生き物」として扱うべきです。ここではデザインシステム成功のためのコツと事例をいくつか紹介します。
1. 顧客を中心に据える:ビジネスと違い、デザインシステムの優先事項はユーザーからの助言や意見によって進化していくべきです。健全なフィードバックループの中では、製品のコンテキストを背景としてデザインのコンポーネントやパターンが設計、検証される必要があります。IKEAとの仕事の中では、プロダクトロードマップを検討する前にほとんどのUXパターンを住宅や実店舗でテストする必要がありました。
2. 協力関係醸成のアシスト:デザインシステムがあまりにも巨大で複雑な場合、システムの利用者は最善手に従うことが難しくなります。GoFundMeとの仕事の中で、私たちは各分野(プロダクトデザイン、エンジニアリング、マーケティング、データなど)に専用のセクションを作成し、組織に合わせてオンボーディングや分野を超えた協力関係を築くための策を最適化しました。各セクションのデザインシステムの利用者はFigmaとReactのコンポーネントを具体的な状況に合わせて利用することができたことで、責任感の醸成と利用の拡大に大きく貢献しました。
3. 成功を保証するため、シンプルにする:字体やフォントサイズ、色、要素を少なくすることでメンテナンスがしやすくなります。これによりユーザーが一貫したデザインパターンを確立しやすくなり、体験の質が向上します。私たちはデザインシステムが問題の80%を解決し、そこから新しいパターンを確立するための手助けをするものと考えています。
4. ブランドのもっとも根幹的な要素に忠実であること:まずはじめに、自社ブランド独自の要素を決めておきます。システムを2年、5年、10年と発展させていく中で、この要素は意思決定や製品の改善を重ねる際の大切な指針になります。
すべてのブランドにはユニークな特徴があります。たとえばVistaprintでは、自宅で印刷物を受け取る体験をデジタル上で疑似的に得ることから喜びの瞬間を生み出すことが重要な独自要素でした。喜びの瞬間をすべてのコンポーネントとパターンに取り入れるため、私たちは彼らと一緒にビジュアルやユーザーエクスペリエンスからコンテンツ、声のトーン、モーションまで検討しました。このブランド方針は、デザインシステムのアップデートの重要な方針として機能しています。
5. 効率は重要である:計画性やUX上のタスク、取り組みやすいドキュメントに注力して、デジタル製品と同様にしっかりとデザインシステムに取り組みましょう。よりよいソリューションを生み出し、より早くユーザーに届けられるようになれば、すべてのステークホルダーがデザインシステムの効率的な生産性を評価するはずです。これに加えて、透明性のあるガバナンスとプロセスをもつことも重要になってきます。
最初からガバナンスを確立しておく
発達していくテクノロジーやユーザー行動と同時に生まれるさらに複雑な組織課題に柔軟に対応できるよう、デザインシステムも同じく柔軟でなければなりません。
ガバナンス(ワークフロー、内部プロセス、組織構造)への適切な対処は、組織そのものと同じくらい唯一無二なものです。多くの場合、製品規模やデザインチームの人数、プロダクトロードマップなどの要因に左右されます。
私たちの経験からいえば、デザインシステムに専門のチームを配置することが、ビジネスの長期的な成功にとって重要になってきます。実際にはさまざまな形をとることがあります。
- 集権型:IKEAでは、多くの製品のエコシステムの規模が集権的なガバナンスモデル採用の主な要因でした。私たちはIKEAと提携して、デザインシステム専門チームを構成し、雇用しました。専門チームは、各製品のデザイナーと連携し、必要に応じてそれぞれの製品の貢献度を組織全体のデザインシステムに組み込み、組織全体で利用できるようにしました。
- 連合型:ある世界的な金融機関との仕事の中で携わった消費者向けサービス製品は、ひとつの専門チームで対応するには複雑で緻密すぎました。その代わり、私たちは各プロダクトチームから代表者を集めて、デザインシステム協議会(Design Systems Counsil)を立ち上げました。基本システムのアップデートは、協議会メンバーの能力に基づいて議論と優先順位付けをおこなったうえで実行されました。
集権型と連合型のどちらのモデルも、メンバーの貢献の促進と集団的な意思決定の採用、複数のプラットフォームでの関連性の確立によって、チームメンバーの生産性をうまく高めました。


変化を促す手がかりとしてのデザインシステム
効果的なデザインシステムの推進者として多様な意見を受け入れ、協力関係を再構築することで、製品をよりユーザー中心でさまざまな人が利用しやすいものにすることができます。
私たちWork & Coは、デザインシステムがデジタル体験の実現に影響を与えるだけでなく、企業の改革をの手助けとなり、協力的で文化的なつながりの一助となることを目の当たりにしてきました。簡単なことではありませんが、デザイナーがコミュニケーションを通じて徐々に既存の状況を変え、企業全体での改革を引き起こす様子も目にしてきました。
最後になりますが、人々がデザインシステムでどのように共通言語をつくり出しているのかに私たちはいつも注目しています。私たちのものの見方は、意欲的なクライアントや、その優秀なプロダクトチーム、そして同僚との経験によって形作られているのです。Design Mattersのコミュニティメンバーの多くと同じように、Work & Coは、ほかの人々の意見に耳を傾けることによってデザインシステムの考え方や実践方法の視野の拡大を大切にしています。あなたの視点を私たちと共有したり、変化にむけたロードマップを構築方法をさらに詳しく知りたい場合は、お気軽に私たち(newbiz@work.co)にご連絡ください。
・・・
この記事は、Design Matters 22で講演をおこなったLaurenが執筆したものです。彼女の講演「Digital Health Tools:Meeting People Where They Are(デジタルヘルスツール:人々がいる場所で出会う)」の講演はこちらからご覧いただけます。

Written by Alejandro Matamala (Design Matters)
Translation brought to you by Spectrum Tokyo
カバー写真:High-Resolution Image Synthesis with Latent Diffusion Models(出典:Runway)
Written By
