WebPixEdit – 無料オンライン画像編集

できること

エディターはデスクトップの画像編集ソフトに近い構成です。上にメニュー、左にツールボックス、メニューの下にツールオプション、右にカラー・レイヤー・ヒストリーのパネルがあります。主な機能は次のとおりです。

レイヤー、グループ、マスク

最大40枚のレイヤーで元の画像を壊さずに作業できます。レイヤーごとに不透明度、16種類の描画モード、ピクセル・透明ピクセル・位置のロック、レイヤースタイル（ドロップシャドウ、光彩（外側）、境界線、カラーオーバーレイ）を設定できます。レイヤーはグループにまとめて折りたたんだり非表示にしたりでき、グループ自体に不透明度と描画モードを設定することもできます。レイヤーマスクは黒と白で塗って、レイヤーの一部を隠したり表示したりします。クリッピングマスクは、1つのレイヤーを下のレイヤーの形に合わせて表示します。

調整レイヤー

明るさ・コントラスト、レベル補正、トーンカーブ、露光量、自然な彩度、色相・彩度、カラーバランス、白黒、フォトフィルター、チャンネルミキサー、階調の反転、ポスタリゼーション、2階調化、グラデーションマップを調整レイヤーとして追加できます。下のレイヤーのピクセルは変えずに見た目だけを変え、いつでも開き直して値を直せます。同じ補正を、プレビュー付きで一度だけ適用することもできます。

選択

長方形、楕円、投げなわ、多角形選択、自動選択ツールを、追加・削除・共通部分のモードで組み合わせられます。選択範囲はぼかし、拡張、縮小、スムーズ、境界線化ができ、色域指定は選んだ色に近いすべてのピクセルを選択します。描画、塗りつぶし、フィルター、切り取り／コピーは、常に現在の選択範囲の中だけに作用します。

描画とレタッチ

ブラシ、鉛筆、消しゴムは、サイズ、硬さ、不透明度、流量、手ぶれ補正、シンメトリー、筆圧に対応します。レタッチツールには、コピースタンプ、修復ブラシ、スポット修復ブラシ、ぼかし、シャープ、指先、覆い焼き、焼き込み、スポンジがあります。ペイントバケツで塗りつぶし、線形・円形・角度・反射・ダイヤモンドのグラデーションを描き、図形や編集できるテキストレイヤーを追加できます。 ブラシは、丸、カリグラフィー、マーカー、チョーク、木炭、スプレー、ドット、星、水彩の9種類の先端形状から選べます。

色調補正とフィルター

トーンカーブ、レベル補正、色相・彩度、カラーバランス、自然な彩度、シャドウ・ハイライト、自動レベル補正など20種類の補正と、ガウス・ボックス・移動・放射状ぼかし、アンシャープマスク、ノイズ、メディアン、エンボス、輪郭検出、モザイク、渦巻き、球面、波紋、ハイパス、周辺光量などの19種類のフィルターは、適用前にリアルタイムでプレビューできます。

変形、切り抜き、カンバス

自由変形では、レイヤーや選択範囲の拡大縮小、回転、反転ができます。切り抜きツールはハンドル操作と縦横比の固定に対応し、画像サイズ、カンバスサイズ、任意角度の回転も変更できます。定規、ガイド、スナップで正確な位置合わせができます。

ファイル

PNG、JPEG、WebP、GIF、BMP、AVIF、HEIC（ブラウザが対応している場合）と、レイヤー付きのPhotoshop PSDファイルを開けます。書き出しダイアログからPNG、JPEG、WebP、PSDで保存でき、推定ファイルサイズも確認できます。

使い方

