デザインシステムエンジニア（DSE）：職務内容、責任、スキル

デザインシステムエンジニア（DSE）は、単にデザインと開発のギャップを埋めるだけの役割ではなく、ピクセルからコードへのスムーズな移行をサポートをします。このガイドでは、DSEの仕事内容、必要なスキルセット、製品開発サイクルでの位置づけについて包括的に深く掘り下げていきます。

DSEを目指す方、採用担当者の方、あるいはデザイン・開発関連の職種に興味がある方など、ぜひご一読いただき、DSEの多面的な役割を紐解いていきましょう。

主なポイント：

DSE は、デザイナーとデベロッパーをつなぐ重要な役割を担い、UIコンポーネントやデザインガイドラインを標準化する。
DSEは、コードやデザインにとどまらず、品質保証、文書化、チーム間の連携においても積極的な役割を果たしている。
HTML、CSS、JavaScript などのフロントエンド開発言語や、Sketch、Figma などのデザインツールの習得は、DSEにとって非常に重要である。
DSEは、製品開発サイクル全体を通じて重要な役割を果たし、デザインシステムの一貫した実装と更新が保証される。
Gitのようなバージョン管理システムやReactのようなフレームワークに詳しければ、DSEによるデザインシステムの効果的な管理および拡張の能力が上がる。

UXPin Mergeのテクノロジーでデザイナーとエンジニアのギャップを埋め、より効率的にサービスを提供しませんか。詳細とアクセスリクエスト方法については、Mergeのページをぜひご覧ください。

デザインシステムエンジニア（DSE）とは

DSE（デザインシステムエンジニア）は、視覚的なコンセプトから機能的なコードにシームレスな移行をします。

また、DSEは、UIコンポーネントとデザインガイドラインを標準化した中央レポジトリであるデザインシステムを管理および維持し、デベロッパーとはコードを、UXデザインチームとは UX（ユーザーエクスペリエンス）とデザイン原則を共有します。

そして DSE には、デザインツールやデザイン思考から、HTML、CSS、Javascript のコードの記述や、React、Vue、Angularなどのフロントエンド技術の使用までの幅広いスキルがあり、デザインシステムの一貫性、コンポーネントの構造、デザインシステムチーム内のチーム横断的な連携を実現するエキスパートです。また、DSE で、デザインと開発のワークフローが一貫性のある合理的なものに保たれます。

DSE と UXデザイナーやフロントエンドエンジニアとの違い

デザイナー、デベロッパー、DSE の３つの役割がすべて果たされることで、ユーザーのニーズから機能的で優れたデザインの製品へとシームレスに移行することができます。各ポジションが他のポジションを補完することで、何一つ抜け落ちることがなくなるのです。

UX デザイナー：製品の全体的な UX に焦点を当てる。彼らの領域はユーザー中心のデザインであり、コードではない。
デベロッパー：デザインを機能的なアプリケーションに変える。UX の原則を深く理解している場合もあれば、そうでない場合もある。
DSE：デザインと開発の間のギャップの橋渡しをする。デザインシステムを実装し、製品間の一貫性と拡張性を確保する。

デザインシステムの開発と維持において、この３つはどのように補完し合っているのでしょうか：

ユーザーインサイト： UXデザイナーは貴重なユーザーインサイトをもたらし、エンドユーザーにとって何が最適かをチームに導く。
技術的な実装：デベロッパーは、内部ですべてがきちんとスムーズに動くようにする。アプリケーションが動かなければ、ユーザーインサイトもデザインシステムも意味がない。
デザインの拡張性： DSEは、デザインの一貫性を維持、プロジェクトのさまざまな部分で実装しやすくなるようにすることによって、デザインチームとエンジニアリングチームの両方がより効率的に作業できるようになる。

DSE の仕事内容

デザインシステムの構築および更新：基礎となるデザインシステムを構築し、プロジェクト要件に合致するように更新し続ける。
QA（品質保証）： UI コンポーネントの自動テストを実施し、デザインと機能の基準を満たしていることを保証する。
ドキュメンテーション：デザイナーとデベロッパーがデザインシステムを理解できるようにする、明確で実用的なガイドラインを作成する。
バージョン管理： Git のようなツールを使って変更を管理し、各更新が適切に追跡され、文書化されるようにする。
コードレビュー：コードのレビューに参加し、デザインガイドラインの遵守とコードの品質を保証する。
チームを超えた連携：デザインチームと開発チームの連絡役となり、デザイン原則がコードに正確に実装されていることを確認する。
トレーニング：ワークショップやトレーニングのセッションを実施し、デザインシステムの構成要素やベストプラクティスをチームメンバーに周知させる。
ツールの統合：デザインシステムの導入をしやすくする Storybookのようなツールのセットアップおよびメンテナンス。
パフォーマンスの最適化：定期的にデザインシステムを監査し、冗長性を排除して読み込み時間を改善する。
ステークホルダーとのやり取り：デザインシステムの状態、変更点、プロジェクトへの影響について、ステークホルダーに定期的に報告する。

