こんにちは、本格的に冬になってきましたね。真冬は暖房でのぼせ気味の私です。
今回は、ちょっとした手間で制作できて、なおかつ注目してもらいやすい、シネマグラフについて紹介します。
シネマグラフとは
シネマグラフとは、画像の一部分だけが動くGIFアニメーションです。一部分のみが動くため、自然に視線を集めることができ、Flash全盛期のムービーから、今では広告画像まで、長年使われている技術です。
シネマグラフの使いどころ
サイトのメインビジュアルに動画を使用するサイトも多いですが、どうしてもファイルサイズが重くなりがち。でも、何か動くビジュアルを設置して視線を集めたい…そんなときに、シネマグラフが役立ってくれます。
最近ではメインビジュアルだけでなく、広告画像にも使われています。同じ内容の広告でも、動いている方が注目されやすいので効果的ですね。ファイルサイズの重い動画より、軽いシネマグラフの方が、ユーザーにも親切だと思います。
作り方
今回は、Photoshopでの作り方を紹介します。
スマホアプリでもシネマグラフが作れるそうです。インスタグラムなど、SNSにも気軽に投稿できますね。
■シネマグラフが作成できるアプリ「Loopsie」
- iPhone
https://itunes.apple.com/jp/app/com.gamelounge.loopsie.ios/id1259909228?mt=8 - Android
https://play.google.com/store/apps/details?id=com.loopsie.android&hl=ja
少し脱線しましたね…
それでは、Photoshopでの作成方法です。
動画を用意する
より自然なシネマグラフを作成するため、
- ループしたときに違和感がないこと
- 背景の動きが少ないこと
この2点に気をつけましょう。
動画は素材サイトでDLしたり、撮影したりしてくださいね。
撮影の際は、三脚でカメラをしっかりと固定しましょう。ワイヤレスでシャッターを切るのが理想的です。
動画のレイヤーをコピーし、静止画に変換する
動画をPhotoshopへ読み込むと、タイムラインが表示されます。動画レイヤーをコピーして、元のレイヤーの上に置いたあと、コピーしたレイヤーの任意のフレームまで移動します。レイヤーをラスタライズし、静止画に変換しましょう。
レイヤーマスクを作成する
先ほど作成した静止画に対し「選択とマスク」でマスクを作成しましょう。動画として動かしたい部分を、少し大きめにブラシでなぞってから、選択範囲を「反転」させます。これで動かしたい部分以外を選択できました。そのまま「レイヤーマスク」として出力します。
動画を確認する
再生すると、動かしたい部分だけが動いているかと思います。タイムラインパネルのオプションで、ループ再生もできますよ。ループが不自然な場合は、動画の開始や終了時間を調整してみてください。
書き出す
Web用の書き出しは「Web用に保存(従来)」から行います。ファイル形式は「GIF」に設定しましょう。サイズや画質、ループ回数を調整して保存します。これで完成です！
注意点
シネマグラフはGIFアニメーションですので、ファイルサイズが大きくならないように作りましょう。
アニメーションの長さはもちろんですが、気を付けたいのは色。彩度が高かったり、色数が多くカラフルなものは、ファイルサイズが大きくなりがちです。
動画を撮影する際に、余計なものを映りこませないなど、注意を払いましょう。
GIF画像を軽くするためのツール
上記の注意点を踏まえても、まだファイルが重いという方は、WEBツールを使ってファイルを圧縮しましょう。
どちらのツールも、画像の質を落とさず容量を減らしてくれる優れモノです。
シネマグラフの作例
多くのシネマグラフを掲載しているサイトを紹介します。
まとめ
動画広告が増えてきてる昨今、過度な動画は毛嫌いされがち。
一部だけが動くという特性から、さりげなく取り入れられるシネマグラフ。ファイルサイズを抑えつつ、強調したい部分へ視線誘導する場合に、ぜひ活用してみてください。
