概要

• 業界/業種：食品系

• テイスト：さわやか/誠実/信頼感

• 制作会社：Digital Garage Inc./Re:design

第一印象

FVの流れる商品とマウスカーソルを動かすと波紋が現れるエフェクトが清涼感があって素敵。「水と生きるSUNTORY」が流れるエフェクトは水流をイメージしているのだろうか？コンセプトである「水と生きる」にふさわしい清涼感あふれるサイトに仕上がっている。

ターゲット・目的

商品情報を知りたい方や、商品を日頃買っていてキャンペーン情報が知りたい方など、一般消費者に向けて企業としての信頼感を与えるためのサイトではないかと考える。企業情報や文化、サステナビリティの取り組みなど、大企業だからこそボリュームのあるサイトマップになっている。

使用フォント

• 日本語：ヒラギノ角ゴ W3（weight：400/600/700）

• 英語：なし！

英語の見出しやボタンなどついやってしまいがちだが、そこに頼らずとも古臭くならず、新鮮さがあってすごいと思った。

配色

• ベース：＃FFF（白）

• メイン：複雑な青いグラデーション/＃1476cb（青）

• アクセント：＃FFEF5D（黄）

• フッター：＃EDF4F7（水色）

• 線：＃CCC（グレー）

• フォントカラー：＃000（黒）/＃FFF（白）

デザインポイント

• MVで使用される商品イメージは影を以下のように表現している。→drop-shadow(20px 20px 20px rgba(0, 0, 0, 0.25)

• 商品に影をずらしながら加えることで、特に高度なテクニックを使わずとも、立体的で奥行きのある演出を行っている。

• MVの動画はかなり軽量化されているが、動き自体はリッチなので全くそれを感じさせず、サイトの軽量化を図っている。

• グラデーションはただの青ではなく、ところどころ黄味を感じる色に変化したり、複雑な色ムラがあり非常にリッチ。

• やってみなはれセクションでは、サントリーという企業をより深く興味をもってもらえるような記事をたくさん用意し、ホバーするとシール？ラベルがめくれるような動きとなっており面白い。

• 商品一覧以外にも今週のおすすめ商品セクションを設けて、さらなる商品の普及を行っている。

• 商品一覧はたくさんあるゆえにスライダーで紹介し、ボリューム感をさらに演出している。

• キャンペーンセクションを目立たせるように、青いグラデーション背景上にマウスカーソルを動かすと波紋が現れるエフェクトを実装している。