■背景

POLAは2029年に創業100周年を迎えます。同社の中期計画である「POLA2029年ビジョン」を伝えるため、もともとは紙で印刷・配布されるブランドブックの制作が進んでいましたが、POLAの全社員・全ビューティーディレクター・すべての海外拠点関係者に届けたい、という及川社長の想いを受け、Webサイトをつくることになりました。

制作にあたって、幅広い年齢層・属性のターゲットに対して誰一人置いて行くことなく、それでいて強く印象に残るWebならではの新しい体験が必要とされました。

■コンセプト

株式会社もりの原野守弘さんや、株式会社ライトパブリシティの山根哲也さんたちの考案した企画をいかに魅せるかがすべてでした。

・人をケアするだけでなく、ケアを社会へ、地球へ拡張するという考え方を端的に表明するタグライン「We Care More.」
・創業者が妻の手荒れを気遣いハンドクリームを自作したエピソードにはじまるマニフェスト
・株式会社浅葉克己デザイン室の浅葉球さんのアートディレクションによる、MACCIUさんの美しいイラストレーション

Webサイトではこれらを「絵巻物」のように縦に交互に配置し、スクロールするだけですべての情報にアクセスできる構造にしています。同時に、インタラクションに応じた有機的なアニメーションにすることで、人の温もりを感じさせるかのような手ざわり感あるWebサイトを目指しました。

■手法、特徴

アニメーションの使い方・使い所については、ユーザーに「どう感じてほしいか」をイメージしながらかなり細かく設計しています。以下、その“あざとい”ポイントをいくつか紹介します。

表示した瞬間にイントロアニメーションを見せるサイトは多いですが、本サイトではフェードであっさり表示させています。これは一番最初にスクロールした瞬間の「触ると動く！」という驚きを最大限に引き上げるためです。

また、ひとつのまとまった文章であるマニフェストの間に、恣意的にイラストを挟み込んでいるので、「ページ」という分断を感じさせないということも意識しました。スクロールの途中で、上下にテキスト／その間にイラストがはさまるような中途半端な瞬間をあえてつくったり、テキスト自体も一行ごとにバウンスさせたりすることで、イラストとテキストを柔らかく馴染ませています。

マニフェストをしっかりと読んでもらうため、間にはさまるイラストのモーフィングは抑えめに、一方で後半は派手めなモーションが続いてクライマックス感を出しつつ、飽きさせないよう全体の起伏をつくっています。

最後はイラストが奥に消えていくと同時に冒頭の手が両側から登場することでなめらかにループします。無限ループによって、スクロールだけですべての操作を完結させながら（「トップへ戻る」ボタンを置くことなく）、体感する時間を長くすることを狙いました。

肝であるイラストのアニメーション自体について、モーフィングの大きい動きはAfterEffectで作成し、それをLottie.jsでSVGアニメとして読み込み、スクロール量に応じてシークしています。止まっているときには、そのSVGパスの頂点ひとつひとつを揺らすことで、ふわふわとうごめかせています。これらの合わせ技により「動画なのに触れる」という少し変わった体験をつくっています。