シネマグラフとは、一部分だけ動く写真のことです。シネマグラフは近年Webデザインに取り入れるサイトが増えてきており、注目されているテクニックの1つです。

シネマグラフをWebデザインに使いたい場合、自分で作成するか素材サイトで購入する必要があります。そこで今回は、シネマグラフを作成できるツールやスマホアプリと、シネマグラフを手に入れられる素材サイトをまとめました。

シネマグラフの特徴や参考になるサイトは下記でご紹介しています。

シネマグラフを作成できるツール、アプリ

シネマグラフは基本的に固定されたカメラで撮影されている動画を使って作成されます。動画を静止画に変えるタイミングで、一部分だけ動きを残しておき、それをGIF形式で保存することでループ再生され、シネマグラフのような見え方となります。

また、シネマグラフを作成するためのスマホアプリも多数公開されていて、スマホ一台あれば簡単に作ることもできてしまいます。クオリティはやはりツールを使った方がいいものはできますが、手間をかけたくなかったりちょっと試してみたいような場合にはこちらを使ってみるとよさそうですね。

Photoshop

Photoshopがすでにインストールされている方は、Photoshopを使ってシネマグラフを作成するのがおすすめです。Web上にはPhotoshopでシネマグラフを作成する方法が色々と紹介されていますし、作り方を覚えてしまえば時間もあまりかかりません。

また、実際の作業の手順は下記のページで詳しく紹介されています。

Cinemagraph Pro

Cinemagraph ProはMac OS用のシネマグラフ作成用の専用ツールです。無料プランもありますが、素材を書き出すには有料プランの登録が必要で、199.99ドル/年と少しお高めですが専用ツールというだけあってとても使いやすいです。

また、有料プランに加入するとシネマグラフを作成できるiOSアプリも利用することができるので、色々とシネマグラフを使いたい場合はこのツールを購入してみるのもアリではないでしょうか。

motiongraph

motiongraphはソニーが提供しているAndroid用のシネマグラフ作成アプリです。撮影した動画を元に、動かしたい部分を指でなぞることによってシネマグラフを作成することができます。

有料アプリですが100円と親切な料金設定となっているので、手軽に試したい場合はおすすめです。

DailyCinema

DailyCinemaは日本の開発者の方が作ったiOS用のシネマグラフ作成アプリで、無料で利用することができます。

SNSへ投稿することを意識して作られているためエフェクトがかけられたりするなど、インスタ映えするシネマグラフを作成することができます。

MaskArt

MaskArtは海外製のiOSでシネマグラフが作成できるアプリです。海外ではシネマグラフ作成アプリとしてはメジャーなアプリで、無料でダウンロードすることができます。

とても簡単な操作でシネマグラフを作成することができるので、楽しみながらシネマグラフを作ることができます。

PICOO Camera

PICOO Cameraは海外のAndroid用シネマグラフ作成アプリです。こちらも無料で利用することができ、エフェクトやフィルタをかけることができるので、SNS映えするシネマグラフを作成することができます。

Motion Stills

Motion StillsはGoogleが提供するiOS/Android用のGIFアニメ作成アプリです。シネマグラフ用のアプリではありませんが、編集機能が豊富で、多様なGIFアニメを作成することができます。

iOSでは「Live Photos」機能を使って写真を撮影する感覚でGIFアニメを作ることができるようになっており、Android版でもLive Photosと同じような機能が使えるほか、iOS版には用意されていない機能が使えるようになっています。

シネマグラフの素材が手に入るサイト

シネマグラフが充実しているフリー素材サイトは2017年9月現在では見つかりませんでした。ただ、有料素材でよければ美しいシネマグラフをたくさん提供している素材サイトがいくつかあります。

その中でもおすすすめのシネマグラフ素材サイトをご紹介しておきます。

gallereplay


こちらはドイツのシネマグラフのストックフォトサービスです。有料サービスなので購入しなければなりませんが、シネマグラフ専用サービスなのでとても優れたシネマグラフ素材がたくさん用意されています。

また、シネマグラフの受託作成サービスも行っているため、企業などでシネマグラフを作成する場合には、利用してみてもいいのではないでしょうか。

アフロ


アフロは有名なストックフォトサービスですが、シネマグラフも取り扱っています。こちらも有料になってしまいますが、シネマグラフ素材が数多く用意されているので、どうしても素材が必要な場合は利用してみるといいですね。

embrulha.com


こちらのページはは素材サイトではありませんが、質の高いシネマグラフが数多くまとめられています。シネマグラフを作成するときに参考にしてみてください。

まとめ

シネマグラフは既存の画像を入れ替えるだけなので簡単にWebデザインに取り入れることができます。ご自身のWebサイトにさりげなく使って、アクセスした方を楽しませてみてはいかがですか?