TRASH-NEWS こもんちゃん(ニコニ・コモンズ)で解説する『PhotoshopCS3でアニメgifを編集する方法』

ニコニ・コモンズがはじまりました

ニコニ・コモンズが8月15日より始まりました。ニコニ・コモンズとは一言で言ってしまえば『利用条件に沿えば自由に改変・利用できる創作物管理場』。これまで二次創作(例:ニコニコ動画のMAD動画)を作る場合、自分以外の創作物を利用する際はその都度利用許可を得る必要がありました。しかし実態は無断利用や事後承諾が多く、トラブルの元になることもしばしば。ネットの世界では既にクリエイティブ・コモンズという、創作者の公開条件を明示化するルールが策定されているものの草の根レベルにまでは浸透していません。そこでこの現状を解決するべく設立されたのが今回の『ニコニ・コモンズ』です。このニコニ・コモンズの特徴は1).イチから日本語で策定されたことによる安心感、2).ニコニコ動画を運営するニワンゴによる『現状』に即した利用のしやすさ、3).ルール策定だけでなく素材(ルールが適用されたファイル)置場管理も兼用(※あくまで管理)、この3点が挙げられるます。創作者にとっても二次利用者にとっても敷居が低く、かつ堂々と利用できるサービス、それがニコニ・コモンズです。

と、ここまでがニコニ・コモンズを記事中で扱うための前フリ。ニコニ・コモンズの概要についてはあくまで利用規約やヘルプを読んでの僕の解釈なので誤りがあるかもしれませんが、概ねこんな具合ではないかと思います。

僕はこもんちゃん!!

さて早速ニコニ・コモンズを利用してみます。トップページを見ると、早速1,000件以上のファイルが登録されているようです。ここはひとつ、ニコニ・コモンズの公式マスコットキャラであるこもんちゃんの画像を探してみます。おお……赤毛のツインテールに釣り目に強気な表情、なのはでは何を差し置いてもヴィータちゃんが好きな僕のための造詣ですねそうですね！

ニコニコ動画のアカウントでログインし、利用規約に同意したのちダウンロード開始……されません。Operaではどうもログインの認証管理がうまくいっていないのかダウンロードできない模様。IE7(IE8betaよりダウングレード)で再度実施。ちゃんとダウンロードできました。

ダウンロードしたのはこもんちゃんがミテルだけ【修正版】。こもんちゃんがまばたきするという……シンプルでありながら壮絶な破壊力を持つアニメgif作品です。

しかしながらこのミテルだけこもんちゃん、いかんせんファイルサイズが大きいです。1.35MBもあります。これは……圧縮したい……!!

PhotoshopCS3(とFlash CS3)でアニメgifを強引に編集する

これはレイヤーの最適化かあるいは減色が不完全なのか、ともかくPhotoshop CS3を使い、画質を保ったまま圧縮を試みたいと思います。……が、しかし、Photoshop CS3ではあの問題がありました。そう……『アニメーションGIFファイルを編集可能なレイヤーとして開けない』問題……!! CS(無印)に付属していたImageReadyではレイヤーごとにわかれてファイルを開けたはずですが、CS3シリーズからはImageReadyはPhotoshop内に吸収された形となり、そしてアニメーションGIF→レイヤーファイル化機能だけFireworksに分納されてしまいました。つまり……Photoshop CS3ではアニメーションGIFの編集は事実上不可能ということなのです(新規作成は可能)。

しかし、Photoshopで編集できたほうが便利であるに違いありません。僕Firewoks持ってないし！ ということでなんとかレイヤー構造を保った形でアニメgifを開けないか、いろいろ試してみたところ……以下の方法を編み出しました。

PhotoshopCS3でアニメgifを強引に編集する方法

