デザインのためのバージョン管理 – なぜ設ける価値があるのか？

バージョン管理は、ソフトウェアエンジニアリングのベストプラクティスとして、何十年も前から行われてきました。VCS（バージョン管理システム）により、エンジニアは独立して作業を行いながら、効率的に共同作業を行うことができます。

デザインシステムの台頭により、バージョン管理は、部門を超えたコラボレーションと組織全体の信頼できる唯一の情報源（single source of truth）を維持するのに不可欠なものとなっています。

UXPin Mergeのバージョン管理システムにより、デザインプロジェクトごとにライブラリのバージョンは柔軟に管理され、各バージョンは楽に切り替えられます。無料トライアルにお申し込みいただき、UXPinが製品デザインプロセスにどのような革命をもたらし、部門を超えたコラボレーションを強化するかをご確認ください。

バージョン管理とは

バージョン管理とは、データセット、ソフトウェア、ドキュメント、その他のプロジェクトの各更新とリリースの履歴記録を管理する方法です。

この手法は、1962年にIBMのOS/360 IEBUPDTEソフトウェアアップデートツールにまでさかのぼり、多くの人にこれがバージョン管理システムの前身であるとみなされています。

バージョン管理は、ソフトウェア開発で最も一般的なシステムですが、表計算ソフトやワープロなど、その他多くのツールでも見かけるシステムです。

例えば、Google Sheetsのバージョン履歴は、誰が変更したのかや、日付も含めて記録されます。また、バージョン間の切り替えも可能で、自分や共同作業者が行った変更を思い出せない場合に特に便利です。

ソフトウェアのバージョン管理の例として最も有名で広く利用されているのがGitです。Gitは、ソフトウェアの変更履歴を記録しながら、複数のエンジニアが同じプロジェクトで同時に作業することを可能にするバージョン管理システムです。

Gitの各バージョンには、コードの変更点とその変更者、そして日付が記録されています。この動作中のバージョン履歴の優れた例が、UXPin Merge Tools のようなGitHubレポのリリースを見れることです。

ソースコード管理とは？

ソースコード管理（SCM）とは、Git、Subversion、CVS、Perforce、ClearCaseなどのバージョン管理ツールのことを指します。SCMはコードの変更を追跡し、ブランチを統合する際の衝突をサポートします。エラーが発生した場合は、以前のバージョンに簡単に切り替えることができ、また、SCMを使用してパーミッションを管理し、不正な変更を防止することができます。

何百人、何千人のエンジニアと仕事をする場合、アップデートの追跡はしっちゃかめっちゃかになりがちです。このような大量の作業を円滑に進めるためには、基本的なバージョン管理だけでは不十分だからです。例えば、開発者がCSSファイルに矛盾した変更を加えた場合、SCMはその矛盾を特定し、上書きを防ぎます。

Gitタグ vs Gitブランチ

Gitブランチ：ソフトウェアには、マスターまたは開発ブランチと、機能アップデートやバグ修正のための複数の「チェックアウト」ブランチがあります。開発者がチェックアウトブランチを完成させると、それらはマスターに統合され、ソフトウェアの一部となります。
Gitタグ：ブランチ上のコミットに対するスナップショットまたはリファレンスです。一つのブランチに複数のタグを設定し、各リリースを参照することができます。
タグとブランチは開発者コミュニティがこの記事内でわかりやすく説明しています

バージョン管理の3つのタイプ

以下は、バージョン管理の3つの種類とその違いです：

ローカルバージョン管理システム：各プロジェクトバージョンは、個人のコンピューターにローカルに保存されます。中央リポジトリがないため、チームメンバーはマスターリポジトリに同期するのではなく、リポジトリ全体を直接共有する必要があります。ローカルバージョン管理は、単独プロジェクトやチームが同時に作業する必要がない場合に最も効果的です。
集中型バージョンコントロールシステム（CVCS）：マスターリポジトリをホストするために集中型サーバーを使用します。エンジニアは変更をコミットする際に、集中型リポジトリのブランチを更新します。
分散型バージョン管理システム(DVCS)：各エンジニアは、リポジトリとバージョン履歴をすべてダウンロードします。変更をコミットするときは、自分のローカルリポジトリのみ更新します。エンジニアは作業が完了すると、リポジトリ全体を中央のマスターにプッシュ（アップロード）します。

