シネマグラフは、GIFアニメーションの進化した形です。画像全体ではなく一部だけが動くので、動画より派手すぎず、静止画よりも注目を集めることができます。また、注目をさせたいものを決め、動かすものを調整することで、Webサイトの雰囲気を作ったり、商品の魅力を高めることができます。
この記事では、そのシネマグラフを効果的にWebサイトに利用している、海外・国内のサイトをご紹介します。不思議な雰囲気を出すシネマグラフを眺めながら、そのサイト独特の表現をじっくり楽しみましょう。
国内サイト
東巨女子 TOKYO GIGANTIC GIRLS
文化庁メディア芸術祭にも推薦作品として取り上げられている、CMディレクター・映画監督の松宏彰さんらによるアートプロジェクトのサイトです。東京の各所に巨大な女の子が登場するという設定で、メインは動画ですが、一部のコンテンツにシネマグラフが使われています。
写真内の一部分だけではなく、似たような複数の写真のうちの一つだけを動かすことによって、シネマグラフ特有のメリハリが演出できています。
lyrical school RUN and RUN 特設ページ
アイドルグループlyrical schoolのシングル、RUN and RUNのPRサイトです。サイトのトップでは特に動的な仕組みはなく、メインのコンテンツはスマホをうまく使った斬新なミュージックビデオなのですが、肝心のCDジャケットのサムネイルにのみ、シネマグラフが使われています。
画面内でもっとも動くことを想定しづらい商品写真が動き出すという、ミュージックビデオと同じ文脈で遊び心満点で、驚きを演出しています。
ザ・ドッグデイズ
ペットのためのウォーターサーバーを影響するザ・ドッグデイズのサイトです。トップでは桟橋に佇む犬と湖のビジュアルのシネマグラフを背景にしています。
多くのシネマグラフは画像の大部分がスチルで、一部分が動くものですが、こちらは逆に大部分の水のみをリピートアニメーションにしています。広範囲のアニメーションですが、ゆったりとした控えめなものにして、サイト全体にほどよい動きを与えています。
株式会社 電通クリエーティブＸ
電通クリエーティブXのコーポレートサイトです。会社のメンバーがぐるぐると回っている面白いトップページをはじめ、随所にシネマグラフが使用されています。また、トップページは時間帯によって空やメンバーの雰囲気が変わる遊び心も加えられています。
トップページ以外も面白いシネマグラフが豊富なので、是非全ページをご覧になることをおすすめします。
TRILL
美容やファッション、恋愛などを扱った女性向けメディアサイトです。トップページの一部のみシネマグラフを取り入れています。画像がたくさん配置されたページの中で目立たせたい画像がある場合に、ポイントでシネマグラフを利用することでユーザーの注目を集めることができます。
Maori Sakai
イラストレーター酒井マオリさんのポートフォリオサイトです。イラストをシネマグラフにしているめずらしいサイトです。サイトの主役である酒井さんのイラストが動くことによって、作品自体の魅力がとても伝わってきます。
トップページに配置されている作品は全てシネマグラフとなっていており、作品数もたくさんあるので、ぜひサイトに訪れて楽しんでみてください。
キリン 澄みきり
キリンのビール、澄みきりのキャンペーンページです。シネマグラフが使われているのは、開発者の想いを紹介するコンテンツの箇所のみで、小さな泡が絶えずあがっていく様子をシネマグラフにしています。あわや湯気など、フェードインするように発生するようなものは、リピートアニメーションにしたときに自然なのでおすすめです。
海外サイト
Flixel
Cinemagraph Proという、シネマグラフを作成できるアプリケーションの開発元、Flixel Photos社のWebサイトです。ファーストビューの画像から、もちろんシネマグラフを使用しています。手前の物や人物が固定され、背景が動くシネマグラフはサイトに奥行きをだします。
他にもギャラリーページで、シネマグラフの作品をたくさんみることができます。
Gilgul Culinary Productions
Gilgul Culinary Productionsのwebサイトです。シネマグラフと料理はとても相性の良い組み合わせです。Webサイトを開くと、いきなり鍋の中で料理がぐつぐつと煮える様子が目に入ってきて、とても食欲をそそられます。
このWebサイトは随所にシネマグラフを使用しており、調理途中の様子なども見れます。もしこれが動画であれば再生ボタンを押さないとユーザの目に入らないようなシーンも、シネマグラフを使用することによってユーザに印象づけることができます。
The new Mercedes-Benz GLA （音量注意）
あのメルセデスベンツのWebサイトです。まずはファーストビューで、シネマグラフを使用しています。雲の流れ、男性のネクタイの動きや草の動きなどで風を感じられるシネマグラフとなっています。
Webサイト全体が映画のワンシーンのような雰囲気になっており、スクロールしていくと、パララックスであったり音声であったりと色々なテクニックでストーリーが進んでいきます。ストーリー性のあるサイトの一番初めにシネマグラフを配置することによって、静かな始まりを感じさせる効果を狙ったデザインではないでしょうか。
Studio Marani
Studio Maraniという広告代理店のWebサイトです。画面全体にダイナミックに配置された画像がシネマグラフなっており、スクロールするとそれぞれプロジェクト毎にプロジェクト名とシネマグラフが現れます。
トップページのシネマグラフは髪の毛だけが動くようになっていますが、画面全体のサイズとの効果もあいまってダイナミックな風を感じるデザインとなっています。
Pfister
PfisterというメーカーのWebサイトです。ファーストビューに大きく商品である蛇口の画像が配置され、スクロールするとシネマグラフの画像に変化します。
蛇口だけの画像から蛇口から水が流れ出るシネマグラフ画像へ変化させることで、あたかも自分が使用しているシーンを想像することができ、その商品に親しみを感じることができます。
BUNDY BUNDY
BUNDY BUNDYという美容院のWebサイトです。ファーストビューの画像は女性だけが動き、男性は動きません。静と動の対比で女性がとても魅力的に見えます。ヘアスタイルを変えて素敵になりたい、というユーザーの心をくすぐるシネマグラフを効果的にサイトに取り入れています。
