新年明けましておめでとうございます。マークアップエンジニアのこばです。
新年はフレッシュな気持ちになれて清々しいですね。
2017年も頑張っていきましょう。

2016年のwebアニメーション

2016年はアニメーションに凝ったサイトが大変多く見られました。
古いOSやブラウザの利用者が減り、デバイスのスペックが上がり続けて、CSS3やSVG、canvas、WebGLといったアニメーションを表現できる技術を以前より取り入れることができるようになってきたためと考えられます。
JavaScriptライブラリも増え、昔に比べ手軽に実装できるようになったことも大きいでしょう。

アニメーションの役割の変化

アニメーションの役割に着目してみると、Flashが衰退しJavaScriptで代替えし始めた頃は、簡易的なアニメーションで、ユーザビリティの補助的な役割が多かったのですが、前述のように表現できることが増えてきた最近では、より「表現」としての役割が強くなってきているように感じます。
今や、キャンペーンサイトやブランディングサイトで、アニメーションを取り入れずに作られる方が珍しいのではないでしょうか。
ですがその分、以前はちょっとした動きがあるだけでも「お、すごい」と思われていた表現が、ごく当たり前に感じられるようになってきたと思います。

本記事では、この「表現」としてのアニメーションに焦点を当てて、よりコンテンツの魅力を引き出すアニメーションのヒントとなるかもしれない動画を紹介したいと思います。
なお、主にテキストアニメーションに着目しています。

映画のオープニング

アニメーションに関してはwebよりもやはり動画のプロが作った作品には敵いません。
中でも私がよく見るのは映画のオープニング（タイトルシーケンス）です。

視聴者を一気に映画の世界に引き込ませるオープニングは表現の塊です。
vimeoやyoutube上で多数のオープニングを見ることができますが、Art of the Titleというサイトがおすすめです。
このサイトはクラシックから新作はもちろん、年別、作者別、スタジオ別でも見ることができます。
クオリティも高いものばかりなので見すぎてくれぐれも寝不足にならないように注意して下さい…。

私の主観ですが、この表現は使えそう！と思ったオープニングを紹介します。
紹介するオープニングは下記です。

1. 北北西に進路を取れ
2. 黄金の腕
3. サイコ
4. サイコ派生系、セブン、ソウ
5. 10億ドルの頭脳
6. エイリアン
7. アルタード・ステーツ/未知への挑戦
8. ターミネーター
9. デッドゾーン
10. グッドフェローズ
11. ハイヤー・ラーニング
12. D.N.A./ドクター・モローの島
13. オフィスキラー
14. フェイク、ケープフィアー
15. K-PAX 光の旅人
16. トレインスポッティング2

北北西に進路を取れ

North by Northwest (1959) — Art of the Title from Maksim on Vimeo.

いわずと知れたアルフレッド・ヒッチコック監督の1959年に公開された映画です。
実はこのオープニングが初めて「文字」をアニメーションさせた作品と言われています。
ビルの窓を模した背景に沿うように文字を配置して、エレベーターのようなアニメーションが特徴的です。
オブジェクトの形状に合わせた動きというのは覚えておきたい所です。
半世紀以上も前の作品ですが、今でも色褪せることがないですね…。

ちなみにこのタイトルをデザインした、故ソール・バス（Saul Bus）氏は映画界に「タイトルデザイン」という分野を確立したグラフィックデザイナーで、この方が手掛けたタイトルのシーケンスはどれも秀逸です。

黄金の腕

The Man With The Golden Arm (1955) — Art of the Title from Maksim on Vimeo.

こちらもソール・バスがタイトルデザインを手がけた1955年に制作された映画です。
表示が切り替わるときに画面上に表示されているオブジェクトをひとつ残しておくことで、ひと続きのアニメーションであることを示しています。

サイコ

Psycho (1960) — Art of the Title from Maksim on Vimeo.

1960年に公開されたアルフレッド・ヒッチコック×ソール・バスがタッグを組んでいる有名なスリラー映画です。
BGMも一度聞けば忘れられないインパクトがありますが、あえて文字を分断したり、一部をずらすことで、映画のタイトルに合った普通ではない不穏な空気を醸し出しています。
ストライプと文字との組み合わせもスタイリッシュでいいですね。

サイコ派生系

たまたま見つけた、サイコのオープニングをリメイクした動画も良かったのでご紹介します。

Psycho Title Sequence (Alternative) from Ha Sung Kang on Vimeo.

同じテキストを少し位置を変えて重ねたり、フォントを変えたりして不穏感を演出しています。
この類の手法はブラッド・ピット主演の人気作「セブン」や、「ソウ」でも見られるタイプです。これらではテキストをゆらしたりフラッシュさせたり、より凝った表現になっています。

Se7en from Brian Kornic on Vimeo.

10億ドルの頭脳

1967年に公開されたスリラー映画です。
テキストをランダムに明滅させる手法はSF的な表現でよく使われますが、50年前のこの作品で既に使われていました。
２色の色合いから構成されたデザイン（デュオトーン）もちょうどこの60年代から見られるようになりました。

エイリアン

説明不要のSFスリラー映画ですね。1979年に公開されました。
最初は上部に表示されている棒状のオブジェクトが何を表しているのか謎ですが、徐々に「ALIEN」という文字に変わっていきます。
この表現の狙いは、映画序盤はエイリアンの一部しか見ることができないのですが終盤で全体の姿を見ることができる映画のストーリーそのものを表しているのではと思います。