集中型バージョン管理システムと分散型バージョン管理システムはどちらもマスターレポを持ちますが、コミットやアップデートの方法が異なるだけです。GeeksforGeeksでは、このトピックを長所と短所で分けています。

バージョン管理とバックアップの違い

バージョン管理には、複数のバージョンを持つマスターファイルが含まれます。バックアップとは、マスターファイルのコピーを別の場所に保存することです。マスターファイルの保存場所に何かあっても、プロジェクト全体を失うことがないため、バックアップは不可欠です。

例えば、あるプロジェクトをGitHubのようなリポジトリに保存し、バックアップをローカルサーバーのバックアップとクラウドベースのオプションで誰でもアクセスできるようにしておくとします。これでもし何らかの理由でGitHubがダウンしても、バックアップに切り替えて作業を続けることができます。

デザイナーにとってバージョン管理はどう便利なのか

従来のローカルベースのUXデザインツールでは、デザイナーがエンジニアと同じようにコラボレーションを行うことはなかなかできず、デザインチームが変更をコミットするための集中型のバージョン管理もありませんでした。

それを変えたのが、クラウド型のデザインツールです。それでデザイナーは同じプロジェクトで共同作業を行い、通常はデザインツールに直接ホストまたはリンクされている集中型クラウド・ストレージに、変更を同期させることができるようになりました。

UXPinのイテレーション機能は、デザインファイル内のバージョン管理のいい例です。デザイナーは、プロトタイプのイテレーションを取得、削除、作成することができます。イテレーションを統合することはできませんが、この機能によりバージョン履歴を管理し、デザイナーが同じデザインファイルで同時に共同作業を行うことができます。

また、バージョン管理は、新しいチームへのオンボーディングや引き継ぎにも便利です。新しいチームメンバーは、製品のバージョン履歴を見ることで、製品がどのように進化してきたか、前のチームが何をすでに試したかを確認することができます。

デザインシステムにおけるバージョン管理

また、デザイナーは、コンポーネント・ライブラリの更新ごとに異なるバージョンを作成することで、デザインシステムのバージョン管理を行うことができます。デザインツールによりますが、アップデートは自動または手動で行われます。

デザイナーが画像ベースのデザインツールを使用する場合、デザインシステムチームは、UIキットとコンポーネントライブラリの2つのコピーを維持する必要があります。

完全に統合されたデザインシステムでは、デザイナーとエンジニアは、リポジトリにホストされている同じコンポーネントライブラリに同期します。リポジトリへのどの変更も、すべてのチームに対して自動的に更新されます。

UXPin Mergeによる完全統合デザインシステム

UXPin Mergeは、バージョン管理機能を備えた完全に統合されたデザインシステムのいい例です。Mergeでは、リポジトリからUXPinのデザインエディタにコンポーネントライブラリを同期できるため、デザイナーとエンジニアが同じデザインシステムを使用することができます。

Merge コンポーネントは、レポでホストされているコンポーネントと同じインタラクティブ性と機能性を備えているため、デザイナーは最終製品を正確に再現する高忠実度のモックアップやプロトタイプを作成することができます。

Storybookとの統合により、Gitや他のフロントエンドフレームワークを使用して、Reactコンポーネントを直接UXPinに同期させることができます。デザインシステムチームがリポジトリに変更を加えると、UXPinは自動的にデザインエディタに更新を送信し、デザインチームに新バージョンが通知されます。

