ReDesign：1枚の画像を編集可能なレイヤーやベクター構造に復元

ReDesignは、統合された1枚の平面画像を、編集可能なデザイン階層構造へと復元するオープンソースツールです。元データが失われてPNG画像やスクリーンショットしか残っていない場合でも、実際のフォント情報を持つテキスト、ベクター図形、RGBAレイヤー、重なり順を解析し、JSON形式の階層データとして書き出せます。

復元後は、FigmaやPhotoshopの作業ファイルと同じように、特定テキストの打ち替え、図形の再着色、配置の移動、要素のサイズ変更が個別に行えます。

画像を分解する仕組み

ReDesignは画像全体をレイヤーツリーの根と見なし、すべての末端ノードが単一の編集可能な要素になるまで、上から下へと段階的に分解していきます。

全体の司令塔となるのはVLMコントローラーです。画像領域を確認しながら、テキスト抽出、レイヤー分離、領域分割、物体検出と切り抜き、ベクター化の5つのツールのうち最適な処理を選択します。

テキストを見つけると、PaddleOCRやフォント認識、Hi-SAM、LaMaのインペイントを組み合わせて編集可能な文字レイヤーを取り出し、背後の背景を修復します。重なり合う要素にはQwen-Image-Layeredを用いて重なり順付きのRGBAレイヤーを生成し、境界のはっきりした図形はVTracerでベクターパスに変換します。各工程では検証モジュールが結果をチェックし、重複や不要な枝刈りを行って精度を保ちます。

動作環境とリソース要件

ソースコードはGitHubで公開されており、909種類のデザインフレームを含む評価用データセットFigma-909もCC BY 4.0で提供されています。

マシンスペック面で最も負荷が大きいのはQwen-Image-Layeredです。bf16実行時に約55GBのGPUメモリを必要とし、80GB GPUが1枚、40GB GPUが2枚、または24GB GPUが4枚必要になります。SAM 2などのビジョンツール用にも追加で10GBから16GBのGPUメモリが求められますが、PaddleOCRはCPU上で動作します。

コントローラー部分はOpenAI互換のAPIエンドポイント経由で呼び出す仕様になっており、標準ではgemini-3-flash-previewが指定されていますが、設定ファイルを変更すればGPT-4oやローカルのvLLMサーバーに切り替えることも可能です。

なぜ重要か

過去のデザイン資産の元ファイルが見当たらず、書き出し済みの画像から再編集を迫られるデザイナーや開発者にとって、ReDesignは非常に実用的な選択肢です。画像を丸ごとAIで再生成して雰囲気を似せるのではなく、文字属性やベクター輪郭、重なり順といった実用的な構造をそのまま復元してくれる点に価値があります。

単一の巨大モデルですべてを解こうとせず、文字認識にはPaddleOCR、セグメンテーションにはSAM 2、レイヤー分離にはQwen-Image-Layeredと、実績のある専門ツールをエージェントで束ねた設計は極めて現実的です。FigmaやCrelloを用いた精度比較でも、単体生成モデルを上回る成果を残しています。唯一の壁は複数の大型モデルを並行して動かすためのGPU環境ですが、自前のサーバー環境があるチームならすぐに試す価値があります。