今日のデザイン#081 canvasアニメーションを使った”ぷるぷる”感がすごい「ぷるぷるスパークリングゼリー」

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

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

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

001

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

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

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

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

003

004

006

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

写真 2015 04 09 0 06 43

写真 2015 04 09 0 07 08

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

写真 2015 04 09 0 08 01

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

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

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です