Facebook Twitter RSS
写真が動く!?「シネマグラフ」が商品の魅力を何倍にもアップしてくれる!

写真が動く!?「シネマグラフ」が商品の魅力を何倍にもアップしてくれる!

この記事のタイトルとURLをコピーする
写真が動く!?「シネマグラフ」が商品の魅力を何倍にもアップしてくれる!
https://webkikaku.co.jp/blog/hpseisaku/cinemagraph/
facebook twitter hatena Pocket

WEB企画のみんなで「シネマグラフ」を作ってみました!シネマグラフとは、一言で言うと「動く写真」。一見、普通の写真に見えますが、一部分だけが動いている写真をつくる技術のことです。

実際に作ってみたシネマグラフがこちら
↓↓↓
シネマグラフ
T君がA子さんを笑わそうとしている様子です。パッと見、普通の写真のように見えますが、A子さんの髪の毛がなびいているのに気づきましたか?まるでハリー・ポッターに出てくる動く写真のようですね!

シネマグラフを活用しよう!

シネマグラフを上手に作ると、こんなにいろんなことができます。

おいしさをアップさせたり
シネマグラフ

特別感をだしたり
シネマグラフ

キレイさをアップさせたり
シネマグラフ

かわいさをアップさせたり
シネマグラフ

※こちらのサイトより画像を使わせてもらいました。http://www.susi-paku.com/pakugoogle-7.html

動いていると、より商品の魅力が伝わる気がしますね!

シネマグラフのしくみ

作り方を簡単に説明すると、「動画を撮影する」→「動画をPhotoshopで写真風に加工」→「完成!」と、動画を写真風に加工して制作します。
詳しい作り方を知りたい方は、いろんなサイトで紹介されているのでそちらをご覧ください。
http://cinemagraph.jp/tutorial/

WEB企画で制作したシネマグラフでは、「写真の上に、髪の毛の部分だけを動画からパラパラ漫画風に加工したものをのせた」という状態です。
シネマグラフ解説

シネマグラフを制作するときの注意点

実際にシネマグラフを制作してみて、いろんな注意点に気づきました。

1.被写体は揺れないようにする

今回はA子さんの髪の毛だけが動くようにしたかったので、動画の撮影が思ったより大変でした。ビデオカメラは三脚を使用し、A子さんも極力動かないようにしてもらい、風を当てて髪の毛を揺らしました。

2.繰り返すことを考える

シネマグラフは途中で止まらず永遠に動き続けるようにしたいため、パラパラ漫画を繰り返して再生しています。
シネマグラフの解説
この繰り返しの瞬間が分からないように上手につなぐ必要があるため、繰り返しができる動画を選ばなくてはいけませんね。

3.色に制限がある

本来は下の写真のように鮮やかな色でしたが、シネマグラフにするためにはGIFという形式に変換する必要があるため、使える色の数に制限があります。鮮やかな色のまま使うと、画像が荒くなってしまうため、ちょっとセピアな色にして変換して、荒くならないようにしました。
シネマグラフ解説
画面いっぱいに広がる大きな画像や、色鮮やかな画像にはまだ不向きな技術のようです。

4.容量が重い

動く分、容量は重くなります。おもしろいからと言ってホームページに多用すると、重くなり、開くのに時間がかかってしまうので気をつけましょう。
ちなみに、容量を比較すると下記のようになりました。
■シネマグラフ 180kb
■普通の写真 103kb

注意点はいろいろありますが、気をつければ普通の写真のように使うことができます!

こんなシネマグラフもありました!

個人的には、普段動かないものが動いていると目を引くな!!と感じました。(動画を撮影するだけではできないですが…)

シネマグラフ

シネマグラフ

シネマグラフ

※こちらのサイトより画像を使わせてもらいました。http://design.style4.info/2013/07/beer-label-animated-gif/

おわりに

どうでしたか?小さなことですが、シネマグラフを使うことでユーザーに「あれっ」っと興味をひくことができますね。多用しすぎるとチカチカしたり、重くなってしまうおそれがありますが、ワンポイントで新しい技術を使ってホームページ制作をしてみるのもいいですね!

この記事のタイトルとURLをコピーする
写真が動く!?「シネマグラフ」が商品の魅力を何倍にもアップしてくれる!
https://webkikaku.co.jp/blog/hpseisaku/cinemagraph/
facebook twitter hatena Pocket

東京・名古屋を中心に、中小企業に特化したホームページ制作会社。マーケットやビジネスモデルに合わせ一社一社に合わせたウェブ制作・リニューアルのご提案しています。
1000サイト以上のウェブマーケティング支援で獲得したノウハウで、リニューアル後に過去最高の成果を生み出したお取引先は多数。勘ではなくロジックに基づいたホームページ制作と柔軟な対応力で多数のお客様にご評価頂いております。

どのようなお悩みでも構いません。ホームページを有効的に活用できていないと考えているご担当者の方、まずは一度弊社にご相談くださいませ。

ご提案依頼・ご相談はこちら
公式facebook、twitterから情報を受けとる
いいね!する フォローする
前のページ
次のページ
ページトップ