イラスト＆CSS3アニメーションがオシャレな「キリンハードシードル」サイト

2016年10月 2日

キリンが飲食店向けに展開していたお酒「キリンハードシードル」を、家庭用にこの秋発売を開始しました！
ハードシードルも美味しいですが、そのサイトがまたオシャレなんです。
メインイラストも、どこかで見たことがあるような...？？？

ぜひ、ご覧になってみてくださいね。

シードル豆知識

シードルというのは、林檎を醗酵させて作られたお酒のことです。果実酒とか、林檎のワイン、といえばイメージしやすいかもしれませんね。世界中で飲まれているシードルですが、「シードル（cidre）」という呼称はフランスのもの。イギリスでは「サイダー（cider）」、スペインでは「シードラ（Sidra）」と呼びます。大抵は発泡性であることが多く、「ハードシードル」も林檎のスパークリングワインという感じで爽やかにいただけます。

サイトの発砲した泡はCSS3で表現

「キリンハードシードル」の商品サイトは、発砲した泡のイメージに合うように、画面の背景に、円形のイラストが下から上へと柔らかく上がっていくデザインになっています。そんなふわふわの泡は、CSS3のtransformプロパティで表現されています。

transformプロパティは、要素に2D変形か、3D変形をさせるためのプロパティです。具体的には、要素に移動、縮尺、回転、傾斜などの変形を適用することができます。

今回の泡のような表現だけでなく、マウスカーソルを乗せたときに大きさが変わるようなボタンを作るのにも使われています。 jQueryやJavaScriptを使っても、同様のアニメーションを作ることもできますが、CSS3を使う方が細かい動きの再現ができます。 transformプロパティの仕様が知りたいという方は、下記を参考にしてくださいね。

transformプロパティ　参考URL

HTML5やCSS3などでアニメーションを加えることで、よりイラストやWebデザインが引き立てられて、多彩な表現ができますね。今Webデザインを勉強中の方は、気になるアニメーションのサイトがあったら、どうやって表現をしているのか、ソースコードをチェックしてみるといいかもしれません。
この秋は、ぜひぜひアートやデザインの勉強と一緒に、HTML5やCSS3といったソースコードのスキルもワンランクアップしましょう！！

皆さまのご来校、お待ちしています♪

本ブログは、日本初Web専門スクールのインターネット・アカデミーの講師が運営するWebメディアです。スクールの情報はもちろん、最新のWebデザイン・プログラミング・Webマーケティングについて役立つ情報をご紹介しています。