No.010　ラボン [LAVONS] 公式サイト

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

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

左上にブランドロゴ。

導線

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

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

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

コンテンツ

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

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

スマートフォンサイズ。

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

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

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

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

フルサイズ

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