ferret編集部:2015年12月14日に公開された記事を再編集しています。

近年じわじわと流行している、シネマグラフ(Cinemagraphs)という手法をご存知でしょうか。
シネマグラフとは、画像の一部にだけ動きを取り入れたGIFアニメーションのことです。
GIFアニメーションを使ったホームページは以前からありましたが、最近では少し変わった形で使われています。

今回は、シネマグラフを活用したオシャレなサイトと画像をまとめてご紹介します。
GIF画像を使用するため、作り方や技術自体の難易度は高くありませんし、やる気次第では、ソフトを使って自分で作ることも可能ですので、ぜひチェックしましょう。

動くシネマグラフを使ったサイト、画像まとめ

1.キリン 澄みきり

キリン 澄みきり
http://www.kirin.co.jp/products/beer/sumikiri/
キリンビール株式会社 の商品「澄みきり」のホームページでは、開発者の想いを掲載するページにシネマグラフを使っています。
グラスに注いだビールの泡が上がってくる様子が、上手くシズル感を表現しています。

パララックス効果と相まって、印象的なデザインです。

2.株式会社 電通クリエーティブX

株式会社 電通クリエーティブX
http://www.dentsu-crx.co.jp/
株式会社電通クリエーティブXのホームページでは、社員や文具が永遠と回るシネマグラフをデザインに取り入れています。
トップページをはじめ、企業紹介から社員紹介、リクルートページまで全て共通して回転するシネマグラフがデザインに入っています。

クリエイティブコンテンツを制作する同社ならではのユニークな試みといえます。

3.gilgul

gilgul
http://gilgul.co.il/eng.html
料理関連のサービス「gilgul」では、料理ができ上がるまでのシーンをシネマグラフで表現しています。
ぐつぐつ沸騰している鍋、ケーキにソースをかけている動作を見せており、見ていると食欲が湧いてくるような構成です。

動くシネマグラフを使うことで、イメージや想像をさせることができています。

4.mercedes benz

mercedes benz
http://gla-class.mercedes-benz.com/com/en/#!/roadtrip
mercedes benzのキャンペーンサイトです。
GIF画像を使ってはいないものの、雲や足元の草が不思議に動くビジュアルとなっています。

5.karrimor

karrimor
http://www.karrimor.jp/2015fw/
イギリスの総合アウトドアブランドkarrimorの秋冬コレクションのホームページでは、さりげなくシネマグラフの写真を取り入れています。
車内で待つ男性の手が動いていたり、電光掲示板の文字が動いたりと非常に細かい部分です。

男女の旅の雰囲気が伝わってきそうなデザインとなっています。

6.cinemagraphs

cinemagraphs
http://cinemagraphs.com/
海外発のシネマグラフに特化したホームページ「cinemagraphs」では、トップページのデザインを含めシネマグラフを見ることができます。
現在使用しているのはパリの街中を上から撮影したものです。

7.CINEMAGAPH.JP

CINEMAGAPH.JP
http://cinemagraph.jp/
日本のシネマグラフを収集したホームページ「CINEMAGAPH.JP」では、日本ならではの作品を中心に掲載しています。
小さめのサムネイルでぎっしりと画像を敷き詰めていますので、トップページで沢山のシネマグラフが見れます。

どれもさりげなく動くので、つい見入ってしまいます。

8.TRILL

TRILL
http://trilltrill.jp/
女性向けの情報メディア「TRILL」では、アイキャッチ画像にシネマグラフを活用しています。
かすかに動きを取り入れることで、自然に目を引くことが可能です。

また、ページ中の一部にだけ使用することで効果的かつうるさくない印象に仕上がっています。
アイキャッチ、バナーにシネマグラフを使おうとおもった時に参考になる例です。

9.Flixel

Flixel
https://flixel.com/
シネマグラフが作れるアプリ「Flixcel」のプロモーションサイトでは、メインビジュアルに雨が降っている大きなシネマグラフを用いています。
静止画のモノクロ写真でもかっこいいのですが、動きがあることでより凝ったような印象を受けます。

10.4K CINEMAGRAPHs

4K CINEMAGRAPHs
http://www.vons.co.jp/cinemagraphs/
株式会社ヴォンズ・ピクチャーズのシネマグラフサイト「4K CINEMAGRAPHs」では、高クオリティなシネマグラフを掲載しています。
同社のフォトグラファーや3DCGクリエイター、アーティストとコラボレーションした本格的な作品を見ることができます。

11.Pfister

Pfister
http://www.pfisterfaucets.com/innovations/slate#.U6Pj7JTV9ZY
蛇口を扱うメーカーPfisterのホームページでは、シルバーの蛇口から水が流れるシネマグラフを使用しています。
ちょっとした動きですが、洗練された美しさを感じます。

12.So Tasty!

So Tasty!
http://annstreetstudio.com/2011/05/20/so-tasty-molly-kevin-i-have-been-working-long/
トマトから大粒の水滴が滴るシネマグラフです。
たっぷりの水気が新鮮さを演出していて、単に写真だけを掲載するのに比べるととっても美味しそうに見えます。

フルーツや野菜などの生鮮食品、飲料品のPRの参考になる表現方法です。

13.Swept Away

Swept Away
http://annstreetstudio.com/2012/01/06/swept-away/
波打ち際でポーズをとる、女性のシネマグラフです。
なびくスカートと海の水しぶきが風の強さを表していて、空気感まで伝わってくるようです。

