静止画像の一部だけが動くことにより、動画とは違ったインパクトを与えるシネマグラフ。「2016年WEBトレンドの有力候補！シネマグラフをまだ知らないあなたに」で、2016年のトレンドとしてご紹介しましたが、今回はこのシネマグラフを活用した企業WEBサイトの事例をご紹介したいと思います。

記載のURLにアクセスすることで、直接どのようなシネマグラフなのかを実際に見ることができますので、ぜひ参考にしてみて下さい（キャプチャは2016年1月現在のものです）。

国内でも実は結構使われている、シネマグラフ

国内の企業サイトでは、まだそれほど活用されている感じはないシネマグラフですが、探してみるとユニークな使い方をしている事例は結構あります。その幾つかをご紹介していきます。

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

電通クリエーティブＸの企業サイトです。「さすがクリエイティブ系の企業！」と思わせる、センスのいいシネマグラフがふんだんに活用されています。このサイトでは「回る」という動きをテーマにしているようで、トップページで社員達がクルクルと回るのをはじめ、各ページでも共通して人や物が回転するシネマグラフが使われています。遊び心を交えながら、企業コンセプトや社風などをシネマグラフでユニークに表現。サイトにアクセスしたら、上部のナビゲーションをクリックして各ページもぜひ、見てみてください。

http://www.dentsu-crx.co.jp/
活用ポイント：トップページ及び各ページ

有限会社ウィーブトシ：CA4LA

関東を中心に若者層から人気を集めている帽子の製造、販売を手掛けるCA4LAのWEBサイトです。トップページで、様々な商品やコンセプトを伝える画像を並べ、それらをギャラリー的に見せています。シネマグラフをポイント的に活用することで動きを付け、全体としてひとつの世界観を上手く表現。ファーストビューから見る人を引き込んでいく魅力があります。また、下にスクロールしていくと、下層ページへの導線を目立たせる役割としてもシネマグラフが効果的に活用されており、よく考えられたサイトになっています。

http://www.ca4la.com/
活用ポイント：トップページギャラリー

TRILL株式会社：TRILL

女性をメインターゲットとしたインターネット総合メディア「TRILL」。このサイトでは、トップページに表示されるサムネイル画像にシネマグラフを活用しています。このようなオウンドメディアでは、記事のサムネイル画像を表示させることが一般的になっていますが、コンテンツ数が増えてくるとそれぞれが埋もれてしまいがち。TRILLではサムネイル画像の1つをシネマグラフで表示させることにより、自然な形でユーザーの誘導を計っています。シネマグラフの「シンプルながらも気になる」という特性をうまく活用した事例です。

http://trilltrill.jp/
活用ポイント：トップページ、サムネイル画像

株式会社ヴォンズ・ピクチャーズ

WEB制作系の会社ヴォンズ・ピクチャーズは、自社の事業としてシネマグラフの制作を行っており、4Kサイズでのシネマグラフ制作にもチャレンジしています。それを象徴するように、自社サイトのトップページにもクオリティの高いシネマグラフを使用。サイズの大きな画像を使うことでファーストビューから訪問者に大きなインパクトを与えています。

http://www.vons.co.jp/
活用ポイント：トップページ

キリンビール「澄みきり」

以前の記事でもご紹介しましたキリンの「澄みきり」のキャンペーンページです。グラスに注がれたビールのイメージを、シネマグラフを用いてうまく表現しています。細かな泡の表現には、静止画では表現できない、思わず飲みたくなるようなシズル感があります。また縦長のキャンペーンページの中ほどにこのシネマグラフを配置することで、アイキャッチ効果も期待できます。読ませたいコンテンツにシネマグラフを活用することで、ピンポイントに注目を集めることが出来るという点でも参考になる事例です。

http://www.kirin.co.jp/products/beer/sumikiri/
活用ポイント：キャンペーンページ

株式会社エスビーエイ カリマージャパン事業部

