Photoshopスクリプト（jsx）│レイヤーを縦/横にピッタリ並べる方法

2025年3月19日2026年10月13日

Photoshopで選択したレイヤーを隙間なく縦または横に整列させるスクリプトを紹介します。

同サイズの画像を規則正しく並べる作業に適しています。

レイヤーをピッタリ並べるメリット

複数のレイヤーを均等に整列可能
手動で位置を微調整する手間を削減
並べる作業にかかる時間を短縮

スクリプトの導入方法

STEP.1 スクリプトファイルの作成と配置

下記のコードをテキストエディタに貼り付けて保存します（横並び用と縦並び用の2種類があります）。

Photoshopのほかの操作は、まとめからご覧いただけます。

あわせて読みたい

Photoshopの使い方｜保存・レイヤー・一括処理から探す Photoshopでやりたい作業から記事を選べます。複数の画像に同じ編集を繰り返す場合は「アクション・一括処理」、JSXファイルを初めて使う場合は「スクリプトの導入・実…

CGM_SelectFilesSideBySideJoinHorizontal.jsx

app.bringToFront();
//新規ドキュメント
var newDoc = documents.add(512, 512, 72, 'sample', NewDocumentMode.RGB, DocumentFill.TRANSPARENT, 1);
var doc = activeDocument;
doc.suspendHistory("レイヤーを横に並べる", "main()");

function main()
{
    //ファイルを読み込む
    sub1();

    //レイヤーを横にぴったり並べる
    sub2();

    function sub1()
    {
        var fileObj = new File();
        var fileArray = fileObj.openDlg('ファイルを選択してください:', '*', true);

        saveName = fileArray[1].name;
        savePath = fileArray[0].path;

        for (var i = 0; i < fileArray.length; i++)
        {
            var doc = open(fileArray[i]);
            //新しくドキュメントに読み込み
            doc.artLayers.add();
            //レイヤーを統合（透明のレイヤーと統合するので影響なし）
            doc.mergeVisibleLayers();
            //読み込んだファイル名を取得
            var name = doc.name;
            var layer = doc.activeLayer;
            //レイヤー名をドキュメント名に
            layer.name = name;
            //始めに作った新規ドキュメントへ複製コピー
            layer.duplicate(newDoc, ElementPlacement.PLACEATBEGINNING);
            //読み込んだドキュメントを閉じる
            doc.close(SaveOptions.DONOTSAVECHANGES);
        }

        //一番下のレイヤーの削除
        var layObj = activeDocument.artLayers;
        var bgLayer = layObj[layObj.length - 1];
        bgLayer.remove();
    }

    function sub2()
    {

        var lay = doc.layers;
        var len = doc.artLayers.length;

        function getSize(layer)
        {
            var height = parseInt(layer.bounds[3]) - parseInt(layer.bounds[1]);
            var width = parseInt(layer.bounds[2]) - parseInt(layer.bounds[0]);
            return {
                height: height,
                width: width
            };
        }

        function getPosition(layer)
        {
            var left = parseInt(layer.bounds[0]);
            var top = parseInt(layer.bounds[1]);
            return {
                left: left,
                top: top
            };
        }

        for (var i = len - 1; i >= 0; i--)
        {
            //レイヤー数が2以上場合
            if (len >= 2)
            {
                //一番下のレイヤー
                if (i == len - 1) { }
                //下から2番めのレイヤー
                if (i == len - 2)
                {
                    try
                    {
                        var A = getSize(lay[0]).width;
                        lay[i].translate(A, 0);
                    } catch (e) { }
                }
                //それ以外
                try
                {
                    var A = getPosition(lay[i + 1]).left;
                    var B = getSize(lay[i + 2]).width;
                    lay[i].translate(A + B, 0);
                } catch (e) { }
            }
        }

        function SavePng()
        {
            var doc = app.activeDocument;
            var docName = doc.name;
            var docPath = savePath; //'~/Desktop/';
            var folder = new Folder(docPath);
            if (docName.indexOf(".") != -1)
            {
                var baseName = docName.match(/(.*)\.[^\.]+$/)[1];
            } else
            {
                var baseName = docName;
            }
            if (folder == null)
            {
                return;
            }
            exportPng(doc, folder, baseName + '_結合' + '.png');
        }

        function exportPng(doc, folder, name)
        {
            var file = new File(folder.fsName + "/" + name);
            var options = new ExportOptionsSaveForWeb();
            options.format = SaveDocumentType.PNG;
            options.optimized = true;
            options.interlaced = false;
            doc.exportDocument(file, ExportType.SAVEFORWEB, options);
        }
        //すべての領域を表示
        activeDocument.revealAll();

        //透明部分のトリミング
        activeDocument.trim(TrimType.TRANSPARENT, true, true, true, true);

        //画像の統合
        //activeDocument.flatten();

        //同階層に保存
        //SavePng();
    }
}

