■ 概要 Overview
ポカリスエット イオンウォーターの特別開設されたキャンペーンサイト
■ ファーストビュー Above the fold
ロゴ
グローバルナビゲーション
サイトタイトル
キービジュアル
■ ターゲット Target
消費者全般
■ フォント Font
Noto Sans JP
16px,28px,30px,40px,44px,48px
■ カラー Color
<B>#FFFFFF
<M>#009BDF
<A>#0F2C6C
■ デザインの特徴 Design features
キービジュアルはイオンウォーターのブランドカラーと同じブルーと同系色、ホワイトの４色のみを使用し、地と図、線をシンプルに構成した形状のイラストがアニメーションで動いている。真ん中に配置されたキーワード「お風呂の前にも」や「湯」はオリジナルのタイポグラフィと思われ、アニメーションと相性の良い丸みと尖りの両極端の要素を持ち合わせ、温泉マークのような象形的な要素が組み込まれるなど、ユーモアがあり、その文字ひとつでページの世界観がイメージできる。
スクロールイベントが全体に効いているため、ゆっくり読み進めなければページの最後に辿り着けないようになっていて、スクロールを進める中でイラストがアニメーションで展開したり、動画が埋め込まれていたりと、全体的にストーリー仕立てになったページを進行するようになっている。
サウナと水風呂を数分ずつ交互に利用し、交感神経と副交感神経、または血流を急激にコントロールした後の休憩中に起こるいわゆる「ととのう」にかけた「ととの湯」という造語は、おふろの後に水分補給しましょうというしっかり根付いた心がけを転用し、お風呂の前に体を整えるつもりで飲みましょうという意味合いでつかわれている
これらのキャンペーン内容の軸になるコンセプトやメッセージを楽し気なイラストや文字で表現し、音楽や動画などのコンテンツをところどころに仕掛け、飽きさせないよう工夫されたデザインになっている。
テキスト文字は全てNoto Sans JP
可読性が高く、ゆったりとした雰囲気に合うフォントを選び、遊びの多いページでありながらも、周知したい目的を達成させるためのポイントはしっかりおさえたデザインと言える
https://pocarisweat.jp/hydration/totonoyu/
Webサイト100選 まであと22！