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

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

セコ

セコ

こんにちは、マラガの海の贈り物ことディレクターの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」が正しい表記です。お詫びして訂正させていただきます。申し訳ありません。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

いいオフィス支配人の勢古口です。3年間お世話になったスペインから帰国してWebディレクターに返り咲き、2014年夏からお酒の力を借りつつラテンのノリで楽しませる特技を活かして、いいオフィスの支配人に。あっ、教育事業のSTUDIO上野 by LIGの支配人にもなりました。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL