Abstract不要。Sketch×Gitで構築する決定論的デザインパイプラインと超高速視覚差分(Visual Diff)運用法
GUIツール主導の「サードパーティ製ブラックボックス」に依存したデザインバージョン管理の時代は終わりました。サードパーティサービスの停止、ライセンスコストの増大、不透明なコンフリクト解消ロジックに頭を悩ませる必要はありません。
Sketchデータの実体はZIP化されたJSONツリーおよびバイナリアセットの集合体です。この内部アーキテクチャを完全に解剖し、Gitの標準機能(`.gitattributes`、カスタムDiffドライバー、Hook)、Appleの`sketchtool` CLI、そして画像解析エンジンをネイティブに結合することで、サードパーティサービスを一切挟まない完全ローカル/CI統合型の高度なデザインバージョン管理システムを構築できます。
本稿では、コミット時の壊滅的なコンフリクトを構造的に防ぐディレクトリ設計から、JSON ASTの正則化、`sketchtool`を用いたArtboard単位のピクセル差分検知スクリプトまで、現場で震えるほど役立つ極限のパイプライン設計を解説します。
—
1. `.sketch` ファイルの低レイヤ構造解剖
Git上でSketchファイルを安全かつ決定論的(Deterministic)に扱うには、まずそのバイナリの正体を正確に把握しなければなりません。
`.sketch` ファイルは単体で完結したZIPアーカイブです。`unzip` コマンドで解凍すると、以下の内部ディレクトリ構造が現れます。
example.sketch (ZIP Archive)
├── container.json # ファイル全体のメタデータ、レイアウトグリッド構造
├── meta.json # 作成環境、フォント依存関係、Appバージョン
├── user.json # ユーザーごとのキャンバス位置・ズーム情報(★Git管理外にすべき)
├── document.json # カラープロファイル、共有スタイル、シンボル定義
├── pages/ # 各ページを保持する主要ASTツリー
│ ├── 0D8A5E2B-….json # Page単位のJSON(レイヤー、シェイプ、テキスト等の全データ)
│ └── 3F21C89A-….json
└── images/ # ビットマップ画像アセット(PNG/JPEG等のバイナリ)
├── 1a2b3c…png
└── 4d5e6f…jpg
なぜデフォルトの `.sketch` はGitと相性が悪いのか?
1. バイナリ差分の不透明性: `.sketch` そのものはバイナリ(ZIP)であるため、Gitは1バイトの変更でも全書き換えと判断し、リポジトリが急速に肥大化する。
2. `user.json` による無駄なDiffの発生: キャンバスの拡大率やスクロール位置の変更だけで `user.json` が更新され、本質的でない差分が大量発生する。
3. JSONの浮動小数点数の揺らぎ: Sketchのレンダリングエンジンは、グラフィック描画時に浮動小数点(例: `12.00000000000004` と `12.0`)の不一致を頻繁に発生させる。これをそのままGitに乗せるとノイズにしかならない。
—
2. 衝突ゼロを目指すディレクトリ設計と分解・再構築アーキテクチャ
コンフリクトを物理的に回避するパイプラインの第一歩は、バイナリである `.sketch` を作業開始時に解凍・正則化(Normalize)し、Gitで追跡可能なテキストデータ群として保存することです。
ワークスペースの推奨構造
リポジトリ内では `.sketch` ファイル自体を作業用バイナリとし、Git追跡領域には分解された `src/` ディレクトリ(または専用形式)を保持します。