和の情緒を感じさせる淡い表現が見事！ 創業明治１２年という長い歴史を誇る青柳総本家のウェブサイト
優しい風合いの演出とビジュアルが素敵
今回ご紹介するのは、名古屋にある明治１２年創業の老舗お菓子メーカー、青柳総本家のウェブサイトです。
日本の歴史のある企業さんのサイトということで、和のイメージを強く感じさせるデザインですが、WebGL を利用したインタラクティブな表現を取り入れており、かなりモダンな雰囲気も同時に感じられるサイトになっています。
全体的に淡い色遣いと、柔らかな演出で、雰囲気を統一した見せ方がなされています。
墨の滲むような演出など随所にこだわり
今回のサイトは、トップページ部分から WebGL が使われていて、落ち着いた雰囲気ながら演出は結構攻めた使われ方をしていますね。
トップページの部分はマウスカーソルを動かすと、ページ内に配置されているイラストがそれに反応してインタラクティブに動きます。
また、カーソルがイラストにホバーした状態になっていると、水の波紋のような絵が重なるように浮き出してきて、その部分は微妙にイラストのほうにも歪みが発生するようになっています。
本当に水面越しに見ているかのような、透明感が気持ち良いビジュアルになっています。
上の画像の、やや紫色っぽい円の部分が、水のような効果の適用されている部分です。
ちょっと静止画では、わかりにくいかな……
今回のサイトは、全体的にこの静止画では伝わりにくいタイプの演出が多いです。でもこれはけして悪い意味で言っているのではなくて、とにかく淡くて、柔らかい、さりげない感じの演出に終始しているのですよね。
たとえば以下の画像も、瞬間を切り取ってしまった画像ではわかりにくいのですが、墨が和紙に染み込んでいくような、微妙な演出の瞬間だったりします。
これは、ぜひサイトに実際に訪れて、ご覧になってみてください。
現在は、こちらのメーカーでは洋菓子も作ってらっしゃるようですが、長い歴史のなかではやはり和菓子をつくり続けてきたメーカーさんなのだと思います。
今回のサイトからも、そんな和の情緒が非常に強く感じられます。
とても柔らかい、ゆったりとした空気が流れている感じで、和菓子の美しい写真や手書き風のイラストとも、ぴったり雰囲気がマッチしています。
WebGL を使った 2D 的な表現は、簡単なようで、実は結構難しいものなんじゃないだろうかと思うことがあります。
それはややもすると、わざわざ WebGL でやる必要が本当にあったのだろうか？ ということを感じてしまうからなのかなと個人的には思っています。実際、そういうサイトもあったりしますよね。WebGL ただ使っただけというね……
その点、今回のサイトでは、CSS や Canvas2D だとちょっと荷が重いような、自然でさりげないけれども、ちょっと思わず目を留めてしまうような、そんな演出がなされていると感じました。
透明感のある、非常に綺麗なサイトに仕上がっていると思います。
ぜひチェックしてみてください。
