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

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

No.64 Salanaru

■概要

クレンジングジェルのブランディングサイト。ジェル、オイル、ミルクと3段階へ変化するのが大きな特徴。

 

 

■視点

ジェルの使用感や透明感を配色を使ってうまく表現しているこちらのサイトをレビュー。

 

 

 

■ターゲット

20〜30代女性

 

 

■FV

水色と薄いオレンジのグラデーション背景が透明感を連想させる。縦の3分の2を固定表示にし、右側3分の1をコンテンツエリアとして設定。全体の淡い印象の中で、黒文字のブランド名が縦に配置されていてインパクトがある。

左半分は淡く薄いパステルの要素を重ねて表示。透明感や飾らないありのままのナチュラル感が連想される。まだ出来たばかりの新ブラドということで、snsリンクを大胆にも中央に配置。LIPSのアイコンはコスメ口コミサイトのもので、販売してまだ間もないため利用者のリアルな声はユーザーにとっても貴重である。

ナビゲーションは左部分に固定表示で、どこのコンテンツを読んでいるのか、黒丸で閲覧位置を確認することが出来る。

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

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

 

 

■特徴

左側2/3は固定されており詳細部分は右1/3を使って紹介。スクロールに合わせて、左側の写真が変わり、色んな角度から見たジェルの使用感がモデルさんを通して伝わってくる。

全体的に淡いトーンのため文字は黒字で締まる効果がある。文字のジャンプ率が高く、テキストも短くシンプルにまとめられている。

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

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

 

 

・About

3段階に変化するクレンジングジェルを画像を使い段階的に紹介。薄い水色からピンク白と段階的に変化する様子が、クリアになっていく素肌を表しているよう。ジェルやミルクの画像も入れられていて、柔らかい質感が伝わる。

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

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

 

 

 

購入ボタンは枠線で囲み文字周りの余白をしっかり取ることで、視認性が高くなる。ホバー時にもマウスポインターのサイズが通常時よりも大きく表示される。

 

 

■フォント

・見出し、テキスト:Noto Sans JP
・ナビゲーション:Baskerville URW

 

 

■配色

・ベースカラー:#fff , 淡いグラデーション
・文字:#000

 

 

 

 

 

Webサイト:Salanaru

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

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

次へ 投稿

前へ 投稿

返信する

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

テーマの著者 Anders Norén