1. 画像を開くか新規作成します。「ファイル → 開く」を選ぶか、ファイルをウィンドウにドラッグするか、Ctrl Vで貼り付けます。白紙から始めるには「ファイル → 新規」でサイズや、1920 × 1080、正方形1080などのプリセットを選びます。
2. ツールを選びます。ツールボックスのツールをクリックするか、対応するアルファベットキーを押します。メニューの下のバーに、サイズ、硬さ、許容値など現在のツールの設定が表示されます。
3. レイヤー上で作業します。右のレイヤーパネルで、今編集しているレイヤーを確認します。描く前に新しいレイヤーを追加しておくと、あとで元の画像に触れずに取り消したり隠したりできます。
4. 色味を整えます。一度だけ適用するなら「画像 → 色調補正」メニュー、あとで値を直したいなら「レイヤー → 新規調整レイヤー」を使います。
5. 必要なら元に戻します。Ctrl Zで取り消せます。ヒストリーパネルには最近の操作が並び、項目をクリックするとその時点に戻れます。
6. 作業を保存します。「ファイル → 書き出し」でPNG、JPEG、WebP、PSDとして保存します。レイヤーを残したいときはPSDで保存してください。

どの段階でもサーバーにデータは送信されません。保存せずにページを閉じると作業は失われるので、離れる前に書き出してください。

速く、安全に編集するためのコツ

• コピーの上で編集しましょう。始める前にCtrl Jで背景レイヤーを複製します。失敗してもコピーを削除すれば元の画像が残ります。
• 消しゴムよりマスクを使いましょう。レイヤーマスクはピクセルを削除せずに隠します。黒で塗ると隠れ、白で塗ると表示され、間違いは反対の色で塗って直せます。
• 色の調整には調整レイヤーを使いましょう。あとから変更や削除ができ、調整レイヤーのマスクで効果を写真の一部だけに限定できます。
• 部分的な変更はまず選択から。選択範囲があるとき、ブラシ、塗りつぶし、フィルターは選択した部分だけに作用します。境目がなじむよう、選択範囲を数ピクセルぼかしましょう。
• Spaceを押しながら画面を移動します。一時的に手のひらツールになります。Ctrl + マウスホイールでポインターの位置を中心に拡大縮小できます。
• ブラシはキーボードで調整します。[と]でサイズ、Shift [とShift ]で硬さ、数字キーで不透明度を変えます。
• 直線を描く。ブラシで一度クリックし、Shiftを押しながら別の場所をクリックすると、2点を結ぶ直線が描けます。
• 色をすばやく取得します。Iでスポイト、Xで描画色と背景色の入れ替え、Dで黒と白に戻します。
• 用途に合う形式で保存しましょう。図やスクリーンショット、透過が必要なものはPNG、写真はJPEGかWebP、あとで編集を続けたいならPSDが向いています。
• 大きな画像はメモリを使います。非常に大きなカンバスや多くのレイヤーは大量のメモリを使います。動作が重いときは、不要なレイヤーを統合するか、小さいサイズで作業してください。

キーボードショートカット

ショートカットはデスクトップ向け画像編集ソフトの慣例に合わせています。macOSではCtrlの代わりにCmdを使ってください。全一覧はエディターの「ヘルプ → ショートカット」でも見られます。

よくある質問

WebPixEditは本当に無料ですか？

はい。アカウントも、透かしも、有料プランもありません。運営費をまかなうため、サイトに広告が表示されることがあります。

画像はサーバーにアップロードされますか？

いいえ。すべての編集はあなたの端末のブラウザ内で行われ、画像が私たちに送られることはありません。サイトが行う通信は、自サイトのページとスクリプトの取得だけです。

Photoshop（PSD）ファイルを開いたり保存したりできますか？

はい。レイヤー、グループ、マスク、不透明度、描画モード、クリッピング、主なレイヤー効果が保持され、よく使われる調整レイヤーは編集可能な状態で開きます。スマートオブジェクトや一部の調整の種類のように正確に再現できない機能は、ファイルを開くときに通知され、Photoshopが保存したとおりの統合画像として開くこともできます。

どのファイル形式を開いて保存できますか？

