こんにちは。STUDIO55技術統括の入江です。
近年はスマホやタブレットを使った 編集アプリが続々と登場し、更には ウェッブブラウザ でそのまま動画編集 といったツールまで登場しています。

皆さんは PWA をご存じでしょうか？
プロレスの団体の名称ではありません（笑）

PWA（プログレッシブ ウェブ アプリ）とは、Webサイトをネイティブアプリのように動作させる技術です。インストール可能で、オフライン動作やプッシュ通知に対応し、PCやスマホでブラウザを開かずに使用できます。
ソフトをローカルにダウンロードせずに、デスクトップやモバイルデバイス上で単独のアプリのように起動し、ブラウザの機能を活用しながらオフラインでも一部の操作が可能になります。

このような時代の変化は、ネット回線の高速化やクラウドサービスの普及、データセンターのハードウェアの飛躍的進化、更には WebGL や Wasm といった技術の進化が様々に挙げられますが、ここまで気軽で便利になる常識破りなツールに関して、逆についてこれていないといった方も少なくないのではないでしょうか。

今はまさに個人発信の ”ビジュアル時代” 。今回は、”今時いまどき” な　無料で気軽に使えるデータ編集ツール について紹介します。

⭐Photopea（フォトピー）

Photoshop や After Effects といった Adobe ソフト は 誰もが知る クリエイティブ メジャーソフト です。ただ、当然ですが、それなりに金額はかかってきます。
制作を始めた当初は Photoshop に手が出せず、代わりに GIMP（ギンプ） を愛用していました。GIMP は無料で使いやすく、商用利用も可能なため、非常に有用なツールの 1つ です。

ただ、フリーランスでない限り、実務ではデータ共有が前提となるケースがあり、Photoshop とのより完全な連携が求められる場合があります。

その点で言うと、『Photopea（フォトピー）』が オススメです。
フォトピー は 2013年にリリースされたツールで、PSDファイル を含む さまざまな画像形式をサポートしており、フォトショップ との互換性が最大の特徴です。

2013年というと、WebGL が一般的に広く普及しているわけでなかったので、フォトピー のリリース当初は まだブラウザでのサポートが完全ではなかったり、利用が限定的な印象でした。しかしその後、WebGL や HTML5 の技術を活用して、ブラウザ上での描画処理を効率的に行えるようになっています。

Photopea（フォトピー） は 、チェコ共和国出身の Ivan Kutskir（イヴァン・クツキル）氏 によって開発されました。

Photoshop 同様の機能をブラウザ上で提供しつつ、スムーズ なパフォーマンス を維持するのは並大抵のことではありません。クツキル 氏 のアイデアと技術が、Webベースの画像編集ツールにおける新しいスタンダードを作り出した と言えます。

Photopea（フォトピー）の特徴

フォトピー は、画像加工やビジュアル調整に最適で、作業内容を PSD 形式で保存 できるほか多彩な形式に対応しています。

お伝えしたように、フォトピー の際立った特徴は 「PSD を完全サポートしている」点にあります。

“Photoshop のウェッブ版” と言っても過言ではありません。

PSD ファイルの 読み込み・保存 に対応し、レイヤー構成もそのまま保持されます。そのため、業務用途のやりとりでも十分対応が可能です。
Adobe のランニングコストは常に議論の的ですが、コスト面を検討する際の 代替案としては GIMP の他、この『Photopea（フォトピー）』が有力な選択肢 となります。

フォトピー は Web操作に加え、PWA としても 起動可能です。PWA をインストールすれば、ブラウザを開かずにアプリのように使用でき、独立したウィンドウで操作できるようになります。

🧾利用プラン

無料使用 が前提の フォトピー ですが、 以前から プレミアムアカウント($5/月) が存在しました。最近、その記載に変化があったため、ここに掲載しておきます。

内容から分かるように、Photopea にも AI機能 が搭載されています。
これらの機能には、背景の削除や画像の置き換えなどが含まれます。無料ユーザーはこれらのAI機能を1日1回利用できますが、プレミアムサブスクリプションに加入すると、月に3,000のAIクレジットが付与され、より多くのAI機能を利用することが可能となっています。

