ブラウザだけで使える「レイヤー画像エディタ」を作りました

ブラウザだけで使える画像編集ツール「レイヤー画像エディタ」を作りました。インストールも会員登録も不要で、ページを開けばすぐに使えます。

スクリーンショットに矢印や文字を入れたり、複数の写真を1枚にまとめたり、ちょっとした画像の加工をしたいときに、重いソフトを立ち上げずに済むように作ったツールです。

どんなツール？

複数の画像をレイヤーとして重ねて、位置・大きさ・角度を調整し、最後に1枚の画像（PNG / JPEG / WebP）として書き出せます。文字や図形、手描きの線も追加できます。

画像の処理はすべてブラウザの中だけで行われ、サーバーに画像が送られることはありません。人に見せたくない画像でも安心して使えます。

使い方

1. 「開く」ボタン、ドラッグ＆ドロップ、または Ctrl+V（貼り付け）で画像を読み込む。複数枚まとめて読み込めて、最初の画像の大きさがキャンバスのサイズになります
2. キャンバス上でレイヤーをドラッグして移動。四隅や上の丸いハンドルで、大きさや角度を変えられます
3. 必要に応じて、テキスト・図形・ペンで描き込みを追加する
4. 「書き出し」で1枚の画像としてダウンロード

途中の作業は「保存」でプロジェクトファイル（.json）として残せるので、あとから続きを編集できます。ブラウザ内にも自動保存されるので、うっかりタブを閉じても次に開いたときに復元できます。

主な機能

• レイヤー：移動・リサイズ・回転・反転・不透明度・合成モード（乗算・スクリーン・オーバーレイなど16種）・並べ替え・複製・結合
• 補正：明るさ・コントラスト・彩度・色相・ぼかし・グレースケール・セピア・階調反転（レイヤーごとに設定）
• トリミングと範囲の消去：ドラッグで切り抜き。指定した範囲を透明にすることもできます
• テキスト：複数行・フォント・サイズ・太字/斜体・文字色・縁取り・行間
• 図形：矩形（角丸）・楕円・線
• 手描き：ペン・ブラシ・消しゴム。ペンタブレットの筆圧にも対応
• キャンバス：サイズ変更・背景色（透明も可）・全体の回転/反転・グリッド表示と吸着
• 書き出し：PNG / JPEG / WebP、画質や出力サイズを指定可能
• 元に戻す / やり直す：50段階

便利なショートカット

キー	動作
Ctrl+V	クリップボードの画像を貼り付け
Ctrl+Z / Ctrl+Y	元に戻す / やり直す
Ctrl+D	レイヤーを複製
Ctrl+S	画像を書き出し
Ctrl+Shift+S	プロジェクトを保存
V / P / B / E	選択 / ペン / ブラシ / 消しゴム
矢印キー	1px移動（Shiftで10px）
ホイール	ズーム
Space＋ドラッグ	表示位置を移動

対応ブラウザ

Chrome / Edge / Firefox の最新版がおすすめです。Safari では「補正」の効果が反映されません。また、画面の広さを使うツールなので、スマートフォンよりパソコンでの利用を想定しています。

さっそく使ってみる

上の枠内でも試せますが、広い画面で使う方が快適です。全画面で開く