写真の一部だけが動く、シネマグラフの作り方や使っているサイトまとめ

2017年9月30日design, WEB制作, 雑学

シネマグラフ
シネマグラフ

最近WEB業界でめちゃめちゃ流行っているcinemagraph(シネマグラフ)の情報をまとめてみました。
シネマグラフってのは、簡単に説明すると、写真画像の一部分だけを動かし斬新な表現をする手法の画像です。
静止画や動画に比べ、扱いやすい点と目新しさがある為、注目されています。

シネマグラフ
シネマグラフ

国内のWEBサイトでも使われているサイトが徐々に増えてきています。
大手の有名サイト等でも導入されている技術なので、もしかしたら2015年のWEBトレンドはシネマグラフになるかもしれませんね。

シネマグラフの作り方

シネマグラフの作り方について書かれているページを調べてみました。

LIGさんの解説記事
日本語での解説ならここが一番分かりやすいと思います。
ちょっと引用させていただきますが、これ本当に大事なので。

1. カメラが固定されていること
シャッターを押すちょっとしたブレでもつなげると気になったりするので、三脚&リモートシャッターなんかがあるといいと思います。
2. ループの繋ぎ目が気になりにくい動きであること
動きが単純で短い時間でも成立するものが向いています。(髪の毛のふわふわとか水がチョロチョロ流れる動きとか)しかしこのへんの動きが多様されててマンネリなのも事実・・・。アイデアをひねり出すのが一番大変な作業かもしれません。
3. 動いてる部分の背景に動きがないこと
後で詳しく説明しますが、基本的な作り方は動画の上に静止画を置いて動かしたい部分に穴を空けるというのがおおまかな手法なので、動かしたい部分以外にちょっとでも変化があると違和感が生まれます。

■デモページ

CSS3のみを使いシネマグラフを実現するチュートリアルとデモです。
厳密に言えば、photoshop等の画像レタッチソフトで、画像の加工が必要です。

最初のデモのHTMLとCSSのソースが公開されています。
上記ページでファイルもダウンロード出来るので、デモページ全体のソースを確認できます。
但しダウンロードファイルの中に、ポットから湯気が出ているデモの画像ファイル一式が抜けています。

シネマグラフサンプル
シネマグラフサンプル

How To Make a Cool Cinemagraph Image in Photoshop

http://blog.spoongraphics.co.uk/tutorials/how-to-make-a-cool-cinemagraph-image-in-photoshop

Create-Cinemagraph-Image-in-Photoshop
Create-Cinemagraph-Image-in-Photoshop

個人的には物凄く好きなシネマグラフ
女性がフリフリしてるのが可愛い。服飾関連のサイトでこんなイメージがあったら、印象に残りますね。
解説も画像つきでかなり細かく書かれているので、英語が苦手でも何とか理解できる。

ファイルもダウンロードできますが、このサイトの有料会員が必要です。

アプリで作る

web制作での案件で作る場合なら、上記のチュートリアルの様にphotoshop等のツールを使い制作した方がいいですが、趣味やtwitterやInstagram、Pinterest等に投稿するライトな目的の場合は、iphoneアプリ等で手軽に作れるのでそっちを使っちゃいましょう。

Cinemagram – create and share moving photos

無料で使えるiphoneアプリ、結構高評価で使い勝手も良さげ。

Cinemagraph Pro

Cinemagraph Proは有料で9800円とちょっとお高い感じ。
時々セールをしているので、過去には1500円になってた事もあるので、趣味程度に使うなら、セールを待ったほうがいいかも?

Kinotopic on the App Store on iTunes

無料のiphoneアプリ、インターフェイスが英語なので使いづらいかも><

・Androidアプリ

motiongraph – 動く写真 ”モーショングラフ” – Google Play の Android アプリ

ソニーデジタルネットワークアプリケーションズが公開したアンドロイド向けアプリ。
99円とお手ごろな値段。

シネマグラフを使っている国内のサイト

キリン 澄みきり | キリン

http://sumikiri.jp/

商品紹介の【澄みきりのうまさを表現した新デザイン】や、【開発者の想い】等で使われている。

4K CINEMAGRAPHs[シネマグラフ] | VONS pictures inc.

http://www.vons.co.jp/cinemagraphs/

VONS Pictures | 株式会社ヴォンズ・ピクチャーズが制作したサイト、素晴らしいクオリティのシネマグラフが見れます。

mimmam オフィシャルソーシャルモブサイト

http://www.mimmam.com/

サイトというよりミュージックビデオなんですが全編シネマグラフで作ってる、すげーよ。

株式会社 電通クリエーティブX / DENTSU CREATIVE X INC.

http://www.dentsu-crx.co.jp/

株式会社電通クリエーティブXのサイト
各メニューページでも色々とくるくる回っています。何故回っているかはわからない(´・ω・`)

備忘録

これからのWEBの広告やバナー等は、シネマグラフが活発に使われてくるのではないかと思います。
ブラウザのサポートが進みAPNG(アニメーションPNG)のサポート状況が良くなったら、GIFからより画質のいいAPNGに変わっていくと思います。

APNGはまだiOS8のみのサポートなので、現状はほぼ使えませんが、HTML5やCSS3と同じように2~3年後には使える状況になって欲しいなぁ。その頃には関数が使えるCSS4も実用化されてくるといいですね。

WEB制作の可能性は広がるばかり、ただ覚えることも増えるから大変(;´Д`)
でも作ることは、喜びなのです。

この記事が気に入ったら
『いいね』しよう!