オンラインで画像編集！Photopea（フォトピー）の特徴や使い方、Photoshopとの違いを解説

現代では、スマートフォンやPCの普及により、さまざまなデバイスで写真を撮ったり、動画を撮るなどの機会がとても増えました。それ故に、画像を加工して他人とは少し違った写真を作成し、SNSにアップロードするといった方も多いかと思います。

しかし画像加工するといっても、現代ではソフトウェアがさまざまにあり、どのような画像加工ソフトを使えば良いか分からないといった方もいるのではないでしょうか。そのような方に、Photopeaと呼ばれる画像編集ソフトを紹介し、徹底解説していきます。もし画像編集に興味があれば、参考にしてみてください。

Photopeaとは

Photopeaとは、現代に合わせた画像加工ソフトに位置づけされるものです。ネットワークに繋がっているPCであれば、誰でも使える無料の画像加工ソフトになります。このPhotopeaは無料でありながらも、Adobe社が提供しているPhotoshopにも匹敵するスペックを持つ画像加工ソフトなのです。

PhotopeaはIvankutskirという、チェコに住んでいるプログラマーが開発しました。2012年に開発を始め、4年間、独学で様々な困難に立ち向かいながら、開発を進めました。現在では世界中の数百万人に及ぶクリエイターがこのPhotopeaを使用して、画像編集を行っています。このような登場するまでの過程が、Photopeaにはあったのです。

Photoshopは無料で使用する事が出来ず、さらに高額な為、一般の方であれば、Photoshopを利用して画像編集をする機会が少ないです。Photopeaであれば、Photoshopのような機能を搭載し、オンラインで誰でも無料に使用できます。

Photopeaの主要機能

ここまでPhotopeaの概要と、Photopeaが開発されるまでの背景について解説しました。ここでは実際にPhotopeaを使用した際の画像を交えて、Photopeaの主要な機能について解説していきます。

画像の編集から作成、さらにスクリプトを使用した画像編集の自動化についてまで説明しますので、機能について知りたい方は是非、参考にしてみてください。

画像編集

では実際に画像を編集する際の機能について紹介します。

1.まずこちらのリンクからPhotopeaのページへ飛ぶと、以下のような画面が表示されます。

2.この中から、コンピュータから開くをクリックし、編集したい画像を選択し開くをクリックすると、以下のような画面になります。

3.主にこの編集画面で、それぞれのツールが画像の編集をおこなっていきます。

右下のレイヤーの部分を選択する事で、編集したいレイヤーにある画像を編集できます。左のツールバーの中から、各レイヤーに編集したい事を選ぶ事が可能です。例えばテキストを画像に載せたい場合、左のツールバーのTのようなアイコンをクリックすると、新たにレイヤーが作成され、テキストを入力できます。新たにTESTとテキストを入力した画面が以下のようになります。

画像作成

次に、Photopeaを使用した画像作成の方法について解説します。

1.まず、ファイルから新規をクリックすると、以下のような画面が出力されます。

2.この画面から、自分が好きな方法で画像の作成を行えます。

例えば、新たにインスタグラムのストーリー用の画像を作成したい場合、画像のようにSocialを選択すると、SNS上における画像サイズに適した土台が表示されますので、そのままInsta Storyを選択した状態で作成ボタンをクリックすると、以下のようになります。

3.するとこのように、画像作成用の土台となるレイヤーが表示されますので、ここに自身が作成したい画像を作成できます。例を挙げると以下の通りになります。

スクリプトによる自動化

ここではPhotopeaを使用する際に、スクリプトによって自動化を行う事で、作業を簡略化する方法について解説します。

1.まず以下の画面からファイルをクリックし、スクリプトを選択します。

2.すると以下の画面が出力されます。

3.ここに、スクリプトを記載していくことで、Photopeaの画像の作成や画像の編集作業において、面倒な工程を自動化し、自身で行う工程を少なくできます。

初めてスクリプトを作成する場合でも、スクリプトの作成例が、画面上にあります。例えばClone Layersをクリックし、Runをクリックすると、今作成されているレイヤーが、12個複製されます。

どのようなスクリプトとして記載しているのかというと、varに変数を入力し、for構文を活用して何回までレイヤーを複製するのかを記述しています。さらにvar cntに12と変数を記述する事で、12回まで繰り返しレイヤーの複製を行うスクリプトとして記述されています。

スクリプトの作成方法が解らない場合は、このような例文から学び、スクリプトを作成していくとよいでしょう。

Photopeaの簡単な使い方

ここまでPhotopeaの概要から開発された背景、Photopeaの主要な機能である画像の加工から作成まで、実際の画面を交えて解説しました。

ここではPhotopeaの簡単な使い方を紹介します。初心者の方でもある程度のものは作成できますので、参考にしてください。

言語設定を日本語に変える

まずPhotopeaは基本的なUIが英語になっていますので、言語設定を日本語の設定にすることで、よりPhotopeaにおいて画像を編集する際、快適になります。

画面上部のナビゲーションバーから、その他をクリックすると、言語などのメニューが開かれるので、その中から言語をクリックすると、言語一覧が表示されます。その中から日本語を選択する事で、Photopeaの画面表示が日本語化されます。

