写真と動画の良いとこ取り！Webデザインで話題の「シネマグラフ」とは

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、 The Deep End Design社のクリエイティブディレクターであるWes McDowell氏によって投稿されました。

今年の初めに発行された無数のWebデザインのレポートを読んでいれば、今後が期待されるデザインとして取り上げられたシネマグラフについても、おそらく読んだことがあるでしょう。Webサイトのトップページを飾るシネマグラフのデザイン例も、数多くの記事で紹介されていました。

しかし、シネマグラフはどこへ消えたのでしょうか？

現状としては、ファッション業界の一部の企業のWebサイトに使われている以外には、シネマグラフは記事の中で紹介されるか、Reddit（レディット：アメリカの掲示板サイト）で語られるだけの存在にほぼ追いやられています。

今こそ、シネマグラフの本来の価値を見直し、本来の「Webサイトにおけるヒーロー的存在」として活用すべき時です。

シネマグラフが効果的である理由

あるWebデザインが流行すると予測されたという理由だけで、ただそれに従うのは、個人的には退屈なことだと思います。

むしろ、もし自分でWebデザインの新たなトレンドを開拓できるとしたら、その方が面白いと思いませんか？あるいは、もし目的を持ってWebデザインを創造し、同時にそのデザインによって何らかの問題を解決できるとしたら…？

人間の目は動くものを好みます。

シネマグラフは数々の記事で話題になったにもかかわらず、（しかもWebデザインのトレンドになると予測されていたにもかかわらず、）シネマグラフを活用しているWebサイトはごく少数であるのが現状です。そのため、まだ現実的な普及率は高くはないので、ほとんどのWebユーザーの目には新鮮なデザインに映るようです。

写真としての要素と、動画としての要素を併せ持つシネマグラフには、潜在的に人間の視線を引き付ける力があります。見る人が思わず二度見せずにはいられないようなシネマグラフのデザインには、人の目を上手く欺くような不思議なトリックがあります。

「ユーザーの注目を集めることができる」

従来、Webサイトでユーザーの注目を集める方法として特に有効だったのは、「動画」です。人間の目は動くものを好みます。

しかし、動画は再生時間が短いものであっても、容量が大きくなるというデメリットがあります。もちろん、動画を約1inch（約2.54cm）以下のサイズに圧縮することもできますが、小さなサイズの動画でしかありません。かといって、元の大きな容量のままにしておくと、Webページの読み込みが遅くなります。

しかし、シネマグラフを使えば、表現したいと思う動きを自由にデザインできます。

また、その目新しさを上手く利用できれば、ユーザーの注目を集める方法としても、シネマグラフは対費用効果が高いのです。多くのユーザーは、シネマグラフを見る機会があまりないため、見たときには思わず視線を奪われ「すごい！」と思う傾向にあります。

なぜシネマグラフをWebサイトの主役のデザインとして使うのが効果的なのかを説明するために、実例を1つ紹介したいと思います。

Glendevon Motors社のWebサイトのデザインでは、シネマグラフをトップページに大きく利用することで、商品の雰囲気を伝え、競合企業の中で「一流ブランド」として目立たせる効果を狙っています。

選択肢1：既製のCGを使う

シネマグラフを作成するには、既製のCGを使える場合も多いと思います。私個人としては、もし思い描くイメージ通りのデザインが見つかり、かつ使用権の価格が予算の範囲内であれば、既製のCGを使う方法もいいと思います。問題はどこで入手するか？です。

幸いなことに、入手先の選択肢はたくさんあります。もちろん予算にもよりますが、リソースは豊富にあります。無料で提供されているCGもあります。もし予算として約80ドル（日本円で約8,300円）使えるとしたら、質の高い高精細度のCGが入手できるShutterstockがおすすめです。

（アドバイス：シネマグラフのカテゴリが設けられているとは限りません。入手先で探すときには、「シネマグラフ（cinemagraph）」という検索キーワードで探すか、または「動画素材（footage）」のカテゴリから任意の検索キーワードで探す必要があります。）

イメージ通りのCGを入手できたら、次に行うべきはファイルの圧縮作業です。これについては、後で述べます。

選択肢2：CGを自作する

CGが動画より優れているのは視覚的なトリック効果で、それがCGを使う意味です。

思い描くイメージ通りのシネマグラフが既製のCGに見つからない場合、あるいはあなたがCGの自作を得意とする強者であれば（そうであれば私はあなたを尊敬しますが。）、シネマグラフをゼロから自作するという選択もあります。

• 短い動画撮影ができるカメラ
• 三脚
• 被写体となるモデル・小道具
• コンピュータ
• 動画編集用のソフトウェア（※これは任意です。）
• Adobe Photoshop、またはflixelなどのシネマグラフ編集専用のソフトウェア

上のリストが、シネマグラフを作成するのに必要なアイテムです。ただし、効果の高いシネマグラフを作成するには、もちろん良いアイデアが必要であることもお忘れなく。

質の高いシネマグラフを作るには？

個々のCGのテーマとして何を表現するかは、それを利用するWebサイトのニッチ市場における需要によって大体決まると思いますが、CGの作成全般において必ず押さえておくべきポイントがあります。