この信頼できる唯一の情報源（single source of truth）により、デザイナーとエンジニアのコラボレーションが向上し、ズレをほとんど発生させずにスムーズなデザインの引き継ぎが可能になります。

UXPin Mergeでブランチとタグを使用する

UXPin Mergeで、デザイナーは2つのバージョン管理オプションが得られます。

ブランチ：プロトタイプは、使用しているブランチに変更があった場合のみ、自動的に更新されます。ブランチオプションを使用すると、常に最新のデザインシステムのバージョンで作業することができます。
タグ：プロトタイプは、ブランチや他のタグに切り替えない限り、常にタグのバージョンを参照します。タグオプションを使用することで、デザイナーは準備ができたときにバージョンをアップグレードする選択ができます。プロトタイプは、ブランチや他のタグに切り替えない限り、常にタグのバージョンを参照します。タグのオプションを使用することで、デザイナーは準備ができたときにバージョンをアップグレードする選択ができます。

また、デザイナーは「最新」チェックボックスを使用することで、プロトタイプを自動的に最新の部品に更新することができます。この機能により、プロトタイプの手動更新が要らなくなり、デザインワークフローを効率化することができます。

UXPin Mergeとバージョン管理により、「最新のデザインシステムって何？」「そのデザインファイルを送ってくれない？」などの非生産的なコミュニケーションを減らし、チームが独立して作業できるようになりました。この独立性により、企業はより早くスケーリングとイテレーションを行うことができ、市場投入までのスピードは極めて重要な競争力となります。

デザインのためのバージョン管理導入と改善のコツ

デザインシステムの構築

デザインの拡張は簡単なことではなく、多くの企業にとって、デザインの拡張ということはデザイナーの増員になります。デザインシステムで、より少ないデザイナーでより速い製品の構築が可能になります。

また、デザインシステムで、デザインチームと組織全体に利益をもたらす効果的なバージョン管理システムを実行することができます。バージョン管理により、デザイナー、エンジニア、ステークホルダーは、デザインシステムの更新や変更点と理由を確認できます。

このバージョン管理は、デザインシステムのロードマップの進捗を監視し、チームが常に最新のリリース情報を把握しておくようにするのに特に重要です

ガバナンスの導入

バージョン管理システムは、デザインシステムの適切なガバナンスがあって初めて効果を発揮します。ガバナンスは、スケジュールされ管理されたバージョンリリースによって、デザインシステムの整合性が確実に維持されます。

適切なガバナンスで、新しいコンポーネントやパターンが一定の品質や使用条件を満たしていることを確認するため、各バージョンのリリースごとにプロセスやプロトコルが実施されます。

リリースをスケジュールする

バージョン管理を効果的に行うためには、リリーススケジュールの作成が不可欠です。デザインシステムチームは、厳しいリリーススケジュールによって、品質保証とドキュメントの更新を確実に実施できます。

また、リリーススケジュールが規定されることで、最新バージョンの情報がチームに通知されます。例えば、デザイナーとエンジニアは、毎週金曜日にデザインシステムのアップデートがあることを把握しています。リリーススケジュールはデザインシステムのロードマップにも表示され、チームとステークホルダーへの予測が管理されます。

UXPin Mergeでバージョン管理を改善する

デザインシステムの多くは、信頼できる唯一の情報源（single source of truth）の所有を謳っています。しかし、デザイナーとエンジニアが同じコンポーネントライブラリを使用し、完全に統合されたデザインシステムでない限り、バージョン管理にはUIキットとデザインファイルの手動更新が必要です。

UXPin Mergeを使用すると、デザインと開発間のコラボレーションを強化しながら、人員を増やすことなくデザインの規模を拡大することができます。バージョン管理に関するドキュメントを参照して、Merge がどのようにデザイナーやエンジニアのリリースを最適化および自動化できるかをご確認ください。

無料トライアルにサインアップし、UXPinとMergeをStorybook統合による MUI コンポーネントライブラリで体験してください。