以下の画面のように選択します。

以上でPhotopeaの日本語化は完了です。

Photopeaでの画像編集の基本

Photopeaで画像を編集する際の基本について解説します。Photopeaでは主に、画面左にあるツールバーから画像の編集をしていきます。

ツールバーではテキストを入力する為のツール、矩形を作成する為のツール、塗りつぶしやグラデーションなどの設定が可能です。

画面左のツールで行いたい事を、画面右のレイヤー画面に指定していくことで、画像の加工や編集を行えます。

画面右のメニューでは、どのレイヤーで作業を行うか、やレイヤーの複製、入力されたテキストのサイズや色の変更、編集履歴を遡る、などの操作が可能です。

主にこの画面左と右で編集したい事を選択していきます。最後に、中央の土台に、実際に操作したことが反映されます。

主にこれら三つの画面を行き来して、画像の編集や加工をすることができます。

PSDファイルの取り扱い方法

ここではPhotopeaにおいて、PSDファイルを取り扱う方法について解説します。

最初に以下の画面を出力します。この中から、コンピュータから開くをクリックするか、PSDファイルをDrop any files hereというところにドラッグアンドドロップします。

するとPSDファイルを開くことができます。

もしPSDファイルを使用して、画像の抽出を行いたい場合は、このPSDファイルをPhotopeaで開くだけで、レイヤーが予めPSDファイルに保存された状態のまま開けます。それにより、Photoshopが無い環境で画像を抽出したい場合、PhotopeaにPSDファイルを読み込ませることで、Photoshopが無くてもPhotoshopで作成した画像が抽出できるのです。

抽出方法もjpgやPNGなどが選べますので、自身が出力したいファイル形式を選択してください。

Photopeaの便利な機能とその活用法

ここまでPhotopeaの概要から歴史背景、Photopeaの基本的な機能から動画編集ソフトを初めて使用する際のポイントについて解説していきました。ここではPhotopeaを使用する上で、便利な機能とその活用法について解説します。

Photopeaは無料でありながらも、動画編集ソフトの中で応用的な画像編集が可能です。

レイヤー操作の基本

ここではPhotopeaにおけるレイヤー操作の基本について説明します。PhotopeaではほぼPhotoshopと同じような使用感で、レイヤー操作が可能です。

以下の画像で例を挙げます。基本的に、画像は、それぞれのレイヤーから構成されています。

以下の画像ですと、Hello Wolrd!のテキスト、What a beautiful day.のテキスト、Backgroundのレイヤーで構成されていることがわかります。

もしテキストやそれぞれのレイヤーを非表示にさせたい場合、レイヤーの横にある目のようなマークをクリックする事で、レイヤーの表示・非表示ができます。さらにレイヤーの並べ替えを行う事で、画像の構成を変更することができます。

効率的なショートカットキーの使い方

ここではPhotopeaなどにおいて、効率的なショートカットキーについて解説します。ショートカットキーはPhotopeaに限らず、Photoshopはもちろん、さまざまなアプリで流用できるので、是非覚えましょう。

CTRL+Aで範囲を全て選択。
CTRL+Cで選択したものをコピー
CTRL+Xで選択したものをカット
CTRL+Vでコピーしたものを張り付け
CTRL+Zで現在行った作業の前に戻る

まずこれら5つを覚える事で、とても効率よく画像編集を行えます。

Photopeaにはこれら以外にも、CTRL+O でファイルを開く、CTRL+Sでファイルを保存、CTRL+Gでレイヤーをグループ化など様々にあります。キーボードショートカットの一覧は上部ナビゲーションバーのその他からキーボードショートカットをクリックする事で確認できます。

画像生成AIについて詳しく知りたい方は、以下の記事を参照下さい。

PhotopeaとPhotoshopの違い

項目	Photopea	Photoshop
ブラウザのみで使用できるか	可能	不可能
高度なテクニックを使用できるか	不可能	可能

ここまでPhotopeaの概要から背景、Phtopeaに搭載されている基本機能、簡単な使用方法から応用的な使用方法まで解説してきました。ここではPhotopeaとPhotoshopについて、それぞれ得られるメリットの違いについて解説していきます。

PhotopeaとPhotoshopで、出来ることは似ていますが、得られるメリットはそれぞれ違います。その点について詳しく説明します。

Photopeaのメリット

Photopeaで得られるメリットは何といっても無料で使用できる点です。今までPhotoshopのような、様々な画像編集が行えるソフトウェアは、基本的に高額なものが多く、無料なものは存在していませんでした。
PhotopeaはPhotoshopのPSDファイルを開ける上に、Photoshopの基本的な機能が搭載されています。

さらにオンラインで利用できるので、ソフトウェアのインストールを行うリスクを回避することもできます。この点が、Photopeaを利用して得られるメリットと言えるでしょう。

Photoshopのメリット

Photoshopで得られるメリットは、高度なテクニックを簡単に使用できる点です。Photoshopは有料ですが、他の画像編集ソフトウェアで出来る事と比べると、各段に出来る事が広いです。

