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