今話題のシネマグラフとは?特徴や作り方を徹底紹介

B!

一見、写真のように見えるけれど、よく見ると画像が動いている…そんなウェブサイトを見たことはありませんか?

実はこのような表現を『シネマグラフ』といいます。
シネマグラフは手軽に制作できて、ウェブサイトを運用する上でも良い効果をもたらしてくれるため、現在多くのウェブサイトで導入が進んでいます。

そこで本記事では、

  • シネマグラフの特徴
  • シネマグラフの作成方法

を解説していきます。


説明用・PR用の動画を検討されている方へ


動画制作依頼なら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:静止画に変換する

要するにシネマグラフは、全くアングルの同じ動画と静止画を重ねて表示することで画像の一部分だけ動いて見えるようにする技術です。

そのため、コピーしたレイヤーを静止画化します。
「ラスタライズ」→「ビデオ」とクリックすると、コピーしたレイヤーは静止画となり、元のレイヤーは何もしていないのでビデオのまま維持されます。

この静止画変換のとき、どこまで静止画として表示するかをタイムライン上の「時間インジケーター」を使って決めておきましょう。

STEP4:レイヤーマスクを作る

次に行うことは、「動く範囲の切り抜き」です。
Photoshopでは「レイヤーマスクを作る」といいます。

レイヤーマスクの作り方はいろいろな方法がありますが、「ブラシツール」を使って、静止画化したコピーレイヤーの中から動画にしたい部分をなぞりましょう。
なぞったあと、「レイヤーマスクを追加」をクリックするとマスクができ上がり、静止画の一部分が動画として見えるようになります。

STEP5:動画のように見える部分の長さを変えて書き出し

最後に行うことは「動いて見える部分の長さの調整」です。
シネマグラフは「ループ再生(自動的に続けてリプレイされる再生)」を利用して構成されています。
動画になって動いている部分の始点と終点が、なるべくスムーズにつながる地点をタイムライン上から抽出しましょう。

再生して違和感がなければ書き出します。
「書き出し」→「Web用に保存(従来)」からファイル形式を「GIF」にし、何回ループさせるかを決めて書き出しましょう。

これでシネマグラフの完成です。


従業員がおすすめする動画制作会社ランキング1位はどこ?

スマホアプリでも作れる!

シネマグラフの特徴から作り方までを徹底紹介しましたが、いかがでしたでしょうか?

本記事を読めば、シネマグラフは難なく作れることでしょう。
また、最近ではシネマグラフを制作できるスマホアプリも登場してきています。

わざわざPhotoshopを使わなくても、より手軽にシネマグラフを作ることができますので、スマホアプリもぜひ試してみましょう!

動画制作/広告運用なら株式会社TSUTA-WORLDへ

お客様から次のようなお声をいただいています。

TSUTA-WORLDに「動画制作/動画広告」対応を依頼されたお客様の声
・顧客が多くなりすぎて、対応できないぐらいになった。
・伝わらなかった商材伝わるようになり、結果売上が増え顧客が倍になった。
・アクセス流入が増えた。そのことから2回目も依頼しました。
・作ってもらった動画のおかげもあり問い合わせが増え、これ以上増えると対応できない状態になった。
・求人動画を作ってもらい、社内のサービスと雰囲気を理解している確度の高いエントリーが増えた。

 

お気軽に、見積依頼・動画活用相談をしてください。

得意な業種・ジャンル

製品説明動画、教育動画、会社説明動画

得意な業種
ソリューションベンダー、健康食品、部品メーカー、無形商材

得意な分野
企業紹介、最新技術の紹介、中途採用向け教育アニメ、社内ガバナンス・コンプライアンス向け教育アニメ など

VideoDXカンパニーTSUTA-WORLDの特徴

「VideoDXソリューションカンパニー(商標登録申請中)」株式会社TSUTA-WORLDは東京都渋谷区恵比寿に拠点を構えている「動画制作×動画広告運用」を行っている会社。
動画を作って終わりという会社が多い中、弊社は動画を使って何をしたいのか、ターゲットは誰なのかを考えたうえで、企画~動画制作~納品~納品した動画の活用方法提案とアドバイス(利活用並びに動画広告運用)まで行っているのを強みにしています。

動画制作 アニメならTSUTA-WORLD
株式会社TSUTA-WORLD 代表取締役 山岡優樹

 

最新の記事はこちらから