Photopeaにも基本的な機能が搭載されていますが、Photoshopは高いレベルの技術を持つWebクリエイターやイラストレーターで使用される高度なテクニックが簡単に使用できます。

これらがPhotoshopで得られるメリットと言えます。

Photopeaのダウンロードとインストール

ここまでPhotopeaの概要からその背景、Photopeaの基本的な機能、基本的な使い方やより応用的な使い方、PhotopeaとPhotoshopで得られるメリットについて解説していきました。ここではPhotopeaのダウンロード方法とインストール方法について詳しく解説していきます。

Photopeaをオフラインで使用したい方は、是非参考にしてください。

オンラインでの利用方法

オンラインでの利用方法ですが、基本的にブラウザからPhotopeaのリンクへアクセスするだけで、Photopeaは利用できます。

こういったソフトウェアは基本的に有料なのですが、このPhotopeaは無料で利用できるのが最大の強みと言えます。有料プランもありますが、基本的に会員登録などせず無料プランを利用すると良いでしょう。

無料プランは基本的に右下に広告が表示されるので、それが鬱陶しい場合は有料プランを利用するのも手です。

オフラインでの利用方法

Photopeaはオンラインで利用出来る点が強みですが、オフラインでの使用もできます。

以下の手順でPhotopeaをオフラインで使用できます。今回はGoogle Chromeを活用したオフラインでの利用について解説します。

1.ブラウザからphotopiaのリンクにアクセスします。

2.アクセスすると、URL欄の右にアイコンがあります。それをクリックするとインストールしますかとの表示がでますので、インストールをクリックします。

3.するとダウンロードが始まり、自動的にインストールされます。

Photopeaを使用する際の注意点

ここまでPhotopeaの概要と開発までの背景、搭載されている機能、基本的な使い方や、応用法、PhotopeaとPhotoshopで得られるメリットの違い、Photopeaのダウンロード及びインストール方法について解説していきました。最後にPhotopeaを使用する上での注意点について、解説します。

Photopeaは無料でPhotoshopのような基本機能を使用できますが、いくつか制約があります。

動作環境

Photopeaを動作させるには、以下の点に注意してください。

PCを用意する
インターネット回線に繋がっている
最新版のOSをインストールしている
最新版のブラウザを利用している

これらがPhotopeaを利用する上での安全な動作環境です。インターネットにつながっていないとPhotopeaのリンクにアクセスできません。OSやブラウザが最新でないと、セキュリティに対して脆弱になってしまう可能性がありますので、最新のOSとブラウザを使用しましょう。

保存形式とサイズ

Photopeaが対応している画像の保存形式は、GIF、JPG、PNG、PDFです。

サイズについては特に制限が無いため、画像の作成については保存形式やファイルサイズを気にせず使用できます。ただし、クラウドへのアップロードには対応していませんので、基本的にPhotopeaで作成したものは自身のPCへダウンロードする必要があります。その点だけ注意してください。

日本語入力による文字化け

Photopeaは一部のユーザーで、テキストボックスによるレイヤーで文字化けをする不具合があります。それ故に、Photopeaでテキスト入力する場合は、基本的に英語での入力をおすすめします。

日本語でテキスト入力をしたい場合は、別の画像編集ソフトを利用しましょう。

商用利用や著作権、商標権に注意する

Photopeaは、無料でできる画像編集ソフトですが、他のWebサイトにある画像をそのままコピーして作成したり、そのようなものを商用として利用しないようにしましょう。もしそれを第三者が発見し報告した場合は著作権侵害となり、法律で罰せられる可能性があります。

ブラウザ間の互換性

Photopeaは、基本的に一般ユーザーが主に使用しているWebブラウザであれば、特に問題無く使用できます。ただし、特殊なWebブラウザや、拡張機能を使用してWebブラウザに表示の制限をかけている場合、Photopeaが動作しない可能性があります。

そのような点に注意し、基本的にGoogle ChromeやFire foxを利用しましょう。拡張機能を使用してPhotopeaを使用したい場合は、拡張機能がブラウザの機能を制限していないか確認しましょう。

まとめ：Photopeaで低コストな画像編集をしましょう

ここまでPhotopeaの概要と開発の背景、基本的な機能、基本的な使用方法から応用的な使用法法、Photopeaとphotoshopで得られるメリットの違い、Photopeaのダウンロード方法から注意点まで解説していきました。

Photopeaは無料でPhotoshopのような機能を利用出来る上に、インストールせずともツールとして使用できるとても優秀な画像編集ソフトです。ですがPhotoshopと比べると出来る事はやや制限されていて、不具合もあります。

これからWebの画像編集について学びたいという方や、Photoshopが高額の為、購入を控えている方に向いている画像編集ソフトと言えます。

ある程度Web制作について経験がある方や、これからプロとして画像の作成や編集をしたい方は、Photoshopを使用しましょう。

もしWeb制作についてお悩みであれば、株式会社Jiteraに相談するとよいです。

こちらのフォームに相談したい内容を記載し、フォームから送信すれば折り返し、Web制作に関する提案をしてもらえます。