• 微かなデザイン：CGが動画より優れているのは視覚的なトリック効果で、それがCGを使う意味です。最も優れたCGのデザイン作品の中には、ほとんど静止画像に近いデザインでありながら、その中のほんの微かな動きが見る人に驚きを与えるようなものもあります。デザインの全体的な構成についても、こうしたコントラストは重要です。もしCGの上に、テキストやCTA（Call To Action：ユーザーの注意を引きアクションを誘導するための要素）を、レイヤーとして重ねるとしたら、全体のデザインが乱雑すぎたり、色が強くなりすぎたりすることがないように注意が必要です。CGは、あくまでこれらの重要な要素を引き立てるために使うのです。かえって注意を逸らすことになっては逆効果です。
• 重要な要素を引き立てる：見出し、サブヘッダ、CTAのボタンなど要素が、シネマグラフと上手く調和するようなデザインを考えましょう。デザインの全体的な構図の中で、どの要素を引き立てるかよく考えることが重要です。
• 動く部分以外は静止させる：もちろんCGには動きが含まれますが、CGの中で動く部分以外の背景は、その動きを引き立てるために静止させます。動画撮影時には、三脚を使ってカメラを安定させるといいでしょう。もしモデルの人物の目だけが横に動くようなシネマグラフを作成するとしたら、人物の頭などがなるべく動かないように注意します。
• ループ可能なCGにする：ファイルの容量を小さくするには、短い動きを繰り返しループさせ、かつその継ぎ目がなるべく不自然にならないようにするのが効果的です。撮影現場のセッティングをするときにも、工夫します。自然なループの継ぎ目を作るためには、被写体の最初の位置と最後の位置を、ほぼ一致させることが理想的です。
• もし可能なら、被写体に人物を使う：人物を含む画像の方が、そうでない画像よりも、人の注意を引きやすいことが数々の研究結果によって明らかにされています。この結果をCGにも応用しましょう。モデルとなる人物の視線が、CTAの方向を向くようにデザインすればさらに効果的です。ユーザーの視線も同じようにCTAへ誘導しやすいことが、研究で示されています。

被写体の配置を整えたら、次は撮影です。シネマグラフの中で表現したい動きを数回ほど繰り返しながら、約20～30秒の動画を撮影します。また、全ての被写体を静止させた約5秒動画も撮影します。

こうして撮影できた動画が、人目を引くようなシネマグラフを作成する土台となります。

動画からシネマグラフを作成する

ここでは、動画からシネマグラフを作成する詳細なステップは省略し、主な作成ツールについてのみ紹介します。

シネマグラフ用の高性能なデザインソフトウェアは約299ドル（日本円で約31,000円）で購入できますが、Photoshopを使ってCGを組み合わせてシネマグラフを作ることも可能です。

ファイルを圧縮する

CGをゼロから自作するとしても、既製のCGを利用するとしても、ファイルの読み込みが速いことが重要です。また、CGの出力ファイル形式を、GIF形式にするとしても、その他の動画ファイルの形式にするとしても、ファイルの圧縮において重要になるのは次の2点です。

1. 画質
2. 長さ

私は、動画やシネマグラフなど容量の大きいファイルを圧縮するときには、なるべく画質が損なわれないように努めています。視覚的な効果を得るのために、ファイルの画質を犠牲にすることは、悪だと考えています。このバランスを図るために、シネマグラフ作成においては、ループを可能な限り短くしているのです。

シネマグラフのループをどのくらい短くできるかは、撮影する被写体の動きにも左右されます――例えば、被写体が「走っている列車」である方が、「ゆったりと動く人間の目」である場合よりも、短いループを作成しやすいのです。

「ゆったりと動く人間の目」のような被写体の動きを、短いループで繰り返すとしたら、途切れて不自然な感じになってしまいます。

例として、私がThe Deep End社でデザインした次のシネマグラフを見てください。「走っている列車」を表現するためにループさせている動画は、1秒前後まで短くすることができました。こうして、このシネマグラフでは自然な動きを作ることができましたが、ファイルの読み込みを速くするには、ファイルをさらに圧縮する必要がありました。

そこで、私は最終的に、ClipChampという無料のファイル縮小用ソフトウェアを利用し、このファイルを数MBから約319KBまで圧縮しました。

ぜひ覚えておいてほしいことは、ユーザーは読み込み時間に「3秒」もかかれば、Webサイトを離れてしまうということです。だからこそ、ファイルの読み込みを速くすることには、労力をかける価値があるのです。

もし圧縮をしすぎた結果、最終的なファイルの仕上がりに不自然な部分が生まれた場合には、不完全な動画を上手く隠すための常套のテクニックがあります。――半透明のパタン（模様）入りオーバーレイで、覆ってしまいましょう！

シネマグラフによるデザインの実例は数が少ないこともあり、多くを紹介できないのは残念ですが、ぜひあなた自身に今回の記事で述べたプランを実行に移して、Webデザインのトレンドとなるような前衛的なシネマグラフを生み出してほしいと、期待しています。

Gilt Taste（補足：このサイトは現在閉鎖中です。）

The Nature Conservancy

最後に

シネマグラフは、それなしでは退屈になるようなWebサイトのプロジェクトを楽しいものとするだけではなく、プロジェクトを成功に導く力もあります。

最高にクールな見出し、優れたCTAなどを、シネマグラフと組み合わせれば、ユーザーの関心を引けることも間違いありません。その後は、ユーザーの関心を思いのままに導くことができます。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。Webデザインのスキルを身につけたい方はぜひご覧ください！