Sketchは「描くツール」ではない。君の手を解放する「自動化エンジン」だ。
UI/UXデザインの現場において、ピクセルをマウスでドラッグ＆ドロップし続ける時代は終わった。もし君が、毎日同じレイヤー名のリネームや、書き出し設定の確認に時間を費やしているなら、それは君の才能をドブに捨てているのと同じだ。
Sketchは、実は強力なプログラマブルな環境だ。AppleScriptやJXA（JavaScript for Automation）を使いこなせば、ただのデザインツールが、君の設計意図を高速で具現化する「自動化エンジン」へと変貌する。
今日は、現場で生き残るための「Sketch自動化の極意」を伝授する。
—
1. なぜ「手作業」を排除すべきなのか
デザイナーとエンジニアの連携において、最も恐ろしいのは「ゆらぎ」だ。命名規則のミス、不要なアセットの書き出し、隠しレイヤーの消し忘れ。これらは全て自動化で解決できる。
「人間はミスをする。だが、スクリプトは裏切らない。」
これが、大規模プロジェクトを完遂させるテックリードの哲学だ。
—
2. JXAで「命名規則の地獄」を即座に終わらせる
多くのプロジェクトで悩みの種となるのが、レイヤーの命名規則だ。JXAを使えば、選択したレイヤーを一瞬で統一できる。
以下のスクリプトを「Run Script」パネルに貼り付けて実行してほしい。
// レイヤー名を “Icon/Name” 形式に強制変換するJXAスクリプト
var sketch = require(‘sketch’);
var doc = sketch.getSelectedDocument();
var selection = doc.selectedLayers;
selection.forEach(layer => {
// スペースをハイフンに置き換え、小文字に統一
var newName = layer.name.toLowerCase().replace(/\s+/g, ‘-‘);
layer.name = ‘icon/’ + newName;
console.log(`Renamed: ${layer.name}`);
});
なぜAppleScriptではなくJXAなのか？
AppleScriptは直感的だが、現代のフロントエンドエンジニアにとってはJXAの方が圧倒的に書きやすい。ES6の文法がそのまま使えるため、既存のユーティリティ関数を流用できるからだ。
—
3. 実践：チームの生産性を底上げする「設定共有」のベストプラクティス
チーム開発において、個人の設定がバラバラなのは悪だ。プロジェクトごとに以下の設定を `.sketch-config.json` としてリポジトリ管理することを推奨する。
設定ファイル例: `sketch-settings.json`
{
“namingConvention”: {
“prefix”: “ui/”,
“case”: “kebab-case”
},
“exportOptions”: {
“formats”: [“png”, “svg”],
“scales”: [“1x”, “2x”],
“folder”: “./assets/dist”
},
“lintRules”: {
“maxLayerCount”: 50,
“requireSymbol”: true
}
}
これをスクリプトで読み込み、Sketchのバリデーションチェックとして走らせる。これで「レビューでの指摘事項」を未然に防げる。
—
4. プロの現場で絶対に入れるべき神プラグイン
自動化を極めるなら、既存の強力な武器を組み合わせるべきだ。
1. [Sketch Runner Pro](https://sketchrunner.com/): 全ての操作をコマンドパレット化する。マウスに触れる時間を極限まで減らす。
2. [Stark](https://www.getstark.co/): アクセシビリティを自動チェック。コントラスト比をスクリプトで一括修正する際に必須。
3. [Automate Sketch](https://github.com/Ashung/Automate-Sketch): JXAを学ぶ前にまずこれを見ろ。数百のコマンドが標準で備わっている。
—
5. テックリードからのアドバイス：自動化の「設計思想」
自動化スクリプトを書くときに最も重要なのは、「いつ、誰が、どう使うか」をコードに反映することだ。
- Atomic Designを意識したスクリプト構成: コンポーネント（Symbol）を操作する際は、必ず「シンボルマスター」を優先して操作するスクリプトを書くこと。
- ログを吐け: どのレイヤーが変換されたか、何がエラーになったか。コンソールにログを出力する癖をつけるだけで、デバッグ時間は半分になる。
- ショートカットに割り当てる: Sketchのメニューから `View > Customize Toolbar` を使い、頻繁に使うスクリプトをツールバーに配置するか、macOSの「キーボードショートカット」設定で `Cmd + Option + J` などのホットキーを割り当てろ。
—
最後に：ツールに支配されるな、ツールを支配しろ
UI/UXデザインの本質は、ピクセルを並べることではなく、ユーザーの課題を解決する「思考のプロセス」にある。そのプロセスを加速させるために、自動化はある。
今日紹介したスクリプトを、まずは自分のPCで動かしてみてほしい。「面倒だな」と感じたその瞬間こそが、君の生産性を倍にするコードを書くチャンスだ。
もし君が今のチームのUI/UXに限界を感じているなら、まず自らスクリプトを書いて、チームの退屈な作業をすべて自動化してしまえ。それが、本当の意味での「デザインエンジニアリング」だ。
さあ、コードを書こう。デザインは、もっと速く、もっと美しくなれる。