イギリスのアウトドアブランド「カリマー」の日本代理店を務める、エスビーエイ カリマージャパン事業部のキャンペーンページです。カリマーのWEBサイトは、商品の見せ方や画像のクオリティの高さなどでしばしば注目を集めるサイトですが、今シーズンのキャンペーンページでも、そのクオリティの高さは健在。所々にアクセント的にシネマグラフを使うことで、単調になりがちなページ構成に変化をつけています。シネマグラフを目にすることで、訪問者がついついスクロールの手を止め魅入ってしまう、そんなシーンが容易に思い浮かぶ事例です。

http://www.karrimor.jp/2015fw/
活用ポイント：キャンペーンページ

MAORI　SAKAI

企業サイトとは少し意味合いが異なりますが、フリーのイラストレーター酒井マオリさんという方のプロフィールサイトです。ここでは、イラストを使ったシネマグラフが活用されています。シネマグラフと聞くと写真をイメージする人がほとんどだと思いますが、このようにイラストでの活用も可能。ひとつの手法として参考にしてみてください。

http://maorisakai.com/
シネマグラフ活用ポイント：イラスト

海外企業では洗練事例も多数

ここからは海外の企業サイトでのシネマグラフ活用事例を見ていきましょう。こなれた使い方、クオリティの高い仕上がりなどをアイデアのヒントに役立ててください。

gigul

海外の飲食コンサルティング企業のguigulでは、料理や調理シーンなどにシネマグラフを活用しています。料理のシズル感やプロフェッショナルナイメージなど、静止画像だけでは伝わりにくい部分にシネマグラフを活用することで、興味深いコンテンツの作成を上手く行っています。縦にスクロールしていくページの中で、パララックスの効果なども併用しながらシネマグラフを複数使うことで、飽きさせないサイト構成にしている点は参考になります。

http://gilgul.co.il/eng.html
シネマグラフ活用ポイント：トップページ内数ヶ所

Calvin Klein

Tumblrを活用したカルバンクラインのオウンドメディアです。トップページを多くのギャラリー画像で構成していますが、その中のところどころでシネマグラフが活用されています。ともすればスクロールして素通りしてしまいがちな写真でも、シネマグラフを加えるだけで、訪問者の注目をそこに留めることが出来るのがわかります。多くの画像やコンテンツがあるWEBサイトなどで、参考にしたい活用事例だと言えます。

http://calvinklein.tumblr.com/
シネマグラフ活用ポイント：ギャラリー画像

Flixel

シネマグラフ作成アプリを提供する「Flixel」のWEBサイトです。シネマグラフのアプリを提供している企業だけあって、メインビジュアルに大きなサイズのシネマグラフを使用、ファーストビューでしっかりと訪問者の心を掴む仕掛けとなっています。シネマグラフは画像の一部だけを動かして注目を集める手法ですが、このように、いわば背景部分を画像の一部と考える発想はユニーク。シネマグラフでは、こうしたダイナミックな使い方もできるという参考事例です。

https://flixel.com/
シネマグラフ活用ポイント：トップページメインビジュアル

mercedes benz

メルセデスベンツのキャンペーンサイトです。トップページ上部にある画像の空（雲）や人物のネクタイに動きがあり、一見すると動画とも見間違えそうなクオリティの高いシネマグラフが使われています。サイトを開くと同時に音楽も流れるようになっており、まるで映画などのプロモーションサイトのような独自の世界観が表現されています。静止画の画像では表現しにくい、かといって動画では重すぎる…、そんな中間のところをシネマグラフを用いることで上手く表現しています。

http://gla-class.mercedes-benz.com/com/en/#!/roadtrip
シネマグラフ活用ポイント：トップページ（音声自動再生あり）

今回のまとめ

いかがでしたか？実際にご覧頂ければ一目瞭然だったと思いますが、シネマグラフを用いたWEBサイトは見る人の心を掴みやすく、ついつい目を留めてしまう魅力があります。企業サイトでも使いどころは多いことがわかっていただけたのではないでしょうか？ぜひ、これらの活用事例からヒントを掴んで、注目を集めるWEBサイト制作の参考にしていただければと思います。

＜関連記事＞
2016年WEBトレンドの有力候補！シネマグラフをまだ知らないあなたに

＜PR＞
WEBに関する情報をまとめたキュレーションサイトSeleQt（セレキュト）