ワンクリックに命がけのWEB・ホームページ制作会社「エムハンド」

インバウンドサイトを作るときに知っておきたいこと

2016年は、「シネマグラフ」に挑戦!参考になる企業サイト活用例11選

  • WEBデザイン

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

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

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

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

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

dentu

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

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

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

ca4la

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

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

TRILL株式会社:TRILL

truill

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

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

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

vons

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

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

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

kirin

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

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

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

kari

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

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

MAORI SAKAI

sakai

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

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

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

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

gigul

guigul

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

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

Calvin Klein

ck

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

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

Flixel

fixel

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

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

mercedes benz

mercedes

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

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

今回のまとめ

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

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

<PR>
WEBに関する情報をまとめたキュレーションサイトSeleQt(セレキュト)

 

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  3. 3

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  4. 4

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

  7. 7

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  8. 8

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  7. 7

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  8. 8

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  9. 9

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  10. 10

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」