Web業界のはしくれのものになるために、ページを見る目を養うwebサイトレビュー。

第10回目は洗濯洗剤のブランド、ラボン [LAVONS] の公式サイト。

手書きのイラストが可愛らしいなと感じたサイトでした。

 

https://www.lavons.jp/

 

ラボン [LAVONS] 公式サイトの「柔軟剤」ページです。

 

 

ターゲット

思いっきり女性向け。20~30代くらいだろうか。

 

配色

白ベースに、淡い水色、清新な印象のある蛍光ブルー。

ベース:#ffffff

メイン:#f8f8f6

アクセント:#66CCB8

テキスト:#000000

 

 

フォント

本文は游ゴシック。

セクションタイトル英数字(img配置):Looking Flowers CapsあたりのHandwrittenフォントをもとにアレンジor手書きした?

本文: 游ゴシック体, 游ゴシック, YuGothic, “Yu Gothic Medium”, “Yu Gothic”, “Segoe UI”, Meiryo, sans-serif

 

 

レイアウト

PCファースト。
ブレイクポイント:768px

line-height: 1.6~1.7くらい

内部コンテンツ幅: 最大1130px
セクション間空き:見た目でPC120px / SP60pxくらい空いて見えるように調整

ファーストビュー

No.010 LAVONS

No.010 LAVONS

明るくナチュラルなイメージで撮られた商品画像と、手書き風のキャッチコピーが目に入ってきます。

左上にブランドロゴ。

 

 

導線

右上にハンバーガーメニューが追従。
ブランドのトップページ、その他の商品へのページ、各種ECサイトへのリンク、SNSリンクが貼られている。

PCサイズで見ると左端にアイコンのSNSリンクがある。

 

フッターに各種ECサイトへのリンク。

 

コンテンツ

ファーストビューから少しスクロールすると、商品バリエーションの紹介がされている。ページ内リンクで飛ぶことができる。

SPサイズでは横にスクロールする。

スマートフォンサイズ。

スマートフォンサイズ。

個別の商品紹介は、商品イメージと香りの説明を画像で置いているproductphotoのdivに、商品タイトルや説明を含むproductdetailのdivをpositionで重ねて実装しているようです。

香りの説明にこの矢印使うんだ…。ピラミッド型とかはよく見るけど
トップノート→ミドルノート→ラストノートの順に香るからこれでもいいんだ

 

ページ全体は白と水色で爽やか印象。

ところどころに使われている壁紙風のテクスチャや、手書きのイラストがナチュラルな印象です。

 

 

フルサイズ

フルサイズ

 

梢のあみめ | Webサイト100選