アルタード・ステーツ/未知への挑戦

1980年公開のSFサスペンス映画です。
次に紹介するターミネーターと同様、画面からはみ出るくらい大きく配置されたタイトル文字をアニメーションさせています。
徐々にこのタイトルに被らない部分は暗転していき、最終的にはタイトル文字でくり抜いたような表現になっています。今でもよく使われる表現ですね。

ターミネーター

説明不要の名作ですね。1984年に公開されました。
クレジット表記にはタイプライター風のアニメーションを使っていますが、ここでの注目ポイントは大きく配置されたタイトル文字を、背景にしたアイデアです。
このオープニングには文字しかありませんが十分に世界観を伝えることに成功しています。

デッドゾーン

1983年に公開されたスティーブン・キング原作のサスペンス映画です。
タイトル文字でくり抜くという点では上記の「アルタード・ステーツ/未知への挑戦」と同じ手法ですが、タイトル文字ではないネガティブ部分を徐々に暗転させていくことで、また違った雰囲気を出しています。
街の風景を徐々にくり抜いていくことで、タイトル通り、この街全体が「デッド・ゾーン」であることを暗示しているかのような見事な表現だと感じました。

グッドフェローズ

Goodfellas (1990) — Art of the Title from Maksim on Vimeo.

マーティン・スコセッシ監督の1990年公開のクライム映画で、タイトルはソール・バス氏によるものです。
車が通過する音に合わせたテキストアニメーションがとても斬新で、冒頭のストーリーに上手くはまっています。今でも色あせない名オープニングです。

ハイヤー・ラーニング

1995年公開の青春映画です。タイトルデザインはまたもソール・バス氏です。
アニメーション自体は斜めに傾けてスライドイン／アウトするだけのシンプルな動きですが、ファンキーなBGMと特徴のあるフォントを使用して、映画の世界観を上手く表現していると感じます。

D.N.A./ドクター・モローの島

1996年公開のSFスリラー映画です。
冒頭の、ぼかしを伴いながらのフェードイン／アウトのアニメーションはネガティブなイメージを表現するためによく使われる手法です。
1:00頃からのテキストのトゲが出るようなエフェクトは、おそらく映画の内容にあった遺伝子操作を表す化学式を表現しているのではと感じます。

オフィスキラー

1997年公開のスリラー映画です。
非常に低予算で作成されたのですが巧みな映像表現が有名で、特にこのオープニングは高い評価を得ています。
0:21からの階段を上るようなアニメーションはシンプルですがとてもインパクトのある動きです。

フェイク

1997年公開のサスペンス映画です。
テキストの文字間をあえて不揃いにすることで違和感を出しています。ケープフィアーでも見られる少しの崩しですね。
これだけで人の感覚に違和感を与えられるのだから面白いものですね。

ケープフィアー（1991年公開）では上下半分でテキストをずらすことで不安を演出しています。

スナッチ

2000年に公開された犯罪コメディ映画です。
軽快なBGMと、人物紹介時の絵タッチの切り替えなど、ユニークでスタイリッシュな印象を与えています。

K-PAX 光の旅人

2001年に公開されたSF（？）映画です。BGMも相まって、光をモチーフにした幻想的な表現が魅力的です。文字の光彩の具合が素晴らしいと感じます。

トレインスポッティング2

1996年公開の人気作「トレインスポッティング」の続編がいよいよ今年2017年に公開予定です。
ストーリーだけでなくビジュアル・グラフィック面でも人気のあった前作ですが、今回の続編のティザームービーもとてもクールです。
冒頭と、ラストの電車の動きを表したテキストアニメーションには感激しました。
その後の人物4人紹介のところでは、トレインスポッティングと一目でわかるオレンジ×ホワイトを使用しています。

まとめ

以上、昔の映画を中心に紹介してしまいましたが、今見るとどれも基本的なものなのでしょう。
そのため最近の映画のオープニングを見ても、大体これまでに紹介したような技法を組み合わせているものが多いように感じます。

注意点

ただ気をつけるべきは、映画と違いwebにおいては閲覧者の環境が様々であるということです。
スペックの高いデスクトップPCであれば複雑なアニメーションも問題なく見れるかもしれませんが、スペックの低い旧式のスマートフォン等であれば同じ実装だとカクカクとした動きになりかえってストレスを生んでしまうかもしれません。
これを避けるためには、どのユーザーにどの表現を届けるのか、何を伝えたいのかなど、きちんとした事前のゴール設定が必要です。

結局どのアニメーションがいいのか

これまで紹介した動画を見てみると、下記のような法則があるように感じます。

表現したいもの	動き、ニュアンスなど
不安、恐怖	ゆっくり、ぼかし、暗い、不揃い、不明確
感動	ゆっくり、明るい、光、キラキラ
迫力	衝撃、大きい、はみ出る、速い
楽しい	抑揚、多色

これにBGMも加わればより効果的かと思います。

アニメーションのヒントはあらゆる所にある

アニメーションのアイデアはデザインと同じく、引き出しが多いほど、多彩な表現が可能になると思います。
そのためにはたくさんの動きを見ることが大事だと思います。
映画のオープニングだけではなく、テレビCMやゲーム、はたまた日常の風景（車やドアの動きなど）もすべて動きがあります。
松下幸之助さんの「飛ぶ鳥から何を思うか」ではありませんが、何気なく見ているものでも意識次第でいろいろとヒントにつながると思いますので、少し注意深くモノを見ることを意識すると、いろいろと見え方が変わってくるかもしれません。