1. トップ
  2. コラム一覧
  3. 画像の一部だけが動く?!不思議な写真シネマグラフ

画像の一部だけが動く?!不思議な写真シネマグラフ

投稿日 : 2017.01.31  |  カテゴリー : IT雑記

Knocknoteコラム20170131

先週消えつつある技術としてFLASHの記事を書きました。
ウェブ上でアニメーションコンテンツを見せる為の代表的な技術でしたが、残念ながら時代の流れと共に利用者が少なくなりつつあります。

しかしアニメーションなど動きのあるリッチコンテンツがウェブ上から姿を消した訳ではありません。
FLASHではなくとも動きを付ける技術は多くあります。

そんな中で生まれた、注目を集めている「シネマグラフ(cinemagraph)」という手法/作品をご紹介します。

昔からGif(画像の保存形式の一つ)によるアニメーションは多く使われてきましたね。
一定の動きを繰り返す小さな画像です。

シネマグラフはその昔からあるGifを使った技術ですが、よく見るようなGifと違うのは
「画像の一部だけが動いている」という事です。


All photos quote from “Cinemagraphs.com”
2011年に写真家兼モーションデザイナーのJamie BeckとKevin Burgにより作られました。

「Living Image」と呼ばれるように、静かながらも不思議な「生」を感じられる画像です。

シネマグラフは動画の一部の静止画像と、丁度良い具合にループする一部エレメントを組み合わせて作られています。
大手企業では既にサイトのコンテンツの一部としてうまく取り入れているサイトも見かけますが、
素材を揃えるのもそう簡単ではないでしょうから今後のウェブ上のスタンダードな技術となり得るかはわかりませんね。

けれど、今後もつい忘れてしまった頃に驚かせてくれるような作品が出てきて、芸術作品を見るような、短いながらも豊かな時間を提供してくれる事を楽しみにしていましょう。

この記事を共有する
  • facebookでシェアする
  • ツイッターでつぶやく
  • LINEで送る
関連記事

ウェブサイトの仕組みを知る! html編 其の2

[ウェブサイトの仕組みを知る!] html編 其の1 : ウェブサイトの仕組みを知る! html編 其の1 css編 其の1 : ウェブサイトの仕組みを知る! css編 其の1 htmlとは、以前述べたとおり、we ...

オンライン画像編集サービス「Pixlr」が凄い!

ウェブ制作において欠かす事のできない写真や画像。 自分で撮影した写真やフリー素材を使う事が多いと思いますがその画像をちょっと加工して自サイトらしさを出したいという事はよくあります。 画像の縦横比やサイズを変えたり、コントラス ...

ビジュアルプログラミング言語

2020年のプログラミング必修化 2020年に小学生のプログラミング必修化に向けて様々な学習ツールが発表されています。 中でも使いやすく、拡張性の高いビジュアルプログラミング言語は特に注目を浴びているのではないでしょうか? 今回は ...

Twiiterがルールを変更

今回は日本でも最近事件になった。Twitterのルールが変更になったことについて書かせていただきます。 Twitterのルールが変更に アメリカのTwitterは11月3日、サービスルールを変更し、自殺や自傷行為の助長などは明確に違反事 ...

ウェブサイトの仕組みを知る! html編 其の3

[ウェブサイトの仕組みを知る!] html編 其の1 : ウェブサイトの仕組みを知る! html編 其の1 其の2 : ウェブサイトの仕組みを知る! html編 其の2 css編 其の1 : ウェブサイトの仕組みを知る ...

colors

カラーコードと16進数

カラーコード  #FFFF00は何色を表現するのでしょうか。 正解は 黄色です。 Webでは色を16進数で表示します。例えば上記の黄色は#FFFF00で表現しましたが、これらの文字列は、16進法で表されています。16進法の ...

LINEブログがもたらす革命

LINEブログが一般の人が使えるようになったのはご存知でしょうか。 アメブロ、livedoorブログ、はてなブログ等、世の中には一般の人が書けるブログサービスが数多く存在しております。 そんななか、LINEが一般向けのブログサー ...

画像圧縮に便利なサイト比較

電話回線でネットサーフィンしていた時を思い出しました。 ネット上にある画像を全部表示するのに1分もかかっていたこと、 電話が来る度にネット回線が切断されていたこと。 今思い返すとなかなかに不便なネット環境だったことをしみじみと ...

ウェブサイトの仕組みを知る! html編 其の1

HTML講座 第1回目:htmlとは? htmlは言語 まずはそもそも、htmlとはなんなのか?という基礎の手前の超初歩から始めていきたいと思います。 htmlというのはHyper Text Markup Languageの略 ...

kimu

危惧される北朝鮮の存在

2月13日に北朝鮮の金正男氏が殺害されました。 北朝鮮の金正恩体制が恐怖政治であることが再び再認識された事件でもありました。 北朝鮮の印象 北朝鮮といえばミサイル実験や度重なる挑発行為などで日本に不安を煽っている印象があります。 し ...

Knocknote Education(ノックノートエドゥケーション)