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

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

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

  • WEBデザイン

WEB上には様々なコンテンツが溢れていますが、特にここ数年は動画コンテンツが急増。あらゆるところで動画を見かけるようになりました。そんな中で、注目の高まりを見せているのがシネマグラフ(cinemagraph)です。

静止画像の一部だけが動くというシネマグラフには、動画とは違った独特の魅力があり、多くの作品がソーシャルメディア上でも話題になっています。今年のデジタルマーケティングでは、バナー広告などでも広く使われるようになる可能性も…。そこで今回は、シネマグラフの特徴や使い方などについて、とりあげてみたいと思います。

シネマグラフとは?

百聞は一見にしかず。シネマグラフがどんなものなのかは、実際に見て頂くのが早いかもしれません。

img1
http://gifmagazine.net/post_images/55

original
http://gifmagazine.net/post_images/54

シネマグラフとは、このように一部にだけ動きを取り入れた静止画像のこと。いかがでしょうか?静止したスペースの中で、特定の部分だけが動いているという不思議さは、強い印象として心に残るのではないでしょうか?何故か惹きつけられて、思わずじっと見入ってしまうのがシネマグラフの魅力です。

シネマグラフは基本的にはGIF形式の画像で、動く部分は動画をGIFアニメ化して作成していきます。
ドイツでは、Gallereplayというシネマグラフ専用のストクフォトサービスも登場。アーティストの手によるクオリティの高い作品がたくさん掲載されていますので、シネマグラフの魅力をもっと知りたい方は、ぜひご覧になってみてください。

Gallereplay「STOCK INEMAGRAPH」
https://www.gallereplay.com/cinemagraphs

企業のシネマグラフ活用例

最近ではこのシネマグラフを、自社商品やサービスの紹介に上手く活用している事例も増えています。そのいくつかを紹介してみましょう。

事例:蛇口メーカーでは流れる水をシネマグラフで表現

03_img

これは、海外の事例になりますが、アメリカの蛇口メーカーのPrice Pfister社のWEBサイトでは、蛇口から流れる水の部分をシネマグラフにて表現しています。

静止画像なのに一部が動くシネマグラフを使うことで、見るものを上手く惹きこんでいます(URLをクリックして、シネマグラフもごらんください)。

http://www.pfisterfaucets.com/innovations/slate#.VphdKE9ofIV

事例:ビールのキャンペーンで、泡の表現にシネマグラフの活用を

04_img

国内でもシネマグラフは続々と活用され始めています。例えば、キリンビールでは新商品のキャンペーンページで、シネマグラフを使っています。

下のURLから、ページをご覧ください。「開発者の思い」のコーナーで使われているビールの画像をよく見ると、グラスの中で細かな泡が動いているのがわかります。

http://www.kirin.co.jp/products/beer/sumikiri/

事例:シネマグラフのミュージックビデオも

ユニークなところでは、このような全編シネマグラフで作成したミュージックビデオも登場しています。


https://www.youtube.com/watch?v=i33n3ULE0AE(音声あり)

シネマグラフは2016年のトレンドとなるか?

シネマグラフ自体は数年前から存在していましたし、技術的にも新しいものではありません。しかし、2015年あたりから徐々に目にする機会が増え、2016年の今年はブームになっていくと見られています。その背景には大きく2つの要因があります。

背景1:ソーシャルメディアでの投稿環境が整ってきた

05_img

ひとつは、各ソーシャルメデイアでの掲載環境が整ったこと。インスタグラムやTumblr、Twitterなどがシネマグラフに対応した動画投稿のフォーマットの導入を始めており、海外ではインスタグラムでのシネマグラフ投稿数は、フォーマットの導入後10倍以上にもなっているという現状があります。

スターバックスやウォルマートなどの有名企業を始めとする多くの企業がソーシャルメディアでのシネマグラフ活用を始めており、その中にはトヨタなどの日本企業も見られます。

https://www.instagram.com/p/3W3yCyqAh8/

Facebookでも、このシネマグラフが重要度を高めていると言われ、特定の広告業者やマーケッター向けに配布しているガイドの中でシネマグラフの魅力を伝えている、などといった噂もあるようです。

背景2:動画マーケティングの課題解決策としても注目

もう一つの要因は、動画マーケティングの普及と関係しています。動画コンテンツはすでに、かなりの供給過多気味。提供側が自動再生させて少しでも多く見てもらいたいと思うのに対し、ユーザー側はそれに煩わしさを感じるという場面も少なくありません。動画がそこにあるだけで「またか」という印象を抱くユーザーもいるはず。嫌がられず、いかに興味を持ってもらえるようにするかは、動画マーケティングの次の課題になっています。

そこで注目されているのがシネマグラフ。動画にはない軽さでユーザーの邪魔をせず、むしろ興味を持ってもらえるような魅力的なコンテンツが作れるとして、期待が集まっているのです。

サイトのコンテンツやソーシャルメディア投稿の他、バナー広告などでも使われるようになりそうな予感。今年のWEB上では、様々なシネマグラフが話題を集めるようになるかもしれません。

今回のまとめ

  1. シネマグラフとは、静止画なのに一部だけが動く画像のこと
  2. インスタグラムをはじめとするソーシャルメディアでも掲載環境が整備。活用が増加。
  3. ユーザーからの拒否反応も出てきた動画マーケティングの打開策としても注目。

シネマグラフの作り方は意外と難しくはありません。また、スマートフォンに保存した動画からシネマグラフを製作できるなどといったアプリも登場しています。むしろ重要なのは、どこをどう動かすかというアイデア。新たなトレンドが来る前に、今からチェックしておいてはいかがでしょうか。

<関連記事>
企業での活用は拡がるか?Vine動画国内活用事例14
素材から編集、配信まで。動画づくりに役立つおすすめサービス7選

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

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  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

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