コード と デザイン ‐ どっちがより信頼できる情報源？
グローバルデザインシステムのコミュニティであるInto Design Systemsは、２０２３年７月にデザイナー、デベロッパー、デザインリーダー、デザインマネージャー、DesignOps実践者に向けたバーチャル会議を開催しました。講演では、ゲストスピーカーであるMarcel Bertram氏が「Systematic Design With Code（コードによる体系的デザイン） 」について語りました。
ゲストスピーカー：Marcel Bertram氏について
世界的な自動車メーカーでデザインシステムチームを率いるブランドデザイン専門家。また、UXデザイン運用のコンサルタント会社のMUDX.designの共同設立者兼UXコーチも務める。
また、ベクターとコードベースでデザインツール比較を行い、組織が「信頼できる唯一の情報源（Single source of truth）」を持つためにコードベースデザインツールの活用方法を紹介しました。このコミュニティのイニシアチブは、業界と組織の成長に役立つ知識の共有です。
本記事は、Marcel氏のInto Design Systemsの講演「The Power of Design, Code & Ai in Design Systems（デザインシステムにおけるデザイン、コードおよびAIの力）」の要約となります。
ウェビナー全体（３時間）はこちらからご覧いただけます。
主なポイント：
- ベクターベースデザインツールは、デジタル環境でのさまざまな解像度にも対応可能なスケーラビリティと鮮明さを実現するために誕生した。
- ２０１９年に開発されたUXPin Mergeテクノロジーを使用することで、デザインパラダイムに大きな変化をもたらし、コードコンポーネントをデザインプロセスに直接融合させて一貫性のあるUIライブラリを提供する。
- コードを「信頼できる情報源」として認識することで、一貫性、効率性を確保し、デザイン・開発チーム間でアプリケーションの仕組みについて全体的な理解力が深まる。
- ドイツ拠点のIT企業dotSourceはUXPin Mergeを利用して、コード、デザイン、ドキュメントを同期させてデザインと開発のギャップを埋めることに成功した。
- UXPin Mergeテクノロジーでプロトタイピングの質を高めることができ、ユーザーインタラクションの検証においてより正確なインサイトを得ることができる。
コードコンポーネントをデザイナーとデベロッパー間の「信頼できる唯一の情報源」として使ってみませんか？
UXPin Mergeを使って製品開発プロセスのギャップを埋めて、製品のリリースを高速化しましょう。
こちらからUXPin Mergeの詳細をご覧ください。
ベクターベースのデザインツールがある理由
デジタルデザインの黎明期には、フィジカルアートの精密さを再現することが求められていました。
ピクセルベース手法のように小さな点から画像を構成するのではなく、ベクターは数式を使ってグラフィックを形作ります。
その結果、画像サイズに調整を加えても正確で、柔軟な状態を保つことができます。
ベクターツールは従来のグラフィックデザインによって築かれました。業界ではAdobe Illustratorのようなツールが採用され始め、プラットフォームや解像度を問わず一貫した鮮明なデザインを提供できようになりました。
また、Webサイト、アプリケーション、デジタル広告の増加に伴い、アダプティブなデザインへのニーズが高まったことでデザイナーは自然とベクターベースのツールを使用する人が増加しました。
ベクターベースのデザインツールは、単に美的なものだけでなく、デジタル環境における実用的なニーズに応えるものだったのです。
コードベース革命
2019年に、UXPin Mergeテクノロジーが登場するまで、ベクターベースツールではデザインと開発のギャップを埋めることはできませんでした。
Mergeのコードベース手法は、コードコンポーネントをデザインプロセスに取り込むことで、デザイナーはプロトタイプに、エンジニアは最終製品での開発で同じUIライブラリを使うことができます。
ベクターベースとコード化されたデザインシステム
デジタル製品デザインは徐々にベクターベースのシステムから革新的なコードベースへとシフトしてきました。
デザインプロセスにコードが統合されたことで、デベロッパーとデザイナーの連携方法が変わり、製品開発プロセス全体の効率化に繋がりました。
次のチャプターからは、この進化をさらに深掘りしてデザインシステムとプロトタイプへの影響をみていきましょう。
ベクターベースのシステムを理解する
それは何？：
- コンピュータグラフィックスで画像を表現するために数式が使われるツールのこと。
FigmaやAdobe Illustratorなどが有名。
メリット：
- 静的なプロトタイプとビジュアルデザインに最適
- デザイナーが直感的に視覚化し、下書きなど、すぐに変更を加えることができる
デメリット（制限）：
- 実際のアプリケーションの使用感がわかりづらい
- ユーザーとのインタラクションやトランジション、高度なコンポーネントの動作を、常に正確に模倣できるわけではない。
- コードの複雑さと可能性が見えづらい。
コード化されたデザインシステムを理解する
それは何？：
- UXPinのように、デザインキャンバス上で実際にコード化されたコンポーネントを使用するデザインツールのこと。
メリット：
- デザイナーとデベロッパーの自動更新により、組織全体にわたる「信頼できる唯一の情報源（Single source of truth)」を作成できる。
- デザインと開発のシームレスな移行。
- リアルなプロトタイプのために、コンポーネントの実際の動きなどを正確に表現する。
- より有意義なユーザーテストやステークホルダーからのフィードバック
- 複雑なプロトタイプにおいてエンジニアリングチームへの依存が減る。
- アクセシビリティ機能、セマンティクス、パスワード管理などのブラウザ機能の統合。
- 実際にコード化されたUI要素に基づく探索がしやすくなる。
- デザイナーはコードのメリットを得ながら、使い慣れたデザインツールのインターフェースで作業できる。
デメリット（制限）：
- 変更を実装できるのはデザインシステムチームのみのため、ガバナンスにおいて有益である。
「信頼できる情報源」としてのコード
最終的なデジタル製品はコードに基づいており、デベロッパーはコードを使って作業をします。
一方デザインチームはベクターベースのツールを使うため、彼らと最終的な製品の間にはギャップが生じてしまいます。
そのため、コードを中心的な参照点、つまり「信頼できる情報源」として認識することが極めて重要です。
この哲学で以下が保証されます：
- 一貫性と結束： デザイナーとデベロッパーが同じレポジトリからコンポーネントを作成することで、全体的な統一性が確保される。
- 効率性： 全員が同じライブラリや文書を参照することで、伝達ミスや食い違いが発生する余地が少なくなる。
- 深い理解： アプリケーションがどのように機能するかの「中核となるメカニズム」を理解するようデザイナーに促し、それによってより総合的なデザイン手法を促進する。
UXPin Mergeによる「信頼できる唯一の情報源（Single source of truth）」
dotSourceのユースケース
ドイツを拠点とするソフトウェア開発会社であるdotSourceはUXPin Mergeを導入する以前、製品開発フローにおいて問題を抱えていました。
新しいパターンやコンポーネントをデザインシステムに追加するには、多くの重複したプロセスが必要です。
デザインシステムのリリースのほとんどは、少なくとも以下の3か所の更新を必要とします：
- デザインシステムのコードベース（コンポーネントライブラリ）
- デザインチームが使用するUIキット（デザインツール）
- デザインシステムのドキュメント
「各UIコンポーネントに”信頼できる唯一の情報源（Single source of truth）”を３つ持つのはは、直観通りにはいかず、エラーの増加につながります。このようなデザインシステムの更新プロセスとテクノロジーの整合性がとれないと、１つの変更のために３つの場所での更新が必要になります。チームは余分な作業を終始することになってしまいます。」
dotSourceは、この問題に対する唯一の解決策は、コードベースのデサインプロセスを実装し、デザインと開発の間に本当の「信頼できる唯一の情報源（Single source of truth）」の作成が必要であるとわかりました。
そこでUXPin Mergeを導入し、デザイナーはコードコンポーネントを使ってプロトタイプの作成、製品のデザインシステムをUXPinにインポートできるようになりました。
「UXPinのStorybook統合を利用したことで、デザイナーはUXPinのエディタ上ででデザインシステムの Storybookコンポーネントを使用できます。
これによって、コード、デザイン、ドキュメントの同期が全て揃ってできるようになるため、次のことを実現します：
- デザイナーの QA（品質保証）への参加および、デベロッパーのバグの特定のサポート
- デザイナーとエンジニア間の連携強化
- 高忠実度のインタラクティブ コンポーネント （コンポーネント駆動型プロトタイプ）による、テストの改善と反復の高速化」
最新のプロトタイプ – スタティック vs. インタラクティブ
静的なプロトタイプ
Figmaのようなベクトルベースのツールの使用は、複雑なインタラクティブレイヤーを使わずに静的な視覚表現を提供するため、理解度や美的感覚を測ることが目的の場合で効果的です。
デザイナーは通常、ベクターベースツールからプロトタイピングツールに移行しますが、これにはコストと運用の負担がかかり、コードに匹敵する結果は得られません。
インタラクティブプロトタイプ
コードベースのデザインツールは、より包括的な機能とユーザージャーニーテスト向けにプロトタイピングの範囲を広げます。
UXPinのようなツールで、実際のインタラクション、トグル機能、入力フィールドの動作などを再現し、よりリアル感のあるユーザー体験を提供します。
UXPin Mergeのテクノロジーは、プロトタイプの実際の使い心地を体験するために、見えるもの以上の情報を提供します。
デザインチームは、検証で得たインサイトを活用し、より正確な反復と改善を行うことができます。
デザイナーはユーザビリティを向上させ、デザインプロセスにおいてより多くのビジネスチャンスを特定することで企業価値向上にもつながります。
コードベースのデザインワークフローへの移行
デジタルデザインの世界は広大で、進化し続けています。ベクターベースツールは初期のデザイン段階では効果的かもしれません。
しかし、非効率やミスコミュニケーションを減らし、検証において正確性のあるユーザー体験を提供できることから、コード化されたデザインシステムを取り入れることが将来的に必要になるでしょう。
デザイナーとデベロッパーが連携をするなかで、最終目標はユーザー中心、効率的、見た目にも美しいアプリケーションを作成することだと覚えておくことが重要です。
そのため、適切なツールを理解し活用することは重要な選択の一つです。
UXPin Mergeでデザインシステムの成熟度を高める
UXPin Mergeは現代の製品開発フローにおける課題を解決するオールインワンのUXデザインツールを提供します。
組織間でUIライブラリやドキュメントを共有で使うためにデザイナーとデベロッパーとの完全に統合するには何年もかかるかもしれません。
組織にとって、”成熟したデザインシステム” つまり、デザイナーとデベロッパーが使用するUIライブラリやドキュメントなどを統合するには時間がかかるかもしれません。
そして大抵はそこにたどり着かずに、dotSourceのケースのように「信頼できる情報源」を複数持ってしまうことになります。
しかし、UXPin Mergeを使用することで、デザインと開発のギャップを埋めることができます。
組織は初期段階から完全統合されたデザインシステムを構築でき、リソースの無駄を省くことができるのです。
また、UXPin Mergeの使用で次のことができるようになります：
- GitやStorybookを使って、React、Vue、Angular、Ember などの Javascript ベースのデザインシステムをインポートする。
- UXPinのPatterns（パターン）機能を使って複数のデザインシステムからUI要素を組み合わせ、新しいデザインシステムのコンポーネントを作成する。
- オープンソースのデザインシステムからコンポーネントをインポートして、開発に着手する前に新しいパターンを検証する。
- 従来のベクターベースのデザインツールより８倍速くプロトタイプを構築する。
- バージョン管理を使って、デザイナーが更新とデザインシステムのバージョン履歴を管理できるようにする。
- 製品チームのためのドキュメントを作成し、すべてを１つのプラットフォームで管理する。
- JSONを介してプロトタイプに実データを使う。
ここまで読んでいただきましてありがとうございます！コードベースをメリットを実感してみたくなりましたか？
こちらのページからアクセスをリクエストし、デザインシステムにおける「信頼できる唯一の情報源（Single source of truth）」を作成しましょう。よりユーザーフレンドリーな製品体験を提供する方法をぜひご覧ください。
