attention admin about comments trackbacks you may also like

ブログに動く写真を貼ったら楽しくなります

2020年02月20日
GIFアニメーションの作り方
2
GIFアニメーション シネマグラフ 動く写真 ロールオーバー

ブロガーさんの中には「ペット大好き♪」な方が多いですよね~ 弊ブログからリンク張らせて戴いている中にもおられます(笑)

さてさて、そんなペットブロガーさん達が「猫好き」「犬好き」さを、思う存分にブログにその写真を貼って楽しんでおられるんですが、ちょっと工夫してその画像表現をしたら、他のブロガーさんより一歩「デキル人」になると思うんですよね~(笑)


ブログの写真が動き出したら楽しい

例えば、下記のような画像を貼ったらどうでしょう(笑) 「え? なんか意味が分からない」って?(笑)
先ずは、画像にマウスを乗せてみてくださいな、スマホなら画面の写真をタッチしてみてくださいね。

眠いのに、カメラが気になってなかなか寝られない猫

[ 眠いのに、カメラが気になってなかなか寝られない猫 ]
マウスを乗せると我が家の犬だけ動きます

[ 我が家のゴン太君はどれでしょう ]

は~い、意味が分かりましたね~(笑) ゴン太くん画像の方はちょっと異空間(笑)ぽくて不思議に見えますが、要は写真がこんなふうに動いたら楽しいと思いません?

シネマグラフと言うGIFアニメーション

まぁ、簡単に言ったら「GIFアニメーション」が動いているんですが、それでもこれらは「シネマグラフ」と言う分野にあって、ずっと以前に、既に確立されたWebでの画像表現の1つなんです。

シネマグラフは、画像の中の一部分だけが動くGIFアニメーションなんですが、それをそのままブログにペタペタと複数枚貼り付けたら、凄く目障りになってしまうんですよね(笑)

シネマグラフ画像が常時動いている様子

ですから一工夫して、シネマグラフの上に静止画(つまりは通常の写真)を1枚被せて、その静止画にロールオーバー(画像にマウスを乗せる)したらシネマグラフが動き出すと言う方法を用います。

マウスを乗せるとシネマグラフが動き出す様子

[ ロールオーバーでシネマグラフが動く様子 ]

これでしたら、閲覧者さんに「ごちゃごちゃ動いていて目障り」なんて思われないですよね。

シネマグラフを作成するアプリを入手する

シネマグラフを作成するには、元になる動画ファイルが必要で、その一部分のシーンを切り出してから、シネマグラフに加工します。

ただし、カメラやスマホの手持ち撮影だと「手ぶれ」が起きることがありますから、シネマグラフ作成用には向かないので、三脚等で固定撮影すると良いでしょう。

Windowsパソコンでのシネマグラフ作成は Cliplets が簡単

シネマグラフ作成ツールは多種類ありますが、筆者はパソコン用の「Cliplets」を利用しておりますが、下記ブログカードの「Microsoft Research Clipletsのチュートリアルページ」からダウンロード出来ます。 これは古~いアプリですが、Windows 10 でもキチンと動きます。



アクセスして開いたページの、、、

シネマグラフ作成アプリ Cliplets のダウンロード

Download 」をクリックするとダウンロード出来ます、この時に、あなたのパソコンが 32bit か 64bit かと自動的に判定されて同ファイルがダウンロードされますから、それをパソコンにインストールします。

iPhoneでのシネマグラフ作成は Cinemagraph Pro が簡単

筆者iPhone Xには「Cinemagraph Pro」と言うiPhone用アプリをインストールしてあります。 このアプリ、以前は有料アプリだったんですが、今は無料で入手出来てユーザーレビューでも評判良く、かなり利用されている様子です。

App StoreCinemagraph Pro で検索すると、下記のように表示されますので、直ぐにインストール出来ます。

Cinemagraph Pro を検索した画面
Cinemagraph Proのチュートリアル画面

これらのアプリの使い方はググると沢山ある

上記のアプリ ClipletsCinemagraph Pro の使い方は、ネット上に記事がふんだんに見つかりますから、ググって解りやすいものを利用すると良いでしよう。

まとめ

さてさて、この記事に書きました 「シネマグラフ」の語句は知らなくても 動いている写真 は、ネット上のあちらこちらで目にしてきていて「これってどうやって作られているんだろうか?」と思ってはみても、なかなか実際にはその作成方法にまで辿り着けないことが多いと思います。

しかし シネマグラフ と言う語句をググれば、そこからドドドっとそれに関わる情報を入手出来て、一気に「な~んだぁ、こうやって作るのか♪」と分かって、楽しみが近寄って来ますよね(笑)

あなたも、これらの「動く写真」を作ってブログに貼って「デキル人」になってみませんか?(笑)


キーボードを演奏するハリネズミ

オイラも
シネマグラフで
動かしてぇぇ


自身のブログを各種ツールで分析しましょう

ブログがスマホで正しく表示されるかテストする!
モバイル フレンドリー テスト

ブログのスマホ表示速度分析は PSI が強力です!
Google PageSpeed Insights

ブログのPC表示速度分析は GTmetrix が強力です!
GTmetrix

検索からの方はトップページへもどうぞ


関連する記事
ぼっちん
Author: ぼっちん
記事に関わらないコメントでもOKですからね~ ^^

コメント(2)

There are no comments yet.

ススム  

2020/02/22 (Sat) 09:53

これ、いいですね

おはようございます、ぼっちんさん。
このシネマグラフは、GIFアニメと比較すると軽量化出来そうですね。

その反面、動きのない領域を静止させる必要があるんですね。

時間のある時に、ご紹介のサイトをチェックして利用してみたいです。

ぼっちん  

2020/02/22 (Sat) 10:15
ぼっちん

To ススムさん

ススムさん、こんにちは ^^

> このシネマグラフは、GIFアニメと比較すると軽量化出来そうですね。

実はそうなんです(笑)
「静止している部分」のエリアを広くすれば、自ずから、完成したファイル容量は小さく出来ます(笑)
画面全面がGIFアニメよりも、確かに小さく出来るんですよね ^^

> その反面、動きのない領域を静止させる必要があるんですね。

あっ それは視点が逆なんです、基本は「動く部分だけを範囲指定する」と言う考え方がシネマグラフ作成のポイントなんです(笑)

まぁ、いろいろな解説を読むよりも、実際にやってみた方が「意味とコツ」が分かるようになりますよ(笑)

それと、弊ブログカテゴリ「GIFアニメーションの作り方」で書いてある記事
https://oops0011.blog.fc2.com/blog-entry-44.html
の「Giam」と言うフリーソフトを利用すると、より完成時のファイル容量を圧倒的に減らす加工が出来ます ^^

完成サンプルとして掲載してあります「猫・犬」のシネマグラフは、既に「Giam」を使ってその加工もしてあります。

> 時間のある時に、ご紹介のサイトをチェックして利用してみたいです。

は~い、いじり倒してみてください(笑)