Sketchファイルが「重い」のは罪だ：デザインシステムの負債を解消する外科的最適化術
プロダクトが成長し、デザインシステムが肥大化するにつれ、我々が扱うSketchファイルは「ゴミの墓場」と化す。数MBだったはずのファイルが数百MBに膨れ上がり、保存のたびにレインボーカーソルが回る。これは単なるパフォーマンスの問題ではない。「整理されていない環境は、思考の解像度を下げる」。
今日は、Sketchを極限まで軽量化し、開発者とデザイナーの同期コストを極小化するための「外科的」アプローチを伝授する。
—
1. なぜSketchファイルは腐敗するのか
原因は明確だ。デタッチされたシンボル、過去の遺物となったローカルスタイル、そして「とりあえずコピーした」レイヤーの残骸。これらを放置することは、コードにおける「デッドコード」を残すのと同じだ。
まずは「汚染度」を可視化せよ
手動でチェックするなどという原始的な作業は今すぐやめるべきだ。以下のプラグインが必須となる。
- [Runner](https://sketchrunner.com/): 必須中の必須。コマンドパレットで全操作を完結させる。
- [Sketch Cleaner](https://github.com/DWilliames/sketch-cleaner): 未使用のシンボルやスタイルをワンクリックで一掃する。
- [Symbol Swapper](https://github.com/frankie-lo/symbol-swapper): 構造の壊れたシンボルを正しいマスターに再接続する。
—
2. 開発スピードを加速させる「キーボードショートカット」の極意
マウスを握る時間を減らすことが、フロー状態への近道だ。以下のショートカットを指に覚え込ませろ。
- `Cmd + J` (Runner): あらゆるプラグイン、シンボル、コマンドへのアクセス。
- `Cmd + Opt + Control + C`: スタイルをコピー。
- `Cmd + Opt + Control + V`: スタイルをペースト。
- `Ctrl + Shift + R`: 選択したレイヤーのサイズをリセット（解像度崩れを一発解消）。
—
3. デザインシステムの「クリーンアップ」戦略的ルール
ただ削除するだけでは、依存関係が壊れる。以下の手順で「外科手術」を行うのが正攻法だ。
A. 未使用シンボルの自動判別
Sketchには標準で「Unused Symbols」を検知する機能があるが、精度を上げるために `Runner` から `Find Unused Symbols` を実行せよ。ここで見つかったものは、原則として「死んでいる」と見なして削除して構わない。
B. カラーパレットの正規化
重複したカラー変数は、開発者がCSS変数やTailwindの設定を組む際の最大の障害だ。
1. `Sketch Cleaner` で未使用のカラー変数を削除。
2. その後、[Stark](https://www.getstark.co/) を使用してコントラスト比を再チェック。
3. カラーパレットのJSON化を行う（後述）。
—
4. チーム開発の真髄：設定のコード化と共有
Sketchファイル単体で管理する時代は終わった。デザインシステムは「設定ファイル」として外部管理し、Sketchと開発環境（Codebase）の双方で同期を取るべきだ。
推奨：デザイントークン（JSON）の活用
Sketchのデザイン設定を `design-tokens.json` としてエクスポートし、Gitで管理するフローを構築せよ。
{
“colors”: {
“primary”: { “value”: “#007AFF”, “type”: “color” },
“surface”: { “value”: “#FFFFFF”, “type”: “color” }
},
“spacing”: {
“xs”: { “value”: 4, “type”: “spacing” },
“md”: { “value”: 16, “type”: “spacing” }
}
// 開発者はこのJSONをToken TransformerでCSS/Swift/Kotlinに自動変換する
}
なぜこれをするのか？
デザイナーがSketch上で色を変えるたびにSlackで報告する？そんな無駄なコミュニケーションは排除せよ。JSONファイルをGitでプッシュすれば、CI/CDパイプラインを通って開発環境のCSS変数が自動更新される。これが「シームレスな連携」の正体だ。
—
5. プロの実践：明日から導入すべき「メンテナンス・ルーティン」
1. 週次コミットルール: 金曜の夕方、デザインシステムファイルを必ず `Sketch Cleaner` に通してからプッシュする。
2. レイヤー名の命名規則: `Prefix / Category / State` のフォーマット（例: `Button / Primary / Hover`）を強制する。プラグインで命名規則をチェックするルールをチームに浸透させる。
3. デタッチ禁止令: シンボルをデタッチして微調整する行為は、システムの腐敗を招く。修正が必要なら、必ずマスターシンボルを修正するフローを徹底せよ。
—
最後に：デザインは「整理」から始まる
優秀なエンジニアが汚いコードを許さないように、優秀なUIデザイナーは汚いSketchファイルを許さない。ファイルが軽くなれば、思考は研ぎ澄まされ、結果としてUIの品質は向上する。
今すぐ君のSketchファイルを開き、不要な残骸を削除してくれ。「動くこと」と「メンテナンス可能であること」は、全く別の次元の話だ。
最高峰のプロダクトを作るために、まずはその足元から整えていこう。