0%

Designデザインワークショップ

Posted:2018.05.26

【デザインワークショップ】vol.19 写真?動画?不思議なアニメーションの「シネマグラフ」を作ってみる

ウェブデザインのトレンドとして少し前から、ちらほら耳にするようになってきました「シネマグラフ」ですが、一体どういうものなのでしょうか?今回のワークショップではPhotoshopを使って不思議なアニメーションであるシネマグラフを作ってみたいと思います。

 

動画でもない写真でもないシネマグラフとは

シネマグラフとは、写真の一部だけ動くようになっていて、それ以外は静止画という、少し変わったアニメーションのことを指します。一見すると、時が止まっている中で、一部だけ時間が進んでいるような印象を与えるので、非現実的で不思議な雰囲気があります。

 

静止画の要素と動画の要素を併せ持つシネマグラフはそれだけでかなりのインパクトを持っています。不思議に見えるトリックアートのような感じでユーザーの目を引くことができます。

 

シネマグラフはPhotoshopを使うことで比較的簡単に作ることができます。具体的な仕組みでいうと、ベースとなる動画の表面に、動きを見せる部分以外にマスクをかけた静止画を重ねることで、マスクがかかっていない部分だけ、背面の動画が見えるという形になっています。では、実際に作ってみたいと思います。今回はこちらの動画を使わせていただきました。

 

 

Photoshopで作るシネマグラフ

1. まずはベースとなる動画をPhotoshopで読み込みます。デフォルトでは「ビデオグループ」という名前でグループ化されています。また画面下には動画のタイムラインも表示されています。

【デザインワークショップ】vol.19 写真?動画?不思議なアニメーションの「シネマグラフ」を作ってみる

 

2. ベースの動画レイヤーをコピーします。

【デザインワークショップ】vol.19 写真?動画?不思議なアニメーションの「シネマグラフ」を作ってみる

 

3. 2つの動画レイヤーを「ビデオグループ」の外に出してグループを解除した状態にします。こうすると、タイムライン上には2つの動画にそれぞれ対応するタイムラインが表示されています。

【デザインワークショップ】vol.19 写真?動画?不思議なアニメーションの「シネマグラフ」を作ってみる

 

4. ここからコピーした表面レイヤーの静止画を準備していきます。まずは、静止画にしたいフレームを決めて、タイムライン上のマーカーを合わせます。

【デザインワークショップ】vol.19 写真?動画?不思議なアニメーションの「シネマグラフ」を作ってみる

 

5. 表面の動画レイヤーを「ラスタライズ」して、静止画に変換します。こうするとタイムラインの表示が変わったのが確認できます。

【デザインワークショップ】vol.19 写真?動画?不思議なアニメーションの「シネマグラフ」を作ってみる

 

6. ラスタライズした静止画用のレイヤーを選択して、「クイックマスクモード」に切り替え「ブラシツール」で、動きを見せたい範囲を塗りつぶしていきます。

【デザインワークショップ】vol.19 写真?動画?不思議なアニメーションの「シネマグラフ」を作ってみる

 

7. 塗りつぶしたところから選択範囲を作成します。

【デザインワークショップ】vol.19 写真?動画?不思議なアニメーションの「シネマグラフ」を作ってみる

 

8. 選択範囲からマスクを作成します。こうすることで先ほどクイックマスクモードで塗りつぶしたところ以外にマスクがかかっている状態で、塗りつぶしたところは背面の動画が見えていることになります。

【デザインワークショップ】vol.19 写真?動画?不思議なアニメーションの「シネマグラフ」を作ってみる

 

9. 次にタイムラインでアニメーションで見せたい範囲をカーソルで調整して決めていきます。この範囲のアニメーションがシネマグラフで表示されるようになります。

【デザインワークショップ】vol.19 写真?動画?不思議なアニメーションの「シネマグラフ」を作ってみる

 

10. 最後に「Web用に書き出し」で「GIFアニメーション」形式で書き出します。書き出し方式をGIFに設定すれば基本的にはデフォルトの設定で問題ないですが、アニメーションのループオプションを「無限」にしておくことでアニメーションをループさせることができます。

【デザインワークショップ】vol.19 写真?動画?不思議なアニメーションの「シネマグラフ」を作ってみる

 

これで不思議なアニメーションのシネマグラフが完成しました。Photoshopを使うと意外に簡単にできますね。

【デザインワークショップ】vol.19 写真?動画?不思議なアニメーションの「シネマグラフ」を作ってみる

 

良いシネマグラフを作るポイントを考えてみる

このシネマグラフですが、作成自体はそんなに複雑ではありませんが、素材選びと見せ方がとても重要になってきます。素材の動画がシネマグラフにあっていないと、かなり不自然になってしまったり、普通の動画と変わらなくなってしまうので注意が必要です。そこで、シネマグラフにあった動画選びのポイントは主にこのような点があります。

 

1:アニメーションは全体の一部で限られた部分に絞る

あまりアニメーションの範囲が広い場合は、普通の動画とあまり変わらない印象が出てしまいます。

 

2:人物全体もしくは一部を静止画の中に入れてみる

人物を静止画の中に入れることで、時間が止まったように見え、より不思議な印象を与えることができます。全体でなくとも一部だけでも効果的ですね。

 

3:ループさせるところのつなぎ目をスムーズにする

シネマグラフはGIFアニメーションなので基本的にループさせて使うことが多いのですが、ループのつながりが不自然だと、シネマグラフの不思議な世界観が崩れてしまいます。ループのつなぎ目を綺麗にするためには、ループ部分の時間をあまり長くしない方がいいかもしれません。

 

4:アニメーションは規則的なものが使いやすい

シネマグラフで見せるアニメーションは複雑で不規則だと、作るのが難しくなるだけでなく、仕上がりも不自然になりやすいです。できるだけシンプルで規則的な動きのものを採用することがポイントです。

 

よく見かけるのは、今回でも使っている液体を注ぐシーンや、時計の針が動くシーン、またろうそくなど炎が燃えるシーンが比較的作りやすいのではないでしょうか。

 


 

いかがでしょうか、一見すると不思議なシネマグラフも意外とシンプルな仕組みで出来ていますので気軽に作ってみてはいかがでしょうか。ウェブサイトにオリジナリティや目を引くような要素が欲しい時には使えるデザインだと思います。

 

(参考にさせて頂いたサイト)
動く写真 一 シネマグラフの作り方

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】