あらゆるものに対する心づかいが伝わってくる化粧品メーカー POLA のスペシャルサイトが素晴らしい手触り

doxas : 2021-11-09 13:25:00

創業当時から受け継がれるもの

今回ご紹介するのは、化粧品メーカーとしておなじみの POLA（ポーラ）のスペシャルサイトです。

ポーラというと化粧品や美白用品などのイメージが強いですが、そもそも創業のきっかけは、創業者である鈴木忍さんが妻の手荒れを直したいとハンドクリームを作ったことに由来するんだそうです。

そういった創業当時の逸話とも関連するのだと思いますが、POLA では「We Care More.」と題し、あらゆるものに対する心づかいやケアを行っていくという理念を掲げています。今回のサイトではそういった一連の取り組みがウェブの実装として上手にまとめられています。

今回のサイトは、コーポレートサイトというよりは特設サイトに分類されるページだと思うのですが、キービジュアルがそのままインタラクティブな WebGL コンテンツで作られている、シンプルな構造です。

WebGL で実装されている部分に関して言うと……

大量のオブジェクトが等間隔に並び、クリックしてホールドしたままカーソルを動かす、いわゆるドラッグ操作を行うことで上下左右に無限にスクロールできる空間となっています。

並べられているオブジェクトは、それぞれの項目を象徴するアイコンのような役割・外見になっています。

１つ１つの項目それぞれになにかしらのタイトルが添えられていて、さらにそれを選択（クリック）することで、簡単な説明文も表示されます。

これらの並んでいるアイコンは、いずれも POLA が取り組んでいる様々な事業・活動を表していて、社会貢献を中心とした多彩な内容が含まれています。

すべての活動に対して「なにかをケアする」という形の文脈が用いられていて、その対象は本当に幅広く、また数も多いです。

なかには特定の県や地域に関連したものもあり、これだけ様々な活動をしているというのは単純に驚きますね……

またこの上の画像を見ると、等間隔に並んでいるはずのアイコンが大きく歪み、また隊列も崩れているのがわかるでしょうか？

今回のサイトの WebGL 実装部分では、アイコンがユーザーの操作に対してかなり柔軟な反応を見せるように実装されていて、カーソルをホバーさせた場合や、あるいはドラッグ操作をした場合などに、まるでバネのように弾みます。

ホイール操作を行ったときや、クリック操作を行ったときにも、それらのバウンドするような動きがそれぞれに発生するため、全体として見たときにすごく複雑な動きになっています。

にもかかわらず、どのような操作を行ってもそのさわり心地はすごく優しくて、効果音もポップな感じでとても気持ちのいいコンテンツに仕上がっています。

WebGL を使ってなにかを表現するにせよ、SVG や Canvas2D でそれを行うにせよ、触って気持ちよいフィードバックが得られるようにコンテンツを実装するには同じような難しさが伴います。

WebGL はたしかに描画のパフォーマンスや表現力という意味で優れているとは思いますが、もしこれが簡単に SVG で表現できるなら、無理に WebGL で実装する必要は無かったりもすると思うんですよね。

ただ今回のサイトの場合は、おそらくオブジェクトの数がやや多いこと、また各オブジェクトに対して適用されているエフェクトの表現力の関係から、WebGL が採用されているのだと想像します。

一見シンプルなコンテンツのように見えますが、細部にまでこだわったインタラクションは本当に素晴らしい質感を実現しています。