株式会社ポーラ「POLA2029年ビジョン」特設サイト

株式会社ポーラ「POLA2029年ビジョン」特設サイト

広告形態

  • CM
  • グラフィック
  • WEB
  • キャンペーン
ポーラ, mount, ライトパブリシティ, もり, 浅葉克己デザイン室, MACCIU,Webデザイン

国内化粧品メーカー・株式会社ポーラ(POLA)が、全社員に向けて中期計画のビジョンを伝えるための特設サイトが、2021年4月に公開されました。制作を担当したのは、Webサイトの企画・制作を中心に、さまざなプロジェクトを手がけているmount inc.です。

オンライン上で通常は感じづらい「手ざわり」や温もりを体感できるWebサイトについて、コンセプトや特徴などをmount inc.のテクニカルディレクターである岡部健二さんにコメントいただきました。

■背景

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

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

■コンセプト

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

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

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

■手法、特徴

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

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

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

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

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

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

スタッフ

エージェンシー/株式会社ライトパブリシティ+株式会社もり
エグゼクティブ・クリエイティブ・ディレクター/杉山恒太郎(株式会社ライトパブリシティ)
クリエイティブ・ディレクター/原野守弘(株式会社もり)
コピーライター/山根哲也(株式会社ライトパブリシティ)
アートディレクター/浅葉球(株式会社浅葉克己デザイン室)
イラストレーター/MACCIU

以下、Webサイト企画・制作
アートディレクター/イム ジョンホ(mount inc.)
テクニカルディレクター、ディベロッパー/岡部健二(mount inc.)
デザイナー/アンドレアス ブライアン ウトゥ、葛西聡(mount inc.)
アシスタントディベロッパー/寺田奈々(mount inc. )
プロジェクトマネージャー/叶野菖(mount inc.)

Comments (0)
Top