こんにちは、マラガの海の贈り物ことディレクターのSEKOです。
梅雨は嫌ですね。急に大雨が降ったり、雷が発生したりと自然の恐ろしさを日々感じております。
ところで皆さん、シネマグラフという言葉を聞いたことはございますか？
Web系であればご存知の方も多いと思いますが、念のため簡単に説明させていただきますと「画像の一部分のみがアニメーションで動いている画像」です。
そうは言ってもイメージしづらいと思いますので、まずは実際のシネマグラフをご覧ください。
出典：
- Arte em GIFs – Embrulha
- New York Fashion Week – Cinemagraphs
- Fashion Editorial – Cinemagraphs
お分かりいただけましたでしょうか？動いている一部分は常にループしていますね。
では次にシネマグラフの手法を使ったWEBサイトを6つご紹介いたします。
※サイトに遷移した時点でシネマグラフをご確認できます。
シネマグラフを使ったサイトまとめ
gilgul
https://gilgul.co.il/eng.html※現在はサービスを終了しています。
ケーキにソースをかけているのでしょうか。手前と奥の料理を作っている人に視点が集まるようなつくりになっております。
Barbour
https://christmas.barbour.com/※現在はサービスを終了しています。
このサイトではメインイメージを含め９枚のシネマグラフが表示されております。雪や火の使い方がとても上手いサイトですね。
Flixel
こちらはシネマグラフを作成可能なアプリ「Flixcel」のサイトです。メインイメージの女性のスカートだけが揺れているのが分かります。こういう使い方本当に綺麗ですよね。
Pfister
https://www.pfisterfaucets.com/innovations/slate.aspx#.U6Pj7JTV9ZY※現在はサービスを終了しています。
蛇口から水が流れ続けます。シンプルなデザインにちょっとした動きを入れて、全体が非常に美しく表現されております。
MAKE CASH CHEQUES HISTORY
https://makecashandchequeshistory.com/※現在はサービスを終了しています。
暖炉の中の火だけがパチパチとゆらめいているのが見てとれると思います。薪が火の中ではじける音まで聞こえてきそうな作りになっています。温もりが一層伝わってきますね。
KIRIN 澄みきり
https://sumikiri.jp※現在はサービスを終了しています。/
並んでいる缶のしずくがしたたり落ちております。しずくが落ちることでよりひんやりとした冷たさを表現できていますね。飲みたくなります！
最後に
いかがでしたでしょうか。画像なのに動いている、なんか不思議なシネマグラフ。動いている部分には人の目が集中するということが良くわかります。
サービスサイトやECサイトなどで使うだけでもコンバージョンが変わるような気がします。つくり方は色々ありますが、アプリでも簡単に制作することができます。
以下にそれを紹介しつつ、今回のまとめとさせていただきます。
シネマグラフ作成アプリ「Flixel」
使い方はこちらの動画をご覧ください。
ダウンロード：
- iOS版はこちら
- Mac用ソフトウェアはこちら
https://appstore.com/flixelphotosinc
※7/4 20:20追記 アプリ名に誤りがありました。「Flixel」が正しい表記です。お詫びして訂正させていただきます。申し訳ありません。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
