こんにちは、マラガの海の贈り物ことディレクターのSEKOです。
梅雨は嫌ですね。急に大雨が降ったり、雷が発生したりと自然の恐ろしさを日々感じております。

ところで皆さん、シネマグラフという言葉を聞いたことはございますか？
Web系であればご存知の方も多いと思いますが、念のため簡単に説明させていただきますと「画像の一部分のみがアニメーションで動いている画像」です。

そうは言ってもイメージしづらいと思いますので、まずは実際のシネマグラフをご覧ください。

出典：
• Arte em GIFs – Embrulha

http://www.embrulha.com/arte-em-gifs/

• New York Fashion Week – Cinemagraphs

http://cinemagraphs.com/nyfw/

• Fashion Editorial – Cinemagraphs

http://cinemagraphs.com/

お分かりいただけましたでしょうか？動いている一部分は常にループしていますね。

では次にシネマグラフの手法を使ったWEBサイトを6つご紹介いたします。
※サイトに遷移した時点でシネマグラフをご確認できます。

シネマグラフを使ったサイトまとめ

gilgul

http://gilgul.co.il/eng.html

ケーキにソースをかけているのでしょうか。手前と奥の料理を作っている人に視点が集まるようなつくりになっております。

Barbour

http://christmas.barbour.com/

このサイトではメインイメージを含め９枚のシネマグラフが表示されております。雪や火の使い方がとても上手いサイトですね。

Flixcel

https://www.flixel.com/

こちらはシネマグラフを作成可能なアプリ「Flixcel」のサイトです。メインイメージの女性のスカートだけが揺れているのが分かります。こういう使い方本当に綺麗ですよね。

Pfister

http://www.pfisterfaucets.com/innovations/slate.aspx#.U6Pj7JTV9ZY

蛇口から水が流れ続けます。シンプルなデザインにちょっとした動きを入れて、全体が非常に美しく表現されております。

MAKE CASH CHEQUES HISTORY

http://makecashandchequeshistory.com/

暖炉の中の火だけがパチパチとゆらめいているのが見てとれると思います。薪が火の中ではじける音まで聞こえてきそうな作りになっています。温もりが一層伝わってきますね。

KIRIN　澄みきり

http://sumikiri.jp/

並んでいる缶のしずくがしたたり落ちております。しずくが落ちることでよりひんやりとした冷たさを表現できていますね。飲みたくなります！

最後に

いかがでしたでしょうか。画像なのに動いている、なんか不思議なシネマグラフ。動いている部分には人の目が集中するということが良くわかります。

サービスサイトやECサイトなどで使うだけでもコンバージョンが変わるような気がします。つくり方は色々ありますが、アプリでも簡単に制作することができます。

以下にそれを紹介しつつ、今回のまとめとさせていただきます。

シネマグラフ作成アプリ「Flixcel」

使い方はこちらの動画をご覧ください。

ダウンロード：

• iOS版はこちら

http://appstore.com/flixelphotosinc

• Mac用ソフトウェアはこちら

https://itunes.apple.com/us/app/cinemagraph-pro/id777874532