突然ですがシネマグラフというものをご存じですか？
これは画像の一部が繰り返し動いている写真のことをいいます。
普段よく目にする動画は画面全体が動くので、一部だけが動いている動きは非日常を味わえて思わず見入ってしまいますね。
今回はそんなシネマグラフをwebデザインに取り入れたサイトを紹介していきたいと思います。
目次
シネマグラフについて
一見写真のように見えて一部だけが永遠とループし続けるシネマグラフ。
写真では伝わらない不思議な雰囲気を加えることが出来ます。
動きによってその物の質感や臨場感がより伝わりますね。
そんな魅力のあるシネマグラフの世界を一緒に見ていきましょう。
シネマグラフを取り入れたwebサイト
Tastemade Japan
https://gifmagazine.net/users/53390/profile?_fsi=oEHqypG6&_fsi=oEHqypG6
Tastemade JapanのGIFMAGAZINEのwebサイトです。
instagramのsnsなどでレシピ動画をみたことのある方も多いのではないでしょうか。
普段目にするレシピ動画とは違い、繰り返し動くことで料理の温度感やとろみ感などがより強調されて見えます。写真だけでも美味しそうですが、動きがあることでより美味しそうに感じます。思わず食べてみたくなるようなシネマグラフがたくさん載っています。
デニーズ
https://gifmagazine.net/users/47855/profile
ファミリーレストラン、デニーズのGIFMAGAZINEのwebサイトです。
たっぷりのフルーツが印象的なシネマグラフです。
旬のフルーツを使ったパフェなど、たくさんのフルーツが動くことでフルーツをたっぷり使っていることを連想させます。
またポップな色使いが、アイキャッチになりますね。
グランジャポン
https://granjapon.co.jp/archives/column_tag/%E3%82%B7%E3%83%8D%E3%83%9E%E3%82%B0%E3%83%A9%E3%83%95
グランジャポンさんのコラムです。
お店で扱う輸入商品などを使ったレシピを紹介しています。
レシピといえば動画や写真が多いですが、こちらはシネマグラフを取り入れたレシピです。
食材を切ったり、混ぜたり、焼いたり、注いだり一連の動きをシネマグラフで見ることが出来ます。
ポイントとなる部分が繰り返し動いているので、レシピとしても分かりやすい構成になっています。
作っている音や匂いが伝わるような臨場感があります。
Kitchen Ghosts
https://kitchenghosts.carbonmade.com/
ロシア人の写真家であるDaria KhoroshavinaさんとフードスタイリストのOlga Kolesnikovaさんの女性2人が手掛けるKitchen Ghostさんのwebページです。
パンケーキのシロップがとろーりと垂れていく様子や、ポタージュをすくう様子に思わずお腹が減ってしまいます。美しい写真としずる感に思わず手に取って食べてみたくなるようなシネマグラフがたくさん載っています。普段よく目にする動きも繰り返し動くとファンタジーの世界を見ているような不思議さを感じます。
daria khoroshavinaさんはインスタグラムでも沢山のシネマグラフを載せているので是非見てみてください。
Maori Saka
https://www.maorisakai.com/
日本のイラストレーター酒井真織さんのwebサイトです。
水彩と鉛筆を使って描かれるアート。
優しくノスタルジックな雰囲気で、絵だけでも十分素敵ですが、シネマグラフの動きによってより一層目を引く作品になっています。
トップページだけでなく、他のページでもイラストのシネマグラフを見ることができます。
日常にある風や水の流れ、動植物の生き生きとした様子が動くことによってより伝わってきます。
ラムネ
https://lamune-kyoto.com/
京都にあるラムネというヘアサロンのwebページです。
おしゃれな店内に遊び心のある手描き風のイラストが印象的な作品です。
実際の店内やスタッフの方々の動きとイラストをうまく組み合わせたせた凝った作りになっていて、思わずスクロールして全部のページを見てみたくなる仕上がりになっています。
トップページだけでなく、他のページでも遊び心のあるシネマグラフをみることができます。
こだわりの空間と可愛らしいイラストで、お店の特別な雰囲気が伝わってくるシネマグラフになっています。
CIMANETIC -映画みたいな島根
http://cimanetic.com/
島根県各地の情景などを映画のワンシーンのように映像表現した地域活性プロジェクトのwebページです。
シネマグラフ以外にもタイムプラスや空撮など様々な表現方法をしています。
シネマグラフは一見美しい写真に見えますが、静かな空気感の中に動きがあって自然と目を惹かれる作品です。
それぞれの作品には地図が載っていて、興味のある場所の位置を確認することができるので気になる場所を訪れることもできます。
Cinemagraphs
http://cinemagraphs.com/
ニューヨークを拠点に活動するファッション・フォトグラファーのジェイミー・ベックとビジュアル・デザイナーのケビン・バーグのデュオによるシネマグラフが載っています。
シネマグラフという名前はこの2人によって造られたそうです。
写真だけでも美しい作品ですが、動きがあることでより目を引く作品に仕上がっています。
景色が流れていくシネマグラフは鏡越しの景色も動いていたり、風の動きを感じるシネマグラフは花びらだけでなく髪の毛もなびいているなど、どのシネマグラフも細部まで凝った造りになっています。
日本デザインセンター画像制作部
http://visual.ndc.co.jp/focus/407/
様々な画像を制作している日本デザインセンターのwebページです。シネマグラフもいくつか制作していて、ペンギンのシネマグラフは１匹のペンギンが奥から出てきて水に入る場面がループしています。とことこと歩く可愛らしいペンギンと水面の揺れが涼しげなシネマグラフです。
ループさせる場所や場面によって印象や感じ方が違ったものになるのも、シネマグラフの魅力ですね。
メルヘン
http://g-marchen.com/
メルヘンというケーキ屋さんのwebページです。
かわいらしいイラストと焼き菓子やフルーツが散りばめられていて、クッキーのサクサクの触感が伝わってくるデザインになっています。
動くことでつい目がいってしまいます。
地図はイラストの足跡が動くデザインになっていて、道順を効果的に伝えることができています。
Lynn chen ART
http://lynnchenart.com/woollyandshaggy
リン・チェンさんのwebページです。
ワーナーブラザーズでも働いていたアーティストで、風景画の絵の美しさだけでなく動物たちの可愛らしい動きに目を奪われる作品です。
動きがつくことで動物たちはこんな性格なのかな、この後何が起こるのかなと想像力を掻き立てられます。
ひとつひとつの作品が物語を見ているようです。
けたくま
https://ketakuma./com
lineスタンプでも人気のあるけたくまのwebページです。
一見かわいらしいくまの絵ですが、止まっているイラストからは想像できないような動きをします。
けたくまの繰り返されるコミカルな動きがくせになり、つい見入ってしまう方も多いのではないでしょうか。
けたくまの動きを存分に楽しめる仕上がりになっています。
まとめ
シネマグラフをwebデザインに取り入れたサイトを紹介しました。
シネマグラフは動画のように容量が重くなりすぎず、しかし写真よりもさりげなく目を引くことができます。
静止した画像の中の一部だけ動く不思議なシネマグラフは見た人の心に残ります。
その場の空気感や雰囲気なども伝わりやすいのも魅力ですね。
さりげなくインパクトを与えられて、イメージや想像力を掻き立てられるシネマグラフ。
興味のある方はぜひホームページ制作に取り入れてみてはいかがでしょうか。