DSE に必要なスキル

DSE は専門職ですが、多面的な要求に応えるには幅広いスキルセットが必要です。ここでは、DSE に必要なハードスキルとソフトスキルを見ていきましょう。

ハードスキル

フロントエンド開発： HTML、CSS、JavaScriptは言うまでもなく、強固なデザインシステムを実装するための基盤である。
フレームワークとライブラリ：ReactやAngular、Vueが最新の Webアプリケーションを強化していることを考慮すると、多くの場合はこのようなテクノロジーに詳しいことが求められる。
バージョン管理： Git に詳しいことも、デザインシステムの変更の追跡および管理には譲れない条件である。
デザインツール： Sketch、Figma、または UXPinを使いこなすことで、デザインチームとの連携がしやすくなり、UI コンポーネントの作成や修正がしやすくなる。
自動テスト： Jest、Mocha、または同様のテストフレームワークのスキルにより、デザインシステムの品質と信頼性を保証する。
アクセシビリティ基準： WCAGガイドラインを理解して、デザインシステムが包括的で法令に準拠していることを保証する。

ソフトスキル

コミュニケーション能力：複雑な技術的アイデアをデザイナー、デベロッパー、ステークホルダーに明確に伝えることで、それぞれの負担を軽くする。
細部へのこだわり：些細な視覚的、機能的な不一致がプロジェクトを頓挫させることがあることから、正確さが鍵となる。
問題解決能力：デザインシステムは複雑であり、迅速かつ効果的な問題解決能力が求められる。
連携：この職務はデザインと開発が交わるところに位置するため、チームワークのスキルが不可欠である。
時間の管理：デザイン、開発、ステークホルダーとのミーティングをこなすには、強力な組織力が非常に重要である。

製品開発サイクルにおける DSE の役割

DSE は、製品開発サイクル全体を通じて、デザインと機能性が確実に一貫した拡張性のある製品に統合されるようにし、さまざまな部門間の橋渡し役として機能して、デザインシステムの一貫性と最新性を維持します。

インセプション段階

アイデアの検証や計画段階で、DSE は、再利用や転用が可能なデザインシステムやコンポーネントの候補を評価します。また、プロダクトマネージャーやデザイナーと密接に協力し、デザインシステムのスコープ、実現可能性、技術要件を確定します。

デザイン段階

DSE は、UX/UIデザイナーと積極的に協力してデザイン批評を行い、機能性を損なうことなくデザインシステムを実装するための技術指導を行います。

例えば、UXデザイナーが新しいボタンスタイルを提案する場合、DSE はそのデザインが既存のパターンに適合し、コードで簡単に実装できることを確認します。

開発段階

DSEは、承認されたデザイン要素を再利用可能なコードコンポーネントに変換し、デベロッパーによる実装がしやすくなるための文書も提供します。

例えば、デザイナーが新しいカードのレイアウトを作成した場合、DSE はそれをコードに転送し、再利用可能なコンポーネントにして、さまざまな場面での実装方法を文書化します。

ローンチ後

リリース後、DSEはデザインシステムのコンポーネントの使用状況を監視し、スケーラビリティとパフォーマンスのアップデートを行います。さらに、継続的な改善のためのフィードバックも集めます。

例えば、ナビゲーションのコンポーネントが期待したほど直感的でないことがアナリティクスで示されると、DSE はデザイナーやデベロッパーと協力して、そのコンポーネントを最適化します。

DSEになるには

DSEになるための学歴およびキャリアのステップ

学士号（+- 4年）の取得：通常は、コンピューターサイエンス、グラフィックデザイン、または関連分野の学士号を取得する。
関連スキルを学ぶ：学位と並行して、HTML、CSS、JavaScript をマスターし、Figma、UXPin、Sketch などのデザインツールに詳しくなっておく。
エントリーレベルのポジション：ジュニアレベルのデベロッパーまたはデザイナーとしてスタートし、通常１～２年の経験が求められる。
専門トレーニング：デザインシステムや UX/UI デザインの専門コースを数カ月から１年間受講する。
中堅レベルの役割：フロントエンドデベロッパーや UX デザイナーのような役割に移る。
デザインシステムの経験を積む：中堅レベルのポジションでは、デザインシステムを扱うプロジェクトに集中する。
DSE への移行：十分な経験と強力なポートフォリオがあれば、DSE の役割に移行する。

