情報処理学会 インタラクション 2017
IPSJ Interaction 20173-408-78
2017/3/2

シネマグラフを簡易的に作成する新手法の提案
磯野 優夏1

安藤 大地1

笠原 信一1

概要：技術的な進歩により Web デザインに現在多くの動画やアニメーションが利用されているが，画像と動画の中間的な存在である「シネマグラフ」というものが存在する．シネマグラフは画像の一部が動画になっている作品のことを指し，すでに Web サイトのデザインや広告，画像投稿 SNS 等で利用されている．シネマグラフの作成には，条件を満たした動画素材と編集技術が必要不可欠である．そこで，シネマグラフを 1 枚の画像を加工することによってより簡易的に制作できるツールの開発を行った．このツールによって，技術や時間が無くとも誰でもシネマグラフを作成できることを目指す．

The Proposition of New Method to Generate Cinemagraphin Simple Way
Isono Yuuka1

Ando Daichi1

Kasahafa Shinichi1

Abstract: Recently, many animations are used for the web design. “Cinemagraphs” which is intermediate
existence of a picture and an animation exists. Cinemagraphs are works which is the part of the picture is ananimation. Cinemagraphs are used by web design, advertisement and SNS already. An animation and editing
technique are necessary for generaing cinemagraphs. But sometimes it is diﬃcult to prepare animation. So I
have developed software. When the software is used, even if there are no technology and time, it’s possible
to generate a cinemagraph with an image.

1. はじめに
1.1 Web デザインの現状などがある．このような背景により，スムーズな動画再生が可能な環境が整い，動画配信がより気軽になされるようになった．また、動画入り Web サイトを閲覧できるスマー

現在の Web デザインにおいて，動画やアニメーショントフォンの普及は，我々が生活する中でのインターネットが使用されている Web サイトがほとんどである．動画やの占める割合を大きく変えた．スマートフォン購入によるアニメーションを利用しデザインする目的としては，情報インターネット全般の利用頻度の変化についての調査でに溢れた Web サイトの中で，視線を誘導し目立たせる意

は，日本を含めどの国でも「増えた」という回答が 5 割を味合いや，動的なデザインによりブランドイメージを表現超えており，「減った」という回答が 1 割に満たないことしたりユーザーインターフェースやユーザーエクスペリエが顕著に表れており，スマートフォンに移行したユーザーンスを向上させるということがある．

がインターネットを一層利用されるようになったことが示

それを助ける技術の進歩として，HTML ５からは videoされている [1]．そして，インターネットの利用頻度の増加

タグでブラウザに関係なく，またプラグインに依存するこに伴い動画コンテンツや動画広告が増えている．街中の至となく安定した動画を Web サイトに取り込むことができる所での大小様々なサイネージ，ニコニコ動画や YouTubeるようになり，また表示する動画に CSS や JavaScript をでの動画視聴前の短いコマーシャルなど，動画広告は極め組み合わせることでさらにエフェクトをかけたり変形させて一般的になっている．企業独自のコンテンツや商品紹介たりするなど，様々な表現を実装できるようになったことを配信したり，一般ユーザーが SNS で動画を投稿したりと，動画を制作する機会がクリエイターに関わらず様々な

1

首都大学東京 システムデザイン学部
Faculty of System Design Tokyo Metropolitan Uniersity© 2017 Information Processing Society of Japan

人にとって増えている．誰でもスマートデバイスで情報取939

情報処理学会 インタラクション 2017
IPSJ Interaction 20173-408-78
2017/3/2得している今日において，動画の需要はさらに高まっていまれてしまうということである．つなぎ目がわからないよくと思われる．

うにループ再生されているような上質なシネマグラフは，Web サイトのデザインに動きを取り入れることで上質なユーザーにそのアニメーションの終わりを知らせることがビジュアル表現ができるようになることは，リッチな UX無く，より長い時間注目させることが可能である．シネマの実現だけでなく，ユーザーのページ離脱率減少にも繋が

グラフは動画と画像の中間的な存在であり，動かないはずる．インターネットによる情報発信が当たり前の現在におの絵や写真が動いたり，映像の一部以外の時間が止まっていて，効果的に動画やアニメーションを Web サイトに取見えたりするような非現実的な表現を実現できる手法であり入れるためには，訪れた人の目を引き付ける印象的な表るという点でも人々の目を引き付けると考えられる．

現にする必要がある．

デザインで人々の注意を引くには作者の「狙い」が必要

