こんにちは！デザインシステムやフロントエンドのアーキテクチャの現場を渡り歩いてきたエンジニアの先輩です。
突然ですが、こんな経験はありませんか？
「デザイナーから渡された『最終版_final_v3.sketch』のどこが変わったのか分からない……」
「エンジニアとデザイナーでファイルが分岐してしまい、どれが正解か分からなくなった……」
Abstractのような専用ツールを使うのも手ですが、実は使い慣れたGitとSketchを組み合わせるだけで、デザインの変更履歴を完全にコントロールし、コードと同じレベルの厳密なバージョン管理ができるんです。
今回は、Abstractという「お高い専用ツール」に頼らず、エンジニアの主戦場であるローカルGit環境にSketchを乗せ、デザインの差分を目視で完全に追跡するプロフェッショナルな運用フローを徹底解説します。
これをマスターすれば、デザインファイルの行方不明事件や、エンジニア・デザイナー間の認識のズレが劇的に減り、毎日の作業が信じられないほどスムーズになりますよ。
—
1. そもそもなぜ、SketchとGitなのか？
プロトタイピングやデザインツールは数あれど、Sketchのファイル（`.sketch`）は、内部が実質的に「JSONの塊と画像アセットのZIPアーカイブ」で構成されています。
つまり、Gitとの相性が抜群に良いのです。
コードと同じように「いつ、誰が、どこを変更したのか」をコミット単位で追跡でき、万が一のときは過去の黄金期（デザイン）へ一瞬でタイムリープできる。この強力な安心感を、エンジニアだけでなくデザイナーも共有できるようになるのが本手法の真髄です。
—
2. 【基礎セットアップ】GitでSketchファイルを扱うための作法
まずは、SketchファイルをGitで美しく管理するための環境を整えましょう。
ステップ1: `.gitignore` の適切な設定
Sketchは作業中に自動生成される一時ファイルや、差分管理においてノイズとなるキャッシュを持ちます。リポジトリが汚れないように、プロジェクトのルートに `.gitignore` を配置し、以下のように設定します。
macOSのメタデータ
.DS_Store
Sketchの自動保存・ロックファイル
.sketchlock
.~
ステップ2: Gitの差分比較（Diff）の拡張
標準のGitでは、`.sketch` ファイルは単なるバイナリとして扱われ、「変更されました」としか表示されません。これでは中身が分からないので、SketchTool（Sketch本体に同梱されているコマンドラインツール）を活用します。
これを利用して、コミット時にJSONを人間が読める形に展開するか、あるいは後述する「目視チェックのためのビジュアル差分運用」に持ち込みます。
—
3. コミット時の競合（コンフリクト）を防ぐディレクトリ構成
Gitでデザインファイルを扱う最大の敵は「コンフリクト（衝突）」です。エンジニアがコードで苦しむアレが、デザインでも起きます。これを物理的に防ぐための黄金のディレクトリ構成がこちらです。
my-design-project/
├── .git/
├── .gitignore
├── assets/ # 共通で使用する画像やアイコンの原版
└── designs/
├── 01_foundation/ # カラーパレット、タイポグラフィなどのトークン
├── 02_components/ # ボタンや入力フォームなどのUIパーツ
└── 03_pages/ # 実際の画面レイアウト（機能・ページごとに分割）
# ※ 単一の巨大な.sketchファイルにすべてを詰め込まない！
【重要】1つのファイルを複数人で同時に触らない
これがGit運用の鉄則です。ページやコンポーネント単位でファイルを細かく分割（モジュール化）し、「今はこの画面のコンポーネントをいじるから、このファイルをロックするね」という共通認識（あるいはブランチの切り分け）をチームで作ります。
—
4. 【実践】デザイン変更を目視チェックする運用フロー
それでは、実際にデザインを変更し、Git上でその差分を目視確認してリポジトリに保存する一連の流れ（HelloWorld的なチュートリアル）を体験してみましょう。
1. 作業用ブランチを切る
まずは安全に実験するため、新しいブランチを作成します。
git checkout -b feature/update-primary-button
2. Sketchでデザインを修正する
`designs/02_components/buttons.sketch` を開き、メインボタンのカラーを少しだけ変更して保存します。
3. 変更をステージングしてコミットする
ターミナルを開き、いつものGitコマンドを実行します。
変更されたファイルを確認
git status
変更をステージング
git add designs/02_components/buttons.sketch
意図が明確に伝わるメッセージと共にコミット
git commit -m “feat(button): プライマリーボタンの背景色をアクセントカラーに変更”
4. 変更履歴（タイムライン）の視覚的追跡
「以前のデザインと、どこが変わったんだっけ？」を確認したいときは、GitHubやGitLabなどのWebUI、あるいはSourcetreeなどのGitクライアントを利用します。
ここで、Sketchのクラウド機能や、Gitのプラグイン（例：git-sketchなど）を組み合わせることで、「画像としての差分（ビジュアルDiff）」をブラウザ上で視覚的に比較できるようになります。
「あ、ここのパディングが4px広がってるな」「角丸の半径が変わったな」という変更が、コードのdiffを見るように一目瞭然になる瞬間は、エンジニアにとってもデザイナーにとっても感動的です。
—
5. 先輩からのアドバイス：チームに定着させるためのコツ
この運用をチームに導入する際、最初はデザイナーが黒い画面（ターミナル）にアレルギーを示すかもしれません。そんなときは、以下のステップで歩み寄ってみてください。
1. 最初はGitHub DesktopなどのGUIクライアントを使わせる
難しいコマンドは不要です。「ポチポチッとボタンを押すだけで、過去のデザインに戻せるタイムマシンがある」という体験をしてもらいましょう。
2. デザインの「プルリクエスト（PR）」文化を作る
「このデザインに変更してもいいですか？」をPRで投げ、エンジニアとデザイナーがコメント欄で「ここの余白、実装の都合上8pxに合わせられますか？」「あ、じゃあ修正します！」といった建設的なレビューを行えるようになります。これができたら、もうデザインと実装の乖離は怖くありません。
まとめ
SketchとGitの組み合わせは、デザインを「属人的な感覚の成果物」から「管理可能なプロダクトの資産」へと昇華させる強力なアプローチです。
最初は少しルールが必要ですが、一度このフローが回り始めると、「あの時のデザインどこいったっけ？」というストレスから完全に解放されます。ぜひ、あなたのチームの次のスプリントから試してみてくださいね。
あなたの開発ライフ、そしてデザインライフがよりスマートで創造的なものになりますように！