CHILL OUT　＃１日１サイトレビュー

CHILL OUT（チルアウト）オフィシャルサイト | リラックスを味わおう リラクゼーションドリンク

【概要】

日本発の瞬間リラクゼーションドリンクの商品サイト

【ターゲット】

・仕事などで疲れている人

・リラックスしたい人

【印象】

・商品パッケージやサイトの配色、質感からして宇宙のような、無機質な感じがした

・「CHILL OUT」は「冷静になれ」という意味であり、サイトデザインが無機質でシンプル、少し冷たいイメージになっている

・画像が3Dでスクロールに少し重みがありヌルヌル動くことで一見、海外のWebサイトだと思った

【構成】

・Home：商品about、store info（ネット通販先リンク）、NEWS

・News

・FAQ

【メインビジュアル】

・フルスクリーン

・中央に大きくサイトタイトルと商品の画像が配置

・サイトを開くと「そろそろ疲れてない？」の文字の表示→サイトタイトルの白抜き文字の表示→商品画像が飛んでくる→サイトタイトルに下から色がつけられる）

・3Dの商品画像がふわふわ浮遊しているのが印象的

・サイトタイトルの上に手書きの「チルする？」の文字に抜け感があり、印象を和らげている

・右上にメニューボタンが配置（開くと背景がボケる）

・MVを見ただけでは「日本発の瞬間リラクゼーションドリンク」ということしかわからないため、どのような商品なのか気になる

【コンテンツ】

・商品画像が3Dのため、サイトに奥行きを感じる。立体的空間の中にいるように感じる

・aboutでは商品の3つの特徴が丸いカードのようなオブジェクトの中に表示される。

・オブジェクトや画像のくり抜きが基本的に丸→商品ロゴの丸と統一している

・スクロールするたびに商品画像があらゆる方向に回転するため、余計に3Dを感じる

・ヌルッとした少しゆっくりめなマウスオーバー

・ナビゲーションの文字のホバーはスロットマシンのように回転する

・背景で流れる文字の速度もゆっくり

・カテゴリ名は薄い文字色で背景に記載されているような配置。主張しすぎず、文字が大きいため地味すぎず

・フッターにはSNSのボタンが配置

【フォント】

・-apple-system

・説明文は23、26pxと全体的に大きめサイズ

【カラー】

・ベースカラーは商品のアルミのような光沢のある質で彩度の低い青緑

・メインカラーは濃い青緑（#0c6170）

・アクセントカラーは白（#ffffff）

・全体的に商品ロゴカラーの青緑と同色または類似色を使用して統一感がある

【レスポンシブ】

SP表示では、

・MVでは商品画像の下にサイトタイトルが配置

・aboutの丸いオブジェクトが画面からはみ出る位置に配置。3つの特徴の文章はオブジェクト内ではなく新たに出るウィンドウ内に表示

・ネット通販リンクボタンやSNSボタンが商品画像と横並び配置→縦並び配置へ

【サイトを通じてどのような目的を達成しているか】

目的：商品の認知と購入

・普段あまり見ない海外風のサイトデザインで興味を引き寄せる

・「そろそろ疲れてない？」「リラクゼーション」「ストレス社会」などの言葉でターゲット（＝疲れている人、リラックスしたい人）を明確化させている。また、言葉で明確化することでターゲットを絞って引き寄せている

・味や成分などの特徴はわかるが、初めての「リラクゼーションドリンク」で未知な部分があるため興味本位で買う人は買う

・疲れを取りたい人で興味を持った人も買う

➡︎結果：目的達成