一方で，動画やアニメーションを Web サイトのデザイになる．ある特定の被写体に注目させたいという作者の狙ンに取り入れるときの注意点として，多用すると画面の見いを作品に反映させるために，静止画の場合と同様な，色た目が煩雑になり注目させたい部分が不明瞭になってしま彩や構図を考慮するという方法もある．一方で動画だからうことがある．ひとつのページの中にいくつものバナー広こそできる「動き」を利用した方法としてシネマグラフが告や多様なアニメーションをちりばめた Web サイトを見位置付けられる．

た経験がある人は少なくないだろう．特にデザインの手が及ばない広告にも動画やアニメーションが多用されているという現状もあり，むやみにデザインに動きを持たせすぎることにも問題がある．

1.3 シネマグラフを用いた Web デザインの例
既に公開されているシネマグラフを用いた Web サイト
について，シネマグラフがデザインの中でどのような役割をしているか調査したところ，次のようなことが挙げら

1.2 シネマグラフれる．

ただ動画にすればユーザーの注目を容易に集めることがまずは，シネマグラフという手法の非現実的であり独特できるとは必ずしも言えず，またインタラクティブな操作な印象を持たせる点を活かし，商品やブランドのイメージを伴う Web サイトの性質上，派手になりすぎることもデを表現している場合である．図 1 の Glendevon Motors のザインとしては問題がある．そこで動画の動きの要素を活Web サイトのシネマグラフでは，画面の中で時間が進んでかしかつ独特な表現ができる方法として，「シネマグラフ」

いる部分と止まっている部分の両方が存在し，Web サイトという形態が生み出された．に訪れた人の目をひくと同時に，高級なブランドイメージ

シネマグラフとは，画像の一部にだけ動きを取り入れを表現することを重要視している．

た GIF アニメーションのことで，アメリカの写真家 Kevin

次に，特定のコンテンツに注目させるため，コンテンツBurg 氏と Jamie Beck 氏によって編み出されたものであを引き立てるグラフィックとして背景画像などにシネマグる．もともとは GIF アニメーションによる表現技法を指ラフを利用する場合である．図 2 のキリン澄み切りでは，していたが，「シネマグラフ」という言葉が普及したことにWeb サイト全体の中でひとつのコンテンツにのみシネマグ伴い，最近では GIF アニメーションに限らず，静止画と動ラフを使用し，静かなシネマグラフのアニメーションなが画を組み合わせた作品全般が「シネマグラフ」と呼ばれるらも見過ごさせないような作りになっている．

ようになっている．主に画像の一部が動画になっている作

そして，特定の被写体，商品などのグラフィックそのもの品のことを指し，定点カメラからの動画を編集することにをシネマグラフ化し目立たせる場合である．図 3 の Pfister*1

よって制作される [2]．「 Flixel Cinemagraph pro 」など

では，水が流れるというシンプルなシネマグラフを使用しのシネマグラフ作成のための専用アプリケーションも開発ていて，Web サイトに訪れた全員が商品のシネマグラフにされており，他にも Adobe Photoshop*2 や GIMP*3 といっ注目するような大胆なデザインである．

たソフトウェアでも作成することが可能である．すでに動Glendevon Motors 社の Web サイト (図 1)

画広告や企業 Web サイト，個人サイト等でも使用されてフロントガラスに反射する景色のみが移り変わるアニいる．

メーションを取り入れたシネマグラフをトップページ

シネマグラフの魅力とは，一見すると静止画に思えるにもかかわらず一部のみが動き，そこに自然と視線を引きこに大きく利用し，自社製品である自動車の雰囲気を伝えている [3]．
キリンビール株式会社のホームページ (図 2)

*1

*2

*3

Flixel Photos Inc. から配信されているモバイルデバイスでシネマグラフを作成できるツール．
アドビシステムが販売しているビットマップ画像編集ソフトウェア．
GNU GPL の下で配布されているビットマップ画像編集・加工ソフトウェア．

© 2017 Information Processing Society of Japan

商品「澄みきり」の開発者の想いを掲載するページにシネマグラフが用いられている．ビールの泡が上がってくる様子がシズル感を表現している．読ませたいコ
ンテンツにシネマグラフを使用することでピンポイン

940

情報処理学会 インタラクション 2017
IPSJ Interaction 20173-408-78
2017/3/2

画編集の知識が少ない人でもシネマグラフを作成したいという状況が多くなっている現状がある．しかし，初心者にはこれらの動画編集ソフトウェアは高機能すぎるため扱いにくく，使いこなすには技術が求められる．
そして必要な素材は，定点から撮影した映像という条件がある．シネマグラフは動画であるが，静止画の要素を含んでいるために，その条件を満たす動画素材が必要であるというのがひとつの難点であるといえる．イメージ通りの映像を素材集などから探し出すことができればよいが，な図 1 Web サイト「Glendevon Motors」[3]Fig. 1 The website of Glendevon Motors．

