シネマグラフを簡単に作成フリーソフト「Cliplets」一部分だけを動すgifアニメ

公開日:  最終更新日:2016/05/02

この記事のタイトルとURLをコピーする

シネマグラフを簡単に作成フリーソフト「Cliplets」一部分だけを動すgifアニメ
シネマグラフってご存知ですか?
(写真の一部だけが動くシネマグラフというタイプのアニメーションGif画像)

ちょっと前から流行っているようで面白そうだなと気にはなっていたのですが調べる機会があったので紹介したいと思います。うまく活用すればサイトの印象をガラッと変えることができます。

スポンサードリンク

シネマグラフって知ってますか?

写真の一部だけが動くシネマグラフというタイプのアニメーションGif画像が少し前から流行っているようです。一部だけ動くことで逆に静けさや時間の流れを意識させる効果があります。作成するのは難しそうなイメージがありますが、調べてみると思ったより簡単に作成することができるようです。最近ではシネマグラフ作成アプリなども多数公開されています。この記事ではパソコンでの作成方法について紹介しています。

こんな感じのです。
コートだけが動くサンプル
スカートだけ動くサンプル
参照元:CGFrog.com

【その他参考サイト その1】
【保存版】写真の一部だけ動くシネマグラフから世界でも話題のものをまとめてみた | エンタメウス

【その他参考サイト その2】
【思わず保存したくなる】ちょっとだけ動く画像「シネマグラフ」集 – NAVER まとめ

いかがでしょうか。
動いている部分に注目が集まるのでうまく活用すれば商品の宣伝などに効果的に使えそうな気がします。

動画を元にシネマグラフが簡単に作成出来る「Cliplets」

シネマグラフを作成する方法は色々あるようなのですが、ここではPCで作成する方法を紹介します。最近ではスマホのアプリでシネマグラフを作成出来るものも多数リリースされています。

【参考 外部サイトその1】
Photoshopを使ってシネマグラフを作る方法 | 株式会社LIG

【参考 外部サイトその2】
» 無料フォトレタッチソフト”GIMP”で10分、シネマグラフの簡単な作り方【GIFアニメ作成方法】

上記サイトを参照頂ければ作成する方法を確認することが出来ますがPhotoshopやGIMPなどのソフトが必要になります。普段からソフトに使い慣れているデザイナーさんであれば比較的ハードルは低そうですね。GIMPであれば無料で入手可能ですので興味ある方はぜひ、試してみてください。

もっと簡単な方法はないか探してみたところ簡単そうなのを見つけました。
Clipletsのサイトイメージ
Microsoft Research Cliplets

windows7以降に対応しているパソコンにインストールするタイプのフリーソフトです。
上記ページの黄色ボタン「Download for 32-bit windows」をクリックしてダウンロードページに進みます。

ダウンロードボタン
ダウンロードページの「Download」からインストーラーがダウンロード出来ます。

ダウンロードしたファイルをダブルクリックしてインストールすると下図のアイコンが追加されます。
Clipletsのアイコン

Clipletsの使い方

Clipletsの画面

一部分だけが流れているシネマグラフ
シネマグラフの作成サンプル

このシネマグラフを作成してみます。

まずはソフトを起動した画面はこんな感じです。
起動したCliplets

最初に元になる動画を準備しておく必要があります。
動画の準備出来たら画面上にドラッグ等で動画を読み込みます。

Cliplets内に取り込める動画は10秒までとなっています。
そのため、10秒以上の動画指定した場合は、最初にどの部分を10秒間読み込むのか指定する必要があります。
読み込む10秒間を指定

動画の読み込みが完了して画面上に表示されます。

次に画面上にあるバーをドラッグで移動すると動画の場面が変わっていくので背景にしたい場面(停止して表示しておきたい場面)を決めます。
背景画像を決める

停止場面が決まったら、画面右側で「Add New Layer」をクリックします。
レイヤーを追加する方法

すると、新しいレイヤーが追加されます。
レイヤーの追加

レイヤーが追加されると同時にアイコンがペン状になるので動かしたいエリアを囲みます。
動かしたい箇所を囲む

次に画面下にあるバーを操作します。
左右にドラッグするとバーの幅を調整することが出来ます。
動かす回数、速さを指定その1
動かす回数、速さを指定その2
バーの幅を広げるとゆっくり再生されます。

gifへの書き出し
完成したファイルをgifに書き出すには画面右上にある「Export cliplet」をクリックするとgifファイルとして書き出しが可能です。

シンプルなシネマグラフを作成する流れを説明してみました。
同様の手順でレイヤーを複数追加していけばもっと複雑なものも作成することが可能です。ぜひ、活用してみてください。

ただし、アニメーションgifなので、単純な画像ファイルに比べてファイル容量が大きくになってしまいます。あまり複雑な動きを付けたり、同一ページに複数配置するとページ自体の読み込みが遅くなってしまうので注意が必要です。

スポンサードリンク

FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

ヒートマップ分析も出来る無料のアクセス解析

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

ネットショップ運営「おすすめ書籍」


紙媒体より電子書籍(Kindle版)の方がお得です
>>>ネットショップ運営 おすすめ書籍[Kindle版]

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