CGM_SelectFilesSideBySideJoinVertical.jsx

app.bringToFront();
//新規ドキュメント
var newDoc = documents.add(512, 512, 72, 'sample', NewDocumentMode.RGB, DocumentFill.TRANSPARENT, 1);
var doc = activeDocument;
doc.suspendHistory("レイヤーを縦に並べる", "main()");

function main() {
    //ファイルを読み込む
    sub1();

    //レイヤーを横にぴったり並べる
    sub2();

    function sub1() {
        var fileObj = new File();
        var fileArray = fileObj.openDlg('ファイルを選択してください:', '*', true);
        
        saveName = fileArray[1].name;
        savePath = fileArray[0].path;
       
        for (var i = 0; i < fileArray.length; i++) {
            var doc = open(fileArray[i]);
            //新しくドキュメントに読み込み
            doc.artLayers.add();
            //レイヤーを統合（透明のレイヤーと統合するので影響なし）
            doc.mergeVisibleLayers();
            //読み込んだファイル名を取得
            var name = doc.name;
            var layer = doc.activeLayer;
            //レイヤー名をドキュメント名に
            layer.name = name;
            //始めに作った新規ドキュメントへ複製コピー
            layer.duplicate(newDoc, ElementPlacement.PLACEATBEGINNING);
            //読み込んだドキュメントを閉じる
            doc.close(SaveOptions.DONOTSAVECHANGES);
        }

        //一番下のレイヤーの削除
        var layObj = activeDocument.artLayers;
        var bgLayer = layObj[layObj.length - 1];
        bgLayer.remove();
    }

    function sub2() {

        var lay = doc.layers;
        var len = doc.artLayers.length;

        function getSize(layer) {
            var height = parseInt(layer.bounds[3]) - parseInt(layer.bounds[1]);
            var width = parseInt(layer.bounds[2]) - parseInt(layer.bounds[0]);
            return {
                height: height,
                width: width
            };
        }

        function getPosition(layer) {
            var left = parseInt(layer.bounds[0]);
            var top = parseInt(layer.bounds[1]);
            return {
                left: left,
                top: top
            };
        }

        for (var i = len - 1; i >= 0; i--) {
            //レイヤー数が2以上場合
            if (len >= 2) {
                //一番下のレイヤー
                if (i == len - 1) {}
                //下から2番めのレイヤー
                if (i == len - 2) {
                    try {
                        var A = getSize(lay[1]).height;
                        lay[i].translate(0, A);
                    } catch (e) {}
                }
                //それ以外
                try {
                    var A = getPosition(lay[i + 1]).top;
                    var B = getSize(lay[i + 2]).height;
                    lay[i].translate(0, A + B);
                } catch (e) {}
            }
        }

        function SavePng() {
            var doc = app.activeDocument;
            var docName = doc.name;
            var docPath = savePath; //'~/Desktop/';
            var folder = new Folder(docPath);
            if (docName.indexOf(".") != -1) {
                var baseName = docName.match(/(.*)\.[^\.]+$/)[1];
            } else {
                var baseName = docName;
            }
            if (folder == null) {
                return;
            }
            exportPng(doc, folder, baseName + '_結合' + '.png');
        }

        function exportPng(doc, folder, name) {
                var file = new File(folder.fsName + "/" + name);
                var options = new ExportOptionsSaveForWeb();
                options.format = SaveDocumentType.PNG;
                options.optimized = true;
                options.interlaced = false;
                doc.exportDocument(file, ExportType.SAVEFORWEB, options);
            }
            //すべての領域を表示
        activeDocument.revealAll();

        //透明部分のトリミング
        activeDocument.trim(TrimType.TRANSPARENT, true, true, true, true);

        //画像の統合
        //activeDocument.flatten();

        //同階層に保存
        //SavePng();
    }
}

CGM_SelectFilesSideBySideJoinHorizontal.jsxおよびCGM_SelectFilesSideBySideJoinVertical.jsxをPresets/Scriptsフォルダ内に保存します。

