『コードからデザイン』完全ガイド（２０２３年版）
『デザインからコード（Design-to-Code）』とは、デザインツールを使ってデザイナーがプロトタイプを作成し、デベロッパーがそれをコード化するという、一般的な製品開発の流れを簡略化したものです。
UXPin Mergeは、このプロセスをひっくり返す画期的な『コードからデザイン（Code to Design）』のワークフローです。本記事では、FinTechの大手である PayPal 社を含む４つのケーススタディとともに、「コードからデザイン」やそれが製品開発プロセスをどのように強化するかをご説明します。UXPin Mergeの詳細についてはぜひこちらをご覧ください。
『コードからデザイン』とは
『コードからデザイン』は、UXPinがMerge の技術を利用して開発した UX のワークフローです。Mergeを使えば、デザイナーは UXPin のデザインエディターにレポジトリから UI コンポーネントをインポートし、それを使って「コンポーネント駆動型プロトタイプ」と呼ばれるプロセスである、完全にインタラクティブなプロトタイプを作成することができます。
コンポーネント駆動型プロトタイプによって、デザイナーはプログラミング言語を書いたり学んだりする必要がなく、コードの利点をすべて活用できます。
この「コードからデザイン」のワークフローは、UXデザイナー、ステークホルダー、プロダクトチームに以下のようなメリットをもたらします：
- デザイナーは生産可能なプロトタイプを作り、それによってデザインプロセスでのテスト範囲が広がる。
- 既製のコードコンポーネントを使うことで、デザイナーはゼロからデザインする必要がなく、それによってプロトタイプの品質、忠実度、機能性を高めながら、市場投入までの時間を短縮することができる。
- Merge のプロトタイプは最終製品のように見えることから、ステークホルダーはデザインのビジョンをよりよくイメージすることができる。
- デザイナーとエンジニアが同じ言葉を話し、同じソースを使うことで、デザインハンドオフがよりスムーズになり、摩擦が少なくなる。
- Mergeはコンポーネントライブラリを製品開発のワークフローに統合するため、デザインシステムの導入が増加する。
- ドラッグ＆ドロップのワークフローにより、デザイナーでなくてもプロダクトデザインがもっと身近になる。
『デザインからコード』か『コードからデザイン』か
「デザインからコード」の課題
「デザインからコード」は、従来のUXのワークフローであり、デザインチームは、標準的な画像ベースのデザインツールを使ってモックアップやプロトタイプを作成し、デベロッパーはそれをコードに変換します。
「デザインからコード」のワークフローの最大の課題は、デザイナーとエンジニアの間にギャップが生じることです。デザイナーはそのギャップを埋めるべく、外部ツールの使用や詳細なドキュメント作成、さらにデベロッパーと会ってプロトタイプやインタラクションの機能の説明をしなけいといけません。
このような手厚い作業や説明をしても、最終的な製品がデザイナーの仕様や期待に応えられないことはよくあることです。それでデザイナーとエンジニアは、責任をなすりつけ合いますが、本当の問題は言葉の壁です。デザイナーはベクターグラフィックツールで、エンジニアはコードで仕事をするからなのです。
「コードからデザイン」のソリューション
「コードからデザイン」のワークフローは、デザイナーとエンジニアの間のギャップを埋めるものです。彼らはまだ異なる言語を使いますが、Mergeのようなテクノロジーによって、デザインと開発の間の翻訳が簡単になります。
デザインチームは視覚的な UI 要素に取り組み、エンジニアはそれらを支えるコードに取り組むという、同じコンポーネントは２つの視点から見られています。
そこで、デザインシステムで作業しているチームは、この「コードからデザイン」へのワークフローが最も有益です。
「デザインからコード」のワークフローでは、チームは以下の２つのバージョンのデザインシステムで作業します：
- デザインツール用の画像ベース UI キット
- プログラミング用の UI コンポーネントライブラリ
「コードからデザイン」は、デザインチームとエンジニアが同じレポジトリから同じコンポーネントライブラリを使うため、このような分離をなくし、真の「信頼できる唯一の情報源（Single source of truth）」を作り出します。
「コードからデザイン」と「デザインからコード」についてさらに読む。
「コードからデザイン」のユースケース
”「コードからデザイン」は素晴らしいと思うが、実際の製品開発にはどのように反映されるのだろうか？” と思っていることでしょう。いい質問が出ましたので、ここでは、企業が製品開発に『コードからデザイン」を活用するユースケースを４つご紹介します。
Paypal
２０１９年、PayPal は UXPin Merge を使って社内の製品開発プロセスを完全に再デザインしました。PayPal 内の UX チームは、６０以上の製品を管理する１０００人以上のエンジニアに対して５人のデザイナーという独自の課題を抱えており、どの製品も同じようには見えず、それぞれにユーザビリティやデザインの一貫性の問題がありました。
PayPal の UXリードEPX であるエリカ・ライダー氏は、この問題の解決するよう言われました。さらに厄介なことに、彼女は PayPal の製品チームが製品をデザイン、テスト、提供できるようなワークフローを作らなければなりませんでした。彼らはデザインスキルに乏しく、デザインツールの経験もほとんどなかったのです。
従来の画像ベースのツールを使ったソリューションをいくつか試した後、エリカは Merge を発見しました。そこで PayPal の UXチームは Merge を使って、カスタマイズした Fluent UI のデザインシステムを UXPin に同期させました。
PayPal のステークホルダーは、この新しい「コードからデザイン」への投資の有効性を検証したいと思っていたので、エリカは、１ページのプロトタイプの２つのバージョンを作成する実験を行いました。１つは画像ベースのツール、もう１つは UXPin Merge を使い、結果は以下のようになり予想以上でした：
- 画像ベースのツール：所要時間１時間以上
- UXPin Merge：所要時間 ８分
Merge のプロトタイプは、忠実度と機能性がはるかに優れており、Paypal の製品チームも指導を受けることで、同じ結果を得ることができたのです。
Iress
ソフトウェア開発会社の Iress は、システムの成熟度をデザインするために４つのプロセスを踏んでいました。
-
- ステップ１：PDF のスタイルガイド
- ステップ２：CSS による HTMLパターンライブラリ
- ステップ３：UI キットとコンポーネントライブラリ
- ステップ４：完全に統合された「信頼できる唯一の情報源（Single source of truth）」で、リリースに必要なデザインやコードがない
Iress はステップ３で、デザインと開発のギャップをどう埋めれば最終的なゴールにたどり着けるかわからず、行き詰まっていました。
当時の Iress にとって、このワークフローは、以下の条件をすべて満たすものでした：
- デザイナーやエンジニアが製品を作り、リリースするのに必要なコンポーネントを提供する単一のリポジトリである。
- シームレスなデザインハンドオフによって、デザイナーとエンジニアのよりよい連携が行われる。
- デザインやフロントエンドのプログラミングをゼロからする必要がない。
- デザインドリフトや組織間の不整合がない。
- リアルでインタラクティブなプロトタイプが、テスト参加者やステークホルダーに最終製品の正確な表現を提供する。
- ダークモードやマルチブランドのデザインシステムなど、テーマの切り替えを試す機会がある。
TeamPassword
上の２つのユースケースは、大規模企業の製品でしたが、スタートアップや小規模なチームに対して、「コードからデザイン」はどんなことができるのでしょうか。TeamPassword は、競争の激しいパスワード管理市場で事業を展開しているスタートアップで、「UXデザイナー不在」は最大の課題でした。
パスワードや機密データを預かるスタートアップ企業にとって、ユーザビリティの問題やデザインの矛盾は会社の信頼を失い、それが TeamPassword の評判を落とし、解約につながってしまいます。
TeamPassword のエンジニアは、コードプロトタイプを使ってデザインとユーザーテストを全て行いました。このようなプロトタイプは製品の機能とUX（ユーザーエクスペリエンス）を正確に表現していますが、アイデアを構築して反復するのは時間を食うものでした。
２０２２年、TeamPassword は MUI デザインシステムに切り替え、Merge を使って UXPin に同期させました。そこでエンジニアは、プロトタイプの開発の代わりに、UXPin でカスタム MUI React ライブラリを使いました。そしてこの「コードからデザイン」のワークフローにより、市場投入までの時間が大幅に短縮され、ユーザビリティの問題やデザインドリフトが解消されたのです。
TeamPassword のデベロッパーがデザインシステムのレポジトリを更新すると、その変更が自動的に UXPin に同期されるため、常に最新バージョンの状態になり、さらに、Merge のバージョンコントロールによって、チームは変更を追跡し、テスト中にバージョン間を切り替えることができるようになりました。
dotSource
dotSource は、ドイツに拠点を置くデジタル製品のコンサルティングと開発を行う会社であり、複数のデザインシステムを用いて、製品やソリューションをクライアントに提供しています。
dotSource では、「デザイン用の UI キット」と「開発用のコンポーネントライブラリ」の２つのデザインシステムでプロセスや作業が重複してしまうことが、製品を提供する上での最大の問題点でした。また、デザインシステムのドキュメントは、「デザイン用の UI キット」と「開発用のコンポーネントライブラリ」につづき、チームが維持しなければならない３つ目のピースとなっていました。
つまり、dotSourceの ” 信頼できる唯一の情報源（Single source of truth）” は、実は「唯一」ではなく「３つの情報源」だったのです。そしてこれは、多くの企業が抱えるデザインシステムに関する問題でもあります。
dotSource は、「信頼できる唯一の情報源（Single source of truth）」をコードベースにする必要があると認識していましたが、UXPin Mergeを発見するまでは、従来の画像ベースのデザインツールでこのワークフローを実現する方法を知りませんでした。
dotSource は現在、Merge の Storybook 統合を使って、デザインシステムを UXPin に同期させており、そうすることで、リリースごとにデザインシステムのレポジトリ、ドキュメント、UXPin のコンポーネントがStorybookによって更新されます。
「コードベースのデザインワークフローに切り替えることが、このような画像ベースの制限を回避する唯一の方法です。UXPinのようなコードベースのプロトタイピングツールとMergeテクノロジーによって、ベクターグラフィックスではなくブラウザのようにコードをレンダリングすることでこのワークフローが実現します。UXPinでは、UI コンポーネントがデベロッパーと同じように見え、動作するため、デザインと開発の間のギャップを効果的に埋めることができます。これが真の「信頼できる唯一の情報源（Single source of truth）」です。」 – dotSource
UXPinにおける「コードからデザイン」の仕組み
製品チームは、コードコンポーネントをUXPinにインポートする際、以下のように選択肢が２つあります：
- 製品のデザインシステムを取り込む
- オープンソースのUIライブラリ（MUI、Bootstrap、Ant Designなど）を取り込む
そして、このようなライブラリをUXPinに取り込むには、以下の３つの方法があります：
- Git 統合：レポジトリから UXPin に Reactコンポーネントライブラリを同期させる
- Storybook 統合：React、Vue、Angular、Web Components、Emberなど、多くのフロントエンドフレームワークをチームで同期できるようにする（Storybookのドキュメントの全リストはこちら）。
- npm 統合：デザイナーが、MCM（Merge コンポーネントマネージャ）を使って、npmレジストリからのオープンソースライブラリからUIコンポーネントをインポートできる。
npm統合とコンポーネントマネージャを使うためのチュートリアルは以下の３つになります：
Git と Storybook の統合はもう少し複雑で、UXPin のテクニカル サポート チームと共に Merge のセットアップを完了するには技術的なスキルが必要です。
UXPinのPattern機能を使ったコンポーネントの組み合わせ
UXPin のパターン（Patterns）を使えば、デザイナーは UI コンポーネントを組み合わせて新しい UI パターンやテンプレートを作成することができ、この機能は、デザインシステムに特定の要素がない場合に特に便利です。
例えば、製品に分析ダッシュボードを追加する必要があるのに、デザインシステムにはチャートがないとします。npmレジストリでオープンソースの UI ライブラリを見つけ、MCMを使ってパッケージをインポートし、チャートのコンポーネントを追加すれば、同じ忠実度と機能を維持しながら新しいパターンを作成することができます。そしてチームは、このパターンのデザインシステムへの普及も、一度だけの使用もできます。
UXPinパターンについてのチュートリアルをさらに読む。（英文）
「コードからデザイン」を始めませんか？この革命的なコードベースのテクノロジーへのアクセスは Merge のページからぜひリクエストください。
