写真の一部がちょっとだけ動く、シネマグラフを使ったサイトまとめ

勢古口


写真の一部がちょっとだけ動く、シネマグラフを使ったサイトまとめ

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

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

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

cinemagraph1

cinemagraph4

cinemagraph7

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

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

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

gilgul

Gilgul Culinary Productions

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

Barbour

Barbour Christmas   Barbour Christmas

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

Flixel

Flixel

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

Pfister

Pfister   Slate   A Beautifully Versatile Faucet Finish

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

MAKE CASH CHEQUES HISTORY

INTERAC e Transfer®    Make Cash and Cheques History

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

KIRIN 澄みきり

キリン 澄みきり   キリン

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

最後に

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

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

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

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

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

ダウンロード:

※7/4 20:20追記 アプリ名に誤りがありました。「Flixel」が正しい表記です。お詫びして訂正させていただきます。申し訳ありません。

勢古口
この記事を書いた人
勢古口

イベントディレクター

2012年入社

この記事を読んだ人におすすめ

こちらもおすすめ

現場のプロが教える WEBデザイン 新・スタンダードテクニック37

現場のプロが教える WEBデザイン 新・スタンダードテクニック37

  • 著者秋元 英輔,安藤 真衣子,五十嵐 亮太,稲葉 聡,大串 肇,小見 祐介,日下部 忠之,倉持 友喜,小杉 厚太,後藤 寛一,シオミ ユタカ,菅原 のびすけ,清野 奨,高遠 和也,高橋 としゆき,中村 大騎,羽野 めぐみ,肥田 真紀子,松本 奈央,miccweb,宮崎 優太郎,森崎 嘉友
  • 価格¥ 3,024(2015/12/17 11:47時点)
  • 出版日2015/08/18
  • 商品ランキング15,782位
  • 単行本256ページ
  • ISBN-104844365185
  • ISBN-139784844365181
  • 出版社エムディエヌコーポレーション