1. Adobe Flash(CS3)でアニメgifを開く
2. フレームごとに画像が配置されていることを確認し、[ファイル]→[書き出し]→[ムービーの書き出し]→PNGシーケンス(※24ビット)形式で保存する
3. 各フレームの画像がpngファイルで(大量に)書き出されるので、それをPhotoshopの[ファイル]→[スクリプト]→[ファイルをレイヤーとして読み込み]ですべて読み込む
4. フレーム数ぶんの画像を含んだレイヤーがまとめられたファイルが出来上がるので、Photoshopの[ウィンドウ]→[アニメーション]→[レイヤーからフレームを作成]でフレーム上に配置する
5. 各レイヤーのディレイ(表示)時間を調整し、[ファイル]→[Webおよびデバイス用に保存]でgif形式で保存する

これで通常の設定ならばPhotoshop上できちんと最適化、保存されたはずです。3ステップ目の時点で各フレームがレイヤーになっているので、いろいろと編集が可能となります。

この方法の大きな問題点は……Flashで読み込む際にフレームの設定を間違えると余計なフレームまで取り込んでしまうこと。今回のファイルの場合、フレームレートを30fpsに設定したドキュメントから取り込むと75フレームのファイルとして読み込んでしまう形となり、1フレームを1枚の画像として描き出すシーケンス機能では75枚のpngが作成されてしまいます。作者の方によるとこのファイルは25枚の画像を動かした2.5秒ループのアニメgif(=10fps)ということなので、ドキュメントであらかじめ10fpsで取り込むように設定すれば25フレーム=25枚の画像をレイヤー上に配置できることになります。……まぁ今回はこれでうまく取り込めましたが、いろいろ穴のありそうな方法です。

ま、そもそもAdobe Flashが必須という時点で何か前提がおかしいがな！

こもんちゃんRev.

さてこの方法で作成したファイルを置いておきます。

ニコニ・コモンズID :: nc1149 / 作者名 :: ￥708（税込）さん
原題 :: こもんちゃんがミテルだけ【修正版】
利用許可範囲(オリジナル) :: インターネット全体に許可 / 営利利用(オリジナル) :: OK
* :: こちらのファイルをこの解説記事で使わせていただきました。ありがとうございます。

公開に際してのクレジット表示は……こんな感じでよいのでしょうか? ブログ検索してもまだ改変/二次創作利用例がないため、ちょっとおっかなびっくりです。

↑ Photoshop CS3で保存したもの(自動的に最適化) [247KB]

↑ 参考までにFlash CS3で保存したもの(最適化というか減色がおかしいのかカラーテーブルがおかしいのかペイントレベルの酷さに) [277KB]

ちなみに……ただアニメgifを最適化(容量を減らす)だけならば、専用ソフトを使うのが一番ラクチンです。アニメーションgif編集ソフト『Giam』がオススメ。このGiamでファイルを開き、最適化にチェックをいれて保存すると……

↑ Giamで保存したもの(最適化設定) [255KB]

容易にPhotoshopと同等レベルで圧縮できました。

ここでいう最適化とはあくまで無駄なレイヤーをそぎ落とすだけ(変化のない部分を削除するなど、日本のリミテッド・アニメーション手法と同じ)なので両者に大きな差が出なかったともいえそうです。もともとのファイルで既にキレイに減色されていたというのも大きな要因でしょう。

Photoshopでアニメgifを編集できるようにするメリットは、圧縮そのものではなく加工であるため、今回のミテルこもんちゃんならば黒いフリンジを削る、配色を変える、サイズを拡縮するなどの用途に最適です。

まぁ本来ならば『Adobe FlashとPhotoshopの連携を密にして直接fla⇔psdの相互変換ができるようになればいいのに』ですとか、『そもそもImageReady CS3をPhotoshop CS3内に入れろよ』ですとか、思うところはいろいろありますが、Adobeとしては『ならFireworksを買ってネ☆(キラッ)』てな言い分だと思われますので、おとなしくあきらめることにします。……いやぁ、でもmpgファイルとか動画ファイルからは簡単にレイヤー抽出できるのにアニメgifはダメだなんて……。これがAdobe商法というヤツか！

そんなわけで、ニコニコ動画のMAD動画だけでなく、解説記事にもニコニ・コモンズは有用であるということを証明するための記事でした。そもそもPhotoshopとFlashを持っててFireworksを持ってないなんて、どんだけニッチな層向けなんだ。