い場合は自分で撮影する必要がある．また，そのような動画素材を用意することは非効率な場合もあると考える．何故なら，シネマグラフの映像の大部分は静止画でできているからである．

2. シネマグラフの簡易作成手法の提案
シネマグラフ作成をより簡易的にするため，１枚の画像素材に段階的にエフェクトかけてシネマグラフを作成する手法を提案する．
なお，より簡単な操作と最小限のコストでのシネマグラフ作成を達成することにより，一般人を含むクリエイター
図 2

Web サイト「キリン澄み切り」[4]の支援が可能なツールになるよう考慮する．

Fig. 2 The website of “KIRIN SUMIKIRI”．

3. 実装
シネマグラフを作成する専用アプリとして iOS の「Flixel

Cinemagraph Pro」が挙げられるが，これはシネマグラフの素材となる動画のアニメーションにする部分を選択してそれ以外を静止画に編集するという動画編集ソフトである．対して本提案では，制作したツールは段階的に画像を加工することによりシネマグラフを生成するという手法を取る．
制作するアニメーションの種類については，数あるアニ
図 3

Web サイト「Pfister」[5]Fig. 3 The website of Pfister．

メーションの中から静止画からでも再現できると予測されるものを選別し，考案した．アニメーションの選定にあたっては，画像にエフェクトをかけたものでも自然さが保トに注目を集められることができる例である [4]．

持できるものという条件を考慮した．
ツールは Visual Studio*4 で開発し Windows 上で動作

Pfister のホームページ (図 3)
蛇口から水が流れるアニメーションをシネマグラフでする．

表現している．商品を使用した様子をシネマグラフでストレートに表している [5]．

3.1 ツール仕様
3.1.1 使用手順 (図 4)

1.4 シネマグラフの問題点( 1 ) プログラムを開き，フォルダの中から加工したい画像を選択

シネマグラフは狙い通りのアニメーションを作成できる手段であるが，作る際にはソフトウェアと適切な素材( 2 ) 加工したい部分をマウスで選択（複数選択可能）が必ず必要になる．まずソフトウェアについては，Adobe( 3 ) メニューバー＞実行＞アニメーションの種類の選択＞

Photoshop や，または Flixel Cinemagraph pro などのシネ

fast/slow

マグラフ編集専用のソフトウェアが必要になる．Web デザ( 4 ) 完成したアニメーションを自動再生インに要求されるハードルが高くなっている一方で，Web*4に関わる技術者は人手不足に陥っている中，デザインや動© 2017 Information Processing Society of Japan

マイクロソフトのソフトウェア開発製品群およびそれらを管理する統合開発環境．

941

情報処理学会 インタラクション 2017
IPSJ Interaction 20173-408-78
2017/3/2

図 7 spiral:バラのアニメーション

Fig. 7 spiral: rose animation．

図 4 使用手順

Fig. 4 method of application．
図 8rotation:コーヒーのアニメーション

Fig. 8 spiral: coﬀee animation．てアニメーション．Random で点滅している様子を表現する．

• Rain ： 波紋を選択部分の範囲内で Random に出現させる．
図 5

使用手順 (2) 詳細

Fig. 5 Detail of method of application (2)．

このツールは簡易的なオペレーションをするためのものであるので，直感的な操作に重点を置いている．PC 上でユーザーが画像に対して編集作業する上で，数値や細微なパラメータの調整をする必要がないように設計した．

3.2 ツールの利用例
このツールに搭載されているアニメーションにて，図 7や図 8 のようなデザインの提案ができる．
使用シーンとして，シネマグラフを作成したいが適した動画を用意するのが困難な場合や，動画素材を使用しなくてもよいシンプルなアニメーションを作成する場合にこのツールの価値が発揮されると考えられる．

4. 考察
図 6 spiral のエフェクト

Fig. 6 spiral eﬀect．

4.1 画像からシネマグラフを作成する手法の有効性
複雑なシネマグラフを作るとなると，やはり１枚の画像

3.1.2 アニメーション種類

素材だけでは無理がある場合は多く，アニメーションの種• Spiral (図 6) ： 選択部分の中心点から外側に徐々にね類が限定されてしまうということがある．しかし，画像素じりの角度を緩めていった形状を時間経過で元の画像材のみで十分作成が可能になるシネマグラフは存在し，そに戻すアニメーション．花が咲くようなイメージの動の利点として，定点カメラからの映像を用意しなければな画を生成する．

