Featured image: Business vector created by Freepik
UXエンジニアという言葉を聞いたことがありますでしょうか。 私もここ数年で聞くようになった言葉です。UXエンジニアという仕事はまだ生まれたばかりで、定義が曖昧ですが、私は一言で言えば「UXデザインをする、もしくはその工程に関わるエンジニア」のことだと考えています。最近クックパッドさんでもUXエンジニアを採用しており、「UXエンジニア」って何する人？ クックパッド流・開発力を高めるDesignOpsの進め方は私の印象に残っている記事の一つです。
グッドパッチがチーム全員でデザインをしているように、UXデザインはデザイナーだけの仕事ではありません。例えばUIデザインがよくてもページの読み込みが遅いとユーザーの体験は悪くなってしまいます。その他にもエラーメッセージの言葉や見せ方、フォームのバリデーションなどエンジニアの視点からもUXについて考えることはたくさんあります。そのうちの一つがプロダクトをスケールする際のデザインと、エンジニアリングのシームレスな連携だと私は考えています。 この記事では、UXエンジニアが知っておきたい「デザインシステム」について考えてみました。大規模な開発に関わるエンジニアやデザインシステムの構築に取り組んでいる方に参考にしていただけると嬉しいです。
【関連記事】【事例あり】デザインシステムとは？作り方を5ステップで解説！事例や導入メリットも
DesignOpsとは
デザインシステムの話に入る前に、その前提となるDesignOps（デザイン運用）の話をしたいと思います。DesignOpsという言葉もここ最近注目されているワードです。大規模なシステムになるほど、デザイナーの数もエンジニアの数も増え、崩れやすく運用の難しいデザインとなっていきます。そういった環境に関わったことのあるデザイナーなら誰しも経験したことがあるのではないでしょうか。
DesignOps, then, is everything that supports high quality crafts, methods, and processes.
DesignOpsは、高品質のプロダクト、メソッドやプロセスをサポートするすべてのことです。
プロダクトをスケールする際に、一貫性を保ちつつよりスピード感を持って実現することがDesignOpsの目的です。そしてそれを実現するためには、デザイナーとエンジニアには共通言語が求められます。それこそがデザインシステムであり、こうした上流工程にまで及ぶUXデザインに対して包括的な貢献ができるのがUXエンジニアだと私は考えています。
デザインシステムとは
組織でデザインを運用していくためにデザインシステムは存在します。それではデザインシステムとは具体的にどのようなもの指すのでしょうか。
一言で説明するのはとても難しいのですが、Why Design Systems Failを書いたUna Kravetsさんはデザインシステムを以下のようなものを個々に組み合わせたもの、もしくは以下全てを含むものと定義しています。
・Style guide or visual pattern library スタイルガイドやパターンライブラリ
・Design tooling (e.g. Sketch Library) デザインツール（Sketchライブラリなど）
・Component library (where the components live in code) コンポーネントライブラリ
・Code usage guidelines and documentation ソースコードの使用方法に関するガイドラインやドキュメント
・Design usage documentation デザインの使用方法に関するドキュメント
・Voice and tone guideline トーンとマナーのガイドライン
・Animation language guideline アニメーションのガイドライン
よくスタイルガイドとデザインシステムの差について言及されることがあります。上記の説明とこちらの図を参考にするとデザインシステムはスタイルガイドよりももっと大きな概念であることがわかります。
引用：Design systems, style guides, pattern libraries. What the hell is the difference?
要するにデザインシステムは「デザイナーが作るスタイルガイドだけではなくデザイナー、開発者、プロダクトマネージャーなど、チーム全体で共有されている思想やコンポーネントライブラリなどを合わせたサービスの中核部分のようなもので、デザインとコードの両方において一貫性があり、動的で、再利用可能で維持可能である必要がある」という言葉ではなく成果物で説明するとMaterial Designを想像してもらうとデザインシステムとは何なのかという問いに対しての理解が早いかと思います。
どうしてデザインシステムを作るのか
前章でも説明したように、デザインシステムには明確なルールはなく包括する範囲は様々です。
しかし、達成したい課題としては共通して以下の3つを挙げることができると思います。
1. 一貫したデザインルールやブランドイメージを構築すること
新しく入ったチームメンバーにはプロダクトの背景やルールを共有するという作業が発生します。しかしこれは一番属人化しやすい作業です。今後デザインの運用を続けるにあたり、デザインルールは常に新しいものへと更新される必要があり、育て続けなければいけません。
2. デザイン概念や原則を共有すること
これはそのプロダクトの中で確立されているデザイン原則を言語化しようという意味合いでもあります。Design Systemsの中では「Shared Language（共有する言語）」とも書かれていますが、チームで共通した単語を使用することで、無駄な混乱や議論を防ぐことができます。またここで差すデザイン原則には単語の他にチームの思想や価値観なども含まれます。
3. Single source of truthを実現すること
Single source of truthは「信頼できる唯一の情報源」と翻訳されます。つまり重複した内容を様々な場所で管理せず、一箇所に集約するということを意味します。またこれはソースコードに限らず、ドキュメントやデザインに関しても同様です。これにより関連する部分が明確となり、意思決定が早くなり保守性の高いプロダクトとなります。
そしてこれらの課題を達成することで「プロダクトをより効率的で一貫性があるように保つこと」が真の目的です。
デザインシステムの実例
昨今では有名な企業でのデザインシステムの実例が増えてきています。こちらに私が参考にしたデザインシステムを一部ご紹介します。
Airbnb
Airbnbは空き部屋を貸したい人（ホスト）と部屋を借りたい旅人（ゲスト）とをつなぐWebサービスです。Airbnbのデザインシステムはとても有名です。最近オリジナルフォントを作ったことも話題となりました。
Zendesk Garden
Zendeskは世界各国で利用されているカスタマーサービスのソフトウェアです。ZendeskのデザインシステムであるZendesk Gardenはデザインツール「Figma」でも紹介されています。
Pattern Lab
Atomic Designの本家、Brad Frost氏率いるデザインチームが作ったデザインシステム。Atomic Designで設計されたデザインシステムを見ることができます。
Shopify
Shopifyはネットショップ開設を手軽に行うためのサービスです。デザイン原則やデザインルールからコンポーネントの実装方法までとても細かくまとめられています。
Atlassian
Atlassianはソフトウェア開発ツールのJiraやかんばん方式をWeb化したツールのTrelloなどの自社サービスをもつ会社です。トップページがカードデザインになっており、Brand, Marketing, Productに大きく別れています。一つ一つの説明がとても詳しく、イラストレーションの思想やガイドラインまで載っています。
Uber
Uberは一般の方がドライバーとなれる配車サービスです。最近行った、リブランディングの話からはじまり、途中からデザインシステムについて言及されています。
その他、数多くデザインシステムをみたいという方はAdele by UXPin に様々な企業のデザインシステムがまとまっています。
さいごに
ここまでデザインシステムについて書いてきましたが、必ずしもデザインシステムを構築しなければいけないということは全くありません。デザインをスケールさせていく必要のないプロダクトにはあまり向きません。
しかし、経営レベルにもデザインが求められるようになってきている潮流の中で、今後さらにデザインの一貫性が求められるようになってくるのではないでしょうか。
DesignOpsという言葉が生まれる前からDevOpsという言葉が存在します。プロダクトの開発と運用の効率化に焦点を当てた言葉ですが、エンジニアを取り巻く環境ではもっと前からこの問題の模索が続けられています。それが複数人のソースコードをバージョン管理するGitであったり様々なテストツールであったりします。
今回デザインシステムを調べる中で主導者にエンジニアとしてのバックグラウンドを持つ人が多い理由はそこにもあると考えています。より厳密にデザインを管理することでユーザーの体験に与える影響はこれからますます大きくなるのではないでしょうか。それこそがUXエンジニアという職種の大きな役割の一つだと私は考えています。
参考文献
