ついつい見続けてしまう！シネマグラフを取り入れたWebデザインまとめ

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

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

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

株式会社 電通クリエーティブＸ

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

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

gilgul

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

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

karrimor

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

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

cinemagraphs

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

CINEMAGAPH.JP

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

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

TRILL

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

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

Flixel

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

4K CINEMAGRAPHs

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

Pfister

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

So Tasty!

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

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

Swept Away

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

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

A Cointreau Summer

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

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

Killing Time…

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

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

It’s Friday!

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

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

Seeing New York

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

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

Mad, Magical, Mystical Wonderland

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

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

Rainy Days

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

He Loves Me, He Loves Me Not

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

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

Kiss me in Paris

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

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

On top of the world

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

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

Spring Dresses

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

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

まとめ

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

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

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

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

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

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

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

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