Web広告などでどこかコミカルな動きをループさせる写真を目にしたことはないでしょうか？静止画の一部だけが動くシネマグラフの技法はWeb広告のほか、SNSでも気軽に使われるようになっています。
この記事ではシネマグラフとは何かについてと、シネマグラフを作る方法について、フォトショップを使う方法と無料で利用できるアプリを使う方法を紹介していきます。
1. シネマグラフとは
シネマグラフ（Cinema graph）とは静止画の一部だけ動画にしているGIFアニメーションのことを指します。ちなみにGIF（Graphics Interchange Format）とは画像データを圧縮し記録するファイル形式の一種で、簡単なアニメーションを表示できます。
静止画の中で一ヶ所だけが動くという普通の現象ではあり得ない不思議さのあるシネマグラフはWebサイトやSNS上で見る人の目を惹きつけるためアピール力が強く、Web広告のジャンルでどんどん需要が上がっています。
シネマグラフはフォトショップなどで作成可能ですが、簡単にシネマグラフを作ることができる専用のアプリも近年増えてきています。
2. シネマグラフを作成するのに必要な動画選び
シネマグラフを作成するのには動画選びが肝心です。シネマグラフは再生時間の短い動画をループさせて表示するため、動画の始点と終点に大きな差異があるとループさせた時に継ぎ目が目立ち、不自然に見えてしまいます。見る人の目を惹きつけ、デザイン性にも優れたシネマグラフを作るためには継ぎ目が目立たなくできるような動画を選ぶ必要があります。
もし、自分で撮影した動画をシネマグラフにするのであれば、動画撮影時には動画がぶれないよう、三脚などでしっかりとカメラを固定しましょう。動画がぶれるとループさせた動画が不自然になります。
3. シネマグラフをフォトショップで作成する方法
シネマグラフをフォトショップで作成する方法を説明します。
用意した動画をフォトショップで開くと下部にTimelineが表示されます。表示されない場合は「ウィンドウ」→「タイムライン」で表示しましょう。
動画のレイヤーだけが残るよう、動画のレイヤーを「Video Group」の外に移動させてVideo Groupを削除して下さい。
Timelineから動画のループさせたい箇所を切り抜きます。切り抜きは切り抜きツールを使うか、レイヤーを選択して切り抜きます。いらないレイヤーは削除しておきましょう。
残りのレイヤーをコピーし、名前を付けます。名前はわかりやすく、動く、や、動かない、などと付けると良いでしょう。動かない動画は上に移動し、ラスタライズ（Rasterrize）しましょう。
一番上の動かさないレイヤーを選択、マスクをかけ、「Opacity（不透明度）」を50%ほどにします。
レイヤーマスクを選択しながら動かしたい場所だけを黒くブラシで塗りつぶしましょう。可能な限り自然に見えるよう再生ボタンを押しながらちょっとずつ調節するようにします。
保存する時はファイル形式を「GIF」にし、「Looping Option」を「Forever」にして保存すればシネマグラフの完成です。
4. シネマグラフを簡単に作成できるアプリとその使い方
シネマグラフを簡単に作成できるアプリとその使い方を紹介します。
4-1. PhotoDirector
PhotoDirectorは世界中に2億人以上のユーザがいる動画編集ソフト「PowerDirecter」で知られる「CyberLink社」によるアプリで、ios版とAndroid版の両方があります。写真の管理や合成、補正を得意としたとしたアプリで動画から指定した部分だけを動かすことによるシネマグラフ作成と、静止画からのシネマグラフ作成の両方が可能です。また、「分散エフェクト」を使用すると静止画の中に一部だけ舞い散るようなエフェクトを加えることができます。
PhotoDirectorで静止画からシネマグラフを作成する方法を説明します。まず、シネマグラフにしたい写真をPhotoDirectorで開きます。上部メニューの「ガイド編集」を選び、左側の「メニュー」より「アニメーションエフェクト」、「フォトアニメーション」を選びます。
写真に直線的な動きをつける時は「モーションアロー」、曲線的な動きをつける時は「カーブモーションアロー」を使用します。どちらも動きの起点になる点から、終点になる点に向かい線を引きます。線は本数が多い方がより繊細な動きが付けられるので何本が引きます。ただし、何本も線を引くと動いて欲しくない部分が動くことがあります。
そんな時は「アンカーポイント」を使います。静止しておいて欲しい部分にアンカーポイントを設置しましょう。また「フリーズブラシ」は面で動きを止めることができるので使い分けてみて下さい。全体的なバランスを取るためには画面下部の「再生」をタップしながら確認しましょう。シネマグラフの作成が終わったら画面左下の「出力」をタップし、GIF画像として出力します。
4-2. Enlight Pixaloop
Enlight Pixaloopは写真にアニメーションを加えてシネマグラフのようなGIFを作ることができる写真編集アプリです。ios版とAndroid版の両方があります。また、有料版では川や海などの写真の水を自動的に動かせる「ウォーター」の機能があります。
Enlight Pixaloopの使い方を説明します。まず、アプリを開きます。最初は編集画面にはサンプル画像が表示されます。
編集画面の上部、左から2番目の四角いマークをタップすると撮影した画像を選択できる「新規プロジェクト」の画面に入ります。
読み込みたい写真をタップして選択し、読み込めたら編集を始めます。画面下部をスライドすると出てくる「調節」をタップし、明るさやコントラストなどを調節します。
調節ができたらオーバーレイの中から好みのアニメーション効果を選びます。よりダイナミックな動きが欲しいときには「カメラFX」を使ってズームアップするような大きな動きをつけましょう。
作成した画像は新規プロジェクトに自動的に保存されます。保存された画像は後から再編集することも可能です。
4-3. Flixel Cinemagraph Pro
Flixel Cinemagraph ProはAppleのデバイス対応の、スマートフォンやタブレットでもシネマグラフを作成できるアプリです。シンプルでスタイリッシュなユーザーインターフェースが特徴で、使用方法はとても簡単です。
まず、動画をアプリで読み込み、動画の中から、動かしたい部分の範囲を指定するだけです。ループする速度を細かく設定したり、出来上がったシネマグラフにモノクロやセピアにするフィルターをかけることもできます。作成したシネマグラフはTwitterやMetaなどにと投稿可能です。
4-4. PLOTAVERSE PRO
PLOTAVERSE PROはios版シネマグラフ作成アプリです。静止画から、波や炎などがゆったりと動く立体的なアニメーションを作成することが可能です。以前は「Plotagraph+」という名前だったアプリで、Instagramでのシネマグラフブームの火付け役的な存在でした。SNS機能も兼ね備えているため、自分の作成したシネマグラフの投稿も可能で、クリエイターによるシネマグラフ作品を鑑賞することもできます。Android版がないのが残念ですが、iPhoneユーザーの方はぜひお試しください。
PLOTAVERSE PROの使い方を説明します。アプリをダウンロードして開きます。アプリを開始するときに有料版の購入をすすめられますが画面左上の×からスキップすることができます
アプリを開いたら画面下中央の＋をタップします。次に、「PLOTAGRAPHを作成」をタップします。画面下中央の+をもう一度タップすると加工する写真の選択が可能です。
「マスク」を選択し、写真の中で静止させたい部分をなぞります。
「アニメ化」を選び、写真を動かしたい方向に向かって線を引いていきます。できるだけ細かく線を引くことでアニメーションに自然な動きを付けることができます。
さらに「オーバーレイ」を使用するとさまざまなアニメーションを追加することができます。豊富な種類のテンプレートの中から好きなものを選ぶことができます。
保存は右上の四角に↑のマークから保存画面に入り、GIFマークから、写真アプリのマークをタップして行えます。写真アプリをタップした場合はビデオのままで保存されます。
4-5. Zoetropic
ZoetropicはZoemach Technologiaが提供しているAndroid用のカメラ系アプリで、写真からシネマグラフを作成することができます。このアプリの特徴は「シーケンス」機能です。波や雲などが渦巻くように動く表現をするとき、円を描くだけでリアルな感じの動きが再現できます。無料版にはウォーターマークが入ってしまいますが、十分に使えるアプリです。
Zoetropicの使い方を説明します。Zoetropicアプリをダウンロードします。加工する写真を選んだら「マスク」を選択し、固定したい部分を塗りつぶしていきます。「動き」を選び、動かしたい方向に矢印を引いていきます。「シーケンス」は「動き」の隣にあります。選択し、ぐるりと動きを描くとダイナミックに渦巻いたような動きが表現できます。
4-6. Movepic
MovepicはZoetropicよりも動きの滑らかさに劣るもののアプリの動作が軽く、制作に時間がかかりません。ios版とAndroid版の両方があり、Zoetropicの処理の重さにストレスを感じるという方はこちらのMovepicがおすすめです。動きのエフェクトや全体の色味が変わったり、古い映画の映像のようになったりするフィルター、ノイズや雪を降らせるなどの加工ができる機能も搭載されているため、バリエーション豊かなシネマグラフ制作を楽しむことができます。
Movepicの使い方はPLOTAVERSE PRO やZoetropic同様、動かさない部分をマスクし、写真の動かしたい部分に矢印を入れていきます。速度の調整も可能で、操作は単純でわかりやすいのでこの手のアプリを使ったことのない方にもすぐ使えます。
4-7. PICOO Camera
PICOO Cameraはフレームに当てはめて写真を撮影するだけで写真の一部だけが動くシネマグラフが作成できるカメラアプリです。トップページで世界中のユーザーのシネマグラフが見られることもあり、自分の作品作りのヒントがもらえます。
使い方はとてもシンプルで、四角、丸、カスタムの3種類のフレームを動かした位部分に当てはめて撮影開始するだけです。撮影したものにかけられるフィルター機能も搭載されています。PICOO Cameraは現在ios版だけの提供となっています。
5. まとめ
シネマグラフとは何かについて、またシネマグラフを作る方法について、フォトショップを使う方法と無料で利用できるアプリを使う方法を紹介しました。
シネマグラフはここで紹介したようなアプリなどを使用すると想像以上に簡単に作成できるはずです。シネマグラフを作ったことがない方でも、静止画の一部が動く不思議な効果に、きっと夢中になるはずですよ。ぜひこの記事を参考に、作ってみてはいかがでしょうか？