せろりのセオリー | Webサイト100選

Webデザイン未経験の私が、魅力的で優れたWebサイトを見て考察力、表現力を学ぶ学習サイトです。

N0.59 coscos

■概要

4K/8Kを基準に開発されたコスメのブランディングサイト。

 

■視点

コスメ=女性が使うものではなく、個性の一つとして性別にこだわらず、自分らしさを最大限に引き出すアイテムというメッセージを感じ取ることが出来るこちらのサイトをレビュー。コンセプトの変幻自在を表すようなパステルのグラデーションが印象的。

 

■ターゲット

・コスメ初心者
・若い世代の男女

最近は男性もお洒落でコスメを使っていることもあり、FV右下の切り替えマーク(矢印)を押すと、FVが切り替わるようになっている。男性がコスメを使用している写真が使われていて、SNSやジェンダーレスという考え方の普及により、男性でも自己表現の一つとしてコスメを使うという最近の傾向が反映されているFV。訴求点の一つでもある。

せろりのセオリー/ Webサイト100選 No.59  coscos

せろりのセオリー/ Webサイト100選 No.59  coscos

 

 

■FV

商品の画像をスライドで紹介。ロゴと画像背景に淡いパステルカラーを使用。可愛らしい印象で手に取ってみたくなる。「なりたいを応援するコスメ」というキャッチコピーも、コスメに興味を持ち始めている人への後押しになる。

キービジュアルはヘッダーと左に余白を取って配置。ロゴは左上にキービジュアルと重なるように配置されていている。ロゴとナビゲーションは固定。リニューアルアイテムも固定だが、ある程度のスクロールで消えるようになっている。左下には何枚目の写真なのか表示がある

せろりのセオリー/ Webサイト100選 No.59  coscos

せろりのセオリー/ Webサイト100選 No.59  coscos

 

 

■特徴

若い世代の子でも手に取りやすい印象のパステルを使用していて、ふんわり柔らかい印象。コンセプトである「変幻自在」や「肌への優しさ」が表現されている。

スクロールすると背景に水彩筆で描いたようなあしらいがフェードインで入ってきて、動きが出ることで視線の誘導にも繋がっている。

せろりのセオリー/ Webサイト100選 No.59  coscos

せろりのセオリー/ Webサイト100選 No.59  coscos

 

 

Product Category

コスメのみ写真と手に持った写真交互に配置されていて、手に取ったコンパクト感がイメージしやすい。パステルカラーのグラデーションの背景色を写真とずらして配置することでポップで可愛い印象。詳細リンクを黒ベタの白地にすることで、背景色とのコントラストが際立ち締まった印象になる。

せろりのセオリー/ Webサイト100選 No.59  coscos

せろりのセオリー/ Webサイト100選 No.59  coscos

 

 

配色やあしらいで可愛さや手に取りやすさが十分アピールできているため、写真は丸の切り抜きを使わず各版を使用。きっちりと締まった印象になりメリハリが出る。

せろりのセオリー/ Webサイト100選 No.59  coscos

せろりのセオリー/ Webサイト100選 No.59  coscos

 

 

Footerは100vhまでは行かないが、ほぼ全画面で表示。こちらも黒背景を使いコントラストをしっかりつけることで、可愛さの中にも洗練されたクールなイメージを印象付ける。

せろりのセオリー/ Webサイト100選 No.59  coscos

せろりのセオリー/ Webサイト100選 No.59  coscos

 

 

■フォント

・見出し:Inter,sans-serif
・テキスト:Noto Sans JP

 

 

■配色

・ベースカラー:#000, パステルカラーのグラデーション
・文字:#fff

 

 

Webサイト:coscos

せろりのセオリー/ Webサイト100選 No.59  coscos

せろりのセオリー/ Webサイト100選 No.59  coscos

次へ 投稿

前へ 投稿

返信する

© 2025 せろりのセオリー | Webサイト100選

テーマの著者 Anders Norén