動画ランディングページ(LP)の事例からAfter Effectsで可能な表現

前回は動画制作に携わる各ポジションを紹介しました。
そのなかで動画ランディングページを制作する上でデザイナーが関わりやすいのはアニメーション制作と紹介しました。
制作領域のポジションなので身に付けやすいですよね。

アニメーション制作
画像のような仕上がりを作る為に素材合成や動き、エフェクトを付けていくお仕事です。
企画内容から絵コンテのカット割りをビデオ編集担当と確認し必要なモーション素材を制作していきます。
前回の記事はこちら 動画ランディングページ(LP)効果改善への道は映像業界を理解する事からはじまる

今回は、After Effects を取り入れた(もしくはつかったかも)動画ランディングページの事例からどのような行程で制作を進めたのか検証していきます。

動画ランディングページ(LP)を紹介

動画ランディングページ(LP)の人物モデルや商品撮影素材はポイントポイントで組み込み、コンテンツに合わせて効果的に使われています。

ファーストビュー(FV)を複数パターン用意した事例もあります。
これから導入する場合は、ABテストをしながらCVRの効果改善を提案するのが自然なのかなと思います。

動画素材は容量が大きいですが、可能な限り短尺に調整と圧縮処理をしてユーザーのストレスをおさえる工夫をしていますね。
スマホでも確認できるページも多々あります。

HABA

HABA
余白を十分に活かしたエディトリアルデザインが特徴のランディングページ(LP)です。
シンプルなアニメーションでも魅力ある動画を組み込んでいます。

米肌

米肌
撮影した映像素材をちりばめた動画ランディングページ(LP)です。
FVはABテストをしているので様々なパターンが用意されています。

After Effectsならではの機能を使ってより複雑な処理が可能にする


Adobe After Effects CC

After Effectsを使った動画ランディングページ(LP)制作で必要な主な機能です。

position 素材の位置を動かす
size 素材の大きさを変更する
rotation 素材を回転させる
マスク 矢印アニメーションに使う
コンポジション コンポジション同士の連携で複雑な処理が可能
ショートカット 時短を目的にしたショートカット
エクスプレッション 機械的な動き(手作業で困難な動き)を簡単なスクリプトで制御する

After Effectsは映画、CM、アニメ、PV、etc…と映像業界で最も使用されている高機能なソフトです。
全てをマスターするには数年の修行が必要ですが、上記の知識と操作方法を身につければ動画ランディングページ(LP)制作で十分活用できます。
では、事例の動画部分を見ていきましょう。

米肌のファーストビュー(FV)


米肌
商品を一つ一つ置く演出
撮影した後にAfter Effectsのマスク処理で上手く合成しています。
1f(フレーム)ごとに処理が必要でかなりの工数が必要ですが、インパクトは大きいと思います。

商品を全て置き終わるまでの尺が長尺なので容量をどこまで削り落とすかが課題です。

HABAの肌断面


HABA
肌イラストをパーツごとにafter effectsに読み込んでアニメーション処理
position、size、rotationといったプロパティを操作して制作しています。
単純な動きなのでアニメーションのフレーム数をかなり落としていますが、商品や成分を訴求するには十分なアニメーションでインパクトもあります。

コンポジション、エクスプレッション、ショートカットについて
活用すれば複雑な処理をよりスピーディに行えます。この機能は別の機会で紹介したいと思います。

動画撮影素材は撮影技術とレンダリング技術が必要

撮影素材は大きさ、容量をできるだけ抑え、伝えたい情報のみを効果的に使用していくのが良いでしょう。

解像度に合わせてレンダリング

撮影した映像素材をAfter Effectsに読み込みランディングページの解像度に合わせてレンダリングしています。
After Effectsではレンダリングの設定にものすごい工数が必要です。
ウェブアニメーション用にレンダリングするには、30fから10fくらいまでフレームを下げ、
品質をたもったビデオコーデェックで書き出さないと理想のアニメーションが完成しません。

HABAのファーストビュー(FV)


HABA
シネマグラフという演出を採用

カメラを固定させて動いている箇所を限定する事で容量をおさえれるメリットがあります。
ほぼストレスなくページを読み込む事ができますね。

HABAのような撮影をご自身で行うなら、高価なカメラを使うのはおすすめしません。
カメラ操作すべてマニュアル操作で行うので安易なものではないですし、ライティング(照明)技術も必要です。
私がお勧めするのがスマホ撮影です。手軽なカメラ調整でちょうど良い色味で撮影できますし安価な三脚でスマホを固定できます。
ライティングは自然光を利用しればそこそこのクオリティで撮影できます。

あとは、レンダリング技術ですね。
次回は品質がものをいうレンダリング設定の説明をします。
前回のリンクはこちら 動画ランディングページ(LP)効果改善への道は映像業界を理解する事からはじまる

スポンサード広告 by google