Photoshopなどでちょこっとだけ画像編集したくなったとき。

無料プランで使えるオンライン画像編集ツール「Photopea」。

ちょっとした画像編集作業をしたくなったとき、このパソコンにPhotoshopが入っていればなぁ、と思うことがある。

しかしPhotoshopはなかなか高価であり、単発や短時間の作業ではコスパが良くない。

そういうときに、ブラウザ上で無料で使え、アカウント登録は任意、かつ広告まで付いているというオンライン画像編集ツールがある。

※有料プランでは広告は表示されず。

参考：Photopea | Online Photo Editor

Photopeaは、Photoshopの画像編集のような操作感。

広告で運営されているため、右サイドに広告が表示されるが、無料なのに広告まで付いている！と思えばそれほど気にならない。

Photoshopのようなインターフェイスで、ツールもやパネルなどもPhotoshop風になっており、キーボードショートカットの多くも共通している。

例）

• 戻る：「command + Z」 / 「Ctrl + Z」
• 進む：「shift + command + Z」 / 「shift + Ctrl + Z」
• ツールバーや選択範囲のショートカットなどもほぼ共通。

ちょっとした作業や、Photoshopの練習用には十分に使える。

petsPhotopeaのキーボードショートカット補足。

ブラウザと同じショートカット、例えば新規ファイル作成の「command + N」 / 「Ctrl + N」などはブラウザが優先されるので若干注意が必要だが、「alt」キーを一緒に押すとPhotopeaの新規ファイル作成画面が開ける。

バウンディングボックスを出す自由変形も同様で、「command + T」 / 「Ctrl + T」 だとブラウザの新規タブが開くので「alt」を付ける。

例）

• 新規ファイル（新規プロジェクト）：「alt + command + N」 / 「alt + Ctrl + N」。
• 自由変形（バウンディングボックスの表示）：「alt + command + T」 / 「alt + Ctrl + T」。
• 保存：「command + S」 / 「Ctrl + S」は「alt」不要。ブラウザよりも優先される。

pets無料とは思えない機能の充実さ。

Photopeaは、トリミングやマスク、色調補正、コンテンツに応じた塗りの他、レイヤースタイルやスマートオブジェクトもあり、日本語化までされている。

レイヤー構造を保ったままPSD形式で保存することができ、逆にPhotoshopで作成したPSDファイルを開いて編集することも可能だ。

PSDだけでなくAIやXD、SkechやPDFなどのファイルも扱え、有料プランでも月額3.33ドル（約450円 / 1ドル=135円換算）とリーズナブルとなっている。

petsPhotoshop to Photopea

レイヤー構造は維持され、エフェクト類の編集もできる。

FigmaではできないことがPhotopeaではできる。

「Photopea」と同じく無料で使えるブラウザベースのオンラインツールに「Figma」があるが、Figmaでは手の届かないところを、Photopeaでは触ることができる。

どちらが良いとか優れているとかではなく、クリエイティブな作業上での補完性が感じられる。

リリースはPhotopeaが2013年、Figmaが2016年とどちらも若いソフト。

Photopeaの主な機能。

主要な機能はPhotoshopとほぼ一緒。見た目や操作性はMacとWin、iPhoneとAndroidよりも近いかもしれない。

ツールバー

Photopeaのツールバーの初期項目。Photoshopと共通しているものが多く、インターフェイスも同様。

• 移動ツール
• 選択ツール
• 切り抜きツール
• スポイトツール
• ブラシツール
• コピーツール
• 消しゴムツール
• グラデーションツール
• ぼかしツール
• 覆い焼きツール
• テキストツール
• ペンツール
• パスコンポーネント選択ツール
• 矩形ツール
• 手のひらツール
• ズームツール
• など。

レイヤーパネル

• 描画モード：あり
• 不透明度：あり
• レイヤースタイル：あり
• マスク：あり
• スマートオブジェクト：あり
• ロック：あり
• など。

カラーモード

• RGB：あり
• CMYK：あり

単位

• ピクセル：あり
• ミリメートル：あり
• センチメートル：あり

解像度

• 解像度設定：あり

画像形式

• ラスター：あり
• ベクター：あり

オートセーブ

• Figmaと違い、オートセーブはない模様。
• ショートカットの、「command + S」 / 「Ctrl + S」で都度ローカル保存は可能。

書き出し

• PhotoshopやIllustrator、Figmaでは未対応の、WebPに対応している。
• ファビコン用のicoにも対応。
• その他、主要な画像形式にはほぼほぼ対応。MP4にも対応。

その他

ツールやパネル類、メニューバー項目などもPhotoshopライクとなっている。

petsPhotopeaの新規プロジェクトのスタート画面。

解像度やmmの単位指定、CMYKのカラーモードもあるため、印刷物の制作にも対応しており、PSDやPDFだけでなくAIデータでの作成も可能。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。