Photoshopスクリプト（jsx）│数値入力で図形を移動させる方法

2025年3月19日

UIデザインやレイアウト作業では、パーツや余白のサイズにルールを設けることが多く、正確な位置調整が必要になります。
Photoshopでは、数値入力による位置調整が可能です。本記事では、その方法を 2つ紹介します。

自由変形時の数値入力で図形を移動させる方法

最も手軽な方法です。
以下の手順で、数値入力による移動ができます。

移動させたいレイヤーを選択
Ctrl + T（Macの場合は Cmd + T）で 自由変形モード にする
画面上部のオプションバーにある座標入力ボックスに X, Y座標 を入力
Enter キーで確定

この方法は直感的ですが、相対的な移動 はできません。（例：現在の位置から「10px右に移動」など）

スクリプトにて数値入力で図形を移動させる方法

スクリプトを使うことで、現在の位置を基準に 相対的な移動 を行うことができます。

手順

下記のスクリプト（Pixel Move.jsx）を作成
Photoshopのスクリプト実行メニューからスクリプトを実行
ダイアログが表示されるので、移動距離を入力
OK を押すと指定したピクセル分だけ移動

pixelMove.jsx

このスクリプトでは、ダイアログボックスを表示し、X・Y方向の移動距離を入力できるようになっています。

OKを押せば、その数値分だけ現在のレイヤーが移動します。

グループにも対応 しているので、複数オブジェクトの移動にも便利です。

preferences.rulerUnits = Units.PIXELS;

// ダイアログを作成し、ユーザー入力を取得する関数
function getUserInput() {
    var dialog = new Window('dialog', '移動距離を入力してください');
    dialog.orientation = "column";
    dialog.alignChildren = "left";
    
    var groupX = dialog.add("group");
    groupX.orientation = "row";
    groupX.add("statictext", undefined, "幅　：");
    var offsetX = groupX.add("edittext", [0, 0, 50, 25], "283");
    groupX.add("statictext", undefined, " px");
    
    var groupY = dialog.add("group");
    groupY.orientation = "row";
    groupY.add("statictext", undefined, "高さ：");
    var offsetY = groupY.add("edittext", [0, 0, 50, 25], "195");
    groupY.add("statictext", undefined, " px");
    
    var centerGroup = dialog.add("group");
    var centerCheck = centerGroup.add("checkbox", undefined, "中心から");
    
    var buttonGroup = dialog.add("group");
    buttonGroup.orientation = "row";
    var okBtn = buttonGroup.add("button", undefined, "OK", { name: "ok" });
    var cancelBtn = buttonGroup.add("button", undefined, "キャンセル", { name: "cancel" });
    
    dialog.center();
    offsetX.active = true;
    
    var result = null;
    
    cancelBtn.onClick = function () {
        dialog.close();
    };
    
    okBtn.onClick = function () {
        result = {
            x: parseFloat(offsetX.text) || 0,
            y: parseFloat(offsetY.text) || 0,
            center: centerCheck.value
        };
        dialog.close();
    };
    
    dialog.show();
    return result;
}

// レイヤーを移動させる関数
function moveActiveLayer(offset) {
    if (offset) {
        if (offset.center) {
            activeDocument.activeLayer.translate(offset.x / 2, offset.y / 2);
        } else {
            activeDocument.activeLayer.translate(offset.x, offset.y);
        }
    }
}

// メイン処理
var userOffset = getUserInput();
if (userOffset) {
    moveActiveLayer(userOffset);
}