日本酒メーカー白鶴酒造から発売された、振って飲む新感覚のゼリー果実酒「ぷるぷるスパークリングゼリー」のウェブサイトです。

[ via ぷるぷるスパークリングゼリー | 白鶴酒造株式会社 ]

html5のcanvasアニメーションをふんだんに使い、画面のいたるところでぷるぷるとした心地よいアニメーションが使われています。

タイトルのぷるぷるという文字も定期的にぷるぷると動いています。（ここはcanvasアニメーションではなく、javascriptでpositonやrotationを制御しています。

スパークリングの表現として、炭酸を模したカラフルな水玉が背景でアニメーションしています。

円形のリンク画像はcanvasにより形状が制御されており、ぷるぷるとしたアニメーションが施されています。
マウスオーバーした際のプルっという動きにも心地よさがありますね。

商品の詳細は特設サイトから白鶴の通常ページへと繊維します。特設ページとデザインテイストは異なるものの、日本酒メーカーとしての伝統とモダンなウェブデザインを両立した美しいサイトです。

スマホ版ではぷるぷるとしたアニメーションはもちろん、「振って飲む」という特徴にちなんでスマホを振ることで画面を遷移させるギミックが用意されています。
特設サイトならではのリッチな表現で、サイトを印象付ける役割を果たしています。

各セクションはモーダルウインドウで表示されるなど、PC版とは大きくことなるサイト構成になっています。

ウェブサイトの”リッチな表現”といえば、やはりアニメーションは押さえておきたいところ。
アニメーションGIFや動画ファイルももちろん有効ですが、canvasを使ったアニメーションを使うと、画像や動画を用いるよりも少ないファイルサイズで綺麗な描画が可能です。
画像・動画ファイルに比べると、制御は少し難しいところもありますが、是非自由に扱えるよになっておきたいですね！

[ via ぷるぷるスパークリングゼリー | 白鶴酒造株式会社 ]