ドットを利用した表現が秀逸！ 化粧品製造のプロセスをサポートする J-Beauty Technology Platform のウェブサイト
化粧品製造系の事業をサポート
今回ご紹介するのは J-Beauty Technology Platform という化粧品を製造するプロセス全体をサポートしてくれる組織のウェブサイトです。
私は化粧品を製造するというビジネスに関わったことはないのですが、実際もしそういう事業を行う際に、誰に、どのように依頼をすればいいのか、どれくらいの費用が掛かるのかなど、正直まったく想像がつきません。
今回紹介する J-Beauty Technology Platform はそういったところをトータルにサポートしてくれるコンサルタントのような感じなのかなと思います。
リンク：
TOP | J-Beauty Technology Platform
微妙な濃淡の変化がおもしろい
今回のサイトでは、演出上の表現にドット模様が効果的に用いられています。
ドット模様って、アパレルの世界などでは水玉模様と呼ばれたりもするかなと思いますが……
今回のサイトの表現的には、水玉というよりは漫画のトーンのような、ドット模様が密集することで生まれる濃淡を活用した表現形態と言えそうです。
トップページのところは、そのドット模様を用いた表現がもっともわかりやすく表れている場所と言えるでしょう。
画面全体の背景に Canvas 要素があり、そこに無数のドットが描かれることで独特な風合いのビジュアルを実現しています。
画面の右側に化粧品のシルエットが見え隠れするほか、うっすらとサークルというか、弧を描くような感じで赤いラインが現れたり消えたりしています。
赤いライン状の部分はスクロールしても引き続き見えている状態になり、絶えず模様が変化する様子を見ることができます。
静止画のスクリーンショットではちょっとわかりにくいかもしれませんが……
実はドット模様には、赤いタイプとグレーのタイプの２種類がありますね。
グレーのドットのほうは全体に比較的まんべんなく配置されているというか、すべての領域に対して均等に位置しています。それぞれのドットが大きくなったり小さくなったりすることで、微妙にですが濃淡が変化しているんですよね。
かなりコントラストが低いグレーのドットなので、存在感はそこまで主張してくる感じでもなく、かなりさりげない濃淡の変化です。ただ、さりげないとは言っても、もしこのグレーのドットがなかったらかなり印象は違う（もっと味気ない感じになるだろうと予想）と思います。
派手という感じではなく、かなり落ち着いた印象の演出ではあるのですが、濃淡の表現の仕方や絶えずアニメーションし続ける風合いも見事で、かなり完成度の高い演出だなと個人的には感じました。
先程も書いたのですが、実は画面全体にうっすらと見えているグレーのドットがかなり重要だと思います。もしも赤いドットで描かれるオブジェクトだけで演出が組まれていたら、妙に浮いた演出になるというか、まったく違った雰囲気に仕上がったんじゃないかなと想像します。
デザイン的にもかなりしっかりと考え抜かれており、レベルの高い実装だと思いました。
ぜひチェックしてみてください。
