一見、写真のように見えるけれど、よく見ると画像が動いている…そんなウェブサイトを見たことはありませんか？
実はこのような表現を『シネマグラフ』といいます。
シネマグラフは手軽に制作できて、ウェブサイトを運用する上でも良い効果をもたらしてくれるため、現在多くのウェブサイトで導入が進んでいます。
そこで本記事では、
- シネマグラフの特徴
- シネマグラフの作成方法
を解説していきます。
Contents
動画制作依頼ならTSUTA-WORLD
アニメ/実写 対応
お客様から次のようなお声をいただいています。
TSUTA-WORLDに「動画制作/動画広告」対応を依頼されたお客様の声
・伝わらなかった商材伝わるようになり、結果売上が増え顧客が倍になった。
・作ってもらった動画のおかげもあり問い合わせが増え、これ以上増えると対応できない状態になった。
・求人動画を作ってもらい、社内のサービスと雰囲気を理解している確度の高いエントリーが増えた。
（YOUTUBE)
動画サンプル：https://www.youtube.com/@tsutaworld733/videos
シネマグラフとは？
まず『シネマグラフ』とは何かを具体的に説明しましょう。
シネマグラフとは、「写真・画像の一部分に動きをつけたGIFアニメーション」です。
たとえば、こちらの「ピザハット」の動画をご覧ください。
カップルは静止画で、周りの人物や背景はタイムラプス風の動画になっています。
このようにシネマグラフを使うと、ウェブサイトに独特な雰囲気を醸し出すことができます。
シネマグラフの3つの特徴
では、動く写真（画像）『シネマグラフ』にはどんな特徴があるのでしょうか？
特徴は、主に下記3点が挙げられます。
特定の部分が動くので目を惹きやすい
シネマグラフをウェブサイト上に載せると、ただの静止画を載せておいた場合よりもサイト訪問者の目に留まります。
動きがある分、サイトの滞在時間も伸ばすことができるので、重要な情報やPRしたい商品・サービスをシネマグラフで伝えるようにすると、訪問者は楽しみながら情報を得ることができます。
そのため、ウェブサイトへの印象が良くなります。
動画より容量を抑えられる
シネマグラフなら、動画より手軽にウェブサイトに掲載することができます。
動画の場合、凝っている作品や長い作品だとデータが大きくなってしまうので、サイトの処理速度に影響を与えてしまう可能性があります。
サイトの読み込みの遅さは離脱数増加の一番の原因ですので、動画を載せることにはリスクがあります。
でもシネマグラフなら動画よりデータが小さいので、サイトの容量を抑えることができるため読み込みが遅くなってしまう可能性を下げられます。
ウェブサイトのアクセントになる
シネマグラフは、売上や滞在時間を伸ばすなどの目的がなくても、取り入れると良いでしょう。
シネマグラフを載せることで単純にウェブサイトへの良いアクセントになり、サイトが華やかになったり、おしゃれになったりします。
シネマグラフの作り方 5STEP
シネマグラフの特徴を紹介しましたが、ではどうすれば実際にウェブサイトを演出してくれるシネマグラフを制作することができるのでしょうか？
実はシネマグラフは、動画制作のプロではなくても『Photoshop』を使って、特定の操作をすれば誰でも簡単に制作することができます！
ここからは、Photoshopを使用したシネマグラフの制作法を紹介します。
PhotoshopをリリースしているAdobeが制作ステップをまとめた動画を公開しているので、こちらもぜひ参考にしてみてください。
STEP1：ビデオを読みこむ
まずはPhotoshopを起動し、「ファイル」→「開く」に進みましょう。
ここでベースとなるビデオを選択すると、そのビデオが読み込まれてカンバス上に画像になって（「レイヤー」と言う）表示されます。
下部には「タイムライン」が表示されていて、そのタイムラインを動かすとビデオが再生されます。
STEP2：レイヤーを複製する
次に行うことはビデオレイヤーをコピー＆ペーストすることです。
「ウインドウ」メニューの「レイヤー」タブからビデオグループ内にある「レイヤー1」を選択して任意の名前に変えましょう。
次に、名前を変えたレイヤーをビデオグループの外に出します。ビデオグループは削除し、外に出したビデオレイヤーをドラッグして「新規レイヤー作成」ボタンにドロップするとコピーが作成されます。
STEP3：静止画に変換する
要するにシネマグラフは、全くアングルの同じ動画と静止画を重ねて表示することで画像の一部分だけ動いて見えるようにする技術です。
そのため、コピーしたレイヤーを静止画化します。
「ラスタライズ」→「ビデオ」とクリックすると、コピーしたレイヤーは静止画となり、元のレイヤーは何もしていないのでビデオのまま維持されます。
この静止画変換のとき、どこまで静止画として表示するかをタイムライン上の「時間インジケーター」を使って決めておきましょう。
STEP４：レイヤーマスクを作る
次に行うことは、「動く範囲の切り抜き」です。
Photoshopでは「レイヤーマスクを作る」といいます。
レイヤーマスクの作り方はいろいろな方法がありますが、「ブラシツール」を使って、静止画化したコピーレイヤーの中から動画にしたい部分をなぞりましょう。
なぞったあと、「レイヤーマスクを追加」をクリックするとマスクができ上がり、静止画の一部分が動画として見えるようになります。
STEP5：動画のように見える部分の長さを変えて書き出し
最後に行うことは「動いて見える部分の長さの調整」です。
シネマグラフは「ループ再生（自動的に続けてリプレイされる再生）」を利用して構成されています。
動画になって動いている部分の始点と終点が、なるべくスムーズにつながる地点をタイムライン上から抽出しましょう。
再生して違和感がなければ書き出します。
「書き出し」→「Web用に保存（従来）」からファイル形式を「GIF」にし、何回ループさせるかを決めて書き出しましょう。
これでシネマグラフの完成です。
スマホアプリでも作れる！
シネマグラフの特徴から作り方までを徹底紹介しましたが、いかがでしたでしょうか？
本記事を読めば、シネマグラフは難なく作れることでしょう。
また、最近ではシネマグラフを制作できるスマホアプリも登場してきています。
わざわざPhotoshopを使わなくても、より手軽にシネマグラフを作ることができますので、スマホアプリもぜひ試してみましょう！