あえて印影付けされていない質感と柔らかいモーションが素晴らしい POLA 新聞広告のウェブサイト
心に響く、そんなウェブサイト
今回ご紹介するのは、POLA が母の日の新聞広告と連動する形で公開しているウェブサイトです。
「すべてのお母さんに、ありがとう。」というタイトルからもわかるとおり、母の日に際してシンプルながら強いメッセージ性を持ったコンテンツとして公開されたものだと思います。
実際にウェブサイトを見てみると、なんと言ったらいいか……
まるで１つの映像作品を見ているかのような、不思議な体験ができるサイトとなっています。
リンク：
すべてのお母さんに、ありがとう。| ポーラ公式 エイジングケアと美白・化粧品
ループする構造も面白い
POLA と言えば化粧品メーカーというイメージが強いかと思いますし実際主たる事業は化粧品の開発と販売だと思いますが、今回のサイトには、そういった製品に関するコンテンツは一切ありません。
あくまでも、メッセージとそれを彩るグラフィックスが主役です。
母の日に際して公開されたコンテンツで、コンセプトがかなりしっかりしていますね。
静止画で見ると平面的なイラストのように見えるかもしれないですが、描画自体は 3D 的な奥行きを持ったシーンになっています。
あえて印影を付けずに着色されたイラスト調の 3D モデルは、完全なベタ塗りというわけでもなく、微妙にグラデーションが乗っていたりもするのですごく存在感がありますよね。
MACCIU さんというグラフィックデザイナーさんが手掛けたイラストと雰囲気を合わせたシーンづくりが徹底されており、3D なのに 2D 的でもあるという不思議な質感に仕上げられています。
サイト内はスクロールに連動してシーンが次々に切り替わっていくのですが、花が開く（咲く）モーションを始めとする各種のアニメーションも全体的に優しいイージングとモーションで彩られており、完成度が高いですね。
たとえばスクロールするごとに長く伸びていく花の列は、ゆったり流れるように全体の軌道が動いているんですよね。スクロール操作をいったん止めて、じっくり観察してみるとその有機的で心地よいアニメーションの質感にびっくりするのではないでしょうか。
また、一番下までスクロールしたら冒頭の状態に戻るようになっているのも面白くて、複雑なカメラワークというかシーン遷移はすごく手が込んでいます。
これらのモーションは Blender である程度まで作り込まれたものを JavaScript 側で補間したり制御したりしているのだと思いますが、すごく丁寧な作り込みで尖った部分がまったく感じられないのが本当にすごいです……
サイトを制作された mouont inc. の Twitter には、メイキングの様子に言及したツイートが上がっています。（メイキングについて触れたツイート）
こういう形で制作の裏側を公開してくれているというのは、すごくありがたいですよね。
まあ正直なところ、これらの公開してくださっている情報を見ただけでは推し量りきれない部分の仕込みがすごすぎて、これらの公開情報を見ただけでは到底真似できるような実装ではないんですけどね……
本当に尖った部分が無いというか、曲線的なイラストのテイストを見事に引き継いだモーション付け、イージング、間のとり方、空間の余白など、とにかく全体としての完成度が高い実装例だと思います。
ぜひチェックしてみてください。
