ブラウザだけで使える画像編集ツール「レイヤー画像エディタ」を作りました。インストールも会員登録も不要で、ページを開けばすぐに使えます。
スクリーンショットに矢印や文字を入れたり、複数の写真を1枚にまとめたり、ちょっとした画像の加工をしたいときに、重いソフトを立ち上げずに済むように作ったツールです。
どんなツール？
複数の画像をレイヤーとして重ねて、位置・大きさ・角度を調整し、最後に1枚の画像（PNG / JPEG / WebP）として書き出せます。文字や図形、手描きの線も追加できます。
画像の処理はすべてブラウザの中だけで行われ、サーバーに画像が送られることはありません。人に見せたくない画像でも安心して使えます。
使い方
- 「開く」ボタン、ドラッグ＆ドロップ、または
Ctrl+V（貼り付け）で画像を読み込む。複数枚まとめて読み込めて、最初の画像の大きさがキャンバスのサイズになります - キャンバス上でレイヤーをドラッグして移動。四隅や上の丸いハンドルで、大きさや角度を変えられます
- 必要に応じて、テキスト・図形・ペンで描き込みを追加する
- 「書き出し」で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 では「補正」の効果が反映されません。また、画面の広さを使うツールなので、スマートフォンよりパソコンでの利用を想定しています。
さっそく使ってみる
上の枠内でも試せますが、広い画面で使う方が快適です。全画面で開く
コメント