らない従来の制作方法に対して画像素材を用いる方法では• Rotation ： 選択部分の中心点から描く円形に画像が切り取られ回転するアニメーション．

• Candle ： ロウソクの炎と周りの空間の明るさが揺らそのことを考慮する必要はなく，また制作のコストを大きく減少できる．画像からシネマグラフを作成する手法の有効性は高い．

ぐアニメーション．選択部分の中心に近い部分ではRandom で左右に空間が揺れる．揺れる部分の外側では明るさを示す明るい円を Random で大きさを変え© 2017 Information Processing Society of Japan

4.2 編集コストの減少
このツールの開発の前に参考として使用した Adobe Af-942

情報処理学会 インタラクション 2017
IPSJ Interaction 20173-408-78
2017/3/2

terEﬀects*5 では数多くのエフェクトが利用でき細かく調画像から制作できるシネマグラフの表現の可能性の広さ整をすることが可能だが，自然なアニメーションとして完を感じ，また動画編集ソフトウェアと比較したときに，手成させるには調整に非常に手間がかかる．AfterEﬀects の間と時間を縮小させることができるものに仕上がった．現

ようなソフトウェアと比較したとき，ユーザーに細かな調在は多種多様な画像加工アプリケーションが配信されてお整をしてもらう必要なくシネマグラフが作成される仕様にり，インターネットで得る情報には動画が溢れていて，よしたことにツール自体の価値があると考える．つまり，シり人の興味を引く工夫が必要になっている中で，派手になンプルなアニメーションに限り，最も簡易的な手順によっりすぎることなくかつ独特な表現ができる方法として，シてシネマグラフの作品が作れるということを示すことがでネマグラフがさらに注目されることを期待している．そしきた．て，シネマグラフを簡易的に作成する可能性を示すものとして本研究を位置付けられたと考える．

4.3 編集時間の短縮
アニメーションの選択を実行して 10 秒以内にはほぼ動作が完了する．このツールの最大の利点は、画像からエ参考文献[1]フェクトを加えてアニメーションに仕上げるまでの時間がとにかく短く済むことである．
なお、実際にシネマグラフとして作品を完成させる必要がない場合でも，デモの作成などアニメーションの完成イ[2]メージをすぐに確認するという用途としても有用であると考えられる．
[3]

4.4 ツールの発展性
現在は，写真にフィルターをかけたり，絵画のように加[4]工するようなスマートフォンアプリが多く配信されているが，今回作成したソフトでは画像加工が基盤としてあるので，そのような画像加工ツールの技術やアイディアを応用することも可能だと思われる．また，動画の需要が高まっている今，動画の編集・生成ができるアプリケーションも[5]

総務省｜平成 26 年版 情報通信白書｜
コンテンツ及びサービス利用の変化，
http://www.soumu.go.jp/johotsusintokei/
whitepaper/ja/h26/html/nc141120.html(2016.12.21)．
中島 章敬, 河合 紀彦, 佐藤 智和, 横矢 直和:”自由視点画像生成に基づく移動カメラ映像からのシネマグラフ生成”,
映像情報メディア学会冬季大会講演予稿集, ”4-11-1”-”411-2” (2014).
Luxury Car Rental Los Angeles- Glendevon Motors，
http://www.glendevonmotors.com/ (2016.12.21)．
キリン 澄みきり｜ビール・発泡酒・新ジャンル｜
商品情報｜キリン，
http://www.kirin.co.jp/products/beer/sumikiri/(2016.12.21)．
Pfister — Slate - A Beautifully Versatile
Faucet Finish，
http://www.pfisterfaucets.com/innovations(2016.12.21)．

同じように増えることが予想される．一般ユーザー向けに改良したシステムと UI を設計することにより，より多くの人が様々な用途で気軽に使用できるようになると考えられる．そのために適切なアニメーションを選んだが，実装しきれていないアニメーションのアイディアもあり，また多種多様なシネマグラフの作品を調査している中で，私が考え得るもの以外にもアイディアの可能性は広くあると実感した．

5. おわりに近年の技術の進歩も影響して動画の需要は高まっている．動画表現は現在多くの Web デザインに取り入れられているが，動画やアニメーション表現を利用しすぎて動きが多く煩雑になってしまう場合もある．そこで，動画をデザインする方法の一つにシネマグラフというものがある．
シネマグラフは通常，条件に合う動画素材から編集して作成されるが，本研究では 1 枚の画像からシネマグラフを作成するツール開発を試みた．
*5

アドビシステムズが販売している映像のデジタル合成やモーション・グラフィックス，タイトル制作などを目的としたソフトウェア．

© 2017 Information Processing Society of Japan943