DSE としての成長の見込み

リードDSE：プロジェクトやチームをリードする。DSE として少なくとも２～３年の、実績のあるリーダーシップスキルが求められる。
デザインシステムマネージャー：プロジェクトおよびデザインシステムを複数統括。４～６年の専門経験が求められる。
デザインまたはエンジニアリングディレクター：部門全体を統括して頂点を極める。一般的に１０年以上の現場経験と豊富なリーダーシップが求められる。

DSE に必要なもの

ここでは、DSE にとって非常に重要なツールのカテゴリーと例を見ていきます。このようなツールに詳しいと、それがキャリア展望に役立ち、この複雑な役割に対する理解が深まるでしょう。

バージョン管理システム

Git：バージョン管理の定番で、変更の追跡や他者との共同作業に欠かせない。
SVN：Git ほどよく使われてはいないが、特定の企業環境では価値がある。

デザインツール

Sketch：強力なデザイン機能がある。ただし Mac 専用。
Figma：クラウドベースで連携ができ、リアルタイムの変更が可能。
UXPin Merge：デザインコンポーネントとコードコンポーネントを組み合わせて再利用できるユニークな機能。

プログラミング言語とフレームワーク

HTML： Web開発の構成要素
CSS：スタイリングとレイアウトに不可欠。
JavaScript：インタラクティブ性を実現し、Webの動作を制御する。
React：コンポーネントベースのアーキテクチャーとクロスプラットフォームの効率性により、デザインに最適なライブラリである。

UXPin MergeとReactを使ってデザインシステムのデザイン、開発、保全、拡張する

デザインシステムの構築と維持は、多部門のチームと膨大なツールセットを含む複雑で時間のかかる仕事ですが、UXPin と Merge のテクノロジーを React、Vue、Angular、その他の一般的なフロントエンド技術のフレームワークと組み合わせることで、デザインと開発の橋渡しをしながら、デザインシステムの管理とガバナンスをシンプルにできます。

信頼できる唯一の情報源（Single source of truth）

デザインシステムの成熟度における最大の難関は「信頼できる唯一の情報源（Single source of truth）」ですが、この段階に達する組織はほとんどなく、高いコストとツールの制約により、大抵のデザインシステムは以下の２つのバージョンを維持しています：

デザインツールUIキット
開発コンポーネントライブラリ

デザインと開発にはプラットフォーム固有の文書が必要で、それでメンテナンスとコストがかさみます。

Merge は、デザインシステムのレポジトリから UXPin に UI コンポーネントをインポートすることで、真の「信頼できる唯一の情報源（Single sourdce of truth）」を実現します。この統合は、エンジニアが最終製品の開発に使うのと同じ UI ライブラリを、デザイナーがデザインプロセスで使えるということになります。

レポジトリへの変更は自動的に UXPin に同期され、デザインチームに更新が通知されます。また、Merge のバージョン管理により、デザイナーは最新リリースに切り替えるタイミングや古いバージョンに戻すタイミングを選ぶことができます。

UXPin のパターンを使ってデザインシステムを拡張する

DSE は、UXPin のパターン（Patterns）を使って、デザインチームと協力してデザインシステムを拡張することができます。パターンでは、ゼロから始めるのではなく、デザイナーが複数のデザインシステムから UI要素を組み合わせて、新しいコンポーネント、パターン、テンプレートのプロトタイプを作成することができます。

そしてデザイナーは、DSEと協力して新しいコンポーネントをデザインシステムのライブラリに昇格させる前に、UXPin でこのパターンを徹底的にテストすることができます。

DSE のデザインハンドオフの円滑化

デザインハンドオフは、製品開発における最大の課題の一つであり、DSEがデザインと開発の両側で能力を発揮したとしても、実際にはデザインをコードに変換するプロセスは時間がかかり、ミスが起こりやすいです。

デザインと開発にコードコンポーネントを使うことで、ハンドオフが効率化されます。

パターンを使って新しいコンポーネントを作成することで、デザインチームはゼロからデザインする必要がなくなり、既存のオープンソースライブラリを活用しながら、DSEやデベロッパーにとって実装しやすいものにします。

UXPin MergeとDSEに共通点が一つあるとすれば、デザインと開発のギャップを埋めるという点です。

世界最先端のデザインツールでデザインシステム管理をシンプルにしませんか。詳細およびアクセスリクエスト方法については、Mergeのページをぜひご覧ください。

Discover Merge