プレミアムサブスクリプションは、広告の非表示化、PeaDrive のストレージ容量の拡大（500MBから5GB）、編集履歴の延長などの特典が提供されています。

ちなみに、以前までの記載を 参考に掲載しておきます。

つまり、無料使用の「Basic」と比較した場合、「Premium」のチェック項目にあるのは、この内容です。

主おもな目的はドネーションによる資金調達で、「アカウントボタンが緑色になる(?)」といった説明や、「現時点ではまったく違いはありません」との記載がある ユニークなものでした（笑）。

Adobe ソフトの進化と共に、Photopea も 常に進化しています。

🦾Photoshop vs Photopea

かなり昔のデータですが、車のカタログビジュアル制作 を CG で デザイン・制作 していた際の データを基に、フォトピー の内容をお伝えします。

下の画像は、 その当時の PSDデータ をフォトショップ で開いた画面です。

同じ PSD データ を フォトピー で開いた画面がこちらです。

右端の広告表示を除き、フォトショップ とほぼ 同じ UI であるのが分かります。

レイヤー構成を 並べます。

基本的な ショートカットキー も同じなので、フォトショップ をやりつけたプレイヤーは、そのままストレスなく使うことができます。

「フィルターギャラリー」もあります。

「プラグイン」も多数 用意されています。

フォトピー の「Camera Raw」フィルター で カラーグレーディング してみます。
さすがに フォトショップ の Camera Raw の多機能さには及ばないものの、このような同じフィルターがあるだけでも驚きです。
また、これだけ揃っていれば十分と言えるでしょう。

スマートフィルター で コンポジション レイヤー として追加しました。

これを、PSD保存で上書き。

それを、フォトショップ で開き直します。
同じレイヤーで保存し返されているのが、分かります。

フォトショップ の Camera Raw で開くと、フォトピーで設定した グレーディング設定が そのまま反映されています。

このように、フォトショップ と変わらない内容と操作で画像編集が可能 です。
実務使用する際に取り扱う高解像度（例えば、6000px レベル相当のデータ等）の PSDデータなど も楽々読み込みますので、とてもウェッブ使用しているとは思えない感覚です。

今時な フットワークの軽さを通り越し、もはや "スゴさ" を感じます。

ぜひ一度 試してみてください。

⚠ 注意！

右のサイドバーに広告が入れ代わり立ち代わり表示されますが、たまに音声付き広告が登場することがあります。どこから鳴っているのか、初めは驚かされますが、慌てずスピーカーをオフにしてください（笑）。

⭐PIKIMOV(ピキモフ)

Photopea（フォトピー） の成功に触発されて作られた のが、『PIKIMOV（ピキモフ）』です。

Photopea（フォトピー） が Photoshop の代替品として開発されたものであるなら、PIKIMOV（ピキモフ） は After Effects の代替品として開発されたものにあたります。

PIKIMOV は、拡張現実体験(AR)を制作する会社 XR+ の CTO である Clément Cordier（クレマン・コルディエ）氏によって開発されました。
Cordier（コルディエ）氏 は VJ ソフトウェアの開発経験があり、Linux マシン での使用に特化した ブラウザベース の After Effects の代替手段 として PIKIMOV を開発しました。

👉 VJ : ビデオジョッキー(Video Jockey)、ビジュアルジョッキー(Visual Jockey)の事。DJがプレイする背後などのモニターに映し出す映像を作る人の事。

ピキモフ は Webベース で、Windows、MacOS、Linux などのコンピューターシステムで使用が可能です。
👉 Firefox、iPad、モバイルデバイスでの使用は不可です。

100% 完全無料で登録も必要ありません。そのまま誰でもウェッブサイトにアクセスして、何の手続きもなしに すぐに利用開始することができます。

また、”ファイルはコンピューター上の残り、サーバーにアップロードされません” とまで明記されています。

無料で利用でき、ユーザー登録もなく、データはユーザーのコンピューター上で処理され、オンラインでファイルがアップロードされない。
かなり個人情報に配慮した内容です。

ピキモフ の 利用規約には、商用利用に関する具体的な情報は記載されていません。
これらの内容から商用利用可能であることは明白でもありますが、念のため、コルディエ氏 に直接やりとりをして確認をしました。

