制作実績 01 / 03 ・ デスクトップアプリ

LayerLab

ゲーム制作向けのテクスチャ(3Dモデルの表面に貼る画像)と、告知用の画像をつくるためのWindowsアプリです。レイヤーを重ねる画像編集と、凹凸や質感を表す画像の生成を、インターネットにつながずに一つのアプリで行えます。

開発中・ソースのみ公開

LayerLabの編集画面。メニュー、ツールバー、キャンバス、プロパティとレイヤーのパネルが並び、レース素材のノーマルマップを編集している
LayerLab — レース素材のノーマルマップを編集している画面

01 / OVERVIEW

概要

背景

道具が分かれていました

ゲームの制作では、画像の加工、チャンネルの詰め替え、凹凸を表す画像の作成、見え方の確認を、別々のソフトで行うことがよくあります。

つくったもの

編集と生成を同じアプリにまとめました

レイヤー・選択範囲・文字などの画像編集に、チャンネルの詰め替え、ノーマルマップ・PBRマップの生成、光とタイルでの確認を組み合わせました。

現在

ソースを公開しています

GitHubでソースコードを読めます。配布用のアプリは含みません。画面は日本語と英語に対応しています。

担当した範囲

写真編集ソフトの置き換えにはせず、テクスチャと告知画像に必要な操作に絞りました。企画、画面の設計、実装、動作の確認までを一人で担当しています。

ご依頼いただけること

決まった手順を何度も繰り返す作業を、一つの画面にまとめる専用ツールの制作をお受けしています。

制作の相談をする

02 / FEATURES

主な機能

加工、凹凸や質感の画像の生成、仕上がりの確認を、同じアプリの中で続けて行えるようにしました。

チャンネルパッカーの画面。R=Metallic、G=Occlusion、B=Detail、A=Smoothnessの各チャンネルに元画像と取り出し方を選ぶ
Unity HDRP / URP の Mask Map プリセット
01 / CHANNEL PACKER

用途に合わせてRGBAを詰め替えられます

画像のR・G・B・A(赤・緑・青・透明度)の各チャンネルに、別々のグレースケール画像を割り当てて1枚にまとめます。Unityでよく使う描画方式(HDRP / URP)向けのMask Mapや、シェーダーに合わせた独自の組み合わせで書き出せます。

  • チャンネルごとの反転
  • Unity向けのプリセットから開始
PBRマップ一括生成の画面。ソースレイヤー、モノクロ化の方式、事前ぼかし、生成するマップの選択が並ぶ
1枚の画像から Normal / AO / Roughness / Mask Map
02 / PBR MAPS

1枚の画像からPBRマップを生成します

1枚の画像から、光の当たり方を決める画像(PBRマップ)をまとめてつくります。凹凸を表すNormal、影のたまりを表すAO、表面の粗さを表すRoughnessなどと、Unity向けのMask Mapを一度に出力します。ノーマルマップの向きは、DirectX形式とOpenGL形式を切り替えられます。

  • モノクロ化の方式と、細かな凹凸の残し方を調整
  • 球・平面に光を当てて凹凸を確認
03

告知画像もつくれる画像編集です

レイヤーの重ね合わせ、文字と図形、ブラシ、選択範囲など、告知画像やサムネイルづくりに必要な編集ができます。

04

タイルと3Dで事前に確認できます

画像を3×3に並べたり半分ずらしたりして、繰り返し貼ったときの継ぎ目を探せます。球や平面に光を当てて、凹凸の見え方も確かめられます。

05

ゲーム制作向けに書き出せます

512・1024など、ゲームで扱いやすい2のべき乗のサイズにそろえ、ファイル名の末尾をUnityの慣習に合わせて書き出します。複数の倍率での一括書き出しにも対応しています。

06

PSDの読み込みと作業の保存ができます

PSD / PSBを読み込み、編集中の状態は独自形式(.llab)で保存できます。画像はPNG / JPEGで書き出します。

03 / DESIGN DECISIONS

設計のポイント

01

使い慣れたショートカットにそろえました

V・M・L・Bなどのツール切り替え、Ctrl+Tの自由変形、Spaceを押しながらの移動など、一般的な画像編集ソフトと同じキー操作にそろえました。

02

用途を絞りました

写真編集ソフト全体を置き換えるのではなく、ゲーム制作向けのテクスチャと告知画像に必要な機能へ重点を置いています。

03

できないことを先に書いています

PSDは読み込みのみ、生成系の処理は一辺4096pxまで、自動保存はなし。こうした制約を説明書き(README)に明記し、使い始める前に分かるようにしています。

04

日本語と英語の画面に対応しました

メニューや設定を含む画面全体を日本語と英語に対応させ、表示メニューから切り替えられるようにしました。

04 / TECHNOLOGY

使用技術

編集中の状態、取り消しの履歴、キャンバスへの描画、ファイルの読み書きを役割ごとに分け、Windows向けのアプリとして組んでいます。

Electron
Windowsアプリの土台と、手元のファイルの読み書き
React / TypeScript
画面の部品と、型を使った誤りの少ない実装
Konva
キャンバスへの描画と変形
Zustand / Zundo
編集中の状態と、取り消し・やり直しの履歴
Vite
開発とビルド

05 / TIMELINE

開発の経緯

  1. 2026.05

    骨組みとUnity向けの機能

    レイヤー編集の土台に、チャンネルの詰め替え、ノーマルマップの生成、タイル表示、Unity向けの書き出しを加えました。

  2. 2026.06

    操作感・PSD・PBRマップ

    選択ツールやブラシ、PSDの読み込み、1枚の画像からのPBRマップ生成と、光を当てての確認を追加しました。

  3. 2026.07

    日英2言語の画面

    画面全体を日本語と英語に対応させ、レイヤーパネルを使いやすく整えました。

  4. 2026.09

    ソースを公開

    GitHubでソースコードを公開しました。改善は今も続けています。

CONTACT

専用ツールのご相談

決まった作業を一つの画面にまとめる、業務用・クリエイティブ用のツールづくりをご相談いただけます。

全国オンライン対応・通常1〜2営業日以内に返信

相談する