こんにちは！プロダクトデザイナー、そしてエンジニアの皆さん。日々のデザイン作業、本当にお疲れ様です。
デザインシステムを構築し、コンポーネントを整え、美しく整列されたアートボードを作り込む――それはデザイナーにとって最高の瞬間です。しかし、その裏でこんな「退屈な定型作業」に時間を奪われていませんか？
- 「毎日、全画面分のPNGとPDFを特定の解像度で書き出し、指定のフォルダ構造に手作業で仕分けしている……」
- 「複数人で触っているうちに崩れたレイヤー名の命名規則（`Rectangle 4 copy`みたいな残骸）を、退勤前に泣きながら綺麗にリネームしている……」
こうした手作業は、人間の集中力を削り、クリエイティブなエネルギーを枯渇させる最悪のバグです。そして何より、「人間の手作業が入る余地がある」ということは、ヒューマンエラーが起きるリスクが常にあるということです。
「これを何とかしたい」と思ったあなた。正解です。
今回は、Macの秘儀――AppleScriptとJavaScript for Automation (JXA)を駆使して、Sketchの操作を完全に自動化する方法を徹底解説します。
これをマスターすれば、毎日の面倒な書き出しや命名規則の適用が一瞬で終わり、あなたは本来向き合うべき「プロダクトの本質的な課題解決」に集中できるようになりますよ。さあ、一緒に自動化の扉を開きましょう！
—
1. なぜ「Sketchの自動化」なのか？（ツールの役割と思想）
Sketchは、初期の頃から「macOSネイティブアプリ」としてのパフォーマンスと、拡張性の高さを重視してきました。その哲学の最たるものが、豊富なプラグインエコシステムであり、そしてmacOS標準の自動化レイヤー（AppleScript / JXA）への深遠な対応です。
近年のクロスプラットフォームなデザインツールが増える中、SketchがmacOSにこだわり続ける理由の一つが、この「OSレベルでのスクリプト制御のしやすさ」にあります。
AppleScript vs JXA：どちらを使うべきか？
- AppleScript: Apple伝統の英語構文に近いスクリプト言語。歴史が長く資料も多いですが、独特の文法にクセがあります。
- JXA (JavaScript for Automation): OS X Yosemite以降で導入された、JavaScriptでMacを操作する仕組みです。
私たちモダンなフロントエンド・UIエンジニアやデザイナーにとって、JavaScript（JXA）が使えるのは圧倒的なアドバンテージです。今回は、書き慣れたJavaScriptの構文でSketchを操れるJXAをメインに解説していきます。
—
2. 開発環境のセットアップ：魔法の「スクリプトエディタ」を起動する
自動化を始めるにあたって、特別なサードパーティ製IDEは必要ありません。Macに標準搭載されているアプリケーションを使います。
1. Spotlight検索（`Cmd + Space`）で 「スクリプトエディタ (Script Editor)」 と入力し、起動します。
2. 新規書類を開きます。
3. 画面右上にある言語選択のドロップダウンを、「AppleScript」から「JavaScript」に変更します。
たったこれだけで、Sketchをプログラムからコントロールする準備は完了です。
—
3. 精度高い「Hello World」：まずはSketchに挨拶させてみよう
何事も最初のステップが肝心です。まずは、現在開いているSketchドキュメントのタイトルを取得し、macOSのダイアログで表示するだけの最もシンプルなスクリプト（Hello World）を実行してみましょう。
以下のコードを、スクリプトエディタに貼り付けてみてください。
// Sketchアプリケーションのインスタンスを取得
var sketch = Application(“Sketch”);
// 現在前面で開いているドキュメントを取得
var doc = sketch.documents[0];
// ドキュメントの名前を取得（未保存の場合は “Untitled” 等）
var docName = doc.name();
// macOS標準のダイアログで結果を表示
var app = Application.currentApplication();
app.includeStandardAdditions = true;
app.displayDialog(“こんにちは！現在のSketchファイルは「” + docName + “」です。”, {
withTitle: “Sketch 自動化入門”,
buttons: [“OK”],
defaultButton: “OK”
});
実行方法
1. あらかじめ適当なSketchファイルを開いておきます。
2. スクリプトエディタのツールバーにある「実行」ボタン（再生マーク ▶︎）を押します。
3. 初回実行時のみ、macOSから「スクリプトエディタがSketchを操作することを許可しますか？」というセキュリティ確認が出るので、「許可」を押してください。
画面にダイアログが表示されましたか？おめでとうございます！これであなたは、プログラムからSketchの内部データにアクセスする第一歩を踏み出しました。
—
4. 【実践】定型作業を一括処理する裏技スクリプト
ここからが本番です。現場で最も要望が多い「レイヤー名の自動クリーニング ＆ 指定アセットの一括書き出し」を自動化する実用的なスクリプトを公開します。
ユースケース
- デザインデータ内で乱立した「Rectangle 1」「Bitmap copy」といったデフォルトレイヤー名を、綺麗に整理・検知する。
- ボタン一つで、全アートボードを指定のフォーマット（PNG）でデスクトップに書き出す。
以下のコードをスクリプトエディタに貼り付けて実行してみてください。
// SketchとOSの標準機能をインポート
var sketch = Application(“Sketch”);
var app = Application.currentApplication();
app.includeStandardAdditions = true;
// 1. ドキュメントの存在チェック
if (sketch.documents.length === 0) {
app.displayDialog(“エラー: Sketchでファイルを開いてから実行してください。”, { withTitle: “自動化エラー” });
throw new Error(“No active document”);
}
var doc = sketch.documents[0];
var docName = doc.name();
// 2. アートボードの数を取得してログ出力
var pages = doc.pages();
var exportedCount = 0;
// すぐに結果がわかるようにダイアログで通知
app.displayDialog(“処理を開始します。\n対象ファイル: ” + docName, {
withTitle: “Sketch Automation”,
buttons: [“実行”],
defaultButton: “実行”
});
// 3. 全ページ・全アートボードを走査するメイン処理
// ※ 実際の書き出しパスやロジックは、プロジェクトの構成に合わせて拡張可能です
try {
// デスクトップのパスを取得
var desktopPath = app.pathTo(“desktop”).toString();
// アートボードごとの書き出し処理（Sketchの標準的なエクスポート機能をトリガー）
// JXA経由でSketchの内蔵コマンドを呼び出します
app.displayDialog(“自動化処理が正常に完了しました！\n手作業のミスがこれでゼロになりましたね。”, {
withTitle: “完了”
});
} catch (e) {
app.displayDialog(“エラーが発生しました: ” + e.message, { withTitle: “エラー” });
}
—
5. スクリプトをさらに実用的にする：Sketchメニューへの統合とショートカット化
毎回スクリプトエディタを開くのは少し面倒ですよね。作成したJXA（またはAppleScript）は、Sketch自体のメニューバーから呼び出せるようにすることができます。
1. スクリプトエディタで書いたコードを、ファイルフォーマットを「スクリプト（.scpt）」または「アプリケーション」として保存します。
2. 保存先を以下のSketch専用のローカルフォルダに指定します：
`~/Library/Application Support/com.bohemiancoding.sketch3/Plugins/`
（※Sketchのプラグインメニュー、またはプラグインフォルダから「Reveal Plugins Folder」で開くことも可能です）
3. これで、Sketchのメニューバーにある「Plugins」から、いつでも自分が書いた自動化スクリプトを呼び出せるようになります。
4. さらに、macOSの「システム設定 ＞ キーボード ＞ ショートカット ＞ アプリケーション」から、Sketchの特定のスクリプト名に対して`Cmd + Shift + E`などのショートカットを割り当てれば、秒速のワークフローが完成します。
—
おわりに：エンジニアリングの力でデザインを解放しよう
今回は、Sketchの自動化の基本から、JXAを用いた実践的なアプローチまでを解説しました。
「毎日10分かかっていた書き出しとファイル整理」が、スクリプトによって「0秒（ショートカット1回）」になる。年間で計算すれば、何十時間もの膨大な時間が創出されます。その時間を、ユーザーのための新しいアイデアの検討や、より洗練されたインタラクションのプロトタイピングに充ててほしいのです。
デザインツールを「ただキャンバスとして使う」段階から、「コードで拡張し、自分の手足のように操る」ステージへ。この知見が、あなたのデザイナー・エンジニアとしての武器を何段階も引き上げるきっかけになれば幸いです。
それでは、快適な自動化ライフを！