淀みが澄み、晴れ渡っていくような独特なトランジションが美しい株式会社 AKARI のウェブサイト

doxas : 2022-10-21 13:05:41

日向当帰茶という神のお茶

今回ご紹介するのは、日向当帰茶というちょっとあまり聞き慣れない名前のお茶を扱う日本の企業のウェブサイトです。

誤解を恐れずにざっくりと分類するならいわゆる薬膳茶のようなものだと思うのですが、サイト内に書かれていることを読んだ感じだと、ヒュウガトウキという薬草（野生のものは絶滅危惧種に指定）を日本の一部の農家さんが栽培しており、それを丁寧に仕込んだお茶を販売しているかたちのようです。

WebGL の使われ方は 2D 系ですが、他ではあまり見たことがない独特なエフェクト表現が用いられています。

今回のサイトには、日々の体調をこまめに整えて、病気になってしまう前に未然に防いでいくというアプローチで様々なタイプの商品が紹介されています。

悪いものが取り除かれ癒やされていく、そんな様子をどのようにビジュアルで捉えていくか。その１つの答えが今回のサイトに実装されているような見せ方なのかもしれません。

トップページから下層ページまで、統一してこのエフェクトが使われています。

やや暗めの画像なのでちょっとわかりにくいかもしれませんが……

水平方向に細かく揺らぐようにディストーションが掛かった状態から、徐々に写真の全体像が見えてくるような、言葉で説明するとちょっとうまく伝えるのが難しいタイプのエフェクトになっています。

歪みの部分にはうっすらと暗い色も塗られているので、本当に黒い霧というか靄みたいなものが晴れていくかのように見えますね。

あえて黒っぽい色を使っていることで、逆に透明感が出ている感じがします。

この上の２枚のスクリーンショットを見比べると、やや効果がわかりやすいでしょうか。

画像が表示されるその瞬間、まず最初は水平方向にずれたようにディストーションする効果と黒っぽいラインのような色の効果が強いため、いかにも「整っていない状態」を連想させるような外見になっています。

徐々に黒い靄が晴れていき、それと共に画像の歪みが消失して焦点が少しずつ合っていくような感じに変化していくので、すごく製品のコンセプト（企業の掲げるコンセプト）にマッチした表現になっていると思います。

エフェクトが水の波紋のようにも見えますし、お茶というテーマにすごくあっていますよね。

シンプルな配色と余白を意識させるデザインで、とても洗練された印象に仕上がっています。

さらに、静かな余韻を感じさせるような WebGL 実装がそこに組み合わせられることで、派手すぎないけど思わず視線を奪われるような、そんなサイトになっていると個人的には感じました。

よく観察してみると、最初に発生したエフェクトが収束したあとも、スクロール操作に応じて微妙にスケールが変わるようなトランジションも仕込まれていて本当に抜かりがない感じになっています。