制作お役立ち便利帳
図版に関するご質問

Q 取説の図版をWeb上でパラパラマンガのように動かしたい。

A

機器の取り扱い手順などを、順番に少しづつ異なるように描いしたものがあれば、それをパソコンやスマホ画面のフレームとして時間軸に並べて、動きがあるように見せることができます。Webやスマホなどでは、ほんの1~2秒間の動きを繰り返してエンドレスにみせるGIFアニメがよく使われ、この方法で機器操作のポイントを動きのある画像で分かりやすくすることができます。

アニメ作成にはFlashのような専用ソフトが使われていましたが、アマチュアが画像・映像で遊びとしてアニメなど動画を作るツールも増え、投稿動画でも線画や文字を組み合わせたものがあります。しかしちゃんとしたフォントや文字が必要な場合はアマチュア向けツールでは難しいので、AdobeFlashやAdobePhotoshopを使って仕上げるのが一般的です。

AdobeFlash(参考例)は動画編集のようなタイムラインの機能がありますが、そこまでは必要ない数秒のアニメ(参考例)ならば、Adobe Photoshop CSやCCになって加わったアニメーション機能が使えます。Photoshopは静止画を扱うものですが、レイヤー機能によって複数の画像が扱え、各レイヤーに時間差をつけることでFlashもどきのアニメーションのように見せるようにできます。

またアニメーションを作るFlashでは、動きの始点となる画像と終点となる画像の中間のフレームを自動で作り出すことができますが、Photoshopのアニメーションでもやはり始点と終点として設定したレイヤーの中間のフレームを自動で作り出すことができます。Photoshopで中間フレームが作り出せることには限界がありますが、画像の位置を動かすだけではなく、異なる2つの画像の不透明度をコントロールすれば、画像が消えたり現れたりさせられ、もともとPhotoshop に備わっている機能の組み合わせでも多様な表現が可能です。

こうしてできた動画を保存する際にGIFアニメにすれば、そのままWebなどに貼り付けられます。また同様に動画として保存して、デジタルサイネージやビデオのテロップのような何秒単位の非常に短い動画として使うこともよく行われています。特にデジタルサイネージは通りすがりにチラッと見るものなので、画像をゆるやかに変化させる表現をとり、静止画をベースにしたゆっくりした動画がよく使われます。

単なる動画撮影だけではすぐに退屈になってしまい、間が持てない場合に、人目をひくように部分的に強調したいとか文字メッセージを入れたいという要望があります。特に文字テロップの多様はテレビの世界に共通するもので、動画編集においても文字の挿入・加工は重要な要素になっています。

参考:フレームアニメーションを作成する方法 (Photoshop CC)