「Yes, of course you can. （もちろん、大丈夫です！）」

との事ですので、安心して使用してください。

使用方法

『ビデオエディタを起動』、もしくは『始める』と書かれたボタンをクリックします。
編集画面が表示される前に、このようなテンプレートやチュートリアル動画のリンク一覧が表示されます。

動画編集に慣れている場合は、テンプレートから設定内容を確認すると、ほぼ ピキモフの構成 が理解できることと思います。

新規プロジェクトを作るには、画面の『NEW PROJECT』の白ボタンをクリックして開始します。

従来の動画編集ソフトに倣ならって、先ず基本設定の画面になります。
ピキモフ はブラウザ上で動作することもあり、設定は必要最小限に限定されています。

⚠ 注意！

解像度は 4K（3840×2160 px）まで。
フレームレートは 30fps まで。
デュレーションは 15分 まで。

起動画面の右上にあるメッセージには、技術者としての 仕事募集 に関する内容が記されています。これは営利目的ではなく、開発者の情熱から生まれたピキモフ の背景を物語るものの一つです。

じつは、昨年の7月の段階よりメッセージが増えてます（笑）
昨年までは、このような内容でした。

素材インポートには以下の項目があります。
AE 同様、今時に 3D Model(.glb) も 読み込み可能です。

画像連番を読み込む際の注意事項としては、すべての画像を選択する必要があります。

連番読み込み時に、あらためて何枚の画像か確認する画面が表示されます。
おそらく何枚あったかは記憶していないので、それでOKか聞かれても ”Yes” しかないですよね（笑）

👉 このような確認画面が出るのも、読み込みの容量が多い場合に、可能な範囲で連番の枚数を読み込む仕様であるため、常時表記されるようになっています。読み込みに際しては、mp4 データでの使用の方が扱いやすいかと思います。

フレームレート や デュレーション 設定をビデオに合わせるかといったビデオ編集通例の確認がポップされます。
ピキモフの仕様には制限が設けられているため、純粋な動画データに合わせられない場合も出てくる可能性がありますが、ここでは とりあえず ”Yes” にします。

設定内容は、改めて「composition」タブで確認ができます。

👉 ピキモフは英語表記しか対応していません。

画面構成

ショートカットキー

ショートカット一覧は、ツールバーの ”Keyboard Shortcuts” で確認ができます。

👉 通常の動画編集ソフトとさほど変わらない印象なので、すぐに使うことができるかと思います。

🎞編集作業 例

参考までに、編集方法の一部を実際に操作しながらお見せします。

動画素材（mp4）をドラッグ＆ドロップでインポートします。
インポートされたフッテージは、必ず レイヤー上部に配置 されます。

👉 タイムラインに改めて入れ直す必要はなく、インポートしたタイミングでそのままコンポジションパネルに反映されます。

フッテージを途中でカットしたい場合は、右クリックで、”Split on frame” をクリックします。
その際、フレーム数が表示されますので、ひとつなぎの動画を場面で切り分けるのに、切り替わる直前のフレーム数でスプリットする要領です。

スプリット して フッテージレイヤー を分けた画面がこちらです。

では、場面の切り替わりを ディゾります。

下から2番目のレイヤーを選択して、プロパティー表示の "opacity（オパシティ）" の時計アイコンをクリックします。

レイヤー にキーフレームが打たれます。

続いて、タイムインジケーター を 10フレーム 程 進めた位置に移動し、カギアイコン をクリック。
すると、キーフレーム間が視覚的につながった表示になります。

改めて、最初のキーフレームのオパシティ値を 0 に設定。

キーをドラッグして、キーフレーム間を 30フレ ほど延ばして見え方を調整します。

このように各カットの切り替わりで ディゾったトランジションが設定できました。

ピキモフ は、トランジション の テンプレート などはありません。
いたってシンプルで 必要最小限な内容なので、簡易的な動画編集向けツールになります。

「effects」タブ に格納されている内容は以下です。
項目から見ても、基本的なエフェクト内容で調整する形となります。

では、次にテキストを配置してみましょう。

