35.COSCOS サイトレビュー

“なりたい”を応援するコスメブランド | COSCOS(コスコス)

なりたいを応援するコスメブランド、COSCOSのブランドサイト。コスメブランドのサイトらしくおしゃれでトレンド感のあるWEBサイトです。グラデーションカラーが美しさが印象に残ります。コンテンツはすっきりとまとまっていてみやすいです。

目的
・ブランド認知度を高める
・商品を購入してもらう
・情報の提供

ターゲット
・10代後半〜20代前半
・女性
・コスメが好き
・トレンドに敏感

印象
おしゃれ、トレンド、かっこいい、かわいい、綺麗

キャッチコピー
FIND NEW ME　“なりたい”を応援するコスメブランド COSCOS

特徴

余白
余白は狭め。

配色

配色はピンクから紫、青、黄色のグラデーションがメイン。インスタグラムのような若い女の子向けの配色です。アクセントに黒が入っているため、ただかわいいだけではなく引き締まった強い印象も感じられます。

またメインビジュアル右下のボタンを押すと配色が大きく変わり、ベースカラーが黒になったかっこいい配色に変化します。とても素敵なアイデアなので、ぜひ一度サイトの方をご覧ください。

フォント
'Noto Sans JP'　日本語
Inter　英語　Google Fontsから使用
Interは以前レビューした他のサイトでも使われていました。Robotoに近いシンプルなサンセリフ体で、使いやすいフォントです。このサイトでもうまく馴染んでいます。

メインビジュアル

メインビジュアルはグラデーションが背景のコスメ画像の上に、白文字のキャッチコピーが書かれています。キャッチコピーは文字が白色なので可読性が悪くなってしまいそうですが、背景画像にピンク色のマスクがかかっているため、読み辛いとストレスを感じることはありません。
左上にロゴマークが配置されていますが、背景の四角がメインビジュアルの上に来ているのは珍しいですよね。ブランドサイトということもあり、よりブランド名を覚えてもらうための工夫なのかなと感じました。

左下のボタンを押すと、配色が白メインから黒メインのかっこいいデザインに変わります。メインビジュアルも合わせてコスプレーヤーの方の写真に変わり、よりかっこよさが強調されたサイトになるところがとても面白いです。「なりたいを応援するコスメブランド」のキャッチコピーにもぴったりなアイデアですね。

気づいたポイント

・コンテンツ
メインビジュアル→コンセプト→商品カテゴリー→ファンデーションの選び方、公式オンラインショップ特典、送料無料サービス、オンライン会員限定特典
→ニュース→オンラインショップ→LINEアカウント→フッター

・「なりたいを応援するコスメブランド」のキャッチコピーの通り、さまざまな「なりたい」自分を表現するため、サイトも本来のかわいいサイトだけではなく、かっこいい黒メインのverも制作されている。
他のサイトでこういった切り替えは言語以外に見たことがなかったので、コンセプトを表した面白いアイデアだと思った。

・背景にコスメの質感を表すテクスチャを入れて、その上の白のマスクをかけている。
→他の商品でもテクスチャを装飾としてナチュラルに使えそう。

・ボタンをホバーすると色が変わり、線が左右に移動することでかっこよく新しい印象になる。

・商品画像をホバーすると写真の大きさは小さくなり、写真の対象物が拡大されて大きくなる。写真が小さくなることで、より対象物に近付いたような感覚になる。

・NEWSをホバーすると背景が背景が薄い灰色になる。NEWSではあまり見たことがない動きだが、薄い色にすることで他にもいろいろな場面で使えそう。

・若い女性をターゲットにした商品なので、フッターのSNSアイコンを大きめに配置している。

感想

今回はコスメブランドCOSCOSのサイトレビューを行いました!可愛いだけではなく、かっこいいサイトでもあり、「なりたいを応援するコスメ」のキャッチコピーを上手に表現したサイトだなと感じました。
商品もとても魅力的で、これから注目していきたいブランドになりました。よかったらサイトの方も覗いてみてください^^