デザインを「コード」として扱う：Sketch + Git で実現する究極のバージョン管理術
多くのチームが「デザインファイルの肥大化」と「誰がどこを変えたかわからない地獄」に頭を抱えている。Abstractのような専用ツールも悪くないが、エンジニアリングの現場において、デザインをGitで管理することこそが、設計と実装の乖離を埋める唯一の正解だ。
今日は、SketchのバイナリファイルをGitのワークフローにねじ込み、チームの生産性を限界突破させるための「プロの作法」を伝授する。
—
1. なぜ「Sketch + Git」なのか？
Sketchファイル（`.sketch`）は中身がJSONの集合体である。Gitで管理することで、単なるバックアップではなく「変更の意図」を履歴として刻める。これこそが、エンジニアとデザイナーが「同じ言語」で議論するための基盤になる。
2. 開発スピードを加速させる「神プラグイン」の導入
Git運用を前提とするなら、まずはプラグインで環境を最適化せよ。
- [Runner for Sketch](https://sketchrunner.com/): 必須中の必須。`Command + ‘` ですべての操作を完結させる。メニューをマウスで探す時間は、プロにとっては損失だ。
- [Kactus](https://kactus.io/): Git管理を行うなら、これを使わない手はない。SketchファイルをJSONツリーに分解し、Gitでの差分比較を可能にするエンジンだ。
3. Git運用を成功させるディレクトリ構成
「デザインは一箇所に固めない」。これが鉄則だ。コンポーネント、UIキット、各画面を物理的に分離することで、コンフリクトを最小化する。
/design-system
├── /assets # アイコン、フォント（SVGは最適化済みであること）
├── /library # Sketch Libraries (.sketch)
├── /prototypes # 機能単位でファイルを分割
│ ├── login.sketch
│ └── dashboard.sketch
└── .gitignore # Sketchのテンポラリファイルを弾く
実用的な `.gitignore` のベストプラクティス
SketchをGit管理する際、不要なキャッシュでリポジトリを汚してはならない。
Sketchのバックアップと一時ファイルを無視
.DS_Store
.sketch.bak
.sketch.tmp
共有ライブラリのローカル設定
Library/Metadata/
4. チーム開発で役立つ「設定共有化」のルール
個人の環境に依存したデザイン作業は、チームの癌だ。`.sketch` ファイルのライブラリパスを相対パスで運用することは困難だが、以下のルールを徹底せよ。
1. シンボリックリンクの活用: `~/Library/Application Support/com.bohemiancoding.sketch3/Libraries/` への参照を、Git管理下のディレクトリへシンボリックリンクで向ける。
2. JSONによる設定共有: デザインシステムのカラーパレットやタイポグラフィの定義は、可能な限り `tokens.json` を介して管理し、Style Dictionary等でエンジニア側と同期する。
// tokens.json : デザイナーとエンジニアの共通言語
{
“color”: {
“primary”: { “value”: “#007AFF” },
“background”: { “value”: “#FFFFFF” }
},
“typography”: {
“h1”: { “fontSize”: “32px”, “fontWeight”: “700” }
}
}
5. Gitにおける「目視チェック」の極意
GitでSketchの差分を見る際、CLIだけでは限界がある。Kactusを使用して `git diff` を実行した際、特定のJSONパスを無視する設定を入れることで、不要なメタデータ差分に惑わされなくなる。
プロの運用術:
コミットメッセージには必ず「何を意図して変えたか」を記述せよ。
`feat: Add login animation frames` や `refactor: Update button components to atomic design` といった粒度で切ることで、後から「なぜこのコンポーネントが変わったのか」をGitログから即座に追跡できる。
—
魂のメッセージ：ツールは「規律」のためにある
どれほど優れたプラグインを導入しても、チーム内に「コンポーネントを再利用する」「レイヤー名を綺麗にする」という規律がなければ、Git管理は単なるゴミ捨て場になる。
エンジニアリングの視点をデザインツールに持ち込むことは、決して「デザイナーの自由を奪うこと」ではない。「誰もが迷わず、最速でプロダクトを前進させるための土壌を作ること」だ。
今日から、Sketchファイルを「ただの絵」として扱うのはやめよう。それはプロダクトの設計図であり、コードと同等の価値を持つ「資産」なのだから。
さあ、ターミナルを開いて `git init` を打て。そこから君たちのプロダクトの、本当の歴史が始まる。