画像をAIで自動分割してPSDファイルで保存できるツールを作りました

イラストの大幅な加工や人物切り抜きなどにおいて、**「この画像、各パーツごとにレイヤー分けされていたら便利なのに」**と思ったことはありませんか？

たとえば、「奥の背景と、手前の人物を別々に加工したい」「空の部分だけ色味を変えたい」というケースです。手作業でちまちまペンツールで時間をかけて切り抜くのはかなり大変ですよね。

そこで今回、GlowPunchではあなたのブラウザのパワーを使ってAIで素早くレイヤーに分割し、なんとそのままPhotoshopで開けるPSDファイルとして保存できるツールを公開しました！

AI自動レイヤー分割＆PSDエクスポートツールとは？

このツールは、最新のWebAI技術（ONNX Runtime / Transformers.js）を活用し、ブラウザ内で完結する完全無料のツールです。

AIが賢くパーツを切り分け
画像をアップロードしてボタンを押すだけで、AIが画像を分析し、「人間」「壁」「空」「地面」「木」など、要素ごとに自動的にレイヤーを分けてくれます。
加工しやすいPSDデータとして出力
切り分けたレイヤーは、ツール上で非表示にしたり確認できるだけでなく、そのままPSD形式としてダウンロードできます。Photoshopや無料のブラウザツール（Photopeaなど）で開けば、すぐに各レイヤーを編集できます。
完全ローカル処理で安全＋サクサク
本ツールは最新のAIであるSegFormerモデルを利用していますが、なんとすべての処理をあなたの使っているスマホやPCのブラウザの中で行います。外部のサーバーへ画像データを一切送信しないので、プライベートな写真や機密性の高い画像でも安心して使えます！

画像をアップロード（ドロップ＆ドロップ） ページ上部のエリアに、分割したい画像（JPEG / PNG / WEBP）をアップロードします。
「AIで要素ごとに分割」ボタンをクリック 初回のみ、AIモデルのダウンロードが行われるため数秒〜十数秒程度の時間がかかります（通信環境によります）。2回目以降はキャッシュが効くため一瞬で処理が始まります。
レイヤーの確認とオンオフ 処理が完了すると、AIの判定ごとに分けられたレイヤーリストが表示されます。左側の目玉アイコンをクリックすることで、その部分の表示/非表示を切り替えられます。
PSDのダウンロード 「PSDとして保存」ボタンを押すだけで、現在表示されているレイヤー構造を維持したまま、そのまま使えるPSDファイルが出力されます！

裏側では、ブラウザ上で機械学習の推論を実行できる @xenova/transformers と重み付けされたXenova/segformerを使っています。

セグメンテーション（画像の意味的分割）を行なうディープラーニングのモデルが元画像から「どのピクセルがどのカテゴリか」というマスクデータを作り出し、元の画像をそれぞれのマスクに合わせてくり抜き、ag-psd というライブラリでPSDフォーマットへと再構築しています。

これらがすべてフロントエンド側（JavaScript）だけで完結しているのが、最新のWebテクノロジーのすごいところです。

GlowPunchのWebツールはどれも「ちょっとした不便」を「インストール不要」かつ「ローカルの安全性」を満たした上で解決することを目指しています。

ぜひ、デザインや加工の時短に役立ててみてください！