シネマグラフのアプリ最新版！動く写真が簡単に作れるおすすめの方法を教えます！

 

いま、シネマグラフというGIFアニメーションが注目を集めていることをご存知ですか？

「アニメーションなんて、大変でしょ？」と思われがちですが、このシネマグラフは、WEBデザインの手法なので誰にでも手軽に作れちゃうんです！

 

今回は、シネマグラフの作り方について調べてみました。

 

 

シネマグラフとは？

静止画だと思っていた画像の一部が動いて、びっくりした経験はありませんか？

まさにこれが、「シネマグラフ」なんです。静止画としても魅力的でありながら、動きがあり、人の目を引くシネマグラフは、新しいマーケティングツールとしても注目されています。

 

シネマグラフ利用のメリット

シネマグラフのメリットは、3つあります。

　
インパクトがある

静止画だと思い込んでいたら、一部分が動き出した！
これだけでも十分にインパクトがありますが、シネマグラフの優れたところは、「さりげない」ことです。誰にでもわかるような動きをしても驚いてはくれません。あくまでも最初に「静止画だ！」と思わせることが必要なんです。だからこそ、気づいた時のインパクトが大きいのです。

 

動くものが気になる

 

走っている人を見たり、揺れるピアスが気になったり、人は動いているものを知らずに目で追ってしまう習性があります。
シネマグラフも一部だけが動くことで、人の目を引きつけることできるので、興味を持ってもらうことができます。

 

大容量を必要としない

動画の場合、より良いもの作ろうとするほどに容量が大きくなってしまいます。逆にクオリティを下げれば、動画のサイズは小さくなってしまいます。思うような動画が作れないことはストレスですが、シネマグラフの場合は、WEBデザインの手法なので、容量について心配する必要がありません。

 

Photoshopを使って作る方法

 

では、どのようにしてシネマグラフを作成するのか、Photoshopを使って説明します。

準備するものは、動画です。

使用する動画のポイントは、2つあります。

• ループ再生しても違和感のない動画
• ブレていない動画

 

手順1.～動画を取り込む

出展：https://boxil.jp/mag/a2993/

 

Photoshopからタイムラインを選び、動画を取り込みましょう。

動画を再生しながらループ再生させたい部分を選び、開始ポイントと終了ポイントを決めてください。

これ以外の動画は使いませんので削除して、必要な部分だけ残してください。

 

手順2.～静止画を貼る

出展：https://boxil.jp/mag/a2993/

 

ここでいう貼るイメージは、「動画の上に静止画を重ねる」です。それぞれにビデオグループを作ります。静止画を動画と同じ長さに調整して合わせてください。

 

手順3.～静止画の一部を切り抜く

出展：https://boxil.jp/mag/a2993/

 

静止画の下で動いている動画が見えるように、マスクで静止画の一部を切り抜きます。

 

手順3.～仕上げ

出展：https://boxil.jp/mag/a2993/

 

ここまでの作業で、シネマグラフとしては出来上がりですが、さらにクオリティを上げるために仕上げをします。

• 全体の明るさ調整
• 画像のサイズを調整

この2つをポイントに作成したシネマグラフを仕上げていきましょう。

 

手順5.～いよいよ動き出す

出展：https://boxil.jp/mag/a2993/

 

WEBにシネマグラフを保存します。

保存する時には、この2つをチェックしてください。

• ファイル形式は、GIF
• ループオプションは、無限

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

 

 

シネマグラフのアプリの紹介

 

シネマグラフを「もっと手軽に楽しく使ってみたいという方には、スマホでできるシネマグラフのアプリがあるので、ご紹介します。

 

Cinemagraph Pro

 

 

　https://itunes.apple.com/jp/app/cinemagraph-pro/id777874532?mt=12

 

Mac・iphone・ipadなどで使用できるアプリです。操作はとっても簡単！動画を取り込み、動かしたい部分を指定するだけです。動画の加工もできます。

 

Daily Cinema

 

https://itunes.apple.com/jp/app/dailycinema/id1118747511?mt=8

 

こちらは、iphoneで使用できるアプリです。取り込んだ動画で使用したい部分をペンでなぞるだけです。難しい操作なくSNSへの投稿もできます。

 

motiongraph

 

https://play.google.com/store/apps/details?id=com.sonydna.motiongraph

 

SONYが提供しているAndroid用のアプリです。

画像の細かい補正に加えて、手ぶれを軽減させる機能までついているので、クオリティの高いシネマグラフを作ることができます。

 

 

シネマグラフのWEBデザインまとめ

 

シネマグラフの紹介サイトや実際の作品ががあるので、シネマグラフの作り方として参考にしてくださいね。

 

・Cinemagraphs

 

出展：http://cinemagraphs.com/

こちらは、海外のシネマグラフを中心に集められたサイトです。
街並みやパーティなど、どのシネマグラフもおしゃれできれいなものばかりです。

 

・CINEMAGAPH.JP

 

出展：http://cinemagraph.jp/

こちらも紹介サイトですが、日本の景色や道具を使ったシネマグラフが多いので、親近感があります。

また、サイズも小さなものからあるので、サイトに目一杯のシネマグラフが用意されています。

 

・Flixcel

 

出展：https://flixel.com/

先述でもご紹介しました、アプリでシネマグラフが作られる「Flixel」のサイトです。

こちらは、現在のトップページですが背景をぼかしてミラーに映る情勢を強調しています。でも動く場所は別なんです。

 

・一般社団法人ナインブリッジズ

 

出展：https://ninebridges.or.jp/

日本の伝統文化を世界に伝える事業をされています。

シネマグラフを取り入れることで、「侘び寂び」を情緒豊かに伝えることができます。

 

・プレミアムシネマグラフメディア “ELIXIR”

 

出展：https://www.youtube.com/watch?v=iENwwjsshe0

「プレミアム」という言葉通り、どのシネマグラフも静止画としての美しさと、さりげない動きに圧倒されます。

 

ここまでは、紹介サイトや実際にシネマグラフを取り入れている企業を紹介しました。

次は、シーン別に作られたシネマグラフをご紹介します。

 

・雨の日

 

出展：http://annstreetstudio.com/2013/08/13/rainy-day-tunes/

 

・食べ物

 

出展：http://annstreetstudio.com/2011/05/20/so-tasty-molly-kevin-i-have-been-working-long/

 

・景色1

 

出展：http://cinemagraphs.com/

 

・景色2

 

出展：http://annstreetstudio.com/2018/02/24/wishing-on-a-star/

 

・人物

 

出展：http://cinemagraphs.com/

この他にも、おしゃれなもの・美味しそうなもの・きれいな景色など様々なシネマグラフがあります。

あまりの優雅さに、作業の手が止まってしまうかも？？？

 

シネマグラフまとめ

 

シネマグラフというWEBデザインの手法で、誰でも簡単にGIFアニメーションが作れることがわかりました。

発想やアイディア次第では、これまでの動画広告よりも画期的で、ユーザーの興味を引くこともできるので、マーケティングでも活用できます。

ぜひ、チャレンジしてみてくださいね。