フロントエンド、アニメーション担当の須藤です。今回は「ナカジマグループの医院開業支援」リニューアルで手掛けた3Dアニメーションについてお話します。
アニメーションへの要望
ディレクターからこのような要望を受けて始まりました。
- 3Dで大きく動かしたい
- スピード感あるものよりは、大きくゆっくり（信頼/安心）などのイメージ
- できればマウスで何か動きたい
普段3Dをやるときはリアルタイム3Dにすることが多いんですが、今回は3Dの動画で行くことにしました。
「リアルタイム3D」と「3Dの動画」どう違うの？
Webで3Dをやる場合、大きく2つの手法があるんですが、
1. リアルタイム3D
- canvasでThree.jsなどを用い、リアルタイムで描画する。
- マウスの動きなどに合わせて自由な変形、アクションができる。
- スクロールしていくとカメラの角度が変わる、色が変わる、など。
- 反面、ライティングやブラーなど、リッチに見せたいときには向かない。
- ポップなサイト、動きに合わせたギミックを出したいとき向け。
2. 3D動画
- Blenderなどの3Dソフトで作ったものをmp4の動画で書き出し、サイトに貼る。
- ライティングやピント合わせ（わざとピンボケさせたり）など、表現力が高い。
- マウスの動きなどに合わせた仕掛けはできない。ただ再生するだけ。
- 重厚感、リアルさ、雰囲気重視のとき向け。
今回は「2. 3D動画」がぴったり当てはまってたので、動画で行くことに決めました。
…あ、要望の1つ「できればマウスで何か動きたい」は今回は断念です。（それより信頼/安心のほうが大事だから…）
モーションの効果・気をつけた点
特に気をつけたのはこの3点。
- カメラのフォーカス（雰囲気づくりのためにわざとピンボケさせる）
- ライトの位置、強さ、サイズ
- カメラの動くスピード
1. カメラのフォーカス（雰囲気づくりのためにわざとピンボケさせる）
スマホで写真を撮る時、奥や手前をわざとぼかす手法は有名ですよね。3Dでもそれをやるとぐっとリアル感、質感が出ます。「やりすぎ」と「やらなすぎ」のバランスがちょっと難しい？
2. ライトの位置、強さ、サイズ
ライトは「位置」「数」「光の強さ（まぶしさ）」「半径（光のサイズ）」「光の色」…を自由にいじって配置します。ライトを1つ or 複数置いて「いい感じ」に見える角度、位置を探ります。同時にできる影のことも意識します。これは美術・デザインセンスがちょっと要りそう。
3. カメラの動くスピード
ロゴを色んな角度から、カメラを動かしながら見せます。ロゴは動かさず、カメラだけが動いています。遅すぎても早すぎてもNGで、スピードの緩急の付け方も大事なので、慣れないうちはちょっと難しいかも？
まとめ
今回の3Dアニメーションが社内外問わず好評で嬉しいです。一見ハードルが高そうな3Dですが、差別化もできるし学習コストを掛ける価値は大いにアリですね！
