一見すると写真のように見えるのに、一部のみが動画のように動いている、というデザイン手法を使用したWebサイトを、近年になってよく見かけるようになりました。これはシネマグラフといわれ、独特の表現が得られることから、専用アプリも登場している人気上昇中のデザイン手法です。
目次を閉じる
シネマグラフとは一体どのようなものなのか、Photoshopを利用したシネマグラフの作り方、簡単に作成できるアプリ、シネマグラフの作例をそれぞれ紹介していきます。
シネマグラフとは
シネマグラフとは動画の一部のみを動かし、それ以外の動きを止めるというGIFアニメーションのことです。その独特の表現で動いている箇所のみに自然と注目してしまうため、Webデザインとしては古くからFlashムービー、現在では商品の広告など、Webで使用される場面が多くなっています。
シネマグラフの作成自体はそれほど難しくありませんが、条件を満たす動画を準備することがポイントになります。
シネマグラフの作成方法
Mac版Adobe Photoshopを使用した作成方法を紹介します。
シネマグラフには背景が動く、というアイディアがあることも紹介しました。背景が静止している場合を想定して解説していきます。
動画の準備
シネマグラフ作成にあたって、基本となる動画を準備しますが、これがポイントになるということはすでに紹介しました。
シネマグラフで自然にループ再生するには、
- ループでつないだときに違和感のない動きを狙う
- 背景に動きがないものを選ぶ
という条件を満たしている動画が必要になるでしょう。
動画を撮影する際の注意点は後述しますが、今回の例ではvidsplay Totally Free Stock Video Footageのフリー素材「Pouring White Wine」を使用します。
撮影方法
シネマグラフに最適な動画を撮影するには、三脚でカメラをしっかり固定することが必要です。これは、ループで動画をつないだ際に、ブレで画面が少しでもズレると違和感につながるためです。
同様に、シャッターを押す動作でも微ブレが発生するので、ワイヤレスのリモコンでシャッターを操作できるようなカメラが用意できれば理想です。
このブレの問題は、シネマグラフ作成時にある程度回避できますが、方法に関しては後述します。
動画の取り込み
動画が準備できたら、Photoshopを起動して「タイムライン」を表示します。
タイムラインの横にビデオアイコンが表示されたらクリックし、「メディアを追加」を選択して動画を取り込みます。
取り込まれた動画を再生しながら、ループするポイントを探し「開始ポイント」と「終了ポイント」を決め、はさみツールで分割します。
この場合では、前後のクリップは必要ありませんので、それぞれ選択して「delete」キーで削除します。
静止画を用意
動画をタイムラインに配置したら、静止画を用意します。
先ほどと同じビデオアイコンをクリックし「新規ビデオグループ」から「ビデオグループ2」を作成します。
先ほどビデオグループ1に配置した動画を、レイヤーパネル上で「ビデオグループ2」までoption + ドラッグしてコピーします。
コピーされた動画を選択したまま、静止画にしたいところに再生ポイントを置き、メニューバー > レイヤー > ラスタライズ > ビデオと選択します。これで先ほどのコピーされた動画が静止画に変換されました。
マスク
これで静止画の後ろで動画が再生されている状態になりました。次に、動かしたい部分のみマスクで静止画を切り抜き、後ろの動画が見えるようにします。
レイヤーパネルのボタンをクリックし、静止画にマスクを追加します。
この状態で、選択ツールもしくはブラシツールで、静止画の動かしたい部分を選択し、command + deleteキーで切り抜きます。
切り抜いた選択箇所が、マスク上で黒くなっているのがおわかりでしょうか。
調整レイヤー
これでシネマグラフの動き自体はほぼ完成ですが、全体的な色味の調整を行うために、調整レイヤーを使用してみましょう。
静止画を選択した状態で、色調補正パネルから「色相・彩度」アイコンをクリックします。
これによって、静止画のうえに「色相・彩度調整レイヤー」が配置され、一括してコントロールできるようになります。
例では、色相を下げたうえで彩度を上げ、明度をやや落とすことによって、リッチな色合いにしてみました。プリセットを使うことも可能です。
画像のリサイズ
今回使用した動画はHDサイズですが、Webで公開するにあたり、あまり大きなサイズだと扱いづらくなるので、画像のリサイズを行います。
メニューバー > イメージ > 解像度と選択します。
画像解像度ウィンドウが表示されるので、「スタイルを拡大・縮小」「縦横比を固定」「画像の再サンプル」にチェックを入れ、横750ピクセルにして「OK」をクリックします。
最終的に、横750ピクセル × 縦422ピクセルの大きさの動画になりました。
Web用に保存
最後に、Web公開するための形式で書き出して完了となります。
ショートカットcommand + shift + option + Sで、「Web用に保存」ウィンドウを表示します。
ファイル形式はもちろん「GIF」ですが、デフォルトですとファイルサイズが大きいため、各種調整が必要です。
カラーを256よりも落とすと目に見えて画質が落ちるので、ディザを少し落とす方向で調整するといいでしょう。
ループオプションを「無限」にして保存します。
これで完成です。
ちなみに、動画を読み込む際、次のように「ビデオフレームからレイヤー...」を選択すると、動画の1フレームごとにレイヤーが生成され、再生順を逆転させられます。
これを利用し、順再生 > 逆再生で元に戻るように作成することにより、ループ箇所を滑らかで自然になります。
もっと簡単にシネマグラフを作成するためのアプリ
Flixel Cinemagraph Pro
Cinemagraph Proは、Apple Mac、iPhone、iPad用のシネマグラフ作成アプリで、スマートフォンやタブレットを使ってシネマグラフを作成できるのが特徴です。使い方は非常に簡単で、撮影した動画をアプリで読み込み、動かしたい箇所を範囲指定するだけです。Apple用アプリらしく、シンプルなユーザーインターフェースを持っているのに加え、セピアやモノクロに変換するフィルターも付属しており、手軽にシネマグラフを作成可能です。
シネマグラフを紹介しているサイト例
GIFMAGAZINE Tastemade Japan
Tastemade JapanのGIFMAGAZINE公式ページでは、「[たっぷりピンク]メルヘンメレンゲケーキ」、「まるごとアボカドチーズメンチ」などがシネマグラフで作成されています。それぞれ、パウダーシュガーを振っている箇所、チーズが伸びる箇所が動いており、それ以外は静止しているという、シネマグラフの手法としてはベーシックなものになりますが、思わず食べてみたくなるような効果を生み出しています。
GIFMAGAZINE アキラ100%
アキラ100%GIFMAGAZINE公式ページの「アキラ100%の瞬間エンターテインメント開幕」では本人が、「仕事終わりはシャンパンで乾杯」ではシャンパングラスが動くという、ベーシックなシネマグラフの手法が使用されています。しかし、トップのバナーでは、逆に本人が静止してスモークのみが動くというパターンが使用されており、静止している本人に注目させるというアイディアが、面白い効果を生み出しています。
シネマグラフはアイディア次第
シネマグラフの作成は、Photoshopを使用するのが主流ですが、専用アプリで手軽に作成でき、作ること自体は思ったよりも難しくないわりに、面白い効果を得られるデザイン手法だとご理解いただけたと思います。
しかし、人気上昇中のデザイン手法なだけに、どこかで見たような、ありきたりのデザインにもなりがちです。なによりも、シネマグラフを使ってどう表現するか、というアイディアが重要だといえます。