モノクロ写真からレトロな映画のような印象も受けます。

14.A Cointreau Summer

A Cointreau Summer
http://annstreetstudio.com/2015/07/02/cointreau/
フランス産のリキュールを使ったお洒落なカクテルに、蝶がとまるシネマグラフです。
蝶の羽が交互にゆっくりと動き、楽しい雰囲気を醸し出しています。

写真だけでも十分に素敵なのですが、動きのつけ方次第でぐっと魅力が増すことがよくわかる例です。

15.Killing Time…

Killing Time…
http://annstreetstudio.com/2014/12/03/cinemagraph-on-time/
女性が腕にはめた時計をくるくると触り、まばたきをするシネマグラフです。
ちょっとした動きをつけるだけで、インパクトのある写真に早変わりします。

ファッション系の広告に取り入れてみたい表現です。

16.It’s Friday!

It’s Friday!
http://annstreetstudio.com/2011/10/14/its-friday-ill-be-popping-on-my-tweed/
週末の男女のお洒落な写真を使ったシネマグラフです。
男性が乗る自転車と女性のスカートがわずかに動いていて、心地よさを感じます。

落ち着いた写真の雰囲気とさりげない動作がマッチした画像です。

17.Seeing New York

Seeing New York
http://annstreetstudio.com/2013/11/08/seeing-new-york/
新聞を読みながらコーヒーをかき混ぜているシネマグラフです。
ゆっくりと回す手の動きと温かそうなコーヒーが印象的です。

眼鏡の周囲にはぼかしがかかっていますが、動作があるだけでつい目がいってしまいます。

18.Mad, Magical, Mystical Wonderland

Mad, Magical, Mystical Wonderland
http://annstreetstudio.com/2013/08/16/cinemagraph-wonderland/
おとぎ話の世界のようなキュートな雰囲気のシネマグラフです。
テーブル上のうさぎの動きがなんとも可愛らしい印象です。

よくみると方位磁石の針が動いていたり、靴のラメもキラキラしていて、細部まで凝ったデザインになっています。

19.Rainy Days

Rainy Days
http://annstreetstudio.com/2013/08/13/rainy-day-tunes/
雨の日の窓際のシネマグラフです。
雨というとジメジメして嫌なイメージもありますが、ろうそくの火がゆらゆらと動く動作がいい雰囲気を演出しています。

20.He Loves Me, He Loves Me Not

He Loves Me, He Loves Me Not
http://annstreetstudio.com/2012/11/30/he-loves-me-he-loves-me-not/
花占いをしている女性のシネマグラフです。
風で髪が揺れ、花びらがひらひらと落ちていっています。

動きのあるシネマグラフだからこそできる表現です。

21.Kiss me in Paris

Kiss me in Paris
http://annstreetstudio.com/2012/09/21/kiss-me-in-paris/
パリの街中での男女のキスシーンのシネマグラフです。
風で枯れ葉が飛ぶ動作、川がゆったりと流れる動作がついています。

その場の温度まで伝わってくるような画像です。

22.On top of the world

On top of the world
http://annstreetstudio.com/2012/09/11/on-top-of-the-world/
モデルの撮影風景のシネマグラフです。
これまでの例とは少し異なり、カメラのフラッシュが光っています。
動きがあるだけで、高貴さやかっこよさを感じる画像に仕上がっています。

ファッション関係のホームページに使うとお洒落な表現です。

23.Spring Dresses

Spring Dresses
http://annstreetstudio.com/2012/05/11/spring-is-here-time-to-dance-to-the-music-have-a/
春仕様のドレスを纏った女性が踊るシネマグラフです。
楽しげに身体が揺れる動きから、気楽な雰囲気が伝わってきます。

もしかして音楽が鳴っているのか、という想像を掻き立ててくれるのも、動きがあるシネマグラフならではです。

24.Happy Holidays!

Happy Holidays!
http://annstreetstudio.com/category/cinemagraphs/page/15/
クリスマスシーズンの女性のシネマグラフです。
外に降る雪がキラキラと動いていて、とても美しい印象です。
耳元のイヤリングも自然に動いています。

派手な動作でなくとも、少し動きをつけるだけで印象的な画像になります。

まとめ

以上、シネマグラフを活用したオシャレなサイトと画像をご紹介しました。

シネマグラフは写真の一部だけが動くため、注目を集めるのに適しています。
例えば、商品にインパクトを与えたいと思った場合や目立たせたい被写体がある時に有効です。
また、見た目にインパクトをつけてくれるのはもちろんのこと、その場の空気感や雰囲気まで伝えられるのがシネマグラフの魅力です。

様々な取り入れ方ができる手法ですので、ぜひ実際に自社のホームページに取り入れてみてはいかがでしょうか。

このニュースを読んだあなたにおすすめ

デザインする際に知っておくと使える小ワザ集
Webデザイナー必見!すぐに使える高品質な無料デザイン素材まとめ
Webデザインに役立つ無料のツール・デザイン集まとめ

このニュースに関連するカリキュラム

タグ・HTMLとは。ホームページの基礎技術

タグ・HTMLとは。ホームページの基礎技術

ホームページはタグとよばれるプログラムで書かれています。それをブラウザが処理し表示することで、レイアウトされたり、リンクが機能したりします。本カリキュラムではタグと、その1つであるHTMLを解説します。