C:\Program Files\Adobe\Adobe Photoshop CC\Presets\Scripts\

保存後、Photoshopを再起動します。

STEP.2 スクリプトを実行

[ファイル] → [スクリプト] → [CGM_SelectFilesSideBySideJoin]を選択します。
選択中のレイヤーが端を揃えて並びます。
横並びまたは縦並びの各スクリプトで整列します。

この記事で紹介しているコードは、GitHubのMOTOKI-LLC/cg-method-codeにもまとめています。

レイヤーを操作するスクリプトは、ほかにもあります。

あわせて読みたい

Photoshopスクリプト（jsx）│まとめてグループセットを作成するスクリプト Photoshopで複数のグループを一括で作成できるスクリプトを紹介します。 Live2D用の素材分けなどで、空のグループ構成を先に作るためのサンプルです。画像を自動でパー…

あわせて読みたい

Photoshopスクリプト（jsx）│背景レイヤーの表示を切り替える方法 Photoshopで一番下の背景レイヤーの表示を切り替えるスクリプトを紹介します。背景レイヤーの表示・非表示を切り替えることで、デザインの確認作業を効率化できます。 …

あわせて読みたい

Photoshopスクリプト（jsx）│選択したレイヤーだけを表示・非表示する方法 Photoshopで選択したレイヤーのみを表示・非表示にするスクリプトを紹介します。このスクリプトを使用すると、レイヤーパネルの目のアイコンを1つずつ切り替える手間を…

あわせて読みたい

Photoshopスクリプト（jsx）│全レイヤーに「種類」と「不透明度」を追記する方法 Photoshopで全レイヤー名へ「種類」と「不透明度」を自動追記するスクリプトを紹介します。イラスト制作やLive2D向けのデータ整理に役立ち、レイヤー情報を名前に反映…

まとめ

複数レイヤーを隙間なく整列可能
手動での位置合わせが不要
連続した並べ替え作業を効率化

Photoshopでレイヤー配置の手間を減らし、作業を効率化してみてください。

よくある質問：選択したレイヤーを隙間なく縦・横に並べる

このスクリプトでは何ができますか？

Photoshopで選択したレイヤーを、隙間なく縦または横に整列させます。同サイズの画像を規則正しく並べる作業に適しています。

どんなメリットがありますか？

複数のレイヤーを均等に整列できます。手動で位置を微調整する手間を減らし、並べる作業にかかる時間を短縮できます。

横並び用と縦並び用の2種類があるのですか？

はい。CGM_SelectFilesSideBySideJoinHorizontal.jsx（横並び用）とCGM_SelectFilesSideBySideJoinVertical.jsx（縦並び用）の2種類を紹介しています。並べたい向きに合わせて使い分けます。

スクリプトはどのように導入しますか？

記事のコードをテキストエディタに貼り付けて保存し、横並び用と縦並び用の両方のファイルをPresets/Scriptsフォルダ内に保存します。保存後にPhotoshopを再起動してください。

どうやって実行しますか？

整列させたいレイヤーを選んだ状態で、[ファイル] → [スクリプト] から、横並び用または縦並び用のスクリプトを選択します。選択中のレイヤーが端を揃えて並びます。

どんな作業に向いていますか？

複数のレイヤーを一列に並べる、連続した並べ替え作業に向いています。手動での位置合わせが不要になり、レイヤー配置の手間を減らせます。

スクリプトのコードはどこで確認できますか？

記事内に掲載しているほか、GitHubのMOTOKI-LLC/cg-method-codeにもまとめています。

メニューの表示や名称が記事と違う場合はどうすればよいですか？

Photoshopのバージョンによってメニューの名称や配置が変わることがあります。最新の操作手順は、Adobeの公式情報で確認してください。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

Photoshopスクリプト（jsx）│レイヤーを縦/横にピッタリ並べる方法

レイヤーをピッタリ並べるメリット

スクリプトの導入方法

STEP.1 スクリプトファイルの作成と配置

STEP.2 スクリプトを実行

まとめ

よくある質問：選択したレイヤーを隙間なく縦・横に並べる

このスクリプトでは何ができますか？

どんなメリットがありますか？

横並び用と縦並び用の2種類があるのですか？

スクリプトはどのように導入しますか？

どうやって実行しますか？

どんな作業に向いていますか？

スクリプトのコードはどこで確認できますか？

メニューの表示や名称が記事と違う場合はどうすればよいですか？

次に学ぶ・作業環境を選ぶ

関連記事