web制作にあたって素材としてご提供いただいたCIやRnDの習作ムービーから全体のコンセプトを考えました。
すぐにSFっぽいイメージがおもいうかび、いつも通りAdobe Xdをつかいデザインに着手しました。
途中、こちらで以前に作っていたwebページなども見ていただいたり
作業中に気づいた確認事項のやりとりをしたりしつつ10日〜2週間ほどを要しました。

最初からwebpack(5)を使って進めるのは初めてですが
わからないことは色々ありつつも、大きな問題はほとんどありませんでした。
コードの共用化やメールフォームを実装する際にphpを使いたかったので
webpackを使いつつphpのビルトインサーバーをたてるとかhtml内のphpを読めるようにする
といった辺りは結構調べる必要がありましたが
旧来のビルトインサーバーを流用したりroutor.phpなどつかい進めることができました。

RnDや習作のなかにパーティクルの表現がカッコいいモノがおおくあり
それらとのバランスで動的なライトトレイルにしたいと考えました。
映像でつくるのは方法もいくつか思い浮かぶのですが
ファイル容量も嵩みランダムループのような形で再生するのはほぼ無理ですし、
新しいことをするチャンスでもあるのでThree.jsを使ってみようと思い
自分のイメージに近い表現を探し、リファレンスしつつ現在の完成形に持っていきました。

Infinite Lights

見る回数分の違った表情と言いますか画面をみていただけたらよいなと考え
トレイルの位置や色はもちろん、カメラ画角や背景色なども数種類を用意して
ランダムになるよう設定してあります。

最終チェックの段階で
「アクセスしてくれた方の印象に "スティミュラスイメージ"という社名が残るようにしたいので
FirstViewにカタカナの社名を入れて欲しい」
という要望をいただきました。
確かに印象として薄いかもなーと納得しつつ、現状の雰囲気を損なわないようにもしたいので
サイズや色などの単純インパクトを狙うのではなく アニメーションで目を引く方法を検討しました。
手法としてはオーソドックスにcssやgsapでアニメーションをつけることも考えましたが、
ややちょっと弱い感じがするので
3Dで作成し3D的な回転をすることで奥行き(厚み)方向の面をみせ、
その部分を差し色のアクセントとしてチラチラとみえるような
さりげないけれどきっちり認識できるような効果を狙ってみました
できるだけ露骨で下品で野蛮な表現はさけたかったのです。

Cinema4Dで3Dアニメーションを作成し フレームをレイヤーとしてaiでエクスポート。
このファイルはそのままだと頂点が全てアンカーとして渡されていて
結構なファイル容量なのでIllustratorでスクリプトをつかってリダクション・エクスポート。

aiスクリプトに関するブログエントリー

最終的にそのaiファイルをAfterEffectsで開き、シェイプレイヤーに変換後
見せ間などを含めアニメーションを調整、
シェイプコンテンツの名前などを最小化してBodymovinでlottieとして出力。
さらに、アニメーションデータのjsonをpythonツールでminify。
ここまでの経過で、6.5MBだったaiのデータが498KBのjsonになっています。
映像であればRAWの6.5MBでもまったく気にしませんが
webページで読み込むと前提でかんがえると
様々な閲覧環境に配慮し、ちょっとでも軽い方がよいのは当然なので効果は小さくないと思います。

実装後は、スクリプトを追加し
lottie内のsvgの色を変更したりしてみました。
lottieはsvgによるパスアニメーションで
こういった色変更なども単純にcssでもできないことはないでしょうし
さらにはサイズに関係なくエッジが鈍ったりジャギーが発生したりということがないので
微妙で特殊なシェーディングがない場合はとても有用ですね。
容量的にはアニメーションgifなんかと変わらず(それよりも軽いのでは？)画質は
理屈としてはサイズに関係なく無限に担保できるという素晴らしい技術ですね。



lottieに関しては、CI(会社ロゴ)が液が垂れ落ちそうな目のようなグラフィックなので
即した形のループアニメーションと、形状をモーフィングするようなループアニメーションを
AfterEffectsのシェイプレイヤーで作成しています。

日常的な更新箇所は多くないので自社で行いたいという要望もあり
コードを直でいじるよりは、難易度が低いと考えて
jsonで行うように設計しました。
これに関しては、AfterEffects Scriptやpythonでも実績ある手法なので
特に問題なく実装できました。
あとは、記述ミス、記法エラーなどで更新ミスらないことを祈るばかりです。