PNG、JPEG、WebP、GIF、BMP、AVIF、HEIC（対応ブラウザ）、PSDを開けます。保存できるのはPNG、JPEG、WebP、PSDです。

iPhoneのHEIC写真は開けますか？

Safariなら開けます。ChromeとFirefoxはHEICをデコードできないので、写真をJPEGに変換するか、iPhoneの設定でJPEGで保存するように変更してください。

スマートフォンやタブレットでも使えますか？

狭い画面に合わせてレイアウトが変わり、タッチ操作も使えますが、エディターはデスクトップやノートPCでマウスやペンを使うことを想定しています。選択やマスクのような細かい作業は、大きな画面のほうがずっと楽です。 タッチ画面では、2本指のピンチで拡大・縮小、2本指のドラッグで画面の移動ができ、2本指で軽くタップすると直前の操作を取り消せます。

何回まで取り消せますか？

メモリの範囲内で最大100ステップです。非常に大きな画像は1ステップあたりのメモリが増えるため、少なくなることがあります。ヒストリーパネルの項目をクリックするとその時点に移動できます。

画像サイズに制限はありますか？

40MBまでのファイルを開けます。約2400万画素を超える写真は、端末のメモリを守るため開くときに縮小されます。カンバスは1辺が最大12,000ピクセルです。

タブを閉じたら作業が消えました。

エディターは作業内容をサーバーにもブラウザにも保存しません。ページを閉じる前にファイルに書き出してください。レイヤーを残したい場合はPSDがおすすめです。

オフラインでも使えますか？

エディターは最初に一度、インターネットから読み込む必要があります。ページを読み込んだあとは編集自体に接続は不要ですが、インストール型のオフラインモードはまだありません。

対応ブラウザは？

Chrome、Edge、Firefox、Safariの最新バージョンです。HEICのデコードやWebPの書き出しなど、ブラウザに依存する機能は差が出ることがあります。

PSDがPhotoshopと少し違って見えるのはなぜですか？

Photoshopの一部の描画モード、レイヤー効果、調整の種類は、ほかのソフトでは近似的にしか再現できません。差が大きい場合、WebPixEditはファイル内にPhotoshopが保存した統合画像で開くことを提案します。この方法は正確です。

シミや不要なものを消すには？

小さなシミはスポット修復ブラシでなぞると、周囲の質感で埋められます。大きなものにはコピースタンプを使います。Alt+クリックでコピー元を決め、消したいものの上をなぞります。レタッチのガイドで詳しく説明しています。

不具合の報告や機能の提案はどうすればいいですか？

[email protected] に、ブラウザ、画像の形式とサイズ、問題が起きた手順を書いて送ってください。

ガイド

よくある作業を手順ごとに説明した記事です。

• 写真の色味と明るさを補正する方法眠い写真、暗い写真、色かぶりのある写真を、レベル補正、トーンカーブ、色相・彩度で直し、あとから変更できる調整レイヤーを使う方法。
• レイヤーマスクを理解する：何も消さずに画像の一部だけを編集するレイヤーマスクとは何か、どう塗るのか、2枚の写真を滑らかにつなぐ方法を学びます。
• ブラウザでPSDファイルを開く・保存するPSDファイルの扱い：保持されるレイヤー、マスク、効果と、「統合画像で開く」の意味、保存のコツ。
• どの選択ツールを使えばいい？長方形、楕円、投げなわ、多角形選択、自動選択、色域指定を比較し、きれいな選択範囲の境界を作るコツを紹介します。
• レタッチ：シミや不要なものを消すスポット修復ブラシ、修復ブラシ、コピースタンプで、シミ、ほこり、小さなものを目立たず消す方法。
• PNG、JPEG、WebP、PSD：どの形式で保存する？書き出し形式を比較し、それぞれをいつ使うか、品質設定がファイルサイズに与える影響、透過が重要な理由を学びます。

すべてのガイドを見る