ホーム»Web Gallery»食品・飲料»

大塚製薬のポカリスエット公式サイト

 

大塚製薬のポカリスエット公式サイト

カテゴリ:食品・飲料   日付:2011年5月24日

皆さんご存知の「ポカリスエット」の公式サイト。ポカリスエットの歴史やカラダと水の深い関係など、情報満載だそうです。

ポカリスエットと言えば青色!ということで、サイト全体が青色で統一されていて、爽やかな印象が前面に出されたデザインになっています。青空の写真を背景に白色と青色のコントラストがとても爽やかな印象で、ポカリスエットという商品を連想させるのにピッタリなデザインですね。

フラッシュ部分は一番上にある横長のグリッドだけ。他のグリッド部分はコンテンツが開くと下からスライドして表示されます。この動きはJavaScriptで制御されていて、見ていて気持ち良いですね。

現在ヨーロッパで活躍されているサッカーの長友選手が出演されているテレビコマーシャルや、その他コラボコンテンツがこんな↑感じで紹介されています。レイアウトはシンプルで、左部にメニュー、右部にコンテンツというのが、誰がみてもわかりやすく、ユーザビリティーも高いことでしょう。

CM動画はもちろん閲覧することができますが、その他に水分普及についてのPDF資料を閲覧することができます。そのPDF資料の中にも、いたるところで長友選手が出現してくれます。長友選手のファンの方にも楽しめる良いコンテンツですね。

ポカリスエットが行ってるキャンペーンは、こんな↑感じで紹介されています。他コンテンツと同様にシンプルなレイアウトで紹介されていますが、ドリカムや長友選手の写真に目が引かれてしまい、ついつい読みいってしまいます。大手企業だからこそできるキャンペーンですね。私もこんな方々と一緒に仕事をして、自分なりのコンテンツをつくってみたいですね。

最近、角丸をデザインで入れ込む場合や、背景透明の画像を使用する場合、pngファイルをよく見かけます。いまだにIEではキレイに背景が透明にならない場合があります。このポカリスエットのサイトでも、角丸を表現するためにpngファイルが使用されています。これはもう一般的な対応方法として「あり」ということなんでしょうか。

トレンドを追いつつ、良いサイトをたくさん作って行きたいですね。

この記事のソーシャルブックマーク

この記事のトラックバック

この記事にコメントを残す