小さな動きで涼しさが表現されたWebサイト3選
2015年7月28日
暑い日が続いていますね！ 今日は、暑い夏にこそ好印象な、涼しげな表現を使っているWebサイトを3つご紹介したいと思います！
for COFFEE LOVERS | TULLY'S COFFEE
http://www.tullys.co.jp/cpn/coffeelovers/index.html
「for COFFEE LOVERS」は、タリーズコーヒーの特集コンテンツです。 このサイトの背景画像はPCでアクセスすると動画になっています。（スマホは静止画なのでご注意を） 静止画でもパッと見た目涼しげな画像ではありますが、動画は、バッグで風に揺れる観葉植物の葉や、コーヒーで氷が少し解ける様が、涼しげで、そしてアイスコーヒーが飲みたくなる"爽やかさ"が表現されています。
雪見亭
今年7月にオープンしたばかりのスイーツのお店「雪見亭」のオフィシャルサイトです。
見た目はかき氷のようですが、このお店のスイーツは独自の製法によって作られた粉雪のような新触感スイーツ。
サイトには、その特長を表すひらひら舞う雪のアニメーションがとても涼しげで、アクセントになっています。 レスポンシブ対応をしているので、タブレットやスマートフォンで見ても舞う雪を見ることができますよ。
Fan accessory | TAKI PRODUCTS
http://www.taki.co.jp/taki_products/008_fan/
扇風機につけることで風にゆられてふわふわ動くアクセサリー「ファンアクセサリー」の商品紹介ページ。
涼しそうというよりは...楽しそう！と言う方が正確かもしれませんが(^^;
夏らしくて楽しめる表現なのでご紹介させていただきます♪
こちらのサイトは、画像の上にマウスを重ねると、写真が動いているように見えます。 でもこちら、実はGIFアニメーションなどではなく、JavaScriptを使ってユーザーのマウス反応に合わせて画像の見える範囲と見え方を調節しています。
それが、まさしく風に吹かれてゆらゆらする「ファンアクセサリー」のイメージにぴったりで、とってもマッチした表現になっています。
まとめ
いずれのサイトも、小さなワンポイントの動きで涼しさを表現していました。
派手なアニメーションや激しい動きよりも、 ちょっとしたささやかなアニメーションや表現の工夫をするだけで、印象の良い"涼しさ"を表現することができます。
ぜひWebサイト制作の参考にしてみてください。
本ブログは、日本初Web専門スクールのインターネット・アカデミーの講師が運営するWebメディアです。 スクールの情報はもちろん、最新のWebデザイン・プログラミング・Webマーケティングについて役立つ情報をご紹介しています。
