筑波学園病院 研修医募集サイト

http://recruit.gakuen-hospital.com
弊社で制作させていただきました。PC／スマートフォンに対応しています。

研修医の募集に特化した独立サイトを作りたい、というご要望で
インタビューと動画を中心としたサイトをご提案させていただきました。

メッセージ動画は、最後まで見てもらえるように2分以内に収めていますが、
撮影はロケハンも含めて3回（延べ3日間）、病院にお伺いしました。

医師の先生方は、お忙しい中、こちらの注文にも快く応えて下さり、
気持ちの伝わる、熱いメッセージをいただくことができました。

内容はある程度事前に決めていただいていましたが、
原稿どおりではなく、みなさん自分の言葉でその都度話してくださいましたので、
現場で内容や言い回しをディレクションしつつ、
今のテイクがOKかどうかについても素早い判断が必要になります。
かなり集中力が必要でした…。

インタビューページのテキストについては、
アンケート形式の原稿を元に再構成して作成しました。
写真撮影も、デザイン案をiPadで確認していただきながら
こちらのイメージを伝えるなどして、ご協力いただきました。

スタッフの皆さんが本当に明るくて協力的だったので
撮影はとても楽しかったです。

筑波学園病院様は、今後も弊社制作のサイトの公開が控えていますのでご期待ください。

前回、シネマグラフとは
「一部分だけ動いている写真」ですよ、
と説明をしましたが、あれは嘘です。
正しくは
「一部分だけ“時間”が動いてる写真」
なんですね。

写真というのは、ご存知の通り
〈その瞬間〉を切り取ったものなので、
量的な時間、というのを持ちません。
私達は、写真を見る時に、そのことを意識することなく、
ごく普通のこととして受け止めています。

ところが、その写真の中に
〈時間の流れ〉を持った要素が入り込んでいると
私達の認識に混乱が起こります。

そこがポイントです。

最初から動画だと思ってたら驚かないのに、
写真が動いてるとびっくりする。

私達の脳はどうも、動画と写真を観るときに
無意識にスイッチを切り替えてるようですね。

改めて前回の作例に戻ってみると
…もうおわかりだと思います。

この画像は、見た目が最初から動画っぽいんです。
夜中の道路で、人や車の通行がなければ、
動きのない部分があっても、別に不思議じゃない。
画質もそうですね。
加工したりして頑張ってはいますが、
元がスマートフォンで撮影したものなので
深夜にテレビでやってる定点カメラ映像みたいな雰囲気に
なってしまっています。

「これは写真だ（＝時間が流れるはずがない）」
というのを無意識に思わせられないと、
シネマグラフ的な面白さは生まれてこないのです。

それらを念頭に置いて、ふたたび
https://www.tumblr.com/search/%23cinemagraph
http://www.pinterest.com/search/pins/?q=cinemagraph
シネマグラフの名作群を観てみると
どれもちゃんと「写真」に見えるような工夫がされています。

まず、画質がハイファイ、なパターン。
ファッション写真ぽく綺麗にライティングされてたり、
一眼レフみたいに背景がボケてたりすると、一気に写真らしさが増します。

それから、顔（人物）。
人間は呼吸もするし、まばたきもするので
動画であれば、何もしてなくても必ず動きはあります。
それは逆に、人が完全に静止している画像だったら
写真に見える、ということでもあります。

では動いてる部分に「煙」「風」「水」の表現が多いのはなぜでしょうか。

それらが、「時間が流れている」ことを伝える表現として、
一番わかりやすいからですね。
エントロピーの増大。

物体が左から右に移動する、というだけでは
時間の表現としては弱いんです。
これが「落下」だと時間を表現できたりしそうです。

…ここから先は
自分で考えてくださいね！
理屈だけで名作が作れるかも！？

平井です。今日はシネマグラフの話。

シネマグラフについては
https://www.tumblr.com/search/%23cinemagraph
http://www.pinterest.com/search/pins/?q=cinemagraph
などを参照のこと。
一部分だけが動く写真、と思っておけばいいです。

近年のGIFアニメ再評価に乗じて、ほそぼそと流行しています。

まぁなんとなく作り方は想像つくんですが
どのくらいの手間でできるのか、
自分でやってみることにします。

まずは、素材を用意します。
とりあえずベランダに出て、外の景色をiPhoneでビデオ撮影すること10秒。

PCで開いてみます。
手ブレがひどい。

動画の手ブレを補正するには…
調べるとAdobe Premiere CCでできるらしい。
さっそくダウンロードします。
これだけのために…と思わなくもないですがAdobe CC（月額5,000円）の恩恵ということで。

「ワープスタビライザー」というビデオエフェクトで簡単にできましたが
撮るときに三脚使うなど、カメラを固定したほうがいいですね。

Photoshopで動画を開きます。
開けるの？と思うかもしれないけど普通に開けます。

「タイムライン」というパネルに読み込まれます。（「レイヤー1」）
使いたい範囲を「ワークエリア開始・終了」スライダーを動かして選択します。
最初と最後がループで繋がるようにします。

「時間インジケーター」をぐりぐりと動かしてみて、
基本になるフレームを選びます。
「結合部分をコピー」とかで新規レイヤー（「レイヤー2」）にペースト。
いったん非表示にしておきましょう。

もうひとつ新しいレイヤー（「レイヤー3」）を作って、
レイヤー1を見ながら、動かしたい要素が動くエリアだけをブラシツールとかで塗り塗り。

なるべく狭いほうがかっこいいけど、あんまり気にせず適当に。

できたら、レイヤー3を選択範囲にして、レイヤー2をマスク。
選んだ範囲だけ、下にあるビデオレイヤー（「レイヤー1」）が見えるようにします。

おわり。
「WEB用に保存」で、GIF形式を選んで、ループオプションを「無限」にして保存。
ブラウザで確認しましょう。

ファイルサイズは軽いほうが観てもらいやすいので、

書き出しサイズは小さめにして、フレームレートも15fpsで充分かな。

チープなほうが味のある映像になるよ。とかなんとか。

確かにできたんですけど、どうもいまひとつ面白くないですね。
なぜでしょう。次回はその理由を書きます。たぶん。