「Add item」から Text をクリックします。

自動的に ”Lorem ipsum” の文字が画面に反映されます。

👉 Lorem ipsum は、出版、ウェッブデザイン、グラフィックデザインなどの諸分野で仕様される典型的な "ダミーテキスト" です。

font（フォント）は、デフォルトで 10スタイル 格納されています。
任意のフォントを使用する際は、「Import a font」から、.ttf、woff 拡張子の フォントデータ を インポート して使用します。

ここでは、『Proxima Nova semiboil』フォントを使います。

👉 Proxima Nova （プロクシマ ノヴァ）は、Webフォントやデスクトップフォントとして広く使用されており、多くのデザインプロジェクトで人気のあるフォントです。

テキストアニメーション

では、テキストにアニメーションを設定しましょう。
30フレームで、position(位置)にキーフレームを打ちます。

0フレ に移動し、キーフレーム。
テキストの y軸 の値を 1180 にします。

このようになります。

現在のアニメーションの動きはデフォルトで ”イーズイン・イーズアウト" がかかっています。
👉 始めと終わりがゆっくりになる動きの事。

これをイーズアウトに変更します。
👉 終わりにかけてゆっくりと減速すること。

キーフレーム上で 右クリック すると、イージング のテンプレートが表示されます。その中の ”Cubic.Out” を選択します。イーズアウト のことです。

👉 2つのキーフレームで同じ設定を行います。

👉 「Cubic」 は、プログラミング や モーションデザイン における標準的な用語です。三次関数（cubic function）を使ってイージング効果を表現していることを示しています。

先ほどと、テキストアニメーションの動きが違うのが分かりますか？

続けて、scale にキーフレームを設定します。

60フレ でキー設定。

scale値を 3000 にします。

今度は、”Cubic.In” に設定します。
👉 イーズイン のこと。最初がゆっくりな動きになるアニメーションカーブ。

同じ位置に、opacity のキーフレームも設定します。
👉終わりのキーフレームにopacity 値 0 で設定。scale 同様、Cubic.In 設定にします。

テキストに、”blur” エフェクトを追加します。

blur にもキーフレームを設定。0～40（最大）で設定します。

テキスト を ”OCEAN VIEW” に変更して、更に全体的なキーフレームのタイミングを微調整し、音楽やSEなども追加しておきます。

データ書き出し

「Export video」には、2通りの書き出し方法があります。

・Export as .mp4 video : mp4 データ
・Export as .png images sequence : png 画像連番

ここでは mp4 のビデオデータ書き出しにします。
画面下部の「Save Video File」でダウンロードします。

非常に簡単な動画編集ですが、参考までにご覧ください。

PIKIMOV の進化

ピキモフは、PCスペックに依存せず、ウェブブラウザ上で基本的な動画編集ができる 無料の動画編集ツール です。派手な機能こそありませんが、基本的な動画編集に特化しており、初心者の練習用や簡単な動画編集には最適です。

昨年（2024年）7月に 開発者の Clément Cordier(クレマン・コルディエ) 氏 と やりとりさせていただいた際、近日公開の予定を教えてもらったのが以下の内容でした。

• 3D合成（3Dカメラ）

• 4K解像度のインポート/エクスポート

• 高度な照明システム

• アニメーション 3D モデル

• ガウススプラッティング積分

• GLSLシェーダーエディター

これらの機能は、現在ではほぼすべてが実装されています。

＊

時代の変化と共に、無料で使用できる 編集ツールは 多数登場しています。
今回紹介した Photoshop や After Effects の代替となる ウェブベースの無料ツール 2点 は、これまで編集作業に慣れた方はもちろん、これからクリエイティブな作業を始めたい方にもリスクなく使用できるものです。

ぜひ試してみてください。

📝 （おまけ）イージング チートシート

イージング について 詳しく知りたい方のために、Github で Andrey Sitnik 氏 が公開している 『ai / easings.net 』のページを紹介しておきます。

代表的な 計30種類 の イージング をチートシートで提供してくれています。

👉 各イーズ に マウスを ホバリング させることで動きが確認できます。

📝 動画編集に興味がある方は、『知っておくべき動画関連用語』も参考にしてください。